Skip to content

Commit d5d9db4

Browse files
Isabella-MitchellIsabella-Mitchell
authored
Merge pull request #10901 from bbc/wsteam1-446-live-page-header
WSTEAM1-446: Live Page Header - Title & Description UX
2 parents eccd9e6 + 68b92c8 commit d5d9db4

File tree

11 files changed

+850
-335
lines changed

11 files changed

+850
-335
lines changed

‎data/pidgin/livePage/c7p765ynk9qt.json

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"contentId": "urn:bbc:tipo:topic:c7p765ynk9qt"
3333
}
3434
},
35+
"isLive": true,
3536
"summaryPoints": {
3637
"id": "urn:bbc:optimo:asset:c5x3899j84ro",
3738
"content": {

‎src/app/components/ThemeProvider/palette.ts

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const EBON = '#222222';
1515
export const GHOST = '#FDFDFD';
1616
export const GREY_10 = '#141414';
1717
export const GREY_11 = '#BABABA';
18+
export const GREY_1 = '#FEFEFE';
1819
export const GREY_2 = '#F6F6F6';
1920
export const GREY_3 = '#E6E8EA';
2021
export const GREY_4 = '#B0B2B4';
@@ -24,6 +25,7 @@ export const GREY_7 = '#3A3C3E';
2425
export const GREY_8 = '#202224';
2526
export const KINGFISHER = '#11708C';
2627
export const LE_TEAL = '#09838B';
28+
export const LIVE_LIGHT = '#00CCC7';
2729
export const LUNAR = '#F2F2F2';
2830
export const LUNAR_LIGHT = '#F8F8F8';
2931
export const METAL = '#6E6E73';

‎src/app/components/ThemeProvider/withThemeProvider.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
GHOST,
2626
GREY_10,
2727
GREY_11,
28+
GREY_1,
2829
GREY_2,
2930
GREY_3,
3031
GREY_4,
@@ -34,6 +35,7 @@ import {
3435
GREY_8,
3536
KINGFISHER,
3637
LE_TEAL,
38+
LIVE_LIGHT,
3739
LUNAR,
3840
LUNAR_LIGHT,
3941
METAL,
@@ -224,6 +226,7 @@ const withThemeProvider = ({
224226
GHOST,
225227
GREY_10,
226228
GREY_11,
229+
GREY_1,
227230
GREY_2,
228231
GREY_3,
229232
GREY_4,
@@ -233,6 +236,7 @@ const withThemeProvider = ({
233236
GREY_8,
234237
KINGFISHER,
235238
LE_TEAL,
239+
LIVE_LIGHT,
236240
LUNAR,
237241
LUNAR_LIGHT,
238242
METAL,

‎src/app/models/types/theming.ts

+2
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ interface Palette extends BrandPalette {
2424
GHOST: string;
2525
GREY_10: string;
2626
GREY_11: string;
27+
GREY_1: string;
2728
GREY_2: string;
2829
GREY_3: string;
2930
GREY_4: string;
@@ -33,6 +34,7 @@ interface Palette extends BrandPalette {
3334
GREY_8: string;
3435
KINGFISHER: string;
3536
LE_TEAL: string;
37+
LIVE_LIGHT: string;
3638
LUNAR: string;
3739
LUNAR_LIGHT: string;
3840
METAL: string;

‎ws-nextjs-app/pages/[service]/new_live/[id]/Header/index.stories.tsx

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import React from 'react';
2+
3+
import { withKnobs } from '@storybook/addon-knobs';
4+
import { ServiceContextProvider } from '../../../../../../src/app/contexts/ServiceContext';
5+
import { withServicesKnob } from '../../../../../../src/app/legacy/psammead/psammead-storybook-helpers/src';
6+
import ThemeProvider from '../../../../../../src/app/components/ThemeProvider';
7+
import Header from '.';
8+
import { StoryProps } from '../../../../../../src/app/models/types/storybook';
9+
import metadata from './metadata.json';
10+
11+
interface ComponentProps extends StoryProps {
12+
title: string;
13+
description?: string;
14+
showLiveLabel: boolean;
15+
}
16+
17+
const Component = ({
18+
service,
19+
variant,
20+
title,
21+
description,
22+
showLiveLabel,
23+
}: ComponentProps) => {
24+
return (
25+
<ThemeProvider service={service} variant={variant}>
26+
<ServiceContextProvider service={service} variant={variant}>
27+
<Header
28+
showLiveLabel={showLiveLabel}
29+
title={title}
30+
description={description}
31+
/>
32+
</ServiceContextProvider>
33+
</ThemeProvider>
34+
);
35+
};
36+
37+
export default {
38+
title: 'New Components/LivePageHeader',
39+
Component,
40+
parameters: {
41+
metadata,
42+
design: [
43+
{
44+
name: 'Group 0',
45+
type: 'figma',
46+
url: 'https://www.figma.com/file/ozHsWG5R9tETw6lBOU740V/Live-mvp-header---handover?type=design&node-id=95-266',
47+
},
48+
],
49+
},
50+
decorators: [withKnobs, withServicesKnob()],
51+
};
52+
53+
export const TitleOnlyWithLiveLabel = ({ service, variant }: StoryProps) => (
54+
<Component
55+
title="Prince Harry's hacking case against Mirror back in court"
56+
description=""
57+
showLiveLabel
58+
service={service}
59+
variant={variant}
60+
/>
61+
);
62+
export const TitleAndDescriptionWithLiveLabel = ({
63+
service,
64+
variant,
65+
}: StoryProps) => (
66+
<Component
67+
title="An kai wa jirgin kwashe yan Turkiyya hari a Sudan"
68+
description="Wannan shaft ne da ke kawo muku laqbarai daga sassan duniya daban-daban"
69+
showLiveLabel
70+
service={service}
71+
variant={variant}
72+
/>
73+
);
74+
export const RightToLeftWithLiveLabel = ({ service, variant }: StoryProps) => (
75+
<Component
76+
title="نااہلی کی مدت میں ترمیم: ’نواز شریف کی قیادت میں اسی سال ترقی کا سفر دوبارہ شروع ہوگا‘"
77+
description="سینیٹ نے الیکشن ایکٹ میں ترمیم کا بل کثرت رائے سے منظور کیا ہے جس کے مطابق جہاں آئین میں نااہلی کی مدت کا تعین نہیں وہاں نااہلی پانچ سال سے زیادہ نہیں ہو گی۔ وزیر داخلہ رانا ثنا اللہ کا کہنا ہے کہ نواز شریف کی قیادت میں 'اسی سال ترقی کا سفر دوبارہ شروع ہوگا۔' جبکہ سینیٹ میں اپوزیشن لیڈر شہزاد وسیم نے اسے 'ایک فرد سے متعلق قانون سازی' قرار دیا ہے۔"
78+
showLiveLabel
79+
service={service}
80+
variant={variant}
81+
/>
82+
);
83+
84+
export const TitleOnlyWithoutLiveLabel = ({ service, variant }: StoryProps) => (
85+
<Component
86+
title="Prince Harry's hacking case against Mirror back in court"
87+
description=""
88+
showLiveLabel={false}
89+
service={service}
90+
variant={variant}
91+
/>
92+
);
93+
export const TitleAndDescriptionWithoutLiveLabel = ({
94+
service,
95+
variant,
96+
}: StoryProps) => (
97+
<Component
98+
title="An kai wa jirgin kwashe yan Turkiyya hari a Sudan"
99+
description="Wannan shaft ne da ke kawo muku laqbarai daga sassan duniya daban-daban"
100+
showLiveLabel={false}
101+
service={service}
102+
variant={variant}
103+
/>
104+
);
105+
export const RightToLeftWithoutLiveLabel = ({
106+
service,
107+
variant,
108+
}: StoryProps) => (
109+
<Component
110+
title="نااہلی کی مدت میں ترمیم: ’نواز شریف کی قیادت میں اسی سال ترقی کا سفر دوبارہ شروع ہوگا‘"
111+
description="سینیٹ نے الیکشن ایکٹ میں ترمیم کا بل کثرت رائے سے منظور کیا ہے جس کے مطابق جہاں آئین میں نااہلی کی مدت کا تعین نہیں وہاں نااہلی پانچ سال سے زیادہ نہیں ہو گی۔ وزیر داخلہ رانا ثنا اللہ کا کہنا ہے کہ نواز شریف کی قیادت میں 'اسی سال ترقی کا سفر دوبارہ شروع ہوگا۔' جبکہ سینیٹ میں اپوزیشن لیڈر شہزاد وسیم نے اسے 'ایک فرد سے متعلق قانون سازی' قرار دیا ہے۔"
112+
showLiveLabel={false}
113+
service={service}
114+
variant={variant}
115+
/>
116+
);

‎ws-nextjs-app/pages/[service]/new_live/[id]/Header/index.test.tsx

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from 'react';
2+
import {
3+
render,
4+
screen,
5+
act,
6+
waitFor,
7+
} from '#app/components/react-testing-library-with-providers';
8+
import Header from './index';
9+
10+
describe('Live Page Header', () => {
11+
describe('title and description', () => {
12+
it('should render a title and description when provided', async () => {
13+
await act(async () => {
14+
render(
15+
<Header
16+
title="I am a title"
17+
description="I am a description"
18+
showLiveLabel
19+
/>,
20+
);
21+
});
22+
23+
expect(screen.getByText('I am a title')).toBeInTheDocument();
24+
expect(screen.getByText('I am a description')).toBeInTheDocument();
25+
});
26+
27+
it('should render a title if only a title is provided', async () => {
28+
await act(async () => {
29+
render(<Header title="I am a title" showLiveLabel />);
30+
});
31+
32+
expect(screen.getByText('I am a title')).toBeInTheDocument();
33+
});
34+
});
35+
describe('live label', () => {
36+
it('should render if the liveLabel flag is true', async () => {
37+
await act(async () => {
38+
render(<Header title="I am a title" showLiveLabel />);
39+
});
40+
41+
expect(screen.getByText('LIVE')).toBeInTheDocument();
42+
});
43+
44+
it('should not render if the liveLabel flag is false', async () => {
45+
render(<Header title="I am a title" showLiveLabel={false} />);
46+
47+
await waitFor(() => {
48+
expect(document.querySelectorAll('span').length).toBe(2);
49+
});
50+
});
51+
});
52+
describe('a11y', () => {
53+
it('should have id of content', async () => {
54+
await act(async () => {
55+
render(<Header title="I am a title" showLiveLabel />);
56+
});
57+
58+
const header = document.getElementById('content');
59+
expect(header).toBeInTheDocument();
60+
});
61+
62+
it('should have tab index of -1', async () => {
63+
await act(async () => {
64+
render(<Header title="I am a title" showLiveLabel />);
65+
});
66+
67+
const header = document.getElementById('content');
68+
const tabIndex = header?.getAttribute('tabIndex');
69+
70+
expect(tabIndex).toEqual('-1');
71+
});
72+
});
73+
});

‎ws-nextjs-app/pages/[service]/new_live/[id]/Header/index.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/** @jsx jsx */
2+
import React from 'react';
3+
import { jsx } from '@emotion/react';
4+
import Heading from '#app/components/Heading';
5+
import Text from '#app/components/Text';
6+
import VisuallyHiddenText from '#app/components/VisuallyHiddenText';
7+
import styles from './styles';
8+
9+
const Header = ({
10+
showLiveLabel,
11+
title,
12+
description,
13+
}: {
14+
showLiveLabel: boolean;
15+
title: string;
16+
description?: string;
17+
}) => {
18+
return (
19+
<div css={styles.backgroundColor}>
20+
<div css={styles.outerGrid}>
21+
<Heading
22+
size="trafalgar"
23+
level={1}
24+
css={styles.heading}
25+
id="content"
26+
tabIndex={-1}
27+
>
28+
{/* role="text" is required to correct a text splitting bug on iOS VoiceOver. */}
29+
{/* eslint-disable-next-line jsx-a11y/aria-role */}
30+
<span role="text" css={styles.innerGrid}>
31+
{showLiveLabel ? (
32+
<>
33+
<span css={styles.label} aria-hidden="true">
34+
LIVE
35+
</span>
36+
<VisuallyHiddenText lang="en-GB">Live, </VisuallyHiddenText>
37+
</>
38+
) : null}
39+
<span
40+
css={[styles.title, showLiveLabel && styles.layoutWithLiveLabel]}
41+
>
42+
{title}
43+
</span>
44+
</span>
45+
</Heading>
46+
{description && (
47+
<Text
48+
as="p"
49+
css={[
50+
styles.description,
51+
showLiveLabel && styles.layoutWithLiveLabel,
52+
]}
53+
>
54+
{description}
55+
</Text>
56+
)}
57+
</div>
58+
</div>
59+
);
60+
};
61+
62+
export default Header;

‎ws-nextjs-app/pages/[service]/new_live/[id]/Header/metadata.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"alpha": true,
3+
"lastUpdated": {
4+
"day": 20,
5+
"month": "June",
6+
"year": 2023
7+
},
8+
"uxAccessibilityDoc": {
9+
"done": true,
10+
"reference": {
11+
"url": "https://paper.dropbox.com/doc/WS-Live-page-Screen-reader-UX--B6nGXi8RstMyU9L1~H_UsGDhAg-8qm1UHDGVMhv5Qj9Q2mbi",
12+
"label": "Screen Reader UX"
13+
}
14+
},
15+
"acceptanceCriteria": {
16+
"done": true,
17+
"reference": {
18+
"url": "https://paper.dropbox.com/doc/Live-page-Accessibility-Acceptance-Criteria--B6l2NVpWSYLB4zFP4YReZf_pAg-KZQODmAf9tvodUlxsAVnA",
19+
"label": "Accessibility Acceptance Criteria"
20+
}
21+
},
22+
"swarm": {
23+
"done": false,
24+
"reference": {
25+
"url": "",
26+
"label": ""
27+
}
28+
}
29+
}

0 commit comments

Comments
 (0)