-
Notifications
You must be signed in to change notification settings - Fork 334
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add example of page with multiple navigation tiers
- Loading branch information
1 parent
db7625e
commit a27aa51
Showing
2 changed files
with
305 additions
and
0 deletions.
There are no files selected for viewing
304 changes: 304 additions & 0 deletions
304
...s/govuk-frontend-review/src/views/full-page-examples/manage-company-information/index.njk
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,304 @@ | ||
| --- | ||
| name: Manage company information (complex navigation) | ||
| scenario: A page containing multiple navigational layers and header elements. | ||
| notes: Based on elements of Companies Houses company information view | ||
| --- | ||
| {% extends "govuk/template.njk" %} | ||
|
|
||
| {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %} | ||
| {% from "govuk/components/skip-link/macro.njk" import govukSkipLink -%} | ||
| {% from "govuk/components/header/macro.njk" import govukHeader -%} | ||
| {% from "govuk/components/service-header/macro.njk" import govukServiceHeader -%} | ||
| {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner -%} | ||
| {% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs -%} | ||
| {% from "govuk/components/summary-list/macro.njk" import govukSummaryList -%} | ||
|
|
||
| {% set html %} | ||
| <p class="govuk-body">We’d like to use analytics cookies so we can understand how you use this site.</p> | ||
| <p class="govuk-body">We also use essential cookies to remember if you’ve accepted analytics cookies.</p> | ||
| {% endset %} | ||
|
|
||
| {% set acceptHtml %} | ||
| <p class="govuk-body">You’ve accepted analytics cookies. You can <a class="govuk-link" href="/cookies">change your cookie settings</a> at any time.</p> | ||
| {% endset %} | ||
|
|
||
| {% set rejectHtml %} | ||
| <p class="govuk-body">You’ve rejected analytics cookies. You can <a class="govuk-link" href="/cookies">change your cookie settings</a> at any time.</p> | ||
| {% endset %} | ||
|
|
||
| {% block bodyStart %} | ||
| {{ super() }} | ||
| {{ govukCookieBanner({ | ||
| classes: "js-cookies-banner", | ||
| messages: [ | ||
| { | ||
| headingText: "Cookies on this government service", | ||
| html: html, | ||
| actions: [ | ||
| { | ||
| text: "Accept analytics cookies", | ||
| type: "button", | ||
| classes: "js-cookies-button-accept" | ||
| }, | ||
| { | ||
| text: "Reject analytics cookies", | ||
| type: "button", | ||
| classes: "js-cookies-button-reject" | ||
| }, | ||
| { | ||
| text: "View cookie preferences", | ||
| href: "#" | ||
| } | ||
| ], | ||
| classes: "js-question-banner" | ||
| }, | ||
| { | ||
| html: acceptHtml, | ||
| role: "alert", | ||
| actions: [ | ||
| { | ||
| text: "Hide cookie message", | ||
| type: "button", | ||
| classes: "js-hide" | ||
| } | ||
| ], | ||
| classes: "js-cookies-accepted", | ||
| hidden: true | ||
| }, | ||
| { | ||
| html: rejectHtml, | ||
| role: "alert", | ||
| actions: [ | ||
| { | ||
| text: "Hide cookie message", | ||
| type: "button", | ||
| classes: "js-hide" | ||
| } | ||
| ], | ||
| classes: "js-cookies-rejected", | ||
| hidden: true | ||
| } | ||
| ] | ||
| }) }} | ||
| {% endblock %} | ||
|
|
||
| {% block skipLink %} | ||
| {{ govukSkipLink({ | ||
| href: '#main-content', | ||
| text: 'Skip to content' | ||
| }) }} | ||
| {% endblock %} | ||
|
|
||
| {% block header %} | ||
| {{ govukHeader() }} | ||
| {{ govukPhaseBanner({ | ||
| tag: { text: 'Alpha' }, | ||
| html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.' | ||
| }) }} | ||
| {{ govukServiceHeader({ | ||
| serviceName: 'Manage company information', | ||
| serviceUrl: '#/', | ||
| navigation: [ | ||
| { href: '#/1', text: 'Overview' }, | ||
| { href: '#/2', text: 'Filing History' }, | ||
| { href: '#/3', text: 'People', active: true }, | ||
| { href: '#/4', text: 'Registers' }, | ||
| { href: '#/4', text: 'More' } | ||
| ] | ||
| }) }} | ||
| {% endblock %} | ||
|
|
||
| {% block beforeContent %} | ||
| {{ govukBreadcrumbs({ | ||
| items: [ | ||
| { | ||
| text: "Home", | ||
| href: "#" | ||
| }, | ||
| { | ||
| text: "Directory", | ||
| href: "#" | ||
| }, | ||
| { | ||
| text: "Wonka Indstries", | ||
| href: "#" | ||
| }, | ||
| { | ||
| text: "People", | ||
| href: "#" | ||
| } | ||
| ] | ||
| }) }} | ||
| {% endblock %} | ||
|
|
||
| {% block content %} | ||
| <div class="govuk-grid-row"> | ||
| <div class="govuk-grid-column-two-thirds-from-desktop"> | ||
| <span class="govuk-caption-xl">Wonka Industries</span> | ||
| <h1 class="govuk-heading-xl">William Wonka</h1> | ||
|
|
||
| {{ govukSummaryList({ | ||
| rows: [ | ||
| { | ||
| key: { | ||
| text: "Name" | ||
| }, | ||
| value: { | ||
| text: "William Wonka" | ||
| }, | ||
| actions: { | ||
| items: [ | ||
| { | ||
| href: "#", | ||
| text: "Change", | ||
| visuallyHiddenText: "name" | ||
| } | ||
| ] | ||
| } | ||
| }, | ||
| { | ||
| key: { | ||
| text: "Roles" | ||
| }, | ||
| value: { | ||
| text: "Founder, Managing director" | ||
| }, | ||
| actions: { | ||
| items: [ | ||
| { | ||
| href: "#", | ||
| text: "Add", | ||
| visuallyHiddenText: "role" | ||
| }, | ||
| { | ||
| href: "#", | ||
| text: "Change", | ||
| visuallyHiddenText: "roles" | ||
| } | ||
| ] | ||
| } | ||
| }, | ||
| { | ||
| key: { | ||
| text: "Date appointed" | ||
| }, | ||
| value: { | ||
| text: "15 July 2005" | ||
| } | ||
| }, | ||
| { | ||
| key: { | ||
| text: "Date of birth" | ||
| }, | ||
| value: { | ||
| text: "30 June 1971" | ||
| }, | ||
| actions: { | ||
| items: [ | ||
| { | ||
| href: "#", | ||
| text: "Change", | ||
| visuallyHiddenText: "date of birth" | ||
| } | ||
| ] | ||
| } | ||
| }, | ||
| { | ||
| key: { | ||
| text: "Correspondence address" | ||
| }, | ||
| value: { | ||
| html: '<p class="govuk-body">Bavaria Studios<br>Geiselgasteig, Grünwald<br>Munich<br>Germany</p>' | ||
| }, | ||
| actions: { | ||
| items: [ | ||
| { | ||
| href: "#", | ||
| text: "Change", | ||
| visuallyHiddenText: "correspondence address" | ||
| } | ||
| ] | ||
| } | ||
| }, | ||
| { | ||
| key: { | ||
| text: "Contact details" | ||
| }, | ||
| value: { | ||
| html: '<p class="govuk-body">07700 900289</p><p class="govuk-body">willy@wonka.ind</p>' | ||
| }, | ||
| actions: { | ||
| items: [ | ||
| { | ||
| href: "#", | ||
| text: "Add", | ||
| visuallyHiddenText: "contact details" | ||
| }, | ||
| { | ||
| href: "#", | ||
| text: "Change", | ||
| visuallyHiddenText: "contact details" | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| ] | ||
| }) }} | ||
|
|
||
| <p class="govuk-body">If there is an issue that you cannot rectify, lorem ipsum dolor sit amet veniam proident dolor ullamco anim exercitation irure deserunt esse incididunt.</p> | ||
| <p class="govuk-body">Reprehenderit non consectetur est magna ad et consectetur do et laboris nostrud aliqua cillum.</p> | ||
| </div> | ||
| </div> | ||
| {% endblock %} | ||
|
|
||
| {% block head %} | ||
| <link rel="stylesheet" href="/stylesheets/app.min.css"> | ||
| {% endblock %} | ||
|
|
||
| {% block bodyEnd %} | ||
| <script type="module" src="/javascripts/govuk-frontend.min.js"></script> | ||
| <script type="module"> | ||
| import { initAll } from '/javascripts/govuk-frontend.min.js' | ||
| initAll() | ||
| </script> | ||
| <script type="module"> | ||
| const acceptButton = document.querySelector('.js-cookies-button-accept') | ||
| const rejectButton = document.querySelector('.js-cookies-button-reject') | ||
| const acceptedBanner = document.querySelector('.js-cookies-accepted') | ||
| const rejectedBanner = document.querySelector('.js-cookies-rejected') | ||
| const questionBanner = document.querySelector('.js-question-banner') | ||
| const cookieBanner = document.querySelector('.js-cookies-banner') | ||
| function showBanner(banner) { | ||
| questionBanner.setAttribute('hidden', 'hidden') | ||
| banner.removeAttribute('hidden') | ||
| // Shift focus to the banner | ||
| banner.setAttribute('tabindex', '-1') | ||
| banner.focus() | ||
| banner.addEventListener('blur', function () { | ||
| banner.removeAttribute('tabindex') | ||
| }) | ||
| } | ||
| acceptButton.addEventListener('click', function (event) { | ||
| showBanner(acceptedBanner) | ||
| event.preventDefault() | ||
| }) | ||
| rejectButton.addEventListener('click', function (event) { | ||
| showBanner(rejectedBanner) | ||
| event.preventDefault() | ||
| }) | ||
| acceptedBanner.querySelector('.js-hide').addEventListener('click', function () { | ||
| cookieBanner.setAttribute('hidden', 'hidden') | ||
| }) | ||
| rejectedBanner.querySelector('.js-hide').addEventListener('click', function () { | ||
| cookieBanner.setAttribute('hidden', 'hidden') | ||
| }) | ||
| </script> | ||
| {% endblock %} |
1 change: 1 addition & 0 deletions
1
packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss
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