From 8da2cb3d2487401ece2ad84bedf7254e1951c2d9 Mon Sep 17 00:00:00 2001 From: alex-ju Date: Mon, 30 Apr 2018 13:14:19 +0100 Subject: [PATCH 01/10] Add header component --- src/header/_header.scss | 290 +++++++++++++++++++++++++++++ src/header/header.js | 57 ++++++ src/header/header.njk | 3 + src/header/header.yaml | 132 +++++++++++++ src/header/index.njk | 167 +++++++++++++++++ src/header/macro.njk | 3 + src/header/template.njk | 79 ++++++++ src/icons/govuk-logotype-crown.png | Bin 0 -> 952 bytes 8 files changed, 731 insertions(+) create mode 100644 src/header/_header.scss create mode 100644 src/header/header.js create mode 100644 src/header/header.njk create mode 100644 src/header/header.yaml create mode 100644 src/header/index.njk create mode 100644 src/header/macro.njk create mode 100644 src/header/template.njk create mode 100644 src/icons/govuk-logotype-crown.png diff --git a/src/header/_header.scss b/src/header/_header.scss new file mode 100644 index 0000000000..caccd0f406 --- /dev/null +++ b/src/header/_header.scss @@ -0,0 +1,290 @@ +@import "../globals/tools/exports"; +@import "../globals/tools/compatibility"; +@import "../globals/tools/iff"; + +@import "../globals/settings/colours-palette"; +@import "../globals/settings/colours-applied"; +@import "../globals/settings/compatibility"; +@import "../globals/settings/spacing"; +@import "../globals/settings/measurements"; + +@import "../globals/helpers/media-queries"; +@import "../globals/helpers/focusable"; +@import "../globals/helpers/spacing"; +@import "../globals/helpers/device-pixels"; +@import "../globals/helpers/grid"; +@import "../globals/helpers/shape-arrow"; + +@import "../globals/helpers/typography"; +@import "../globals/settings/typography-font-stacks"; +@import "../globals/settings/typography-font"; +@import "../globals/settings/typography-responsive"; + +@include govuk-exports("header") { + + $govuk-header-background: $govuk-black; + $govuk-header-border-color: $govuk-blue; + $govuk-header-border-width: $govuk-spacing-scale-2; + $govuk-header-text: $govuk-white; + $govuk-header-link: $govuk-white; + $govuk-header-link-hover: $govuk-white; + $govuk-header-link-active: #1d8feb; + $govuk-header-nav-item-border-color: #2e3133; + + .govuk-header { + @include govuk-font-regular-16; + + border-bottom: $govuk-spacing-scale-2 solid $govuk-white; + color: $govuk-header-text; + background: $govuk-header-background; + + } + + .govuk-header--full-width { + padding: 0 $govuk-spacing-scale-3; + border-color: $govuk-header-border-color; + } + + .govuk-header__container { + position: relative; + margin-bottom: -$govuk-header-border-width; + padding-top: $govuk-spacing-scale-2; + border-bottom: $govuk-header-border-width solid $govuk-header-border-color; + } + + .govuk-header__logotype { + margin-right: $govuk-spacing-scale-1; + } + + .govuk-header__logotype-crown { + margin-right: 1px; + fill: currentColor; + vertical-align: middle; + } + + .govuk-header__logotype-crown-fallback-image { + width: 36px; + height: 32px; + border: 0; + vertical-align: middle; + } + + .govuk-header__title { + @include govuk-font-regular-24; + } + + .govuk-header__link { + @include govuk-focusable-fill; + + text-decoration: none; + + &:link, + &:visited { + color: $govuk-header-link; + } + + &:hover { + text-decoration: underline; + } + + &:focus { + color: $govuk-black; + } + + // alphagov/govuk_template includes a specific a:link:focus selector + // designed to make unvisited links a slightly darker blue when focussed, so + // we need to override the text colour for that combination of selectors. + @include govuk-compatibility(govuk_template) { + &:link:focus { + @include govuk-text-colour; + } + } + } + + .govuk-header__link--homepage { + // Font size needs to be set on the link so that the box sizing is correct + // in Firefox + @include govuk-typography-common; + @include govuk-typography-weight-bold; + + display: inline-block; + font-size: 30px; // We don't have a mixin that produces 30px font size + line-height: 30px; + + &:link, + &:visited { + margin-bottom: -1px; // Negate transparent bottom border + border-bottom: 1px solid transparent; + text-decoration: none; + } + + &:hover, + &:active { + border-bottom-color: currentColor; + } + } + + .govuk-header__link--service-name { + display: inline-block; + margin-bottom: $govuk-spacing-scale-2; + @include govuk-font-bold-24; + } + + .govuk-header__logo { + @include govuk-responsive-margin($govuk-spacing-responsive-2, "bottom"); + padding-right: $govuk-spacing-scale-8; + + @include mq ($from: desktop) { + display: inline-block; + width: 33.33%; + padding-right: 0; + vertical-align: top; + } + } + + .govuk-header__proposition { + @include mq ($from: desktop) { + display: inline-block; + width: 66.66%; + } + } + + .govuk-header__menu-button { + @include govuk-font-regular-16; + position: absolute; + top: $govuk-spacing-scale-4; + right: 0; + margin: 0; + padding: 0; + border: 0; + color: $govuk-header-link; + background: none; + + &:hover { + text-decoration: underline; + } + + &::after { + @include govuk-shape-arrow($direction: down, $base: 10px); + content: ""; + display: inline-block; + margin-left: $govuk-spacing-scale-1; + } + + @include govuk-focusable; + + @include mq ($from: tablet) { + top: $govuk-spacing-scale-3; + } + + @include mq ($from: desktop) { + display: none; + } + } + + .govuk-header__menu-button--open { + &::after { + @include govuk-shape-arrow($direction: up, $base: 10px); + display: inline-block; + } + } + + .govuk-header__navigation { + @include govuk-responsive-margin($govuk-spacing-responsive-2, "bottom"); + display: none; + margin: 0; + padding: 0; + list-style: none; + + @include mq ($from: desktop) { + display: block; + } + } + + .govuk-header__navigation--open { + display: block; + } + + .govuk-header__navigation--right { + @include mq ($from: desktop) { + margin: 0; + padding: $govuk-spacing-scale-1 0; + text-align: right; + } + } + + .govuk-header__navigation--no-service-name { + padding-top: $govuk-spacing-scale-7; + } + + .govuk-header__navigation-item { + padding: $govuk-spacing-scale-2 0; + border-bottom: 1px solid $govuk-header-nav-item-border-color; + + @include mq ($from: desktop) { + display: inline-block; + margin-right: $govuk-spacing-scale-3; + padding: $govuk-spacing-scale-1 0; + border: 0; + } + + a { + @include govuk-font-bold-16; + white-space: nowrap; + } + } + + .govuk-header__navigation-item--active { + a { + &:link, + &:hover, + &:visited { + color: $govuk-header-link-active; + } + } + } + + .govuk-header__navigation-item:last-child { + margin-right: 0; + } + + @include mq($media-type: print) { + .app-header { + border-bottom-width: 0; + color: $govuk-black; + background: transparent; + } + + // Hide the inverted crown when printing in browsers that don't support SVG. + .app-header__logotype-crown-fallback-image { + display: none; + } + + .app-header__link { + &:link, + &:visited { + color: $govuk-black; + } + + // Do not append link href to GOV.UK link when printing (e.g. '(/)') + &:after { + display: none; + } + } + } + + // Begin adjustments for font baseline offset + // These should be removed when the font is updated with the correct baseline + .govuk-header__logotype-crown, + .govuk-header__logotype-crown-fallback-image { + position: relative; + top: -4px; + } + + .govuk-header { + $offset: 3px; + padding-top: $offset; + } + // End adjustments + +} diff --git a/src/header/header.js b/src/header/header.js new file mode 100644 index 0000000000..b840428404 --- /dev/null +++ b/src/header/header.js @@ -0,0 +1,57 @@ +import '../globals/polyfills/Function/prototype/bind' +import '../globals/polyfills/Event' // addEventListener and event.target normaliziation + +function Header ($module) { + this.$module = $module +} + +Header.prototype.init = function () { + // Check for module + var $module = this.$module + if (!$module) { + return + } + + // Check for button + var $toggleButton = $module.querySelector('.js-header-toggle') + if (!$toggleButton) { + return + } + + // Handle $toggleButton click events + $toggleButton.addEventListener('click', this.handleClick.bind(this)) +} + +/** +* Toggle class +* @param {object} node element +* @param {string} className to toggle +*/ +Header.prototype.toggleClass = function (node, className) { + if (node.classList.contains(className)) { + node.classList.remove(className) + } else { + node.classList.add(className) + } +} + +/** +* An event handler for click event on $toggleButton +* @param {object} event event +*/ +Header.prototype.handleClick = function (event) { + var $module = this.$module + var $toggleButton = event.target || event.srcElement + var $target = $module.querySelector('#' + $toggleButton.getAttribute('aria-controls')) + + // If a button with aria-controls, handle click + if ($toggleButton && $target) { + this.toggleClass($target, 'govuk-header__navigation--open') + this.toggleClass($toggleButton, 'govuk-header__menu-button--open') + + $toggleButton.setAttribute('aria-expanded', $toggleButton.getAttribute('aria-expanded') !== 'true') + $target.setAttribute('aria-hidden', $target.getAttribute('aria-hidden') === 'false') + } +} + +export default Header diff --git a/src/header/header.njk b/src/header/header.njk new file mode 100644 index 0000000000..735c313c18 --- /dev/null +++ b/src/header/header.njk @@ -0,0 +1,3 @@ +{% from "header/macro.njk" import govukHeader %} + +{{ govukHeader() }} diff --git a/src/header/header.yaml b/src/header/header.yaml new file mode 100644 index 0000000000..295c440ec3 --- /dev/null +++ b/src/header/header.yaml @@ -0,0 +1,132 @@ +previewLayout: full-width +accessibilityCriteria: | + Text and links in the Header must: + - have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast) + + Links in the Header must: + - accept focus + - be focusable with a keyboard + - be usable with a keyboard + - indicate when they have focus + - change in appearance when touched (in the touch-down state) + - change in appearance when hovered + - have visible text + + Images in the Header must: + - be presentational when linked to from accompanying text (crown icon). + + Landmarks and Roles in the Header should: + - have a role of `banner` at the root of the component (
) (https://www.w3.org/TR/wai-aria-1.1/#banner) + +examples: +- name: default + description: The standard header as used on information pages on GOV.UK + data: + homepageUrl: / + containerClasses: govuk-width-container + +- name: with-service-name + description: If your service is more than a few pages long, you can help users understand where they are by adding the service name. + data: + homepageUrl: / + serviceName: Service Name + serviceUrl: /components/header + containerClasses: govuk-width-container + +- name: with-navigation + data: + homepageUrl: / + containerClasses: govuk-width-container + navigation: + - href: '#1' + text: 'Navigation item 1' + active: true + - href: '#2' + text: 'Navigation item 2' + - href: '#3' + text: 'Navigation item 3' + - href: '#4' + text: 'Navigation item 4' + +- name: with-service-name-and-navigation + description: If you need to include basic navigation, contact or account management links. + readme: false + data: + homepageUrl: / + serviceName: Service Name + serviceUrl: /components/header + containerClasses: govuk-width-container + navigation: + - href: '#1' + text: 'Navigation item 1' + active: true + - href: '#2' + text: 'Navigation item 2' + - href: '#3' + text: 'Navigation item 3' + - href: '#4' + text: 'Navigation item 4' + +- name: with-large-navigation + readme: false + description: An edge case example with a large number of navitation items with long names used to test wrapping + data: + homepageUrl: / + containerClasses: govuk-width-container + navigation: + - href: '/browse/benefits' + text: 'Benefits' + - href: '/browse/births-deaths-marriages' + text: 'Births, deaths, marriages and care' + - href: '/browse/business' + text: 'Business and self-employed' + - href: '/browse/childcare-parenting' + text: 'Childcare and parenting' + - href: '/browse/citizenship' + text: 'Citizenship and living in the UK' + - href: '/browse/justice' + text: 'Crime, justice and the law' + - href: '/browse/disabilities' + text: 'Disabled people' + - href: '/browse/driving' + text: 'Driving and transport' + - href: '/browse/education' + text: 'Education and learning' + - href: '/browse/employing-people' + text: 'Employing people' + - href: '/browse/environment-countryside' + text: 'Environment and countryside' + - href: '/browse/housing-local-services' + text: 'Housing and local services' + - href: '/browse/tax' + text: 'Money and tax' + - href: '/browse/abroad' + text: 'Passports, travel and living abroad' + - href: '/browse/visas-immigration' + text: 'Visas and immigration' + - href: '/browse/working' + text: 'Working, jobs and pensions' + +- name: full-width + readme: false + data: + homepageUrl: / + classes: govuk-header--full-width + navigationClasses: govuk-header__navigation--right + title: Product Name + +- name: full-width-with-navigation + readme: false + data: + homepageUrl: / + classes: govuk-header--full-width + navigationClasses: govuk-header__navigation--right + title: Product Name + navigation: + - href: '#1' + text: 'Navigation item 1' + active: true + - href: '#2' + text: 'Navigation item 2' + - href: '#3' + text: 'Navigation item 3' diff --git a/src/header/index.njk b/src/header/index.njk new file mode 100644 index 0000000000..a3954f16da --- /dev/null +++ b/src/header/index.njk @@ -0,0 +1,167 @@ +{% if isReadme %} + {% set parentTemplate = "readme.njk" %} +{% else %} + {% set parentTemplate = "component.njk" %} +{% endif %} + +{% extends parentTemplate %} + +{# Commented out blocks below inherit from views/component.njk #} + +{# componentName #} +{% block componentDescription %} + The header component is used at the top of every GOV.UK page, to help users navigate. +{% endblock %} +{# examples #} + +{# override link to design system here if it's different to base url + componentName #} +{# {% set componentGuidanceLink = 'new link here' %} #} + +{% block componentArguments %} +{% from "table/macro.njk" import govukTable %} +{{ govukTable({ + 'firstCellIsHeader': true, + 'head' : [ + { + text: 'Name' + }, + { + text: 'Type' + }, + { + text: 'Required' + }, + { + text: 'Description' + } + ], + 'rows' : [ + [ + { + text: 'meta' + }, + { + text: 'object' + }, + { + text: 'No' + }, + { + text: 'Object containing parameters for the meta navigation' + } + ], + [ + { + text: 'meta.items[]' + }, + { + text: 'array' + }, + { + text: 'No' + }, + { + text: 'Array of items for use in the meta section of the footer' + } + ], + [ + { + text: 'navigation' + }, + { + text: 'array' + }, + { + text: 'No' + }, + { + text: 'Array of items for use in the navigation section of the footer' + } + ], + [ + { + text: 'navigation[].title' + }, + { + text: 'string' + }, + { + text: 'No' + }, + { + text: 'Title for a section' + } + ], + [ + { + text: 'navigation[].columns' + }, + { + text: 'integer' + }, + { + text: 'No' + }, + { + text: 'Amount of columns to display items in' + } + ], + [ + { + text: 'navigation[].items' + }, + { + text: 'array' + }, + { + text: 'No' + }, + { + text: 'Array of items to display in the list' + } + ], + [ + { + text: 'attributes' + }, + { + text: 'object' + }, + { + text: 'No' + }, + { + text: 'Will add attributes to the footer component root' + } + ], + [ + { + text: 'classes' + }, + { + text: 'string' + }, + { + text: 'No' + }, + { + text: 'Will add classes to the footer component root' + } + ], + [ + { + text: 'containerClasses' + }, + { + text: 'string' + }, + { + text: 'No' + }, + { + text: 'Classes that can be added to the container, useful if you want to make the footer full width.' + } + ] + ] +})}} +{% endblock %} diff --git a/src/header/macro.njk b/src/header/macro.njk new file mode 100644 index 0000000000..d863b7831d --- /dev/null +++ b/src/header/macro.njk @@ -0,0 +1,3 @@ +{% macro govukHeader(params) %} + {%- include "./template.njk" -%} +{% endmacro %} diff --git a/src/header/template.njk b/src/header/template.njk new file mode 100644 index 0000000000..df8e3aa03c --- /dev/null +++ b/src/header/template.njk @@ -0,0 +1,79 @@ +{% from "phase-banner/macro.njk" import govukPhaseBanner %} + + diff --git a/src/icons/govuk-logotype-crown.png b/src/icons/govuk-logotype-crown.png new file mode 100644 index 0000000000000000000000000000000000000000..a6cdbfd47bb38a671780708d0845f2e27b2c0743 GIT binary patch literal 952 zcmV;p14sOcP)B`#GemB2q!0kS2YQV`Yfr{WAINd*Hk}e^NnW2vfrJd0`O7N0ZGFi9p)8& zNwEUcfvPe(yC_e)%Ggu^)ANcy(^&{Xz&Y2%2+*7pf4iijM|;jBnL2NQWyT4=V0+uJd4c0pm@lKex zA<)yM1m-gPE5Av;vJlH_%z8W)7PFD&oB|?_gF<0iDKdw2zqP#Q|+jgh%6| z0|Zn9{gw{{b;)wY%T{L{Y*U?qcQmovoM!2z1tY+$oSiqv&j75*2xtWm65Xs4nPp!9 zFEh^`U}nkLI5xoZD43_?unV!z(O7^Q;GqF8q*(!`0Zl*XR|TMu*I$4pW2O8H_Wcm3 z5zvvQJTW+H{-U2b$vvq>#yFeE(j`AOMbei9<74u@$InY4gk=d}i=>&+Ujvffh7hhL zP4-fRwKvDtrxI|tcf*m48II{4$x=0D6m?@pZGMLl$&T1}cM87L&1)mj5E)!I)<6QZ z&d;{UUt6g$Cb|QbUypbV_SFR}9Wx2{jS?*cdLzSnpa|Rp&I3Em{{UP8Rs(N5R-5<1 zIy>yJ#~AeyZm)fns4h+2ZVPVuIW0LB(zf3du|9c}s3+t289iQ%9sAl{Zbv-vOz>8| z58RC!SQBvCx|co6YTznx!|%PoW$T=_O{wAD^(dHE1fJw=&uvz$2lfH$qtuh=ABf)j zfp=N5C{sK9z82VTAJ}JZ-zWloaYqHV*!Xyc{^4jjIx^(PE!z^G06-s5tfY~hGQeY? z1=tD Date: Mon, 30 Apr 2018 13:14:43 +0100 Subject: [PATCH 02/10] Add tests --- src/header/header.test.js | 109 ++++++++++++++++++++++++++++++++++++ src/header/template.test.js | 107 +++++++++++++++++++++++++++++++++++ 2 files changed, 216 insertions(+) create mode 100644 src/header/header.test.js create mode 100644 src/header/template.test.js diff --git a/src/header/header.test.js b/src/header/header.test.js new file mode 100644 index 0000000000..5dad6af7f1 --- /dev/null +++ b/src/header/header.test.js @@ -0,0 +1,109 @@ +/** + * @jest-environment ./lib/puppeteer/environment.js + */ +/* eslint-env jest */ + +const devices = require('puppeteer/DeviceDescriptors') +const iPhone = devices['iPhone 6'] +const configPaths = require('../../config/paths.json') +const PORT = configPaths.ports.test + +let browser +let page +let baseUrl = 'http://localhost:' + PORT + +beforeAll(async (done) => { + browser = global.__BROWSER__ + page = await browser.newPage() + await page.emulate(iPhone) + done() +}) + +afterAll(async (done) => { + await page.close() + done() +}) + +describe('/components/header', () => { + describe('/components/header/with-navigation/preview', () => { + describe('when menu button is pressed', () => { + it('should indicate the open state of the toggle button', async () => { + await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' }) + + await page.click('.js-header-toggle') + + const toggleButtonIsOpen = await page.evaluate(() => document.body.querySelector('.govuk-header__menu-button').classList.contains('govuk-header__menu-button--open')) + expect(toggleButtonIsOpen).toBeTruthy() + }) + + it('should indicate the expanded state of the toggle button using aria-expanded', async () => { + await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' }) + + await page.click('.js-header-toggle') + + const toggleButtonAriaExpanded = await page.evaluate(() => document.body.querySelector('.govuk-header__menu-button').getAttribute('aria-expanded')) + expect(toggleButtonAriaExpanded).toBe('true') + }) + + it('should indicate the open state of the navigation', async () => { + await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' }) + + await page.click('.js-header-toggle') + + const navigationIsOpen = await page.evaluate(() => document.body.querySelector('.govuk-header__navigation').classList.contains('govuk-header__navigation--open')) + expect(navigationIsOpen).toBeTruthy() + }) + + it('should indicate the visible state of the navigation using aria-hidden', async () => { + await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' }) + + await page.click('.js-header-toggle') + + const navigationAriaHidden = await page.evaluate(() => document.body.querySelector('.govuk-header__navigation').getAttribute('aria-hidden')) + expect(navigationAriaHidden).toBe('false') + }) + }) + + describe('when menu button is pressed twice', () => { + it('should indicate the open state of the toggle button', async () => { + await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' }) + + await page.click('.js-header-toggle') + await page.click('.js-header-toggle') + + const toggleButtonIsOpen = await page.evaluate(() => document.body.querySelector('.govuk-header__menu-button').classList.contains('govuk-header__menu-button--open')) + expect(toggleButtonIsOpen).toBeFalsy() + }) + + it('should indicate the expanded state of the toggle button using aria-expanded', async () => { + await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' }) + + await page.click('.js-header-toggle') + await page.click('.js-header-toggle') + + const toggleButtonAriaExpanded = await page.evaluate(() => document.body.querySelector('.govuk-header__menu-button').getAttribute('aria-expanded')) + expect(toggleButtonAriaExpanded).toBe('false') + }) + + it('should indicate the open state of the navigation', async () => { + await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' }) + + await page.click('.js-header-toggle') + await page.click('.js-header-toggle') + + const navigationIsOpen = await page.evaluate(() => document.body.querySelector('.govuk-header__navigation').classList.contains('govuk-header__navigation--open')) + expect(navigationIsOpen).toBeFalsy() + }) + + it('should indicate the visible state of the navigation using aria-hidden', async () => { + await page.goto(baseUrl + '/components/header/with-navigation/preview', { waitUntil: 'load' }) + + await page.click('.js-header-toggle') + await page.click('.js-header-toggle') + + const navigationAriaHidden = await page.evaluate(() => document.body.querySelector('.govuk-header__navigation').getAttribute('aria-hidden')) + expect(navigationAriaHidden).toBe('true') + }) + }) + }) +}) diff --git a/src/header/template.test.js b/src/header/template.test.js new file mode 100644 index 0000000000..d2385651a9 --- /dev/null +++ b/src/header/template.test.js @@ -0,0 +1,107 @@ +/* eslint-env jest */ + +const { axe } = require('jest-axe') + +const { render, getExamples } = require('../../lib/jest-helpers') + +const examples = getExamples('header') + +describe('header', () => { + it('passes accessibility tests', async () => { + const $ = render('header', examples.default) + + const results = await axe($.html()) + expect(results).toHaveNoViolations() + }) + + it('has a role of `banner`', () => { + const $ = render('header', {}) + + const $component = $('.govuk-header') + expect($component.attr('role')).toEqual('banner') + }) + + it('renders attributes correctly', () => { + const $ = render('header', { + attributes: { + 'data-test-attribute': 'value', + 'data-test-attribute-2': 'value-2' + } + }) + + const $component = $('.govuk-header') + expect($component.attr('data-test-attribute')).toEqual('value') + expect($component.attr('data-test-attribute-2')).toEqual('value-2') + }) + + it('renders classes', () => { + const $ = render('header', { + classes: 'app-header--custom-modifier' + }) + + const $component = $('.govuk-header') + expect($component.hasClass('app-header--custom-modifier')).toBeTruthy() + }) + + it('renders custom container classes', () => { + const $ = render('header', { + containerClasses: 'app-width-container' + }) + + const $component = $('.govuk-header') + const $container = $component.find('.govuk-header__container') + + expect($container.hasClass('app-width-container')).toBeTruthy() + }) + + it('renders home page URL', () => { + const $ = render('header', { + homepageUrl: '/' + }) + + const $component = $('.govuk-header') + const $homepageLink = $component.find('.govuk-header__link--homepage') + expect($homepageLink.attr('href')).toEqual('/') + }) + + describe('with title', () => { + it('renders title', () => { + const $ = render('header', examples['full-width']) + + const $component = $('.govuk-header') + const $title = $component.find('.govuk-header__title') + expect($title.text().trim()).toEqual('Product Name') + }) + }) + + describe('with service name', () => { + it('renders service name', () => { + const $ = render('header', examples['with-service-name']) + + const $component = $('.govuk-header') + const $serviceName = $component.find('.govuk-header__link--service-name') + expect($serviceName.text().trim()).toEqual('Service Name') + }) + }) + + describe('with navigation', () => { + it('passes accessibility tests', async () => { + const $ = render('header', examples['with-navigation']) + + const results = await axe($.html()) + expect(results).toHaveNoViolations() + }) + + it('renders havigation', () => { + const $ = render('header', examples['with-navigation']) + + const $component = $('.govuk-header') + const $list = $component.find('ul.govuk-header__navigation') + const $items = $list.find('li.govuk-header__navigation-item') + const $firstItem = $items.find('a.govuk-header__link:first-child') + expect($items.length).toEqual(4) + expect($firstItem.attr('href')).toEqual('#1') + expect($firstItem.text()).toContain('Navigation item 1') + }) + }) +}) From df30c62a75106bf45ba9a30d3c6d21dc8376d235 Mon Sep 17 00:00:00 2001 From: alex-ju Date: Mon, 30 Apr 2018 13:14:37 +0100 Subject: [PATCH 03/10] Add readme --- src/header/README.md | 402 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 402 insertions(+) create mode 100644 src/header/README.md diff --git a/src/header/README.md b/src/header/README.md new file mode 100644 index 0000000000..20a24de397 --- /dev/null +++ b/src/header/README.md @@ -0,0 +1,402 @@ +# Header + +## Introduction + +The header component is used at the top of every GOV.UK page, to help users navigate. + +## Guidance + +Find out when to use the Header component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/header). + +## Quick start examples + +### Component default + +[Preview the header component](http://govuk-frontend-review.herokuapp.com/components/header/preview) + +#### Markup + + + +#### Macro + + {% from 'header/macro.njk' import govukHeader %} + + {{ govukHeader({ + "homepageUrl": "/", + "containerClasses": "govuk-width-container" + }) }} + +### Header--with-service-name + +[Preview the header--with-service-name example](http://govuk-frontend-review.herokuapp.com/components/header/with-service-name/preview) + +#### Markup + + + +#### Macro + + {% from 'header/macro.njk' import govukHeader %} + + {{ govukHeader({ + "homepageUrl": "/", + "serviceName": "Service Name", + "serviceUrl": "/components/header", + "containerClasses": "govuk-width-container" + }) }} + +### Header--with-navigation + +[Preview the header--with-navigation example](http://govuk-frontend-review.herokuapp.com/components/header/with-navigation/preview) + +#### Markup + + + +#### Macro + + {% from 'header/macro.njk' import govukHeader %} + + {{ govukHeader({ + "homepageUrl": "/", + "containerClasses": "govuk-width-container", + "navigation": [ + { + "href": "#1", + "text": "Navigation item 1", + "active": true + }, + { + "href": "#2", + "text": "Navigation item 2" + }, + { + "href": "#3", + "text": "Navigation item 3" + }, + { + "href": "#4", + "text": "Navigation item 4" + } + ] + }) }} + +## Dependencies + +To consume the header component you must be running npm version 5 or above. + +## Installation + + npm install --save @govuk-frontend/header + +## Requirements + +### Build tool configuration + +When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp + + .pipe(sass({ + includePaths: 'node_modules/' + })) + +### Static asset path configuration + +To show the button image you need to configure your app to show these assets. Below is a sample configuration using Express js: + + app.use('/public', express.static(path.join(__dirname, '/node_modules/@govuk-frontend/icons'))) + +## Component arguments + +If you are using Nunjucks,then macros take the following arguments + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeRequiredDescription
metaobjectNoObject containing parameters for the meta navigation
meta.items[]arrayNoArray of items for use in the meta section of the footer
navigationarrayNoArray of items for use in the navigation section of the footer
navigation[].titlestringNoTitle for a section
navigation[].columnsintegerNoAmount of columns to display items in
navigation[].itemsarrayNoArray of items to display in the list
attributesobjectNoWill add attributes to the footer component root
classesstringNoWill add classes to the footer component root
containerClassesstringNoClasses that can be added to the container, useful if you want to make the footer full width.
+ +### Setting up Nunjucks views and paths + +Below is an example setup using express configure views: + + nunjucks.configure('node_modules/@govuk-frontend', { + autoescape: true, + cache: false, + express: app + }) + +## Getting updates + +To check whether you have the latest version of the button run: + + npm outdated @govuk-frontend/header + +To update the latest version run: + + npm update @govuk-frontend/header + +## Contribution + +Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository") + +## License + +MIT \ No newline at end of file From b60c7ded16dd96672ccd193d0c36f5417a48f4d2 Mon Sep 17 00:00:00 2001 From: alex-ju Date: Thu, 10 May 2018 17:06:50 +0100 Subject: [PATCH 04/10] Import header component --- src/all.js | 5 +++++ src/components/_all.scss | 1 + 2 files changed, 6 insertions(+) diff --git a/src/all.js b/src/all.js index 3497d5bfce..ca13abc982 100644 --- a/src/all.js +++ b/src/all.js @@ -3,6 +3,7 @@ import Button from './components/button/button' import Details from './components/details/details' import Checkboxes from './components/checkboxes/checkboxes' import ErrorSummary from './components/error-summary/error-summary' +import Header from './components/header/header' import Radios from './components/radios/radios' export function initAll () { @@ -18,6 +19,10 @@ export function initAll () { var $errorSummary = document.querySelector('[data-module="error-summary"]') new ErrorSummary($errorSummary).init() + // Find first header module to enhance. + var $toggleButton = document.querySelector('[data-module="header"]') + new Header($toggleButton).init() + var $radios = document.querySelectorAll('[data-module="radios"]') nodeListForEach($radios, function ($radio) { new Radios($radio).init() diff --git a/src/components/_all.scss b/src/components/_all.scss index 46282440c1..cec19d1979 100644 --- a/src/components/_all.scss +++ b/src/components/_all.scss @@ -10,6 +10,7 @@ @import "file-upload/file-upload"; @import "footer/footer"; @import "hint/hint"; +@import "header/header"; @import "input/input"; @import "label/label"; @import "panel/panel"; From b6632174ee48bd0d0fd0756f2211740b4da934ea Mon Sep 17 00:00:00 2001 From: alex-ju Date: Mon, 14 May 2018 12:39:07 +0100 Subject: [PATCH 05/10] Add header and footer example --- .../examples/header-and-footer/index.njk | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 app/views/examples/header-and-footer/index.njk diff --git a/app/views/examples/header-and-footer/index.njk b/app/views/examples/header-and-footer/index.njk new file mode 100644 index 0000000000..ede5273a8e --- /dev/null +++ b/app/views/examples/header-and-footer/index.njk @@ -0,0 +1,48 @@ +{% extends "full-width.njk" %} + +{% from "skip-link/macro.njk" import govukSkipLink %} +{% from "header/macro.njk" import govukHeader %} +{% from "phase-banner/macro.njk" import govukPhaseBanner %} +{% from "footer/macro.njk" import govukFooter %} + +{% block content %} + +{{ govukSkipLink({ + href: '#content', + text: 'Skip to main content' +}) }} + +{{ govukHeader({ + homepageUrl: "/", + containerClasses: "govuk-width-container", + serviceName: "Service Name", + navigation: [ + { + href: '#1', + text: 'Navigation item 1', + active: true + }, + { + href: '#2', + text: 'Navigation item 2' + }, + { + href: '#3', + text: 'Navigation item 3' + } + ] +}) }} + +{{ govukPhaseBanner({ + classes: "govuk-width-container", + tag: { + text: "alpha" + }, + html: 'This is a new service – your feedback will help us to improve it.' +}) }} + +{{ govukFooter({ + +}) }} + +{% endblock %} From 7c0041fd964f53bd8df38a59fb99135d8512422f Mon Sep 17 00:00:00 2001 From: alex-ju Date: Tue, 15 May 2018 17:35:16 +0100 Subject: [PATCH 06/10] Restructure PR after #693 --- .../images}/govuk-logotype-crown.png | Bin src/{ => components}/header/README.md | 64 +++++++++--------- src/{ => components}/header/_header.scss | 26 ++----- src/{ => components}/header/header.js | 4 +- src/{ => components}/header/header.njk | 0 src/{ => components}/header/header.test.js | 2 +- src/{ => components}/header/header.yaml | 0 src/{ => components}/header/index.njk | 54 +++++++-------- src/{ => components}/header/macro.njk | 0 src/{ => components}/header/template.njk | 2 +- src/{ => components}/header/template.test.js | 2 +- 11 files changed, 69 insertions(+), 85 deletions(-) rename src/{icons => assets/images}/govuk-logotype-crown.png (100%) rename src/{ => components}/header/README.md (88%) rename src/{ => components}/header/_header.scss (88%) rename src/{ => components}/header/header.js (90%) rename src/{ => components}/header/header.njk (100%) rename src/{ => components}/header/header.test.js (98%) rename src/{ => components}/header/header.yaml (100%) rename src/{ => components}/header/index.njk (71%) rename src/{ => components}/header/macro.njk (100%) rename src/{ => components}/header/template.njk (97%) rename src/{ => components}/header/template.test.js (97%) diff --git a/src/icons/govuk-logotype-crown.png b/src/assets/images/govuk-logotype-crown.png similarity index 100% rename from src/icons/govuk-logotype-crown.png rename to src/assets/images/govuk-logotype-crown.png diff --git a/src/header/README.md b/src/components/header/README.md similarity index 88% rename from src/header/README.md rename to src/components/header/README.md index 20a24de397..c52cfe05ff 100644 --- a/src/header/README.md +++ b/src/components/header/README.md @@ -36,7 +36,7 @@ Find out when to use the Header component in your service in the [GOV.UK Design d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z" > - + GOV.UK @@ -85,7 +85,7 @@ Find out when to use the Header component in your service in the [GOV.UK Design d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z" > - + GOV.UK @@ -140,7 +140,7 @@ Find out when to use the Header component in your service in the [GOV.UK Design d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z" > - + GOV.UK @@ -233,9 +233,9 @@ When compiling the Sass files you'll need to define includePaths to reference th ### Static asset path configuration -To show the button image you need to configure your app to show these assets. Below is a sample configuration using Express js: +In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js: - app.use('/public', express.static(path.join(__dirname, '/node_modules/@govuk-frontend/icons'))) + app.use('/assets', express.static(path.join(__dirname, '/node_modules/@govuk-frontend/assets'))) ## Component arguments @@ -263,109 +263,109 @@ If you are using Nunjucks,then macros take the following arguments -meta +classes -object +string No -Object containing parameters for the meta navigation +Will add classes to the header component root -meta.items[] +containerClasses -array +string No -Array of items for use in the meta section of the footer +Classes that can be added to the container, useful if you want to make the header fixed width. -navigation +attributes -array +object No -Array of items for use in the navigation section of the footer +Will add attributes to the footer component root -navigation[].title +homepageUrl string -No +Yes -Title for a section +The url of the hompeage. Defaults to / -navigation[].columns +assetsPath -integer +string -No +Yes -Amount of columns to display items in +The public path for the assets folder. If not provided it defaults to /assets/images -navigation[].items +title -array +string No -Array of items to display in the list +Header title that is placed next to GOV.UK. Used for product names (i.e. Pay, Verify) -attributes +serviceName -object +string No -Will add attributes to the footer component root +Header title that is placed next to GOV.UK. Used for product names (i.e. Pay, Verify) -classes +navigation -string +array No -Will add classes to the footer component root +Navigation items -containerClasses +navigationClasses string No -Classes that can be added to the container, useful if you want to make the footer full width. +Classes that can be added to the navigation. diff --git a/src/header/_header.scss b/src/components/header/_header.scss similarity index 88% rename from src/header/_header.scss rename to src/components/header/_header.scss index caccd0f406..7845f65a67 100644 --- a/src/header/_header.scss +++ b/src/components/header/_header.scss @@ -1,24 +1,8 @@ -@import "../globals/tools/exports"; -@import "../globals/tools/compatibility"; -@import "../globals/tools/iff"; - -@import "../globals/settings/colours-palette"; -@import "../globals/settings/colours-applied"; -@import "../globals/settings/compatibility"; -@import "../globals/settings/spacing"; -@import "../globals/settings/measurements"; - -@import "../globals/helpers/media-queries"; -@import "../globals/helpers/focusable"; -@import "../globals/helpers/spacing"; -@import "../globals/helpers/device-pixels"; -@import "../globals/helpers/grid"; -@import "../globals/helpers/shape-arrow"; - -@import "../globals/helpers/typography"; -@import "../globals/settings/typography-font-stacks"; -@import "../globals/settings/typography-font"; -@import "../globals/settings/typography-responsive"; +@import "../../settings/all"; +@import "../../tools/all"; +@import "../../helpers/all"; + +@import "../../helpers/typography"; @include govuk-exports("header") { diff --git a/src/header/header.js b/src/components/header/header.js similarity index 90% rename from src/header/header.js rename to src/components/header/header.js index b840428404..bf073c11b2 100644 --- a/src/header/header.js +++ b/src/components/header/header.js @@ -1,5 +1,5 @@ -import '../globals/polyfills/Function/prototype/bind' -import '../globals/polyfills/Event' // addEventListener and event.target normaliziation +import '../../vendor/polyfills/Function/prototype/bind' +import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation function Header ($module) { this.$module = $module diff --git a/src/header/header.njk b/src/components/header/header.njk similarity index 100% rename from src/header/header.njk rename to src/components/header/header.njk diff --git a/src/header/header.test.js b/src/components/header/header.test.js similarity index 98% rename from src/header/header.test.js rename to src/components/header/header.test.js index 5dad6af7f1..d75d19e1cd 100644 --- a/src/header/header.test.js +++ b/src/components/header/header.test.js @@ -5,7 +5,7 @@ const devices = require('puppeteer/DeviceDescriptors') const iPhone = devices['iPhone 6'] -const configPaths = require('../../config/paths.json') +const configPaths = require('../../../config/paths.json') const PORT = configPaths.ports.test let browser diff --git a/src/header/header.yaml b/src/components/header/header.yaml similarity index 100% rename from src/header/header.yaml rename to src/components/header/header.yaml diff --git a/src/header/index.njk b/src/components/header/index.njk similarity index 71% rename from src/header/index.njk rename to src/components/header/index.njk index a3954f16da..45a54cffdf 100644 --- a/src/header/index.njk +++ b/src/components/header/index.njk @@ -38,119 +38,119 @@ 'rows' : [ [ { - text: 'meta' + text: 'classes' }, { - text: 'object' + text: 'string' }, { text: 'No' }, { - text: 'Object containing parameters for the meta navigation' + text: 'Will add classes to the header component root' } ], [ { - text: 'meta.items[]' + text: 'containerClasses' }, { - text: 'array' + text: 'string' }, { text: 'No' }, { - text: 'Array of items for use in the meta section of the footer' + text: 'Classes that can be added to the container, useful if you want to make the header fixed width.' } ], [ { - text: 'navigation' + text: 'attributes' }, { - text: 'array' + text: 'object' }, { text: 'No' }, { - text: 'Array of items for use in the navigation section of the footer' + text: 'Will add attributes to the footer component root' } ], [ { - text: 'navigation[].title' + text: 'homepageUrl' }, { text: 'string' }, { - text: 'No' + text: 'Yes' }, { - text: 'Title for a section' + text: 'The url of the hompeage. Defaults to /' } ], [ { - text: 'navigation[].columns' + text: 'assetsPath' }, { - text: 'integer' + text: 'string' }, { - text: 'No' + text: 'Yes' }, { - text: 'Amount of columns to display items in' + text: 'The public path for the assets folder. If not provided it defaults to /assets/images' } ], [ { - text: 'navigation[].items' + text: 'title' }, { - text: 'array' + text: 'string' }, { text: 'No' }, { - text: 'Array of items to display in the list' + text: 'Header title that is placed next to GOV.UK. Used for product names (i.e. Pay, Verify)' } ], [ { - text: 'attributes' + text: 'serviceName' }, { - text: 'object' + text: 'string' }, { text: 'No' }, { - text: 'Will add attributes to the footer component root' + text: 'Header title that is placed next to GOV.UK. Used for product names (i.e. Pay, Verify)' } ], [ { - text: 'classes' + text: 'navigation' }, { - text: 'string' + text: 'array' }, { text: 'No' }, { - text: 'Will add classes to the footer component root' + text: 'Navigation items' } ], [ { - text: 'containerClasses' + text: 'navigationClasses' }, { text: 'string' @@ -159,7 +159,7 @@ text: 'No' }, { - text: 'Classes that can be added to the container, useful if you want to make the footer full width.' + text: 'Classes that can be added to the navigation.' } ] ] diff --git a/src/header/macro.njk b/src/components/header/macro.njk similarity index 100% rename from src/header/macro.njk rename to src/components/header/macro.njk diff --git a/src/header/template.njk b/src/components/header/template.njk similarity index 97% rename from src/header/template.njk rename to src/components/header/template.njk index df8e3aa03c..911862c070 100644 --- a/src/header/template.njk +++ b/src/components/header/template.njk @@ -37,7 +37,7 @@ In other browsers is synonymous for the tag and will be interpreted as such, displaying the fallback image. #} - + GOV.UK diff --git a/src/header/template.test.js b/src/components/header/template.test.js similarity index 97% rename from src/header/template.test.js rename to src/components/header/template.test.js index d2385651a9..ac764c692e 100644 --- a/src/header/template.test.js +++ b/src/components/header/template.test.js @@ -2,7 +2,7 @@ const { axe } = require('jest-axe') -const { render, getExamples } = require('../../lib/jest-helpers') +const { render, getExamples } = require('../../../lib/jest-helpers') const examples = getExamples('header') From 1b4a47da94b795152b7303b801e049f965670033 Mon Sep 17 00:00:00 2001 From: alex-ju Date: Mon, 21 May 2018 11:50:54 +0100 Subject: [PATCH 07/10] Update header component --- src/components/header/_header.scss | 37 +++++++++++++++++------------- src/components/header/header.js | 6 ++--- src/components/header/header.yaml | 8 +++---- src/components/header/template.njk | 10 ++++---- 4 files changed, 32 insertions(+), 29 deletions(-) diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss index 7845f65a67..0d687215e0 100644 --- a/src/components/header/_header.scss +++ b/src/components/header/_header.scss @@ -53,7 +53,7 @@ vertical-align: middle; } - .govuk-header__title { + .govuk-header__product-name { @include govuk-font-regular-24; } @@ -126,7 +126,7 @@ } } - .govuk-header__proposition { + .govuk-header__content { @include mq ($from: desktop) { display: inline-block; width: 66.66%; @@ -135,6 +135,7 @@ .govuk-header__menu-button { @include govuk-font-regular-16; + display: none; position: absolute; top: $govuk-spacing-scale-4; right: 0; @@ -149,9 +150,8 @@ } &::after { - @include govuk-shape-arrow($direction: down, $base: 10px); + @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block); content: ""; - display: inline-block; margin-left: $govuk-spacing-scale-1; } @@ -160,36 +160,41 @@ @include mq ($from: tablet) { top: $govuk-spacing-scale-3; } - - @include mq ($from: desktop) { - display: none; - } } .govuk-header__menu-button--open { &::after { - @include govuk-shape-arrow($direction: up, $base: 10px); - display: inline-block; + @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block); } } .govuk-header__navigation { @include govuk-responsive-margin($govuk-spacing-responsive-2, "bottom"); - display: none; + display: block; margin: 0; padding: 0; list-style: none; + } + + .js-enabled .govuk-header__menu-button { + display: block; + @include mq ($from: desktop) { + display: none; + } + } + .js-enabled .govuk-header__navigation { + display: none; @include mq ($from: desktop) { display: block; } } - .govuk-header__navigation--open { + .js-enabled .govuk-header__navigation--open { display: block; } - .govuk-header__navigation--right { + .govuk-header__navigation--end { @include mq ($from: desktop) { margin: 0; padding: $govuk-spacing-scale-1 0; @@ -233,18 +238,18 @@ } @include mq($media-type: print) { - .app-header { + .govuk-header { border-bottom-width: 0; color: $govuk-black; background: transparent; } // Hide the inverted crown when printing in browsers that don't support SVG. - .app-header__logotype-crown-fallback-image { + .govuk-header__logotype-crown-fallback-image { display: none; } - .app-header__link { + .govuk-header__link { &:link, &:visited { color: $govuk-black; diff --git a/src/components/header/header.js b/src/components/header/header.js index bf073c11b2..66541444a4 100644 --- a/src/components/header/header.js +++ b/src/components/header/header.js @@ -28,10 +28,10 @@ Header.prototype.init = function () { * @param {string} className to toggle */ Header.prototype.toggleClass = function (node, className) { - if (node.classList.contains(className)) { - node.classList.remove(className) + if (node.className.indexOf(className) > 0) { + node.className = node.className.replace(' ' + className, '') } else { - node.classList.add(className) + node.className += ' ' + className } } diff --git a/src/components/header/header.yaml b/src/components/header/header.yaml index 295c440ec3..e163b1707a 100644 --- a/src/components/header/header.yaml +++ b/src/components/header/header.yaml @@ -112,16 +112,16 @@ examples: data: homepageUrl: / classes: govuk-header--full-width - navigationClasses: govuk-header__navigation--right - title: Product Name + navigationClasses: govuk-header__navigation--end + productName: Product Name - name: full-width-with-navigation readme: false data: homepageUrl: / classes: govuk-header--full-width - navigationClasses: govuk-header__navigation--right - title: Product Name + navigationClasses: govuk-header__navigation--end + productName: Product Name navigation: - href: '#1' text: 'Navigation item 1' diff --git a/src/components/header/template.njk b/src/components/header/template.njk index 911862c070..cb4c462aba 100644 --- a/src/components/header/template.njk +++ b/src/components/header/template.njk @@ -1,5 +1,3 @@ -{% from "phase-banner/macro.njk" import govukPhaseBanner %} -