Skip to content

Commit ae73a17

Browse files
New: [AEA-4513] - Header component (#151)
## Summary - Routine Change ### Details Introduces functional header to app. Responsive behaviour should kick in whenever space become insufficient for a menu item. Placeholder# links are used purely to demonstrate / test this functionality --------- Co-authored-by: anthony-nhs <121869075+anthony-nhs@users.noreply.github.com>
1 parent 8b9079d commit ae73a17

File tree

7 files changed

+234
-74
lines changed

7 files changed

+234
-74
lines changed
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
import "@testing-library/jest-dom";
3+
import { render, screen } from "@testing-library/react";
4+
import EpsHeader from "../components/EpsHeader";
5+
import {
6+
HEADER_SERVICE,
7+
HEADER_CONFIRM_ROLE_BUTTON,
8+
HEADER_CHANGE_ROLE_BUTTON,
9+
} from "../constants/ui-strings/HeaderStrings";
10+
11+
// Mock useRouter:
12+
jest.mock("next/navigation", () => ({
13+
useRouter() {
14+
return {
15+
prefetch: () => null
16+
};
17+
},
18+
usePathname: () => "/",
19+
}));
20+
describe("EpsHeader", () => {
21+
beforeEach(() => {
22+
render(<EpsHeader />);
23+
})
24+
it("Successfully renders a header component, evidenced by role of 'banner", () => {
25+
const header = screen.getByRole("banner");
26+
expect(header).toBeInTheDocument();
27+
});
28+
it("Extracts HEADER_SERVICE value", () => {
29+
const serviceName = HEADER_SERVICE;
30+
expect(serviceName).toBeTruthy();
31+
});
32+
it("Displays service name in header matching that from HEADER_SERVICE data", () => {
33+
expect(screen.getByTestId("eps_header_serviceName")).toHaveTextContent(
34+
HEADER_SERVICE
35+
);
36+
});
37+
// check behavior of links in header
38+
// confirm role link
39+
it("Extracts HEADER_CONFIRM_ROLE_BUTTON value", () => {
40+
const confirmRoleLink = HEADER_CONFIRM_ROLE_BUTTON;
41+
expect(confirmRoleLink).toBeTruthy();
42+
});
43+
it("Displays correct label for confirm role link from HEADER_CONFIRM_ROLE_BUTTON data", () => {
44+
expect(screen.getByTestId("eps_header_confirmRoleLink")).toHaveTextContent(
45+
HEADER_CONFIRM_ROLE_BUTTON
46+
);
47+
});
48+
// change role link -- test will be more specific as routes are added
49+
it("Extracts HEADER_CHANGE_ROLE_BUTTON value", () => {
50+
const changeRoleLink = HEADER_CHANGE_ROLE_BUTTON;
51+
expect(changeRoleLink).toBeTruthy();
52+
});
53+
it("Check that change role link is not displayed ", () => {
54+
expect(screen.queryByTestId("eps_header_changeRoleLink")).toBeNull();
55+
});
56+
});

packages/cpt-ui/app/layout.tsx

Lines changed: 3 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import React from "react";
33

44
import 'nhsuk-frontend/dist/nhsuk.css';
5-
import { Header } from 'nhsuk-react-components';
5+
import EpsHeader from '../components/EpsHeader'
66
import EpsFooter from '../components/EpsFooter'
77

88
export default function RootLayout({
@@ -12,42 +12,12 @@ export default function RootLayout({
1212
}) {
1313
return (
1414
<html lang="en">
15-
1615
<body>
17-
<Header transactional >
18-
<Header.Container>
19-
<Header.Logo href="/" />
20-
<Header.ServiceName href="/">
21-
Clinical prescription tracking service
22-
</Header.ServiceName>
23-
24-
25-
{/* <Header.Nav>
26-
27-
<Header.NavItem href="/social-care-and-support">
28-
Care and support
29-
</Header.NavItem>
30-
<Header.NavItem href="/news">
31-
Health news
32-
</Header.NavItem>
33-
<Header.NavItem href="/service-search">
34-
Services near you
35-
</Header.NavItem>
36-
<Header.NavItem
37-
home
38-
href="/"
39-
>
40-
Home
41-
</Header.NavItem>
42-
<Header.NavDropdownMenu />
43-
</Header.Nav> */}
44-
45-
</Header.Container>
46-
</Header>
47-
16+
<EpsHeader />
4817
{children}
4918
<EpsFooter />
5019
</body>
20+
5121
</html>
5222
)
5323
}

packages/cpt-ui/app/page.tsx

Lines changed: 0 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -13,46 +13,6 @@ export default function Page() {
1313
<p>Etiam lobortis! dolor ac facilisis efficitur, metus leo posuere est, non pharetra orci velit non velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut finibus sagittis diam ac feugiat. Curabitur eget venenatis arcu. Ut commodo tempor sollicitudin. Nulla nec congue mauris. Sed cursus interdum arcu. Morbi lacinia lorem ut ante feugiat, eu cursus nisi ultricies.</p>
1414
</Col>
1515
</Row>
16-
{/* <Row>
17-
<Container role="contentinfo">
18-
<Row>
19-
<Col width="full">
20-
<h1 className='nhsuk-heading-xl '>
21-
<span role="text">Select your role
22-
<span className="nhsuk-caption-l nhsuk-caption--bottom">
23-
<span className="nhsuk-u-visually-hidden"> - </span>
24-
Select the role you wish to use to access the service.
25-
</span></span></h1>
26-
</Col>
27-
</Row>
28-
<Row>
29-
<Col width='two-thirds'>
30-
<InsetText className="nhsuk-u-margin-top-0">
31-
<p>
32-
You are currently logged in at <span className='nhsuk-u-font-weight-bold tl-nhsuk-u-text-uppercase'>Greenes Pharmacy (ods:4ft)</span> with <strong>Health Professional Access Role</strong>.
33-
</p>
34-
</InsetText>
35-
<Button>
36-
Confirm and continue to find a prescription
37-
</Button>
38-
<p>Alternatively, you can choose a new role below.</p>
39-
40-
<Card clickable className='tl-nhsuk-newComponent'>
41-
<Card.Content>
42-
<Card.Heading className="nhsuk-heading-m">
43-
<Card.Link href="#">
44-
Introduction to care and support
45-
</Card.Link>
46-
</Card.Heading>
47-
<Card.Description>
48-
A quick guide for people who have care and support needs and their carers
49-
</Card.Description>
50-
</Card.Content>
51-
</Card>
52-
</Col>
53-
</Row>
54-
</Container>
55-
</Row> */}
5616
</Container>
5717
</main>
5818
)
Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
2+
.nhsuk-header.masthead {
3+
.nhsuk-width-container.nhsuk-header__container.masthead-container {
4+
min-width:100%;
5+
padding-left:24px;
6+
}
7+
.nhsuk-navigation-container{
8+
9+
.nhsuk-header__navigation-list {
10+
display:flex;
11+
right: -353px;
12+
position: absolute;
13+
left: unset;
14+
justify-content:flex-end;
15+
margin:0 16px 0 16px;
16+
gap:unset;
17+
.nhsuk-header__navigation-link {
18+
padding:12px 16px;
19+
}
20+
button.nhsuk-header__menu-toggle.nhsuk-header__navigation-link {
21+
padding-right:30px;
22+
}
23+
.nhsuk-header__drop-down {
24+
color:#005eb8;
25+
}
26+
}
27+
.nhsuk-header__drop-down {
28+
top:65px;
29+
background-color: #ffffff;
30+
border-bottom: 4px solid #f0f4f5;
31+
overflow: hidden;
32+
position: absolute;
33+
right: 0;
34+
left: auto;
35+
width: 100vw;
36+
.nhsuk-header__navigation-link {
37+
padding-left:0;
38+
}
39+
}
40+
}
41+
42+
@media (min-width: 48.0625em) {
43+
.nhsuk-header__container {
44+
margin: 0;
45+
}
46+
}
47+
48+
@media (min-width: 40.0625em) {
49+
.nhsuk-header__navigation-list {
50+
border-top-width:0;
51+
}
52+
.nhsuk-header__navigation-link {
53+
padding:12px 16px;
54+
}
55+
}
56+
57+
@media (max-width: 990px) {
58+
.nhsuk-header__container {
59+
margin: 0;
60+
}
61+
}
62+
63+
.nhsuk-width-container.nhsuk-header__container.masthead-container {
64+
width:460px;
65+
padding-left:24px;
66+
max-width:100%;
67+
}
68+
.nhsuk-navigation-container{
69+
position: relative;
70+
top: -63px;
71+
width: calc(100% - 440px);
72+
right: -102px;
73+
}
74+
75+
@media (max-width: 640px) {
76+
77+
padding-bottom:68px;
78+
.nhsuk-width-container.nhsuk-header__container.masthead-container {
79+
padding-left:10px;
80+
}
81+
.nhsuk-navigation {
82+
min-width:100%;
83+
max-width:100%;
84+
width:100vw;
85+
}
86+
.nhsuk-header {
87+
padding-bottom:68px;
88+
}
89+
// .nhsuk-navigation-container .nhsuk-header__navigation-list {
90+
// right: unset;
91+
// width: 100vw;
92+
// justify-content: flex-start;
93+
// left: -118px;
94+
// top: 64px;
95+
// padding-left: 16px;
96+
// }
97+
.nhsuk-navigation-container .nhsuk-header__navigation-list {
98+
right: unset;
99+
width: 100%;
100+
justify-content: flex-start;
101+
left: 0;
102+
top: 64px;
103+
padding-left: 0;
104+
min-width:100vw;
105+
margin-left:0;
106+
}
107+
108+
.nhsuk-width-container.nhsuk-header__container.masthead-container, .nhsuk-navigation-container {
109+
min-width:100vw;
110+
right:unset;
111+
}
112+
}
113+
}
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
'use client'
2+
import React from 'react'
3+
import Link from 'next/link';
4+
import "../assets/styles/header.scss"
5+
import { useRouter, usePathname } from 'next/navigation';
6+
import { Header } from "nhsuk-react-components";
7+
import {
8+
HEADER_SERVICE,
9+
HEADER_CONFIRM_ROLE_BUTTON,
10+
HEADER_CONFIRM_ROLE_TARGET,
11+
HEADER_CHANGE_ROLE_BUTTON,
12+
HEADER_CHANGE_ROLE_TARGET
13+
} from "../constants/ui-strings/HeaderStrings"
14+
15+
export default function EpsHeader() {
16+
const router = useRouter()
17+
const pathname = usePathname();
18+
console.log(router); // Query parameters
19+
return (
20+
<Header transactional className="masthead" id="eps-header" >
21+
<Header.Container className="masthead-container">
22+
<Header.Logo href="/" data-testid="eps_header_logoLink" />
23+
24+
<Header.ServiceName href="/" data-testid="eps_header_serviceName">
25+
{HEADER_SERVICE}
26+
</Header.ServiceName>
27+
<Header.Content />
28+
</Header.Container>
29+
<Header.Nav className="masthead-nav">
30+
<li className="nhsuk-header__navigation-item">
31+
<Link className="nhsuk-header__navigation-link" href='/' data-testid="eps_header_placeholder1">Placeholder 1</Link>
32+
</li>
33+
<li className="nhsuk-header__navigation-item">
34+
<Link className="nhsuk-header__navigation-link" href='/' data-testid="eps_header_placeholder2">Placeholder 2</Link>
35+
</li>
36+
{pathname != '/' ? (
37+
<li className="nhsuk-header__navigation-item">
38+
<Link className="nhsuk-header__navigation-link" href={HEADER_CHANGE_ROLE_TARGET} data-testid="eps_header_changeRoleLink">{HEADER_CHANGE_ROLE_BUTTON}</Link>
39+
</li>
40+
) :
41+
(
42+
<li className="nhsuk-header__navigation-item">
43+
<Link className="nhsuk-header__navigation-link" href={HEADER_CONFIRM_ROLE_TARGET} data-testid="eps_header_confirmRoleLink">{HEADER_CONFIRM_ROLE_BUTTON}</Link>
44+
</li>
45+
)
46+
}
47+
<li className="nhsuk-header__navigation-item">
48+
<Link className="nhsuk-header__navigation-link" href='/' data-testid="eps_header_placeholder3">Placeholder 3</Link>
49+
</li>
50+
{/* <Header.NavItem>Placeholder 3</Header.NavItem> */}
51+
<Header.NavDropdownMenu dropdownText="Menu" />
52+
</Header.Nav>
53+
</Header>
54+
)
55+
}
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export const FOOTER_COPYRIGHT = "© NHS England 2024"
1+
export const FOOTER_COPYRIGHT = "© NHS England"
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// HEADER strings
2+
export const HEADER_SERVICE = "Clinical prescription tracking service"
3+
export const HEADER_CONFIRM_ROLE_BUTTON = "Confirm Role"
4+
export const HEADER_CONFIRM_ROLE_TARGET = "confirmrole"
5+
export const HEADER_CHANGE_ROLE_BUTTON = "Change Role"
6+
export const HEADER_CHANGE_ROLE_TARGET = "changerole"

0 commit comments

Comments
 (0)