Skip to content

Commit

Permalink
Add an extra panel to describe how details summary is used
Browse files Browse the repository at this point in the history
- Link to caniuse to show which browsers support the HTML5 details and
summary elements
- Link to GOV.UK element's details summary polyfill JS
- Link to example page with details/summary test cases
- Remove the link to the example page which would otherwise be
duplicated underneath.
  • Loading branch information
gemmaleigh committed Jun 18, 2016
1 parent 3781259 commit 77eb2e5
Showing 1 changed file with 14 additions and 6 deletions.
20 changes: 14 additions & 6 deletions app/views/guide_typography.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h2 class="heading-small heading-contents">Contents:</h2>
<li><a href="#typography-lists">Lists</a></li>
<li><a href="#typography-inset-text">Inset text</a></li>
<li><a href="#typography-legal-text">Legal text</a></li>
<li><a href="#typography-hidden-text">Hidden text</a></li>
<li><a href="#typography-hidden-text">Hidden text (progressive disclosure)</a></li>
<li><a href="#examples">Examples</a></li>
</ul>
</div>
Expand Down Expand Up @@ -200,6 +200,19 @@ <h3 class="heading-medium" id="typography-hidden-text">Hidden text (progressive
</code>
</pre>

<div class="panel panel-border-wide text">
<p>
If you're using the HTML5 details and summary elements, you'll need a polyfill for <a href="http://caniuse.com/#feat=details" rel="external">not-so-modern browsers</a>.
</p>
<p>
You'll need to ensure that your markup matches the example above.
<a href="https://github.com/alphagov/govuk_elements/blob/master/public/javascripts/vendor/details.polyfill.js">GOV.UK elements uses this polyfill</a>.
</p>
<p>
<a href="/typography/example-details-summary/">Take a look at example page</a> which demonstrates conditionally revealing information, using the HTML5 details and summary elements.
</p>
</div>


<h3 class="heading-medium" id="examples">Examples</h3>
<ul class="list list-bullet">
Expand All @@ -208,11 +221,6 @@ <h3 class="heading-medium" id="examples">Examples</h3>
an example typography page
</a>
</li>
<li>
<a href="/typography/example-details-summary/">
the HTML details and summary elements (an example of progressive disclosure)
</a>
</li>
</ul>

</main><!-- / #content -->
Expand Down

0 comments on commit 77eb2e5

Please sign in to comment.