-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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 <[email protected]>
- Loading branch information
1 parent
8b9079d
commit ae73a17
Showing
7 changed files
with
234 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import React from 'react'; | ||
| import "@testing-library/jest-dom"; | ||
| import { render, screen } from "@testing-library/react"; | ||
| import EpsHeader from "../components/EpsHeader"; | ||
| import { | ||
| HEADER_SERVICE, | ||
| HEADER_CONFIRM_ROLE_BUTTON, | ||
| HEADER_CHANGE_ROLE_BUTTON, | ||
| } from "../constants/ui-strings/HeaderStrings"; | ||
|
|
||
| // Mock useRouter: | ||
| jest.mock("next/navigation", () => ({ | ||
| useRouter() { | ||
| return { | ||
| prefetch: () => null | ||
| }; | ||
| }, | ||
| usePathname: () => "/", | ||
| })); | ||
| describe("EpsHeader", () => { | ||
| beforeEach(() => { | ||
| render(<EpsHeader />); | ||
| }) | ||
| it("Successfully renders a header component, evidenced by role of 'banner", () => { | ||
| const header = screen.getByRole("banner"); | ||
| expect(header).toBeInTheDocument(); | ||
| }); | ||
| it("Extracts HEADER_SERVICE value", () => { | ||
| const serviceName = HEADER_SERVICE; | ||
| expect(serviceName).toBeTruthy(); | ||
| }); | ||
| it("Displays service name in header matching that from HEADER_SERVICE data", () => { | ||
| expect(screen.getByTestId("eps_header_serviceName")).toHaveTextContent( | ||
| HEADER_SERVICE | ||
| ); | ||
| }); | ||
| // check behavior of links in header | ||
| // confirm role link | ||
| it("Extracts HEADER_CONFIRM_ROLE_BUTTON value", () => { | ||
| const confirmRoleLink = HEADER_CONFIRM_ROLE_BUTTON; | ||
| expect(confirmRoleLink).toBeTruthy(); | ||
| }); | ||
| it("Displays correct label for confirm role link from HEADER_CONFIRM_ROLE_BUTTON data", () => { | ||
| expect(screen.getByTestId("eps_header_confirmRoleLink")).toHaveTextContent( | ||
| HEADER_CONFIRM_ROLE_BUTTON | ||
| ); | ||
| }); | ||
| // change role link -- test will be more specific as routes are added | ||
| it("Extracts HEADER_CHANGE_ROLE_BUTTON value", () => { | ||
| const changeRoleLink = HEADER_CHANGE_ROLE_BUTTON; | ||
| expect(changeRoleLink).toBeTruthy(); | ||
| }); | ||
| it("Check that change role link is not displayed ", () => { | ||
| expect(screen.queryByTestId("eps_header_changeRoleLink")).toBeNull(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
|
|
||
| .nhsuk-header.masthead { | ||
| .nhsuk-width-container.nhsuk-header__container.masthead-container { | ||
| min-width:100%; | ||
| padding-left:24px; | ||
| } | ||
| .nhsuk-navigation-container{ | ||
|
|
||
| .nhsuk-header__navigation-list { | ||
| display:flex; | ||
| right: -353px; | ||
| position: absolute; | ||
| left: unset; | ||
| justify-content:flex-end; | ||
| margin:0 16px 0 16px; | ||
| gap:unset; | ||
| .nhsuk-header__navigation-link { | ||
| padding:12px 16px; | ||
| } | ||
| button.nhsuk-header__menu-toggle.nhsuk-header__navigation-link { | ||
| padding-right:30px; | ||
| } | ||
| .nhsuk-header__drop-down { | ||
| color:#005eb8; | ||
| } | ||
| } | ||
| .nhsuk-header__drop-down { | ||
| top:65px; | ||
| background-color: #ffffff; | ||
| border-bottom: 4px solid #f0f4f5; | ||
| overflow: hidden; | ||
| position: absolute; | ||
| right: 0; | ||
| left: auto; | ||
| width: 100vw; | ||
| .nhsuk-header__navigation-link { | ||
| padding-left:0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 48.0625em) { | ||
| .nhsuk-header__container { | ||
| margin: 0; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 40.0625em) { | ||
| .nhsuk-header__navigation-list { | ||
| border-top-width:0; | ||
| } | ||
| .nhsuk-header__navigation-link { | ||
| padding:12px 16px; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 990px) { | ||
| .nhsuk-header__container { | ||
| margin: 0; | ||
| } | ||
| } | ||
|
|
||
| .nhsuk-width-container.nhsuk-header__container.masthead-container { | ||
| width:460px; | ||
| padding-left:24px; | ||
| max-width:100%; | ||
| } | ||
| .nhsuk-navigation-container{ | ||
| position: relative; | ||
| top: -63px; | ||
| width: calc(100% - 440px); | ||
| right: -102px; | ||
| } | ||
|
|
||
| @media (max-width: 640px) { | ||
|
|
||
| padding-bottom:68px; | ||
| .nhsuk-width-container.nhsuk-header__container.masthead-container { | ||
| padding-left:10px; | ||
| } | ||
| .nhsuk-navigation { | ||
| min-width:100%; | ||
| max-width:100%; | ||
| width:100vw; | ||
| } | ||
| .nhsuk-header { | ||
| padding-bottom:68px; | ||
| } | ||
| // .nhsuk-navigation-container .nhsuk-header__navigation-list { | ||
| // right: unset; | ||
| // width: 100vw; | ||
| // justify-content: flex-start; | ||
| // left: -118px; | ||
| // top: 64px; | ||
| // padding-left: 16px; | ||
| // } | ||
| .nhsuk-navigation-container .nhsuk-header__navigation-list { | ||
| right: unset; | ||
| width: 100%; | ||
| justify-content: flex-start; | ||
| left: 0; | ||
| top: 64px; | ||
| padding-left: 0; | ||
| min-width:100vw; | ||
| margin-left:0; | ||
| } | ||
|
|
||
| .nhsuk-width-container.nhsuk-header__container.masthead-container, .nhsuk-navigation-container { | ||
| min-width:100vw; | ||
| right:unset; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| 'use client' | ||
| import React from 'react' | ||
| import Link from 'next/link'; | ||
| import "../assets/styles/header.scss" | ||
| import { useRouter, usePathname } from 'next/navigation'; | ||
| import { Header } from "nhsuk-react-components"; | ||
| import { | ||
| HEADER_SERVICE, | ||
| HEADER_CONFIRM_ROLE_BUTTON, | ||
| HEADER_CONFIRM_ROLE_TARGET, | ||
| HEADER_CHANGE_ROLE_BUTTON, | ||
| HEADER_CHANGE_ROLE_TARGET | ||
| } from "../constants/ui-strings/HeaderStrings" | ||
|
|
||
| export default function EpsHeader() { | ||
| const router = useRouter() | ||
| const pathname = usePathname(); | ||
| console.log(router); // Query parameters | ||
| return ( | ||
| <Header transactional className="masthead" id="eps-header" > | ||
| <Header.Container className="masthead-container"> | ||
| <Header.Logo href="/" data-testid="eps_header_logoLink" /> | ||
|
|
||
| <Header.ServiceName href="/" data-testid="eps_header_serviceName"> | ||
| {HEADER_SERVICE} | ||
| </Header.ServiceName> | ||
| <Header.Content /> | ||
| </Header.Container> | ||
| <Header.Nav className="masthead-nav"> | ||
| <li className="nhsuk-header__navigation-item"> | ||
| <Link className="nhsuk-header__navigation-link" href='/' data-testid="eps_header_placeholder1">Placeholder 1</Link> | ||
| </li> | ||
| <li className="nhsuk-header__navigation-item"> | ||
| <Link className="nhsuk-header__navigation-link" href='/' data-testid="eps_header_placeholder2">Placeholder 2</Link> | ||
| </li> | ||
| {pathname != '/' ? ( | ||
| <li className="nhsuk-header__navigation-item"> | ||
| <Link className="nhsuk-header__navigation-link" href={HEADER_CHANGE_ROLE_TARGET} data-testid="eps_header_changeRoleLink">{HEADER_CHANGE_ROLE_BUTTON}</Link> | ||
| </li> | ||
| ) : | ||
| ( | ||
| <li className="nhsuk-header__navigation-item"> | ||
| <Link className="nhsuk-header__navigation-link" href={HEADER_CONFIRM_ROLE_TARGET} data-testid="eps_header_confirmRoleLink">{HEADER_CONFIRM_ROLE_BUTTON}</Link> | ||
| </li> | ||
| ) | ||
| } | ||
| <li className="nhsuk-header__navigation-item"> | ||
| <Link className="nhsuk-header__navigation-link" href='/' data-testid="eps_header_placeholder3">Placeholder 3</Link> | ||
| </li> | ||
| {/* <Header.NavItem>Placeholder 3</Header.NavItem> */} | ||
| <Header.NavDropdownMenu dropdownText="Menu" /> | ||
| </Header.Nav> | ||
| </Header> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| export const FOOTER_COPYRIGHT = "© NHS England 2024" | ||
| export const FOOTER_COPYRIGHT = "© NHS England" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| // HEADER strings | ||
| export const HEADER_SERVICE = "Clinical prescription tracking service" | ||
| export const HEADER_CONFIRM_ROLE_BUTTON = "Confirm Role" | ||
| export const HEADER_CONFIRM_ROLE_TARGET = "confirmrole" | ||
| export const HEADER_CHANGE_ROLE_BUTTON = "Change Role" | ||
| export const HEADER_CHANGE_ROLE_TARGET = "changerole" |