Skip to content

Commit 7c4cb34

Browse files
nicki-nhsnicki-nhs
committed
CCM-8873 Extract code and aria into component
1 parent 732917a commit 7c4cb34

File tree

11 files changed

+150
-69
lines changed

11 files changed

+150
-69
lines changed

‎frontend/src/__tests__/components/atoms/CodeExample.test.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { render } from '@testing-library/react';
2+
import CodeExample from '@atoms/CodeExample/CodeExample';
3+
4+
describe('CodeExample component', () => {
5+
it('renders component correctly', () => {
6+
const container = render(
7+
<CodeExample ariaId='test-id' ariaText='This is an example of markdown:'>
8+
# A test example
9+
</CodeExample>
10+
);
11+
12+
expect(container.asFragment()).toMatchSnapshot();
13+
});
14+
15+
it('renders component correctly when optional class is provided', () => {
16+
const container = render(
17+
<CodeExample
18+
ariaId='test-id'
19+
ariaText='This is an example of markdown:'
20+
codeClassName='test-class'
21+
>
22+
# A test example
23+
</CodeExample>
24+
);
25+
26+
expect(container.asFragment()).toMatchSnapshot();
27+
});
28+
});

‎frontend/src/__tests__/components/atoms/__snapshots__/CodeExample.test.tsx.snap‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`CodeExample component renders component correctly 1`] = `
4+
<DocumentFragment>
5+
<span
6+
class="nhsuk-u-visually-hidden"
7+
id="test-id"
8+
>
9+
This is an example of markdown:
10+
</span>
11+
<code
12+
aria-describedby="test-id"
13+
>
14+
# A test example
15+
</code>
16+
</DocumentFragment>
17+
`;
18+
19+
exports[`CodeExample component renders component correctly when optional class is provided 1`] = `
20+
<DocumentFragment>
21+
<span
22+
class="nhsuk-u-visually-hidden"
23+
id="test-id"
24+
>
25+
This is an example of markdown:
26+
</span>
27+
<code
28+
aria-describedby="test-id"
29+
class="test-class"
30+
>
31+
# A test example
32+
</code>
33+
</DocumentFragment>
34+
`;

‎frontend/src/components/atoms/CodeExample/CodeExample.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { HTMLProps } from 'react';
2+
3+
interface CodeExampleProps extends HTMLProps<HTMLDivElement> {
4+
ariaText: string;
5+
ariaId: string;
6+
codeClassName?: string;
7+
}
8+
9+
const CodeExample: React.FC<CodeExampleProps> = ({
10+
ariaText,
11+
ariaId,
12+
children,
13+
codeClassName,
14+
}) => {
15+
return (
16+
<>
17+
<span id={ariaId} className='nhsuk-u-visually-hidden'>
18+
{ariaText}
19+
</span>
20+
<code aria-describedby={ariaId} className={codeClassName}>
21+
{children}
22+
</code>
23+
</>
24+
);
25+
};
26+
27+
export default CodeExample;

‎frontend/src/components/molecules/MessageFormatting/formats/BoldText.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Details } from 'nhsuk-react-components';
22
import content from '@content/content';
3+
import CodeExample from '@atoms/CodeExample/CodeExample';
34

45
const { boldText, hiddenCodeBlockDescription } =
56
content.components.messageFormatting;
@@ -11,12 +12,12 @@ export const BoldText = () => (
1112
</Details.Summary>
1213
<Details.Text data-testid='bold-text-text'>
1314
<p>{boldText.text}</p>
14-
<span id='bold-text-description' className='nhsuk-u-visually-hidden'>
15-
{hiddenCodeBlockDescription}
16-
</span>
17-
<code aria-describedby='bold-text-description'>
15+
<CodeExample
16+
ariaText={hiddenCodeBlockDescription}
17+
ariaId='bold-text-description'
18+
>
1819
{boldText.codeBlockText}
19-
</code>
20+
</CodeExample>
2021
</Details.Text>
2122
</Details>
2223
);

‎frontend/src/components/molecules/MessageFormatting/formats/BulletList.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Details } from 'nhsuk-react-components';
22
import content from '@content/content';
33
import styles from '../MessageFormatting.module.scss';
4+
import CodeExample from '@atoms/CodeExample/CodeExample';
45

