Add header component

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

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

src/header/header.njk

@@ -0,0 +1,3 @@
+{% from "header/macro.njk" import govukHeader %}
+
+{{ govukHeader() }}