demo backgroundColor

content/patterns/coding/writing-inline-demos.md

@@ -9,7 +9,7 @@ There are some issues with {{% pattern "CodePen embedding" %}}, like them not wo
 
 Here's the example code for an inline demo of a toggle button:
 
-{{<codeBlock lang="html" numbered="true">}}
+{{<codeBlock lang="html">}}
 &#x7b;{&lt;demo>}}
 &lt;button aria-pressed="false">Toggle Me&lt;/button>
 &lt;style>
@@ -85,10 +85,20 @@ The "Launch in separate window" button takes the demo code and pushes it to a ne
 
 It's possible to give your demo a caption using an accessible `<figure>` and `<figcaption>` structure. All _you_ need to do is supply a `caption` attribute. For example:
 
-{{<codeBlock lang="html" numbered="true">}}
+{{<codeBlock lang="html">}}
 &#x7b;{&lt;demo caption="A basic button element">}}
 &lt;!-- demo code here -->
 &#x7b;{&lt;/demo>}}
 {{</codeBlock>}}
 
 Along with the standard `figure` shortcodes (described in {{% pattern "Including images" %}}), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.
+
+## Background colors
+
+Sometimes your component will be expected to appear in a context where the parent element has a background color. You can add a backgroundColor for your demo block using the `backgroundColor` attribute. Any valid CSS color value is acceptable:
+
+{{<codeBlock lang="html">}}
+&#x7b;{&lt;demo backgroundColor="hsla(163, 100%, 50%, 0.43)">}}
+&lt;!-- demo code here -->
+&#x7b;{&lt;/demo>}}
+{{</codeBlock>}}

docs/patterns/coding/writing-inline-demos/index.html

@@ -398,6 +398,12 @@
           </a>
         </li>
       
+        <li>
+          <a href="#background-colors">
+            Background colors
+          </a>
+        </li>
+      
     </ol>
   </nav>
 
@@ -411,7 +417,7 @@
 
 <p>Here&rsquo;s the example code for an inline demo of a toggle button:</p>
 
-<pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode>
+<pre class="language-html "><code class="language-html" data-codeblock-shortcode>
 &#x7b;{&lt;demo>}}
 &lt;button aria-pressed="false">Toggle Me&lt;/button>
 &lt;style>
@@ -450,7 +456,7 @@ toggle.addEventListener('click', (e) => {
 
 <div class="demo-container">
   
-      <div class="demo-inner">
+      <div class="demo-inner" >
         <div class="demo" id="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
         <button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
       </div>
@@ -512,7 +518,8 @@ toggle.addEventListener('click', (e) => {
         var standalone = window.open();
         script.textContent = standaloneScript;
         standalone.document.body.appendChild(document.importNode(template.content, true));
-        standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a"
+        
+        standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a";
       });
     })();
   </script>
@@ -532,7 +539,7 @@ toggle.addEventListener('click', (e) => {
 
 <p>It&rsquo;s possible to give your demo a caption using an accessible <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> structure. All <em>you</em> need to do is supply a <code>caption</code> attribute. For example:</p>
 
-<p><pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode>
+<p><pre class="language-html "><code class="language-html" data-codeblock-shortcode>
 &#x7b;{&lt;demo caption="A basic button element">}}
 &lt;!-- demo code here -->
 &#x7b;{&lt;/demo>}}
@@ -541,6 +548,17 @@ toggle.addEventListener('click', (e) => {
 
 <p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
 
+<h2 id="background-colors">Background colors</h2>
+
+<p>Sometimes your component will be expected to appear in a context where the parent element has a background color. You can add a backgroundColor for your demo block using the <code>backgroundColor</code> attribute. Any valid CSS color value is acceptable:</p>
+
+<pre class="language-html "><code class="language-html" data-codeblock-shortcode>
+&#x7b;{&lt;demo backgroundColor="hsla(163, 100%, 50%, 0.43)">}}
+&lt;!-- demo code here -->
+&#x7b;{&lt;/demo>}}
+</code></pre>
+
+
   </main>
 
           <footer role="contentinfo">

docs/print-version/index.html

@@ -1717,7 +1717,7 @@ toggle.addEventListener('click', (e) => {
 
 <p>Here&rsquo;s the example code for an inline demo of a toggle button:</p>
 
-<pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode>
+<pre class="language-html "><code class="language-html" data-codeblock-shortcode>
 &#x7b;{&lt;demo>}}
 &lt;button aria-pressed="false">Toggle Me&lt;/button>
 &lt;style>
@@ -1756,7 +1756,7 @@ toggle.addEventListener('click', (e) => {
 
 <div class="demo-container">
   
-      <div class="demo-inner">
+      <div class="demo-inner" >
         <div class="demo" id="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
         <button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
       </div>
@@ -1818,7 +1818,8 @@ toggle.addEventListener('click', (e) => {
         var standalone = window.open();
         script.textContent = standaloneScript;
         standalone.document.body.appendChild(document.importNode(template.content, true));
-        standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a"
+        
+        standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a";
       });
     })();
   </script>
@@ -1838,7 +1839,7 @@ toggle.addEventListener('click', (e) => {
 
 <p>It&rsquo;s possible to give your demo a caption using an accessible <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> structure. All <em>you</em> need to do is supply a <code>caption</code> attribute. For example:</p>
 
-<p><pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode>
+<p><pre class="language-html "><code class="language-html" data-codeblock-shortcode>
 &#x7b;{&lt;demo caption="A basic button element">}}
 &lt;!-- demo code here -->
 &#x7b;{&lt;/demo>}}
@@ -1847,6 +1848,17 @@ toggle.addEventListener('click', (e) => {
 
 <p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://thepaciellogroup.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
 
+<h2 id="background-colors">Background colors</h2>
+
+<p>Sometimes your component will be expected to appear in a context where the parent element has a background color. You can add a backgroundColor for your demo block using the <code>backgroundColor</code> attribute. Any valid CSS color value is acceptable:</p>
+
+<pre class="language-html "><code class="language-html" data-codeblock-shortcode>
+&#x7b;{&lt;demo backgroundColor="hsla(163, 100%, 50%, 0.43)">}}
+&lt;!-- demo code here -->
+&#x7b;{&lt;/demo>}}
+</code></pre>
+
+
           </div>
         
           <div class="pattern-section">

themes/infusion/layouts/shortcodes/demo.html

@@ -3,7 +3,7 @@
   {{ if .Get "caption" }}
   <figure role="group" aria-labelledby="caption-{{ $uniq }}">
   {{ end }}
-      <div class="demo-inner">
+      <div class="demo-inner" {{ if .Get "backgroundColor" }}style="background-color: {{ .Get "backgroundColor" | safeCSS }}"{{ end }}>
         <div class="demo" id="js-demo-{{ $uniq }}"></div>
         <button data-launch="js-demo-{{ $uniq }}">Launch in separate window</button>
       </div>
@@ -41,7 +41,10 @@
         var standalone = window.open();
         script.textContent = standaloneScript;
         standalone.document.body.appendChild(document.importNode(template.content, true));
-        standalone.document.title = 'demo ' + {{ $uniq }}
+        {{ if .Get "backgroundColor" }}
+          standalone.document.body.style.backgroundColor = {{ .Get "backgroundColor" | safeCSS }};
+        {{ end }}
+        standalone.document.title = 'demo ' + {{ $uniq }};
       });
     })();
   </script>