20 | );
21 |
22 | const DetailsSummary: FC
);
8 |
9 | expect(container).toMatchSnapshot('StandardDetails');
10 | });
11 |
12 | it('matches snapshot - with expander present', () => {
13 | const { container } = render(
);
14 |
15 | expect(container).toMatchSnapshot('ExpanderDetails');
16 | });
17 |
18 | it('adds expander classes', () => {
19 | const { container } = render(
);
20 |
21 | expect(container.querySelector('.nhsuk-expander')).toBeTruthy();
22 | });
23 |
24 | describe('Details.Summary', () => {
25 | it('matches snapshot', () => {
26 | const { container } = render(
5 |
8 |
9 | `;
10 |
11 | exports[`Details Details.Summary matches snapshot: Details.Summary 1`] = `
12 |
13 |
16 |
19 | Content
20 |
21 |
22 |
23 | `;
24 |
25 | exports[`Details Details.Text matches snapshot: Details.Text 1`] = `
26 |
27 |
33 | `;
34 |
35 | exports[`Details matches snapshot - with expander present: ExpanderDetails 1`] = `
36 |
30 | Text
31 |
32 |
37 |
40 |
41 | `;
42 |
43 | exports[`Details matches snapshot: StandardDetails 1`] = `
44 |
45 |
49 | `;
50 |
--------------------------------------------------------------------------------
/src/components/content-presentation/details/index.ts:
--------------------------------------------------------------------------------
1 | import Details from './Details';
2 |
3 | export default Details;
4 |
--------------------------------------------------------------------------------
/src/components/content-presentation/do-and-dont-list/__tests__/__snapshots__/DoAndDontList.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`DoAndDontList DoDontList.Item matches snapshot: DoDontList.Item 1`] = `
4 |
48 |
5 |
6 |
22 | Text
23 |
24 |
25 | `;
26 |
27 | exports[`DoAndDontList list type "do" matches snapshot: DoDontList-Do 1`] = `
28 |
29 |
42 | `;
43 |
44 | exports[`DoAndDontList list type "dont" matches snapshot: DoDontList-Dont 1`] = `
45 |
32 |
41 | 35 | Do 36 |
37 |
46 |
59 | `;
60 |
--------------------------------------------------------------------------------
/src/components/content-presentation/do-and-dont-list/index.ts:
--------------------------------------------------------------------------------
1 | import DoAndDontList from './DoAndDontList';
2 |
3 | export default DoAndDontList;
4 |
--------------------------------------------------------------------------------
/src/components/content-presentation/hero/__tests__/__snapshots__/Hero.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Hero Hero.Heading matches snapshot: Hero.Heading 1`] = `
4 |
49 |
58 | 52 | Don't 53 |
54 |
5 |
11 | `;
12 |
13 | exports[`Hero Hero.Text matches snapshot: Hero.Text 1`] = `
14 | 8 | Text 9 |
10 |
15 |
21 | `;
22 |
23 | exports[`Hero matches snapshot: Hero 1`] = `
24 | 18 | Text 19 |
20 |
25 |
28 |
29 | `;
30 |
--------------------------------------------------------------------------------
/src/components/content-presentation/hero/index.ts:
--------------------------------------------------------------------------------
1 | import Hero from './Hero';
2 |
3 | export default Hero;
4 |
--------------------------------------------------------------------------------
/src/components/content-presentation/icons/BaseIcon.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps } from 'react';
2 | import classNames from 'classnames';
3 |
4 | export interface BaseIconSVGProps extends HTMLProps
5 |
8 | ![]()
11 |
12 |
13 | `;
14 |
--------------------------------------------------------------------------------
/src/components/content-presentation/images/index.ts:
--------------------------------------------------------------------------------
1 | import Images from './Images';
2 |
3 | export default Images;
4 |
--------------------------------------------------------------------------------
/src/components/content-presentation/inset-text/InsetText.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps } from 'react';
2 | import classNames from 'classnames';
3 |
4 | interface InsetTextProps extends HTMLProps
15 | {visuallyHiddenText ? (
16 | {visuallyHiddenText}
17 | ) : null}
18 | {children}
19 |
20 | );
21 |
22 | export default InsetText;
23 |
--------------------------------------------------------------------------------
/src/components/content-presentation/inset-text/__tests__/InsetText.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import InsetText from '../';
4 |
5 | describe('InsetText', () => {
6 | it('matches snapshot', () => {
7 | const { container } = render(
5 |
15 | `;
16 |
--------------------------------------------------------------------------------
/src/components/content-presentation/inset-text/index.ts:
--------------------------------------------------------------------------------
1 | import InsetText from './InsetText';
2 |
3 | export default InsetText;
4 |
--------------------------------------------------------------------------------
/src/components/content-presentation/summary-list/SummaryList.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps } from 'react';
2 | import classNames from 'classnames';
3 |
4 | const SummaryListRow: FC
8 |
11 | Information:
12 |
13 |
14 |
5 |
8 | Actions
9 |
10 |
11 | `;
12 |
13 | exports[`SummaryList SummaryList.Key matches snapshot 1`] = `
14 |
15 |
18 | Key
19 |
20 |
21 | `;
22 |
23 | exports[`SummaryList SummaryList.Row matches snapshot 1`] = `
24 |
25 |
31 | `;
32 |
33 | exports[`SummaryList SummaryList.Value matches snapshot 1`] = `
34 |
28 | Row
29 |
30 |
35 |
38 | Value
39 |
40 |
41 | `;
42 |
43 | exports[`SummaryList matches snapshot: SummaryList 1`] = `
44 |
45 |
49 | `;
50 |
--------------------------------------------------------------------------------
/src/components/content-presentation/summary-list/index.ts:
--------------------------------------------------------------------------------
1 | import SummaryList from './SummaryList';
2 |
3 | export default SummaryList;
4 |
--------------------------------------------------------------------------------
/src/components/content-presentation/table/Table.tsx:
--------------------------------------------------------------------------------
1 | import React, { ComponentProps, FC, HTMLProps, ReactNode, useMemo, useState } from 'react';
2 | import classNames from 'classnames';
3 | import TableBody from './components/TableBody';
4 | import TableCaption from './components/TableCaption';
5 | import TableCell, { TableCellProps } from './components/TableCell';
6 | import TableContainer from './components/TableContainer';
7 | import TableHead from './components/TableHead';
8 | import TableRow from './components/TableRow';
9 | import TablePanel, { TablePanelProps } from './components/TablePanel';
10 | import TableContext, { ITableContext } from './TableContext';
11 |
12 | interface TableProps extends HTMLProps
18 | {heading && (
19 |
24 | {heading}
25 |
26 | )}
27 | {children}
28 |
29 | );
30 |
31 | export default TablePanel;
32 |
--------------------------------------------------------------------------------
/src/components/content-presentation/table/components/TableRow.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import classNames from 'classnames';
3 | import React, { Children, cloneElement, FC, HTMLProps, useContext, useEffect } from 'react';
4 | import TableContext from '../TableContext';
5 | import { getHeadingsFromChildren, isTableCell } from '../TableHelpers';
6 | import TableSectionContext, { TableSection } from '../TableSectionContext';
7 |
8 | const TableRow: FC
5 |
6 |
9 |
10 |
11 | `;
12 |
--------------------------------------------------------------------------------
/src/components/content-presentation/table/components/__tests__/__snapshots__/TableCaption.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`TableCaption matches snapshot 1`] = `
4 |
5 |
9 | `;
10 |
--------------------------------------------------------------------------------
/src/components/content-presentation/table/components/__tests__/__snapshots__/TableCell.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Table.Cell matches snapshot 1`] = `
4 |
5 |
9 | `;
10 |
--------------------------------------------------------------------------------
/src/components/content-presentation/table/components/__tests__/__snapshots__/TableContainer.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`TableContainer matches snapshot 1`] = `
4 |
5 |
8 |
9 | `;
10 |
--------------------------------------------------------------------------------
/src/components/content-presentation/table/components/__tests__/__snapshots__/TableHead.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Table.Head matches snapshot 1`] = `
4 |
5 |
8 |
9 | `;
10 |
--------------------------------------------------------------------------------
/src/components/content-presentation/table/components/__tests__/__snapshots__/TablePanel.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Table.Panel matches snapshot 1`] = `
4 |
5 |
8 |
9 | `;
10 |
11 | exports[`Table.Panel matches snapshot when rendering a h2 heading 1`] = `
12 |
13 |
23 | `;
24 |
--------------------------------------------------------------------------------
/src/components/content-presentation/table/components/__tests__/__snapshots__/TableRow.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Table.Row matches snapshot 1`] = `
4 |
16 |
22 | 19 | TestHeading 20 |
21 |
5 |
6 |
7 |
12 |
13 | `;
14 |
--------------------------------------------------------------------------------
/src/components/content-presentation/table/index.ts:
--------------------------------------------------------------------------------
1 | import Table from './Table';
2 |
3 | export default Table;
4 |
--------------------------------------------------------------------------------
/src/components/content-presentation/tabs/Tabs.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import classNames from 'classnames';
3 | import React, { FC, HTMLAttributes, useEffect } from 'react';
4 | import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
5 | import TabsJs from '@resources/tabs';
6 |
7 | type TabsProps = HTMLAttributes- {children}
45 | {children}
46 |
47 | );
48 |
49 | interface Tabs extends FC
63 | {children}
64 |
65 | );
66 | };
67 |
68 | Tabs.Title = TabTitle;
69 | Tabs.List = TabList;
70 | Tabs.ListItem = TabListItem;
71 | Tabs.Contents = TabContents;
72 |
73 | export default Tabs;
74 |
--------------------------------------------------------------------------------
/src/components/content-presentation/tabs/index.ts:
--------------------------------------------------------------------------------
1 | import Tabs from './Tabs';
2 |
3 | export default Tabs;
4 |
--------------------------------------------------------------------------------
/src/components/content-presentation/tag/Tag.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps } from 'react';
2 | import classNames from 'classnames';
3 |
4 | interface TagProps extends HTMLProps
5 |
8 | Active
9 |
10 |
11 | `;
12 |
--------------------------------------------------------------------------------
/src/components/content-presentation/tag/index.ts:
--------------------------------------------------------------------------------
1 | import Tag from './Tag';
2 |
3 | export default Tag;
4 |
--------------------------------------------------------------------------------
/src/components/content-presentation/warning-callout/WarningCallout.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps } from 'react';
2 | import classNames from 'classnames';
3 | import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
4 |
5 | interface WarningCalloutLabelProps extends HTMLProps
5 |
27 | `;
28 |
--------------------------------------------------------------------------------
/src/components/content-presentation/warning-callout/index.ts:
--------------------------------------------------------------------------------
1 | import WarningCallout from './WarningCallout';
2 |
3 | export default WarningCallout;
4 |
--------------------------------------------------------------------------------
/src/components/form-elements/button/index.ts:
--------------------------------------------------------------------------------
1 | import ButtonElement from './Button';
2 |
3 | export default ButtonElement;
4 | export { Button, ButtonLink } from './Button';
5 |
--------------------------------------------------------------------------------
/src/components/form-elements/character-count/CharacterCount.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import React, { FC, useEffect } from 'react';
3 | import CharacterCountJs from '@resources/character-count';
4 | import { HTMLAttributesWithData } from '@util/types/NHSUKTypes';
5 |
6 | export enum CharacterCountType {
7 | Characters,
8 | Words,
9 | }
10 |
11 | type CharacterCountProps = React.HTMLAttributes
8 |
26 | 11 | 14 | 17 | Important: 18 | 19 | School, nursery or work 20 | 21 |
22 |23 | Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared. 24 |
25 |
46 |
52 | );
53 | };
54 |
55 | export default CharacterCount;
56 |
--------------------------------------------------------------------------------
/src/components/form-elements/character-count/__tests__/__snapshots__/CharacterCount.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Character Count Matches snapshot 1`] = `
4 | {children}
47 |
48 |
49 | You can enter up to {maxLength} characters
50 |
51 |
5 |
59 | `;
60 |
--------------------------------------------------------------------------------
/src/components/form-elements/character-count/index.ts:
--------------------------------------------------------------------------------
1 | import CharacterCount, { CharacterCountType } from './CharacterCount';
2 |
3 | export { CharacterCountType };
4 | export default CharacterCount;
5 |
--------------------------------------------------------------------------------
/src/components/form-elements/checkboxes/CheckboxContext.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export interface ICheckboxContext {
4 | name: string;
5 | getBoxId: (reference: string) => string | undefined;
6 | leaseReference: () => string;
7 | unleaseReference: (reference: string) => void;
8 | }
9 |
10 | export default createContext
10 |
58 |
13 |
19 |
57 |
23 | Do not include personal information like your name, date of birth or NHS number.
24 |
25 |
28 |
35 |
43 |
49 |
56 |
53 | You have 200 characters remaining
54 |
55 | {dividerText}
9 | );
10 |
11 | export default Divider;
12 |
--------------------------------------------------------------------------------
/src/components/form-elements/checkboxes/index.ts:
--------------------------------------------------------------------------------
1 | import Checkboxes from './Checkboxes';
2 |
3 | export default Checkboxes;
4 |
--------------------------------------------------------------------------------
/src/components/form-elements/date-input/DateInputContext.ts:
--------------------------------------------------------------------------------
1 | import { createContext, ChangeEvent } from 'react';
2 |
3 | export type IDateInputContext = {
4 | id: string;
5 | name: string;
6 | error: string | boolean | undefined;
7 | value?: { day?: string; month?: string; year?: string };
8 | defaultValue?: { day?: string; month?: string; year?: string };
9 | registerRef: (inputType: 'day' | 'month' | 'year', ref: null | HTMLInputElement) => void;
10 | handleChange: (inputType: 'day' | 'month' | 'year', event: ChangeEvent
5 |
15 |
16 | `;
17 |
--------------------------------------------------------------------------------
/src/components/form-elements/error-message/index.ts:
--------------------------------------------------------------------------------
1 | import ErrorMessage from './ErrorMessage';
2 |
3 | export default ErrorMessage;
4 |
--------------------------------------------------------------------------------
/src/components/form-elements/error-summary/__tests__/__snapshots__/ErrorSummary.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`ErrorSummary ErrorSummary.Body matches snapshot: ErrorSummary.Body 1`] = `
4 |
5 |
11 | `;
12 |
13 | exports[`ErrorSummary ErrorSummary.List matches snapshot: ErrorSummary.List 1`] = `
14 |
8 | Body
9 |
10 |
15 |
21 | `;
22 |
23 | exports[`ErrorSummary ErrorSummary.ListItem matches snapshot: ErrorSummary.ListItem 1`] = `
24 | -
18 | List
19 |
25 |
26 |
27 | ListItem
28 |
29 |
30 |
31 | `;
32 |
33 | exports[`ErrorSummary ErrorSummary.Title matches snapshot: ErrorSummary.Title 1`] = `
34 |
35 |
42 | `;
43 |
44 | exports[`ErrorSummary matches snapshot: ErrorSummary 1`] = `
45 | 39 | Title 40 |
41 |
46 |
52 |
53 | `;
54 |
--------------------------------------------------------------------------------
/src/components/form-elements/error-summary/index.ts:
--------------------------------------------------------------------------------
1 | import ErrorSummary from './ErrorSummary';
2 |
3 | export default ErrorSummary;
4 |
--------------------------------------------------------------------------------
/src/components/form-elements/fieldset/Fieldset.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps, MutableRefObject } from 'react';
2 | import classNames from 'classnames';
3 | import { NHSUKSize } from '@util/types/NHSUKTypes';
4 | import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
5 | import FormGroup from '@components/utils/FormGroup';
6 |
7 | interface LegendProps extends Omit
5 |
10 |
11 | `;
12 |
13 | exports[`Fieldset matches snapshot: Fieldset 1`] = `
14 |
15 |
34 | `;
35 |
--------------------------------------------------------------------------------
/src/components/form-elements/fieldset/index.ts:
--------------------------------------------------------------------------------
1 | import Fieldset from './Fieldset';
2 |
3 | export default Fieldset;
4 |
--------------------------------------------------------------------------------
/src/components/form-elements/form/Form.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps } from 'react';
2 | import FormContext from './FormContext';
3 |
4 | type FormProps = HTMLProps
18 |
32 |
33 |
5 |
11 | `;
12 |
--------------------------------------------------------------------------------
/src/components/form-elements/hint-text/index.ts:
--------------------------------------------------------------------------------
1 | import HintText from './HintText';
2 |
3 | export default HintText;
4 |
--------------------------------------------------------------------------------
/src/components/form-elements/label/Label.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps } from 'react';
2 | import classNames from 'classnames';
3 | import { NHSUKSize } from '@util/types/NHSUKTypes';
4 |
5 | export interface LabelProps extends Omit
8 | Text
9 |
10 |
29 |
31 | );
32 | }
33 | return
5 |
51 | `;
52 |
--------------------------------------------------------------------------------
/src/components/form-elements/radios/components/Divider.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps } from 'react';
2 | import classNames from 'classnames';
3 |
4 | const Divider: FC
8 |
50 |
12 |
49 |
15 |
22 |
29 |
30 |
33 |
40 |
47 |
48 |
5 |
26 | `;
27 |
--------------------------------------------------------------------------------
/src/components/form-elements/select/index.ts:
--------------------------------------------------------------------------------
1 | import Select from './Select';
2 |
3 | export default Select;
4 |
--------------------------------------------------------------------------------
/src/components/form-elements/text-input/TextInput.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps, MutableRefObject } from 'react';
2 | import classNames from 'classnames';
3 | import SingleInputFormGroup from '@components/utils/SingleInputFormGroup';
4 | import { InputWidth } from '@util/types/NHSUKTypes';
5 | import { FormElementProps } from '@util/types/FormTypes';
6 |
7 | interface TextInputProps extends HTMLProps
8 |
24 |
25 |
46 | {prefix ?
50 | ) : (
51 | Input
52 | );
53 | }}
54 |
55 | );
56 |
57 | export default TextInput;
58 |
--------------------------------------------------------------------------------
/src/components/form-elements/text-input/index.ts:
--------------------------------------------------------------------------------
1 | import TextInput from './TextInput';
2 |
3 | export default TextInput;
4 |
--------------------------------------------------------------------------------
/src/components/form-elements/textarea/Textarea.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps, MutableRefObject } from 'react';
2 | import classNames from 'classnames';
3 | import { FormElementProps } from '@util/types/FormTypes';
4 | import SingleInputFormGroup from '@components/utils/SingleInputFormGroup';
5 |
6 | type TextareaProps = HTMLProps
5 |
8 |
9 | `;
10 |
--------------------------------------------------------------------------------
/src/components/layout/__tests__/__snapshots__/Container.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Container matches snapshot 1`] = `
4 |
5 |
8 |
9 | `;
10 |
--------------------------------------------------------------------------------
/src/components/layout/__tests__/__snapshots__/Row.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Row matches snapshot: Row 1`] = `
4 |
5 |
8 |
9 | `;
10 |
--------------------------------------------------------------------------------
/src/components/layout/index.ts:
--------------------------------------------------------------------------------
1 | import Container from './Container';
2 | import Col from './Col';
3 | import Row from './Row';
4 |
5 | export { Container, Col, Row };
6 |
--------------------------------------------------------------------------------
/src/components/navigation/action-link/ActionLink.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from 'react';
2 | import classNames from 'classnames';
3 | import { ArrowRightCircle } from '@components/content-presentation/icons';
4 | import { AsElementLink } from '@util/types/LinkTypes';
5 |
6 | const ActionLink: FC
13 |
14 |
17 |
18 | );
19 |
20 | export default ActionLink;
21 |
--------------------------------------------------------------------------------
/src/components/navigation/action-link/README.md:
--------------------------------------------------------------------------------
1 | # ActionLink
2 |
3 | This component can be found in the `nhsuk-frontend` repository [here](https://github.com/nhsuk/nhsuk-frontend/tree/master/packages/components/action-link).
4 |
5 | ## Implementation Notes
6 |
7 | The ActionLink component does not use the `nhsuk-frontend` "openInNewWindow" property, instead it allows the user to add the `target="_blank"` property (if desired).
8 |
9 | ## Usage
10 |
11 | ```jsx
12 | import { ActionLink } from "nhsuk-react-components";
13 |
14 | const Link = () => {
15 | return
5 |
36 | `;
37 |
--------------------------------------------------------------------------------
/src/components/navigation/action-link/index.ts:
--------------------------------------------------------------------------------
1 | import ActionLink from './ActionLink';
2 |
3 | export default ActionLink;
4 |
--------------------------------------------------------------------------------
/src/components/navigation/back-link/BackLink.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from 'react';
2 | import classNames from 'classnames';
3 | import { ChevronLeft } from '@components/content-presentation/icons';
4 | import { AsElementLink } from '@util/types/LinkTypes';
5 |
6 | const BackLink: FC
8 |
12 |
28 |
31 | Test
32 |
33 |
34 |
35 |
13 |
14 |
17 |
18 | );
19 |
20 | export default BackLink;
21 |
--------------------------------------------------------------------------------
/src/components/navigation/back-link/README.md:
--------------------------------------------------------------------------------
1 | # ActionLink
2 |
3 | This component can be found in the `nhsuk-frontend` repository [here](https://github.com/nhsuk/nhsuk-frontend/tree/master/packages/components/back-link).
4 |
5 | ## Usage
6 |
7 | ```jsx
8 | import { BackLink } from "nhsuk-react-components";
9 |
10 | const Link = () => {
11 | return
5 |
28 | `;
29 |
--------------------------------------------------------------------------------
/src/components/navigation/back-link/index.ts:
--------------------------------------------------------------------------------
1 | import BackLink from './BackLink';
2 |
3 | export default BackLink;
4 |
--------------------------------------------------------------------------------
/src/components/navigation/breadcrumb/Breadcrumb.tsx:
--------------------------------------------------------------------------------
1 | import React, { Children, FC, HTMLProps, ReactNode } from 'react';
2 | import classNames from 'classnames';
3 | import { AsElementLink } from '@util/types/LinkTypes';
4 | import { childIsOfComponentType } from '@util/types/TypeGuards';
5 |
6 | type Item = FC
8 |
12 |
24 | Back
25 |
26 |
27 |
26 |
5 |
13 |
14 | `;
15 |
16 | exports[`Breadcrumb renders with children: BreadcrumbWithChildren 1`] = `
17 |
18 |
47 |
48 | `;
49 |
--------------------------------------------------------------------------------
/src/components/navigation/breadcrumb/index.ts:
--------------------------------------------------------------------------------
1 | import Breadcrumb from './Breadcrumb';
2 |
3 | export default Breadcrumb;
4 |
--------------------------------------------------------------------------------
/src/components/navigation/card/Card.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps } from 'react';
2 | import classNames from 'classnames';
3 | import CardContext from './CardContext';
4 | import CardContent from './components/CardContent';
5 | import CardDescription from './components/CardDescription';
6 | import CardImage from './components/CardImage';
7 | import CardLink from './components/CardLink';
8 | import CardHeading from './components/CardHeading';
9 | import CardGroup from './components/CardGroup';
10 | import CardGroupItem from './components/CardGroupItem';
11 | import { CardType } from '@util/types/NHSUKTypes';
12 | import { cardTypeIsCareCard } from '@util/types/TypeGuards';
13 |
14 | interface CardProps extends HTMLProps
48 |
53 | {children}
54 |
55 |
56 | );
57 | };
58 |
59 | Card.Heading = CardHeading;
60 | Card.Description = CardDescription;
61 | Card.Image = CardImage;
62 | Card.Link = CardLink;
63 | Card.Content = CardContent;
64 | Card.Group = CardGroup;
65 | Card.GroupItem = CardGroupItem;
66 |
67 | export default Card;
68 |
--------------------------------------------------------------------------------
/src/components/navigation/card/CardContext.ts:
--------------------------------------------------------------------------------
1 | import { CardType } from '@util/types/NHSUKTypes';
2 | import { createContext } from 'react';
3 |
4 | export interface ICardContext {
5 | cardType?: CardType;
6 | }
7 |
8 | const CardContext = createContext
5 |
8 |
11 | Content
12 |
13 |
14 |
15 | `;
16 |
17 | exports[`ContentsList matches snapshot: ContentsList 1`] = `
18 |
19 |
32 |
33 | `;
34 |
--------------------------------------------------------------------------------
/src/components/navigation/contents-list/index.ts:
--------------------------------------------------------------------------------
1 | import ContentsList from './ContentsList';
2 |
3 | export default ContentsList;
4 |
--------------------------------------------------------------------------------
/src/components/navigation/footer/__tests__/__snapshots__/Footer.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Footer Footer.Copyright matches snapshot: Footer.Copyright 1`] = `
4 |
5 |
8 |
9 | `;
10 |
11 | exports[`Footer Footer.List matches snapshot: Footer.List 1`] = `
12 |
13 |
16 |
17 | `;
18 |
19 | exports[`Footer Footer.ListItem matches snapshot: Footer.ListItem 1`] = `
20 |
29 | `;
30 |
31 | exports[`Footer matches snapshot: Footer 1`] = `
32 |
33 |
53 |
54 | `;
55 |
--------------------------------------------------------------------------------
/src/components/navigation/footer/index.ts:
--------------------------------------------------------------------------------
1 | import Footer from './Footer';
2 |
3 | export default Footer;
4 |
--------------------------------------------------------------------------------
/src/components/navigation/header/HeaderContext.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export interface IHeaderContext {
4 | orgName: string | undefined;
5 | serviceName: string | undefined;
6 | orgSplit: string | undefined;
7 | orgDescriptor: string | undefined;
8 | setSearch: (toggle: boolean) => void;
9 | setMenuToggle: (toggle: boolean) => void;
10 | setServiceName: (toggle: boolean) => void;
11 | toggleMenu: () => void;
12 | hasSearch: boolean;
13 | hasMenuToggle: boolean;
14 | hasServiceName: boolean;
15 | menuOpen: boolean;
16 | transactional: boolean;
17 | }
18 |
19 | export default createContext
17 |
31 |
32 | );
33 | };
34 |
35 | export default Nav;
36 |
--------------------------------------------------------------------------------
/src/components/navigation/header/components/NavDropdownMenu.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import React, { FC, HTMLProps, useContext, useEffect, MouseEvent } from 'react';
3 | import HeaderContext, { IHeaderContext } from '../HeaderContext';
4 | import { ChevronDown as ChevronDownIcon } from '@components/content-presentation/icons';
5 |
6 | export interface NavDropdownMenuProps extends HTMLProps
19 |
20 | {logoUrl ? (
21 | 
22 | ) : (
23 | <>
24 |
37 |
38 | {orgName}
39 | {orgSplit ? (
40 | <>
41 | {' '}
42 | {orgSplit}
43 |
44 | ) : null}
45 |
46 | {orgDescriptor ? (
47 | {orgDescriptor}
48 | ) : null}
49 |
50 | )}
51 |
52 |
53 | );
54 | };
55 |
56 | export default OrganisationalLogo;
57 |
--------------------------------------------------------------------------------
/src/components/navigation/header/components/Search.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps, useContext, useEffect } from 'react';
2 | import classNames from 'classnames';
3 | import { Search as SearchIcon } from '@components/content-presentation/icons';
4 | import HeaderContext, { IHeaderContext } from '../HeaderContext';
5 |
6 | export interface SearchProps extends HTMLProps
28 |
49 | );
50 | };
51 |
52 | export default Search;
53 |
--------------------------------------------------------------------------------
/src/components/navigation/header/components/TransactionalServiceName.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps, useContext, useEffect } from 'react';
2 | import classNames from 'classnames';
3 | import HeaderContext, { IHeaderContext } from '../HeaderContext';
4 |
5 | const TransactionalServiceName: FC
29 |
47 |
48 |
5 |
8 |
11 |
14 |
17 | :
18 |
19 |
22 |
23 |
24 |
25 | `;
26 |
27 | exports[`Pagination matches snapshot: Pagination 1`] = `
28 |
29 |
38 |
39 | `;
40 |
--------------------------------------------------------------------------------
/src/components/navigation/pagination/index.ts:
--------------------------------------------------------------------------------
1 | import Pagination from './Pagination';
2 |
3 | export default Pagination;
4 |
--------------------------------------------------------------------------------
/src/components/navigation/skip-link/__tests__/__snapshots__/SkipLink.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`SkipLink matches snapshot: SkipLink 1`] = `
4 |
5 |
10 | Skip to main content
11 |
12 |
13 | `;
14 |
--------------------------------------------------------------------------------
/src/components/navigation/skip-link/index.ts:
--------------------------------------------------------------------------------
1 | import SkipLink from './SkipLink';
2 |
3 | export default SkipLink;
4 |
--------------------------------------------------------------------------------
/src/components/typography/BodyText.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps } from 'react';
2 | import classNames from 'classnames';
3 |
4 | const BodyText: FC
5 |
11 | `;
12 |
--------------------------------------------------------------------------------
/src/components/typography/__tests__/__snapshots__/LedeText.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`LedeText matches snapshot 1`] = `
4 | 8 | Text 9 |
10 |
5 |
11 | `;
12 |
--------------------------------------------------------------------------------
/src/components/typography/index.ts:
--------------------------------------------------------------------------------
1 | import LedeText from './LedeText';
2 | import BodyText from './BodyText';
3 |
4 | export { LedeText, BodyText };
5 |
--------------------------------------------------------------------------------
/src/components/utils/Clearfix.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps } from 'react';
2 |
3 | const Clearfix: FC8 | Text 9 |
10 |
59 | {children}
60 |
61 | {children}
; 25 | case 'h2': 26 | return{children}
; 27 | case 'h3': 28 | return{children}
; 29 | case 'h4': 30 | return{children}
; 31 | case 'h5': 32 | return{children}
; 33 | case 'h6': 34 | return{children}
; 35 | default: 36 | console.error(`HeadingLevel: Invalid headingLevel prop: ${headingLevel}`); 37 | return{children}
; 38 | } 39 | }; 40 | 41 | export default HeadingLevel; 42 | -------------------------------------------------------------------------------- /src/components/utils/LabelBlock.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | import HintText, { HintTextProps } from '../form-elements/hint-text/HintText'; 3 | import Label, { LabelProps } from '../form-elements/label/Label'; 4 | import ErrorMessage, { ErrorMessageProps } from '../form-elements/error-message/ErrorMessage'; 5 | 6 | interface LabelBlockProps { 7 | elementId?: string; 8 | label?: string; 9 | labelProps?: LabelProps; 10 | hint?: string; 11 | hintProps?: HintTextProps; 12 | error?: string | boolean; 13 | errorProps?: ErrorMessageProps; 14 | } 15 | 16 | const LabelBlock: FCHeading
11 |
5 |
23 | `;
24 |
--------------------------------------------------------------------------------
/src/components/utils/__tests__/__snapshots__/SingleInputFormGroup.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`SingleInputFormGroup matches snapshot 1`] = `
4 |
8 |
22 | 9 | Heading 10 |
11 |
14 |
20 |
21 |
5 |
14 | `;
15 |
--------------------------------------------------------------------------------
/src/patterns/nav-a-z/__tests__/NavAZ.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { screen, render } from '@testing-library/react';
3 | import NavAZ from '../';
4 |
5 | const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
6 |
7 | describe('NavAZ', () => {
8 | it('matches snapshot', () => {
9 | const { container } = render(
8 |
12 |
13 | Child
47 |
5 |
14 |
15 | `;
16 |
--------------------------------------------------------------------------------
/src/patterns/nav-a-z/index.ts:
--------------------------------------------------------------------------------
1 | import NavAZ from './NavAZ';
2 |
3 | export default NavAZ;
4 |
--------------------------------------------------------------------------------
/src/patterns/panel/Panel.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps } from 'react';
2 | import classNames from 'classnames';
3 | import { AsElementLink } from '@util/types/LinkTypes';
4 | import Card from '@components/navigation/card';
5 | import { CardHeadingProps } from '@components/navigation/card/components/CardHeading';
6 |
7 | interface PanelProps extends HTMLProps- {children}
5 |
8 |
9 | `;
10 |
11 | exports[`Panel ListPanel.LinkItem matches snapshot: ListPanel.LinkItem 1`] = `
12 |
21 | `;
22 |
23 | exports[`Panel matches snapshot: ListPanel 1`] = `
24 |
25 |
37 | `;
38 |
--------------------------------------------------------------------------------
/src/patterns/panel/index.ts:
--------------------------------------------------------------------------------
1 | import ListPanel from './Panel';
2 |
3 | export default ListPanel;
4 |
--------------------------------------------------------------------------------
/src/patterns/review-date/ReviewDate.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, HTMLProps } from 'react';
2 | import classNames from 'classnames';
3 |
4 | interface ReviewDateProps extends HTMLProps
28 |
36 |
31 |
35 |
17 | {lastReviewed ? `Page last reviewed: ${lastReviewed}` : null}
18 | {lastReviewed && nextReview ?
: null}
19 | {nextReview ? `Next review due: ${nextReview}` : null}
20 |
5 |
8 |
9 | `;
10 |
--------------------------------------------------------------------------------
/src/patterns/review-date/index.ts:
--------------------------------------------------------------------------------
1 | import ReviewDate from './ReviewDate';
2 |
3 | export default ReviewDate;
4 |
--------------------------------------------------------------------------------
/src/resources/common.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Lifted from nhsuk-frontend and brought into this repo to enable compilation to CJS if required
3 | * See Github issue https://github.com/nhsuk/nhsuk-frontend/issues/937
4 | */
5 |
6 | /**
7 | * Toggle a boolean attribute on a HTML element
8 | * @param {HTMLElement} element
9 | * @param {string} attr
10 | */
11 | export const toggleAttribute = (element, attr) => {
12 | // Return without error if element or attr are missing
13 | if (!element || !attr) return;
14 | // Toggle attribute value. Treat no existing attr same as when set to false
15 | const value = element.getAttribute(attr) === 'true' ? 'false' : 'true';
16 | element.setAttribute(attr, value);
17 | };
18 |
19 | /**
20 | * Toggle a toggle a class on conditional content for an input based on checked state
21 | * @param {HTMLElement} input input element
22 | * @param {string} className class to toggle
23 | */
24 | export const toggleConditionalInput = (input, className) => {
25 | // Return without error if input or class are missing
26 | if (!input || !className) return;
27 | // If the input has conditional content it had a data-aria-controls attribute
28 | const conditionalId = input.getAttribute('aria-controls');
29 | if (conditionalId) {
30 | // Get the conditional element from the input data-aria-controls attribute
31 | const conditionalElement = document.getElementById(conditionalId);
32 | if (conditionalElement) {
33 | if (input.checked) {
34 | conditionalElement.classList.remove(className);
35 | input.setAttribute('aria-expanded', true);
36 | } else {
37 | conditionalElement.classList.add(className);
38 | input.setAttribute('aria-expanded', false);
39 | }
40 | }
41 | }
42 | };
43 |
--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom';
2 |
--------------------------------------------------------------------------------
/src/util/IsDev.ts:
--------------------------------------------------------------------------------
1 | const development: boolean = !process.env.NODE_ENV
2 | || process.env.NODE_ENV === 'development'
3 | || process.env.NODE_ENV === 'test';
4 |
5 | export default function isDev(): boolean {
6 | return development;
7 | }
8 |
--------------------------------------------------------------------------------
/src/util/RandomID.ts:
--------------------------------------------------------------------------------
1 | export const getRandomString = (length = 5): string => {
2 | const randomNumber = Math.random() + 1;
3 | return randomNumber.toString(36).substring(2, length + 2);
4 | };
5 |
6 | export const generateRandomName = (prefix?: string): string => {
7 | const randomString = getRandomString();
8 | return prefix ? `${prefix}_${randomString}` : randomString;
9 | };
10 |
11 | export const generateRandomID = generateRandomName;
12 |
--------------------------------------------------------------------------------
/src/util/__tests__/IsDev.test.ts:
--------------------------------------------------------------------------------
1 | import IsDev from '../IsDev';
2 |
3 | describe('IsDev', () => {
4 | it('in test environment', () => {
5 | expect(IsDev()).toBe(true);
6 | });
7 | });
8 |
--------------------------------------------------------------------------------
/src/util/hooks/UseDevWarning.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { useEffect } from 'react';
3 | import isDev from '../IsDev';
4 |
5 | type ConditionFn = () => boolean;
6 |
7 | const useDevWarning = (warning: string, condition: ConditionFn = () => true): void => {
8 | useEffect(() => {
9 | if (isDev() && condition()) {
10 | // eslint-disable-next-line no-console
11 | console.warn(warning);
12 | }
13 | }, [warning]);
14 | };
15 |
16 | export default useDevWarning;
17 |
--------------------------------------------------------------------------------
/src/util/types/FormTypes.ts:
--------------------------------------------------------------------------------
1 | import { HTMLProps } from 'react';
2 | import { ErrorMessageProps } from '@components/form-elements/error-message/ErrorMessage';
3 | import { HintTextProps } from '@components/form-elements/hint-text/HintText';
4 | import { LabelProps } from '@components/form-elements/label/Label';
5 |
6 | export interface FormElementProps {
7 | label?: string;
8 | labelProps?: LabelProps;
9 | error?: string | boolean;
10 | errorProps?: ErrorMessageProps;
11 | hint?: string;
12 | hintProps?: HintTextProps;
13 | formGroupProps?: HTMLProps11 | You can report any suspected side effect to the{' '} 12 | 13 | UK safety scheme 14 | 15 | . 16 |
17 |
17 | Started
18 | Not started
19 | New
20 | Active
21 | Pending
22 | Received
23 | Sent
24 | Rejected
25 | Declined
26 | Delayed
27 |
28 | ),
29 | };
30 |
--------------------------------------------------------------------------------
/stories/Content Presentation/WarningCallout.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { WarningCallout } from '../../src';
3 | import { Meta, StoryObj } from '@storybook/react';
4 |
5 | const meta: Meta19 | Stay away from school, nursery or work until all the spots have crusted over. This is 20 | usually 5 days after the spots first appeared. 21 |
22 |35 | Stay away from school, nursery or work until all the spots have crusted over. This is 36 | usually 5 days after the spots first appeared. 37 |
38 |49 | Stay away from school, nursery or work until all the spots have crusted over. This is 50 | usually 5 days after the spots first appeared. 51 |
52 |60 | Stay away from school, nursery or work until all the spots have crusted over. This is 61 | usually 5 days after the spots first appeared. 62 |
63 |Page heading
41 |This is the main content
42 |
43 | ),
44 | };
45 |
46 | export default meta;
47 | type Story = StoryObj