-
Notifications
You must be signed in to change notification settings - Fork 64
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
publish: Merge pull request #926 from hmrc/SDT-818
generated from commit 43b2fe1
- Loading branch information
Jenkins HMRC
committed
Mar 21, 2018
1 parent
36a7914
commit d9ce22f
Showing
8 changed files
with
258 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
251 changes: 251 additions & 0 deletions
251
components/open-links-in-a-new-window-or-tab/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,251 @@ | ||
| <!doctype html> | ||
| <html lang="en" class="no-js tech-docs"> | ||
| <head> | ||
| <base href="/assets-frontend/"> | ||
| <meta content="IE=edge" http-equiv="X-UA-Compatible"> | ||
| <meta charset="utf-8"> | ||
| <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> | ||
| <meta name="robots" content="noindex"> | ||
|
|
||
| <title>HMRC Design System</title> | ||
|
|
||
| <link rel="icon" type="image/x-icon" href="public/images/favicon.ico" /> | ||
|
|
||
| <link rel="stylesheet" href="public/assets/stylesheets/design-system.css"> | ||
| <link rel="stylesheet" href="public/assets/stylesheets/vendor/highlight/github.css"> | ||
|
|
||
| <!--[if gt IE 8]><!--><link href="public/assets/stylesheets/govuk-template.css" media="screen" rel="stylesheet" type="text/css" /><!--<![endif]--> | ||
| <!--[if IE 6]><link href="public/assets/stylesheets/govuk-template-ie6.css" media="screen" rel="stylesheet" type="text/css" /><![endif]--> | ||
| <!--[if IE 7]><link href="public/assets/stylesheets/govuk-template-ie7.css" media="screen" rel="stylesheet" type="text/css" /><![endif]--> | ||
| <!--[if IE 8]><link href="public/assets/stylesheets/govuk-template-ie8.css" media="screen" rel="stylesheet" type="text/css" /><![endif]--> | ||
|
|
||
| <!--[if gt IE 8]><!--><link rel="stylesheet" href="public/stylesheets/application.min.css"><!--<![endif]--> | ||
| <!--[if lte IE 8]><link rel="stylesheet" href="public/stylesheets/application-ie.min.css"><![endif]--> | ||
|
|
||
|
|
||
|
|
||
| <script src="public/assets/javascripts/vendor/modernizr.js"></script> | ||
|
|
||
| <script> | ||
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | ||
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | ||
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | ||
| })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); | ||
|
|
||
| ga('create', 'UA-43414424-34', 'auto'); | ||
| ga('set', 'anonymizeIp', true) | ||
| ga('send', 'pageview'); | ||
| </script> | ||
| </head> | ||
|
|
||
| <body class=""> | ||
| <div class="app-pane"> | ||
| <div class="app-pane__header toc-open-disabled"> | ||
| <a href="#content" class="skip-link">Skip to main content</a> | ||
|
|
||
| <header class="design-system-header design-system-header--full-width"> | ||
| <div class="design-system-header__container"> | ||
| <div class="design-system-header__brand"> | ||
| <a href="index.html"> | ||
| <span class="design-system-govuk-logo"> | ||
| <img class="design-system-govuk-logo__printable-crown" src="public/assets/images/gov.uk_logotype_crown_invert_trans.png" height="32" width="36"> | ||
| GOV.UK | ||
| </span> | ||
|
|
||
| <span class="design-system-header__title">HMRC Design System</span> | ||
| </a> | ||
| </div> | ||
|
|
||
| <!-- | ||
| <div class="pattern-search pattern-search--in-header"> | ||
| <input type="text" name="pattern-query" class="pattern-search__input" placeholder="Search Design System" autocomplete="off"> | ||
| <ul class="search-results js-search-results"> | ||
| </ul> | ||
| </div> | ||
| --> | ||
|
|
||
| <div class="mobile-nav-trigger"> | ||
| <input class="button js-mobile-nav-toggle" type="submit" value="Menu"> | ||
| </div> | ||
| </div> | ||
| </header> | ||
|
|
||
| <div class="design-system phase-banner"> | ||
| <p> | ||
| <strong class="phase-tag">ALPHA</strong> | ||
| <span>This is a prototype</span> | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="sub-nav"> | ||
| <ul class="sub-nav-list"> | ||
| <li><a href="/assets-frontend/index.html">About</a></li> | ||
| <li><a href="/assets-frontend/styles/index.html">Styles</a></li> | ||
| <li><a href="/assets-frontend/components/index.html">Components</a></li> | ||
| <li><a href="/assets-frontend/patterns/index.html">Patterns</a></li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- TODO: mobile_nav --> | ||
|
|
||
| <div class="app-pane__body"> | ||
| <div class="app-pane__toc"> | ||
| <div class="toc" data-module="table-of-contents"> | ||
| <nav id="toc" class="js-toc-list toc__list"> | ||
| <ul class="pattern-nav"> | ||
| <li><a href="/assets-frontend/components/account-header/index.html">Account header</a></li> | ||
| <li><a href="/assets-frontend/components/character-counter/index.html">Character counter</a></li> | ||
| <li><a href="/assets-frontend/components/header/index.html">Header</a></li> | ||
| <li><a href="/assets-frontend/components/notification-badge/index.html">Notification badge</a></li> | ||
| <li><a href="/assets-frontend/components/open-links-in-a-new-window-or-tab/index.html">Open links in a new window or tab</a></li> | ||
| <li><a href="/assets-frontend/components/page-heading/index.html">Page heading</a></li> | ||
| <li><a href="/assets-frontend/components/timeout-dialog/index.html">Timeout dialog</a></li> | ||
| <ul> | ||
| </nav> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="app-pane__content toc-open-disabled"> | ||
| <main id="design-system-content" class="markdown" data-module="anchored-headings"> | ||
| <!-- | ||
| <div class="banner banner__out-of-date"> | ||
| <p>This content has not yet been written using the Design System content guidelines</p> | ||
| </div> | ||
| --> | ||
|
|
||
| <!-- | ||
| TODO: set title as data | ||
| <div class="pattern-header"> | ||
| <p class="section-heading"></p> | ||
| <h1></h1> | ||
| </div> | ||
| --> | ||
|
|
||
| <h1 id="open-links-in-a-new-window-or-tab">Open links in a new window or tab</h1> | ||
| <p>How to display links that open in a new window or tab.</p> | ||
| <div class="example"><a href="" target="_blank" rel="noopener noreferrer">Link example (opens in a new window or tab)</a> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| <h2 id="when-to-use-this-component">When to use this component</h2> | ||
| <p>Start with opening all links in the same window or tab and test with your users. Research shows some people struggle to get back to a service because the back button does not work in the new window or tab.</p> | ||
| <p>Use this component if your testing shows you need to open a link in a new window or tab, it meets a user need and is necessary. This could be because:</p> | ||
| <ul> | ||
| <li>the link is to a document in a different format, like a PDF</li> | ||
| <li>the link is guidance that cannot be inside the service</li> | ||
| <li>they would lose their details if they left the service</li> | ||
| <li>they need go to another site or service to get some information</li> | ||
| </ul> | ||
| <h3 id="when-not-to-use-this-component">When not to use this component</h3> | ||
| <p>If opening a link in a new window or tab:</p> | ||
| <ul> | ||
| <li>does not meet a user need</li> | ||
| <li>leads to multiples windows or tabs for the same service</li> | ||
| <li>stops people completing their task</li> | ||
| </ul> | ||
| <p>Do not use any icons in place of the words. See ‘<a href="https://designnotes.blog.gov.uk/2016/11/28/removing-the-external-link-icon-from-gov-uk/">Removing the external link icon from GOV.UK</a>'.</p> | ||
| <h2 id="how-it-works">How it works</h2> | ||
| <p>Always put ‘(opens in a new link or window)’ inside the link text content.</p> | ||
| <p>In the code include:</p> | ||
| <ul> | ||
| <li>target="_blank" top open in a new window or tab</li> | ||
| <li>rel="noopener noreferrer" to reduce security risks for some browsers</li> | ||
| </ul> | ||
| <div class="example"><a href="" target="_blank" rel="noopener noreferrer">Link example (opens in a new window or tab)</a> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| <pre><code><a href="" target="_blank" rel="noopener noreferrer">Link example (opens in a new window or tab)</a> | ||
|
|
||
| </code></pre><h2 id="research-on-this-component">Research on this component</h2> | ||
| <p>This component is based on the format recommended by the Web Content Accessibility Guidelines in <a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">Giving users advanced warning when opening a new window</a>.</p> | ||
| <p>All users will know a link will open in a new window or tab without needing to:</p> | ||
| <ul> | ||
| <li>read another part of the screen</li> | ||
| <li>understand an icon</li> | ||
| </ul> | ||
|
|
||
|
|
||
| <!-- | ||
| TODO: pass the following into the template from AF | ||
| <div id="related-content" class="related-content"> | ||
| <div class="grid-row"> | ||
| <div class="column-one-quarter related-content-grid-item"> | ||
| <h2>Further resources</h2> | ||
| <ul class="list"> | ||
| <li><a href="#">Edit this guidance on GitHub</a></li> | ||
| <li><a href="#">Raise an issue on GitHub</a></li> | ||
| <li><a href="#">History of this page</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="column-one-quarter related-content-grid-item"> | ||
| <dl class="meta-data-bottom"> | ||
| <dt>Last reviewed:</dt> | ||
| <dd>30 March 2017</dd> | ||
| </dl> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| --> | ||
|
|
||
| <div class="callout"> | ||
| <h2 class="heading-medium">Get in touch</h2> | ||
| <p>If you’ve got a question, idea or suggestion share it in <a href="https://hmrcdigital.slack.com/messages/C39V3PH38">#team-sdt</a> on HMRC Slack (<a href="slack://channel?team=T04RY81HB&id=C39V3PH38">open in app</a>) or <a href="[email protected]">email the Service Design Tools team</a></p> | ||
| </div> | ||
| </main> | ||
|
|
||
| <footer class="design-system-footer design-system-footer--full-width"> | ||
| <div class="footer-container"> | ||
| <div class="footer__navigation"> | ||
| <div class="footer__navigation--column"> | ||
| <h2 class="heading-medium">GOV.UK Design System</h2> | ||
| <ul> | ||
| <li><a href="https://govuk-design-system-prototypes.cloudapps.digital/design-patterns/patterns/">Prototype</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="footer__navigation--column"> | ||
| <h2 class="heading-medium">Other design resources</h2> | ||
| <ul> | ||
| <li><a href="https://www.gov.uk/design-principles">GDS Design Principles</a></li> | ||
| <li><a href="https://www.gov.uk/service-manual">GOV.UK Service Manual</a></li> | ||
| <li><a href="#">GOV.UK Frontend</a></li> | ||
| <li><a href="https://govuk-prototype-kit.herokuapp.com/docs">GOV.UK Prototype kit</a></li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="footer__licence"> | ||
| <a class="footer__licence-logo" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence</a> | ||
| <p class="footer__licence-description">All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated</p> | ||
| </div> | ||
|
|
||
| <div class="footer__copyright"> | ||
| <a class="footer__copyright-logo" href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Crown copyright</a> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script src="public/assets/javascripts/vendor/highlight/highlight.pack.js"></script> | ||
| <script src="public/assets/javascripts/design-system.js"></script> | ||
|
|
||
|
|
||
|
|
||
| <script src="public/javascripts/application.min.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters