Skip to content

Commit 8989b35

Browse files
nicki-nhsnicki-nhs
committed
CCM-10893 New header WIP
1 parent 264c778 commit 8989b35

File tree

4 files changed

+125
-2
lines changed

4 files changed

+125
-2
lines changed

‎frontend/src/components/layouts/client/client-layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
import { Amplify } from 'aws-amplify';
44
import { Authenticator } from '@aws-amplify/ui-react';
5-
import { NHSNotifyHeader } from '@molecules/Header/Header';
65
import { NHSNotifyContainer } from '@layouts/container/container';
76
import { NHSNotifyFooter } from '@molecules/Footer/Footer';
87
import { NHSNotifySkipLink } from '@atoms/NHSNotifySkipLink/NHSNotifySkipLink';
98
import { LogoutWarningModal } from '@molecules/LogoutWarningModal/LogoutWarningModal';
9+
import NhsNotifyHeaderWithAccount from '@molecules/HeaderWithAccount/HeaderWithAccount';
1010
// eslint-disable-next-line import/no-unresolved
1111
import amplifyConfig from '@/amplify_outputs.json';
1212

@@ -23,7 +23,7 @@ export function ClientLayout({ children }: { children: React.ReactNode }) {
2323
return (
2424
<Authenticator.Provider>
2525
<NHSNotifySkipLink />
26-
<NHSNotifyHeader />
26+
<NhsNotifyHeaderWithAccount />
2727
<NHSNotifyContainer>{children}</NHSNotifyContainer>
2828
<NHSNotifyFooter />
2929
<LogoutWarningModal

‎frontend/src/components/molecules/HeaderWithAccount/HeaderWithAccount.module.scss‎

Whitespace-only changes.

‎frontend/src/components/molecules/HeaderWithAccount/HeaderWithAccount.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import content from '@content/content';
2+
import { AuthLink } from '@molecules/AuthLink/AuthLink';
3+
import { truncate } from '@utils/truncate';
4+
import Link from 'next/link';
5+
import React from 'react';
6+
7+
interface NhsNotifyHeaderWithAccountProps {
8+
userName?: string;
9+
_accountUrl?: string;
10+
_signOutUrl?: string;
11+
dataTestId?: string;
12+
}
13+
14+
const NhsNotifyHeaderWithAccount: React.FC<NhsNotifyHeaderWithAccountProps> = ({
15+
userName,
16+
_accountUrl,
17+
_signOutUrl,
18+
dataTestId,
19+
}) => (
20+
<header
21+
className='nhsuk-header'
22+
role='banner'
23+
data-module='nhsuk-header'
24+
data-testid={dataTestId ?? 'page-header'}
25+
>
26+
<div className='nhsuk-header__container nhsuk-width-container'>
27+
<div className='nhsuk-header__service'>
28+
<Link
29+
className='nhsuk-header__service-logo'
30+
href='/message-templates'
31+
aria-label={content.components.header.links.logoLink.ariaLabel}
32+
>
33+
<svg
34+
className='nhsuk-header__logo'
35+
xmlns='http://www.w3.org/2000/svg'
36+
viewBox='0 0 200 80'
37+
height='40'
38+
width='100'
39+
focusable='false'
40+
role='img'
41+
aria-label='NHS'
42+
>
43+
<title>{content.components.header.links.logoLink.logoTitle}</title>
44+
<path
45+
fill='currentcolor'
46+
d='M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z'
47+
/>
48+
</svg>
49+
<span className='nhsuk-header__service-name'>
50+
{content.components.header.serviceName}
51+
</span>
52+
</Link>
53+
</div>
54+
<nav className='nhsuk-header__account' aria-label='Account'>
55+
<ul className='nhsuk-header__account-list'>
56+
<li className='nhsuk-header__account-item'>
57+
<svg
58+
className='nhsuk-icon nhsuk-icon__user'
59+
xmlns='http://www.w3.org/2000/svg'
60+
viewBox='0 0 24 24'
61+
aria-hidden='true'
62+
focusable='false'
63+
>
64+
<path d='M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z'></path>
65+
</svg>
66+
{truncate('Florence Nightingale (Regional Manager)')}
67+
</li>
68+
<li className='nhsuk-header__account-item'>
69+
{truncate('Client name')}
70+
</li>
71+
<li className='nhsuk-header__account-item'>
72+
<AuthLink className='nhsuk-header__account-link' />
73+
</li>
74+
</ul>
75+
</nav>
76+
</div>
77+
<nav className='nhsuk-header__navigation' aria-label='Menu'>
78+
<div className='nhsuk-header__navigation-container nhsuk-width-container'>
79+
<ul className='nhsuk-header__navigation-list'>
80+
{content.components.header.nav.map(({ text, href }, index) => {
81+
return (
82+
<li className='nhsuk-header__navigation-item'>
83+
<Link className='nhsuk-header__navigation-link' href={href}>
84+
{text}
85+
</Link>
86+
</li>
87+
);
88+
})}
89+
<li className='nhsuk-header__menu' hidden>
90+
<button
91+
className='nhsuk-header__menu-toggle nhsuk-header__navigation-link'
92+
id='toggle-menu'
93+
aria-expanded='false'
94+
>
95+
<span className='nhsuk-u-visually-hidden'>Browse </span>More
96+
<svg
97+
className='nhsuk-icon nhsuk-icon__chevron-down'
98+
xmlns='http://www.w3.org/2000/svg'
99+
viewBox='0 0 24 24'
100+
aria-hidden='true'
101+
focusable='false'
102+
>
103+
<path d='M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z'></path>
104+
</svg>
105+
</button>
106+
</li>
107+
</ul>
108+
</div>
109+
</nav>
110+
</header>
111+
);
112+
113+
export default NhsNotifyHeaderWithAccount;

‎frontend/src/content/content.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,16 @@ const header = {
2929
logoTitle: 'NHS logo',
3030
},
3131
},
32+
nav: [
33+
{
34+
text: 'Templates',
35+
href: '/message-templates'
36+
},
37+
{
38+
text: 'Message plans',
39+
href: '/message-plans'
40+
}
41+
]
3242
};
3343

3444
const footer = {

0 commit comments

Comments
 (0)