Skip to content

Commit 19ed433

Browse files
owenatgovowenatgov
committed
Add generic header component
1 parent 366fb10 commit 19ed433

15 files changed

Lines changed: 333 additions & 1 deletion

File tree

‎packages/govuk-frontend-review/src/images/generic-header/hmlr-logo.png‎

20.1 KB
Loading

‎packages/govuk-frontend/src/govuk-prototype-kit/govuk-prototype-kit.config.unit.test.mjs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,10 @@ describe('GOV.UK Prototype Kit config', () => {
104104
importFrom: 'govuk/components/footer/macro.njk',
105105
macroName: 'govukFooter'
106106
},
107+
{
108+
importFrom: 'govuk/components/generic-header/macro.njk',
109+
macroName: 'govukGenericHeader'
110+
},
107111
{
108112
importFrom: 'govuk/components/header/macro.njk',
109113
macroName: 'govukHeader'

‎packages/govuk-frontend/src/govuk/components/_index.import.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
@import "fieldset";
1414
@import "file-upload";
1515
@import "footer";
16+
@import "generic-header";
1617
@import "header";
1718
@import "hint";
1819
@import "input";

‎packages/govuk-frontend/src/govuk/components/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
@use "fieldset";
1414
@use "file-upload";
1515
@use "footer";
16+
@use "generic-header";
1617
@use "header";
1718
@use "hint";
1819
@use "input";

‎packages/govuk-frontend/src/govuk/components/generic-header/README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Generic Header
2+
3+
## Installation
4+
5+
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
6+
7+
## Guidance and Examples
8+
9+
Find out when to use the header component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/generic-header).
10+
11+
## Component options
12+
13+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
14+
15+
See [options table](https://design-system.service.gov.uk/components/generic-header/#options-generic-header-example) for details.

‎packages/govuk-frontend/src/govuk/components/generic-header/_generic-header.import.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@use "../../settings/warnings--internal";
2+
3+
@include warnings--internal.component-scss-file-warning("generic-header");
4+
5+
@import "index";

‎packages/govuk-frontend/src/govuk/components/generic-header/_index.import.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@use "mixin";
2+
3+
@import "../../base";
4+
5+
@include govuk-exports("govuk/component/generic-header") {
6+
@include mixin.styles;
7+
}

‎packages/govuk-frontend/src/govuk/components/generic-header/_index.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@use "../../custom-properties";
2+
@use "mixin";
3+
4+
@include mixin.styles;

‎packages/govuk-frontend/src/govuk/components/generic-header/_mixin.scss‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
////
2+
/// @group components/generic-header
3+
////
4+
5+
@use "../../base";
6+
7+
/// Shared block header styles, with automatic background setting
8+
///
9+
/// @param {String} $background - background colour of header
10+
/// @access private
11+
@mixin header-styles($background: base.govuk-colour("black")) {
12+
@include base.govuk-font($size: 16, $line-height: 1);
13+
14+
// Add a transparent bottom border for forced-colour modes
15+
border-bottom: 1px solid transparent;
16+
color: base.govuk-colour("white");
17+
background: $background;
18+
19+
@media print {
20+
border-bottom-width: 0;
21+
color: base.govuk-colour("black");
22+
background: transparent;
23+
}
24+
}
25+
26+
/// Shared header logo container element styles, with automating padding setting
27+
///
28+
/// @param {String} $padding-top - top padding of logo container
29+
/// @param {String} $padding-bottom - bottom padding of logo container
30+
/// @access private
31+
@mixin header-logo-styles($padding-top: base.govuk-spacing(3), $padding-bottom: base.govuk-spacing(3)) {
32+
box-sizing: border-box;
33+
padding-top: $padding-top;
34+
padding-bottom: $padding-bottom;
35+
}
36+
37+
/// Shared header logo link element styles
38+
///
39+
/// @access private
40+
@mixin header-link-styles {
41+
// Avoid using the `base.govuk-link-common` mixin because the links in the
42+
// header get a special treatment, because:
43+
//
44+
// - underlines are only visible on hover
45+
// - all links get a 3px underline regardless of text size, as there are
46+
// multiple grouped elements close to one another and having slightly
47+
// different underline widths looks unbalanced
48+
//
49+
// Font size needs to be set on the link so that the box sizing is correct
50+
// in Firefox
51+
display: inline;
52+
margin-right: base.govuk-spacing(2);
53+
font-size: 30px; // We don't have a mixin that produces 30px font size
54+
text-decoration: none;
55+
56+
@include base.govuk-link-style-inverse;
57+
58+
&:link,
59+
&:visited {
60+
text-decoration: none;
61+
}
62+
63+
&:hover,
64+
&:active {
65+
// Negate the added border
66+
$link-underline-thickness: 3px;
67+
margin-bottom: $link-underline-thickness * -1;
68+
border-bottom: $link-underline-thickness solid;
69+
}
70+
71+
&:focus {
72+
// Remove any borders that show when focused and hovered.
73+
margin-bottom: 0;
74+
border-bottom: 0;
75+
76+
@include base.govuk-focused-text;
77+
}
78+
79+
@media print {
80+
&:link,
81+
&:visited {
82+
color: base.govuk-colour("black");
83+
}
84+
85+
// Do not append link href to GOV.UK link when printing (e.g. '(/)')
86+
&::after {
87+
display: none;
88+
}
89+
}
90+
}
91+
92+
/// @access private
93+
@mixin styles {
94+
.govuk-generic-header {
95+
@include header-styles;
96+
}
97+
98+
.govuk-generic-header__container--full-width {
99+
padding: 0 base.govuk-spacing(3);
100+
}
101+
102+
.govuk-generic-header__logo {
103+
@include header-logo-styles;
104+
}
105+
106+
.govuk-generic-header__homepage-link {
107+
@include header-link-styles;
108+
}
109+
}

‎packages/govuk-frontend/src/govuk/components/generic-header/accessibility.puppeteer.test.mjs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { axe, render } from '@govuk-frontend/helpers/puppeteer'
2+
import { getExamples } from '@govuk-frontend/lib/components'
3+
4+
describe('/components/generic-header', () => {
5+
describe('component examples', () => {
6+
it('passes accessibility tests', async () => {
7+
const examples = await getExamples('generic-header')
8+
9+
for (const exampleName in examples) {
10+
await render(page, 'generic-header', examples[exampleName])
11+
await expect(axe(page)).resolves.toHaveNoViolations()
12+
}
13+
}, 120000)
14+
})
15+
})

0 commit comments

Comments
 (0)