From f6528114818a7ccec4424d6eeb1555edfa87dc8a Mon Sep 17 00:00:00 2001 From: Kai Spencer <51139521+KaiSpencer@users.noreply.github.com> Date: Thu, 13 Apr 2023 14:56:52 +0100 Subject: [PATCH] Add `do not` prefix to DoDontList (#153) * DoDontList don't item includes text `do not`, tests to cover * add prefixText prop and tests for DoDontList * Better documentation for DoDontList --- src/components/do-dont-list/DoDontList.tsx | 19 ++++++-- .../__tests__/DoDontList.test.tsx | 45 +++++++++++++++++ stories/Components/DoDontList.stories.tsx | 48 +++++++++++++++++-- 3 files changed, 105 insertions(+), 7 deletions(-) diff --git a/src/components/do-dont-list/DoDontList.tsx b/src/components/do-dont-list/DoDontList.tsx index 86fb3665..1b215c82 100644 --- a/src/components/do-dont-list/DoDontList.tsx +++ b/src/components/do-dont-list/DoDontList.tsx @@ -1,4 +1,4 @@ -import React, { HTMLProps, createContext, useContext } from 'react'; +import React, {HTMLProps, createContext, useContext, ReactNode} from 'react'; import classNames from 'classnames'; import { Tick, Cross } from '../icons'; import HeadingLevel, { HeadingLevelType } from '../../util/HeadingLevel'; @@ -43,13 +43,26 @@ const DoDontList: DoDontList = ({ interface DoDontItemProps extends HTMLProps { listItemType?: ListType; + prefixText?: ReactNode } -const DoDontItem: React.FC = ({ children, listItemType, ...rest }) => { +const DoDontItem: React.FC = ({prefixText, listItemType,children, ...rest }) => { const listItem = useContext(DoDontListContext); + const defaultPrefix = (listItemType || listItem) === 'do' ? null : 'do not '; + const actualPrefix = prefixText === undefined ? defaultPrefix : prefixText; return (
  • - {(listItemType || listItem) === 'do' ? : } + {(listItemType || listItem) === 'do' ? ( + <> + + {actualPrefix} + + ) : ( + <> + + {actualPrefix} + + )} {children}
    • ); diff --git a/src/components/do-dont-list/__tests__/DoDontList.test.tsx b/src/components/do-dont-list/__tests__/DoDontList.test.tsx index 4707a17b..a4bd09bf 100644 --- a/src/components/do-dont-list/__tests__/DoDontList.test.tsx +++ b/src/components/do-dont-list/__tests__/DoDontList.test.tsx @@ -63,5 +63,50 @@ describe('DoDontList', () => { doList.unmount(); dontList.unmount(); }); + + it("dont item includes 'do not' by default", () => { + const dontList = mount( + + do something bad + , + ); + expect(dontList.find('.nhsuk-list--cross').text()).toEqual('do not do something bad'); + dontList.unmount(); + }); + + it("items render custom prefix text", () => { + const doList = mount( + + something good 1 + something good 2 + also do }>something good 3 + something good 4 + something good 5 + , + ); + const dontList = mount( + + do something bad 1 + do something bad 2 + don't do }>something bad 3 + something bad 4 + something bad 5 + , + ); + expect(doList.find('.nhsuk-list--tick').childAt(0).text()).toBe('do something good 1'); + expect(doList.find('.nhsuk-list--tick').childAt(1).text()).toBe('something good 2'); + expect(doList.find('.nhsuk-list--tick').childAt(2).text()).toBe('also do something good 3'); + expect(doList.find('.nhsuk-list--tick').childAt(3).text()).toBe('something good 4'); + expect(doList.find('.nhsuk-list--tick').childAt(4).text()).toBe('something good 5'); + + expect(dontList.find('.nhsuk-list--cross').childAt(0).text()).toBe('do not do something bad 1'); + expect(dontList.find('.nhsuk-list--cross').childAt(1).text()).toBe('do not do something bad 2'); + expect(dontList.find('.nhsuk-list--cross').childAt(2).text()).toBe('don\'t do something bad 3'); + expect(dontList.find('.nhsuk-list--cross').childAt(3).text()).toBe('do not something bad 4'); + expect(dontList.find('.nhsuk-list--cross').childAt(4).text()).toBe('something bad 5'); + + doList.unmount(); + dontList.unmount(); + }) }); }); diff --git a/stories/Components/DoDontList.stories.tsx b/stories/Components/DoDontList.stories.tsx index 254740ea..249886bd 100644 --- a/stories/Components/DoDontList.stories.tsx +++ b/stories/Components/DoDontList.stories.tsx @@ -11,6 +11,11 @@ import { Meta, StoryObj } from '@storybook/react'; * * As long as a `listType` is supplied to the `DoDontList` component, all subcomponents will render as desired. If you require a `DoDontList.Item` to be different, a `listItemType` prop can be supplied to force the type. * + * + * The `DoDontList.Item` component can also accept a `prefixText` prop, which can be used to override the default prefix text. + * + * See the custom prefix text story for an example. + * * ## Usage * * ### Standard @@ -57,12 +62,47 @@ export const Do: Story = { export const Dont: Story = { render: () => ( - do not burst a blister yourself - do not peel the skin off a burst blister - do not pick at the edges of the remaining skin + burst a blister yourself + peel the skin off a burst blister + pick at the edges of the remaining skin - do not wear the shoes or use the equipment that caused your blister until it heals + wear the shoes or use the equipment that caused your blister until it heals ), }; + +/** + * By default DoDontList's of type "dont" will have Items prefixed with `do not` + * + * This is the recommended usage, as stated in the Service Manual + * + * However, if you need to override this, you can supply a `prefixText` prop to the `DoDontList.Item` component. + * + * This is optional and of type `ReactNode`, so you can supply a string, a JSX element, or `undefined` or `null` + * + * See the table below and click the `Show code` button on the story for examples of each. + * + * | Value | Outcome | + * |-----------|---------------------------------------------| + * | undefined | The default `do not` text will be displayed | + * | null | There will be no prefix | + * | string | The string will be displayed | + * | JSX | The JSX will be rendered, such as `` | + */ +export const CustomPrefixText: Story = { + render: () => ( + + burst a blister yourself + peel the skin off a burst blister + pick at the edges of the remaining skin + please dont }> + wear the shoes or use the equipment that caused your blister until it heals + + + wear the shoes or use the equipment that caused your blister until it heals + + + + ), +}