diff --git a/packages/components/footer/README.md b/packages/components/footer/README.md
index 82517ca9b..1de5ea8f7 100644
--- a/packages/components/footer/README.md
+++ b/packages/components/footer/README.md
@@ -524,23 +524,23 @@ Find out more about the footer component and when to use it in the [NHS digital
The footer Nunjucks macro takes the following arguments:
-| Name | Type | Required | Description |
-| ------------------------ | ------ | -------- | --------------------------------------------------------------------------------------------- |
-| **bottomBorder** | boolean | No | Set to "false" to remove the grey bottom border in the footer. |
-| **links** | array | No | Array of first column of navigation items for use in the footer. |
-| **links.[].url** | string | No | The href of a navigation item in the first column of the footer. |
-| **links.[].label** | string | No | The label of a navigation item in the first column of the footer.
-| **linksColumn2** | array | No | Array of second column of navigation items for use in the footer. |
-| **linksColumn2.[].url** | string | No | The href of a navigation item in the second column of the footer. |
-| **linksColumn2.[].label** | string | No | The label of a navigation item in the second column of the footer.
-| **linksColumn3** | array | No | Array of third column of navigation items for use in the footer. |
-| **linksColumn3.[].url** | string | No | The href of a navigation item in the third column of the footer. |
-| **linksColumn3.[].label** | string | No | The label of a navigation item in the third column of the footer.
-| **classes** | string | No | Optional additional classes to add to the footer container. Separate each class with a space. |
-| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the footer container. |
-| **copyright** | string | No | The label for the copyright notice in the footer. |
-| **metaLinks** | array | No | Array of policy navigation items for use in the footer. |
-| **metaLinks.[].url** | string | No | The href of a policy navigation item in the footer. |
-| **metaLinks.[].label** | string | No | The label of a policy navigation item in the |
+| Name | Type | Required | Description |
+| ------------------------- | ------- | -------- | --------------------------------------------------------------------------------------------- |
+| **bottomBorder** | boolean | No | Set to "false" to remove the grey bottom border in the footer. |
+| **links** | array | No | Array of first column of navigation items for use in the footer. |
+| **links.[].url** | string | No | The href of a navigation item in the first column of the footer. |
+| **links.[].label** | string | No | The label of a navigation item in the first column of the footer. |
+| **linksColumn2** | array | No | Array of second column of navigation items for use in the footer. |
+| **linksColumn2.[].url** | string | No | The href of a navigation item in the second column of the footer. |
+| **linksColumn2.[].label** | string | No | The label of a navigation item in the second column of the footer. |
+| **linksColumn3** | array | No | Array of third column of navigation items for use in the footer. |
+| **linksColumn3.[].url** | string | No | The href of a navigation item in the third column of the footer. |
+| **linksColumn3.[].label** | string | No | The label of a navigation item in the third column of the footer. |
+| **classes** | string | No | Optional additional classes to add to the footer container. Separate each class with a space. |
+| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the footer container. |
+| **copyright** | string | No | The label for the copyright notice in the footer. |
+| **metaLinks** | array | No | Array of policy navigation items for use in the footer. |
+| **metaLinks.[].url** | string | No | The href of a policy navigation item in the footer. |
+| **metaLinks.[].label** | string | No | The label of a policy navigation item in the |
If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).
diff --git a/packages/components/footer/_footer.scss b/packages/components/footer/_footer.scss
index 0666db7ff..7e7847824 100644
--- a/packages/components/footer/_footer.scss
+++ b/packages/components/footer/_footer.scss
@@ -42,7 +42,7 @@
padding-bottom: 0;
padding-right: 40px;
width: 75%;
-
+
&:last-child {
padding-right: 0;
}
diff --git a/packages/components/header/_header-organisation.scss b/packages/components/header/_header-organisation.scss
index e0b9409a4..94df27a70 100644
--- a/packages/components/header/_header-organisation.scss
+++ b/packages/components/header/_header-organisation.scss
@@ -96,7 +96,7 @@
color: $color_nhsuk-blue;
}
- @media (max-width: 450px) {
+ @media (max-width: 450px) {
font-size: 12px;
line-height: 18px;
}
diff --git a/packages/components/header/_header-transactional.scss b/packages/components/header/_header-transactional.scss
index 5f25716b8..da6ec81d7 100644
--- a/packages/components/header/_header-transactional.scss
+++ b/packages/components/header/_header-transactional.scss
@@ -28,7 +28,6 @@
}
.nhsuk-header--transactional {
-
.nhsuk-header__container {
justify-content: normal;
}
@@ -41,7 +40,6 @@
.nhsuk-logo {
@include nhsuk-logo-size-small;
}
-
}
.nhsuk-header--transactional__logo--only {
diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss
index 4f1277a9a..dcc5171dc 100644
--- a/packages/components/header/_header.scss
+++ b/packages/components/header/_header.scss
@@ -25,7 +25,7 @@
.nhsuk-header__container {
margin: 0 nhsuk-spacing(3);
max-width: $nhsuk-page-width;
- padding: 20px 0;
+ padding: 20px 0;
@include mq($until: tablet) {
padding-bottom: 0;
@@ -34,18 +34,16 @@
@include mq($from: tablet) {
border-bottom: 1px solid $color_transparent_nhsuk-white-20;
display: flex;
- justify-content:space-between;
+ justify-content: space-between;
margin: 0 nhsuk-spacing(5);
- }
-
+ }
+
@include mq($from: large-desktop) {
margin: 0 auto;
}
-
}
.nhsuk-header__logo {
-
@include mq($until: tablet) {
position: relative;
z-index: 1;
@@ -147,7 +145,6 @@
}
@include mq($from: tablet) {
-
&.js-show {
border-bottom: 0;
}
@@ -170,7 +167,7 @@
.nhsuk-header__search-form {
height: 100%;
overflow: visible;
-
+
@include mq($until: tablet) {
display: flex;
margin: nhsuk-spacing(3) 0 0;
@@ -379,7 +376,6 @@
@include mq($from: large-desktop) {
color: $color_nhsuk-white;
}
-
}
&:active,
@@ -402,7 +398,6 @@
color: $nhsuk-focus-text-color;
}
}
-
}
// menu toggle button, only shows when screen can't fit all nav items
@@ -414,7 +409,7 @@
border-top: nhsuk-spacing(1) solid transparent;
box-sizing: border-box;
cursor: pointer;
- margin: 0;
+ margin: 0;
overflow: visible;
position: relative;
right: 0;
@@ -443,8 +438,8 @@
}
.nhsuk-header__menu-toggle--visible {
- visibility: visible;
- display: block;
+ visibility: visible;
+ display: block;
}
.nhsuk-icon__chevron-down {
@@ -460,7 +455,6 @@
position: relative;
z-index: 10;
}
-
}
%nhsuk-navigation-list {
@@ -475,7 +469,7 @@
@include govuk-width-container;
width: 100%;
-
+
@include mq($from: desktop) {
display: flex;
justify-content: space-between;
@@ -494,7 +488,6 @@
position: relative;
}
-
// ul of hidden nav
.nhsuk-header__drop-down {
@extend %nhsuk-navigation-list;
diff --git a/tests/integration/jsdom/header.test.js b/tests/integration/jsdom/header.test.js
index 477dc5b0b..f1ff30633 100644
--- a/tests/integration/jsdom/header.test.js
+++ b/tests/integration/jsdom/header.test.js
@@ -1,7 +1,7 @@
-const Header = require('../../../packages/components/header/header');
+const Header = require('../../../packages/components/header/header')
describe('Header', () => {
- let header;
+ let header
beforeEach(() => {
document.body.innerHTML = `
@@ -14,35 +14,35 @@ describe('Header', () => {
- `;
+ `
- header = Header;
- });
+ header = Header
+ })
afterEach(() => {
- document.body.innerHTML = '';
- });
+ document.body.innerHTML = ''
+ })
test('mobile menu should open and close properly', () => {
- const mobileMenuToggleButton = document.querySelector('.nhsuk-header__menu-toggle');
+ const mobileMenuToggleButton = document.querySelector('.nhsuk-header__menu-toggle')
console.log(header)
- expect(header.menuIsOpen).toBe(false);
+ expect(header.menuIsOpen).toBe(false)
// Simulate clicking the mobile menu toggle button
- mobileMenuToggleButton.click();
- expect(header.menuIsOpen).toBe(true);
+ mobileMenuToggleButton.click()
+ expect(header.menuIsOpen).toBe(true)
// Simulate clicking the mobile menu close button
- header.mobileMenuCloseButton.click();
- expect(header.menuIsOpen).toBe(false);
- });
+ header.mobileMenuCloseButton.click()
+ expect(header.menuIsOpen).toBe(false)
+ })
test('calculateBreakpoints should set breakpoints correctly', () => {
- header.calculateBreakpoints();
- const expectedBreakpoints = [90, 175, 260]; // These values are based on the provided DOM structure
+ header.calculateBreakpoints()
+ const expectedBreakpoints = [90, 175, 260] // These values are based on the provided DOM structure
- expect(header.breakpoints).toEqual(expectedBreakpoints);
- });
+ expect(header.breakpoints).toEqual(expectedBreakpoints)
+ })
// Add more tests for other methods and functionality
-});
+})