56
const { bulletLists, hiddenCodeBlockDescription } =
67
content.components.messageFormatting;
@@ -12,16 +13,16 @@ export const BulletList = () => (
1213
</Details.Summary>
1314
<Details.Text data-testid='bullet-lists-text'>
1415
<p>{bulletLists.text}</p>
15-
<span className='nhsuk-u-visually-hidden' id='bullet-list-description'>
16-
{hiddenCodeBlockDescription}
17-
</span>
18-
<code aria-describedby='bullet-list-description'>
16+
<CodeExample
17+
ariaText={hiddenCodeBlockDescription}
18+
ariaId='bullet-list-description'
19+
>
1920
{bulletLists.codeBlockText.map(({ id, item }) => (
2021
<span className={styles.inlineText} key={id}>
2122
{item}
2223
</span>
2324
))}
24-
</code>
25+
</CodeExample>
2526
</Details.Text>
2627
</Details>
2728
);

‎frontend/src/components/molecules/MessageFormatting/formats/Headings.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Details } from 'nhsuk-react-components';
22
import content from '@content/content';
3+
import CodeExample from '@atoms/CodeExample/CodeExample';
34

45
const { headings, hiddenCodeBlockDescription } =
56
content.components.messageFormatting;
@@ -11,19 +12,19 @@ export const Headings = () => (
1112
</Details.Summary>
1213
<Details.Text data-testid='headings-text'>
1314
<p>{headings.text1}</p>
14-
<span className='nhsuk-u-visually-hidden' id='heading-description'>
15-
{hiddenCodeBlockDescription}
16-
</span>
17-
<code aria-describedby='heading-description'>
15+
<CodeExample
16+
ariaText={hiddenCodeBlockDescription}
17+
ariaId='heading-description'
18+
>
1819
{headings.codeBlock.text1}
19-
</code>
20+
</CodeExample>
2021
<p className='nhsuk-u-margin-top-4'>{headings.text2}</p>
21-
<span className='nhsuk-u-visually-hidden' id='subheading-description'>
22-
{hiddenCodeBlockDescription}
23-
</span>
24-
<code aria-describedby='subheading-description'>
22+
<CodeExample
23+
ariaText={hiddenCodeBlockDescription}
24+
ariaId='subheading-description'
25+
>
2526
{headings.codeBlock.text2}
26-
</code>
27+
</CodeExample>
2728
</Details.Text>
2829
</Details>
2930
);

‎frontend/src/components/molecules/MessageFormatting/formats/HorizontalRule.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Details } from 'nhsuk-react-components';
22
import content from '@content/content';
33
import styles from '../MessageFormatting.module.scss';
4+
import CodeExample from '@atoms/CodeExample/CodeExample';
45

56
const { horizontalLine, hiddenCodeBlockDescription } =
67
content.components.messageFormatting;
@@ -12,20 +13,15 @@ export const HorizontalRule = () => (
1213
</Details.Summary>
1314
<Details.Text data-testid='horizontal-lines-text'>
1415
<p>{horizontalLine.text}</p>
15-
<span
16-
className='nhsuk-u-visually-hidden'
17-
id='horizontal-rule-description'
18-
>
19-
{hiddenCodeBlockDescription}
20-
</span>
21-
<code
22-
className={styles.horizontalLine}
23-
aria-describedby='horizontal-rule-description'
16+
<CodeExample
17+
ariaText={hiddenCodeBlockDescription}
18+
ariaId='horizontal-rule-description'
19+
codeClassName={styles.horizontalLine}
2420
>
2521
{horizontalLine.codeBlockText.map(({ id, item }) => (
2622
<p key={id}>{item}</p>
2723
))}
28-
</code>
24+
</CodeExample>
2925
</Details.Text>
3026
</Details>
3127
);

‎frontend/src/components/molecules/MessageFormatting/formats/LineBreaksAndParagraphs.tsx‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Details } from 'nhsuk-react-components';
22
import content from '@content/content';
33
import styles from '../MessageFormatting.module.scss';
4+
import CodeExample from '@atoms/CodeExample/CodeExample';
45

56
const { lineBreaksAndParagraphs, hiddenCodeBlockDescription } =
67
content.components.messageFormatting;
@@ -12,31 +13,26 @@ export const LineBreaksAndParagraphs = () => (
1213
</Details.Summary>
1314
<Details.Text data-testid='lines-breaks-and-paragraphs-text'>
1415
<p>{lineBreaksAndParagraphs.text1}</p>
15-
<span className='nhsuk-u-visually-hidden' id='linebreak-description'>
16-
{hiddenCodeBlockDescription}
17-
</span>
18-
<code aria-describedby='linebreak-description'>
16+
<CodeExample
17+
ariaText={hiddenCodeBlockDescription}
18+
ariaId='linebreak-description'
19+
>
1920
{lineBreaksAndParagraphs.codeBlockText.map(({ id, item }) => (
2021
<span className={styles.inlineText} key={id}>
2122
{item}&nbsp;&nbsp;
2223
</span>
2324
))}
24-
</code>
25+
</CodeExample>
2526
<p className='nhsuk-u-margin-top-4'>{lineBreaksAndParagraphs.text2}</p>
26-
<span
27-
className='nhsuk-u-visually-hidden'
28-
id='paragraph-break-description'
29-
>
30-
{hiddenCodeBlockDescription}
31-
</span>
32-
<code
33-
className={styles.codeLine}
34-
aria-describedby='paragraph-break-description'
27+
<CodeExample
28+
ariaText={hiddenCodeBlockDescription}
29+
ariaId='paragraph-break-description'
30+
codeClassName={styles.codeLine}
3531
>
3632
{lineBreaksAndParagraphs.codeBlockText.map(({ id, item }) => (
3733
<p key={id}>{item}</p>
3834
))}
39-
</code>
35+
</CodeExample>
4036
</Details.Text>
4137
</Details>
4238
);

‎frontend/src/components/molecules/MessageFormatting/formats/LinksAndUrls.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Details } from 'nhsuk-react-components';
22
import content from '@content/content';
33
import { JSX } from 'react';
4+
import CodeExample from '@atoms/CodeExample/CodeExample';
45

56
const { linksAndUrls, hiddenCodeBlockDescription } =
67
content.components.messageFormatting;
@@ -13,12 +14,12 @@ const LinksAndUrls = ({ children }: { children?: JSX.Element }) => (
1314
<Details.Text data-testid='link-and-url-text'>
1415
<p>{linksAndUrls.text1}</p>
1516
<p>{linksAndUrls.text2}</p>
16-
<span className='nhsuk-u-visually-hidden' id='link-url-description'>
17-
{hiddenCodeBlockDescription}
18-
</span>
19-
<code aria-describedby='link-url-description'>
17+
<CodeExample
18+
ariaText={hiddenCodeBlockDescription}
19+
ariaId='link-url-description'
20+
>
2021
{linksAndUrls.codeBlockText.text1}
21-
</code>
22+
</CodeExample>
2223
{children}
2324
</Details.Text>
2425
</Details>
@@ -31,15 +32,12 @@ export const LinksAndUrlsMarkdown = () => (
3132
<>
3233
<p className='nhsuk-u-margin-top-4'>{linksAndUrls.text3}</p>
3334
<p>{linksAndUrls.text4}</p>
34-
<span
35-
className='nhsuk-u-visually-hidden'
36-
id='link-url-markdown-description'
35+
<CodeExample
36+
ariaText={hiddenCodeBlockDescription}
37+
ariaId='link-url-markdown-description'
3738
>
38-
{hiddenCodeBlockDescription}
39-
</span>
40-
<code aria-describedby='link-url-markdown-description'>
4139
{linksAndUrls.codeBlockText.text2}
42-
</code>
40+
</CodeExample>
4341
</>
4442
</LinksAndUrls>
4543
);

‎frontend/src/components/molecules/MessageFormatting/formats/NumberedList.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Details } from 'nhsuk-react-components';
22
import content from '@content/content';
33
import styles from '../MessageFormatting.module.scss';
4+
import CodeExample from '@atoms/CodeExample/CodeExample';
45

56
const { numberedLists, hiddenCodeBlockDescription } =
67
content.components.messageFormatting;
@@ -12,16 +13,16 @@ export const NumberedList = () => (
1213
</Details.Summary>
1314
<Details.Text data-testid='numbered-list-text'>
1415
<p>{numberedLists.text}</p>
15-
<span className='nhsuk-u-visually-hidden' id='numbered-list-description'>
16-
{hiddenCodeBlockDescription}
17-
</span>
18-
<code aria-describedby='numbered-list-description'>
16+
<CodeExample
17+
ariaText={hiddenCodeBlockDescription}
18+
ariaId='numbered-list-description'
19+
>
1920
{numberedLists.codeBlockText.map(({ id, item }) => (
2021
<span className={styles.inlineText} key={id}>
2122
{item}
2223
</span>
2324
))}
24-
</code>
25+
</CodeExample>
2526
</Details.Text>
2627
</Details>
2728
);

0 commit comments

Comments
 (0)