hugopoi/cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

demo backgroundColor

Browse Source
This commit is contained in:
Heydon Pickering 2017-08-17 17:42:37 +01:00
parent 251af208ed
commit 0c2b484787
5 changed files with 56 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
content/patterns/coding/writing-inline-demos.md
View File

@ -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>}}

24
docs/patterns/coding/writing-inline-demos/index.html
View File

@ -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>
@ -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">

18
docs/print-version/index.html
View File

@ -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>
@ -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">

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

7
themes/infusion/layouts/shortcodes/demo.html
View File

@ -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>