diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 3bbe79e5..406f37f4 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -6,7 +6,7 @@ const preview: Preview = { actions: { argTypesRegex: '^on[A-Z].*' }, options: { storySort: { - order: ['Welcome', 'Migration Guides', 'Components', 'FormBehaviour', 'Deprecated'], + order: ['Welcome', 'Migration Guides', 'Components', 'Patterns', 'FormBehaviour', 'Deprecated'], }, }, }, diff --git a/docs/upgrade-to-3.0.md b/docs/upgrade-to-3.0.md new file mode 100644 index 00000000..131eb64d --- /dev/null +++ b/docs/upgrade-to-3.0.md @@ -0,0 +1,41 @@ +# Upgrading to 3.0 + +> v3.0 is an upcoming release, this page is a work in progress. + +There are some breaking changes you'll need to be aware of when upgrading to v3. These are mostly related to us upgrading our dependency on [nhsuk-frontend to v5](https://github.com/nhsuk/nhsuk-frontend/blob/main/CHANGELOG.md#500---16-march-2021) which also includes some breaking changes. + +## Review Date component is now a pattern + +The `ReviewDate` component has been removed from nhsuk-frontend in version 5.0.0. This component is now a `pattern` in the nhsuk-frontend library. + +The only change is that the Default import has a new path. + +Instead of importing the component from `nhsuk-react-components/lib/components/review-date`, you will now import it from `nhsuk-react-components/lib/patterns/review-date`. + +There are no functional changes to the component, and it works exactly as it did before. + +```tsx +// Old Import +import { ReviewDate } from "nhsuk-react-components"; +import ReviewDate from "nhsuk-react-components/lib/components/review-date"; + +// New Import +import { ReviewDate } from "nhsuk-react-components"; +import ReviewDate from "nhsuk-react-components/lib/patterns/review-date"; +``` + +## NHS Logo PNG Fallback Removed + +The .png fallback for the NHS Logo in the header has been removed. This was to support older versions of Internet Explorer, and is no longer required. + +## The "Three Columns" option for the Footer component has been removed + +This has been removed due to causing accessibility issues in Safari (see the [upstream issue](https://github.com/nhsuk/nhsuk-frontend/issues/575)). + +## The `long` variant of the Transactional Service Name component has been removed + +In NHS.UK Frontend v5 and above, the header text now defaults to wrapping underneath the logo without the need for a modifier. It is safe to remove the `long` prop from the `` component. + +## The `prefixText` prop has been added to the `DoDontList.Item` component + +You can now add prefixed text to each `DoDontList.Item` component by supplying the `prefixText` prop. Items with a `type` of `dont` will automatically have a 'do not' prefix text added in the next major release to align with the NHS.UK frontend library v5. \ No newline at end of file diff --git a/package.json b/package.json index daabefcf..8196b10c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nhsuk-react-components", - "version": "2.2.1", + "version": "3.0.0", "author": { "email": "thomas.judd-cooper1@nhs.net", "name": "Thomas Judd-Cooper", @@ -47,7 +47,7 @@ "eslint-plugin-react-hooks": "^4.2.0", "jest": "^26.6.3", "jest-axe": "^4.1.0", - "nhsuk-frontend": "4.1.0", + "nhsuk-frontend": "5.0.0", "nhsuk-frontend-legacy": "npm:nhsuk-frontend@3.1.0", "prettier": "^2.3.0", "react": "^16.14.0", @@ -64,7 +64,7 @@ "vite": "^4.2.1" }, "peerDependencies": { - "nhsuk-frontend": ">=4.0.0", + "nhsuk-frontend": ">=5.0.0", "react": ">=16.8.0", "react-dom": ">=16.8.0" }, diff --git a/src/components/action-link/ActionLink.tsx b/src/components/action-link/ActionLink.tsx index 9ad30df4..b8783a40 100644 --- a/src/components/action-link/ActionLink.tsx +++ b/src/components/action-link/ActionLink.tsx @@ -11,7 +11,7 @@ const ActionLink: React.FC> = ({ }) => (
- + {children}
diff --git a/src/components/action-link/__tests__/__snapshots__/ActionLink.test.tsx.snap b/src/components/action-link/__tests__/__snapshots__/ActionLink.test.tsx.snap index b3fa3593..cf246d21 100644 --- a/src/components/action-link/__tests__/__snapshots__/ActionLink.test.tsx.snap +++ b/src/components/action-link/__tests__/__snapshots__/ActionLink.test.tsx.snap @@ -8,7 +8,10 @@ exports[`ActionLink matches snapshot: ActionLink 1`] = ` className="nhsuk-action-link__link" href="/test" > - + diff --git a/src/components/back-link/BackLink.tsx b/src/components/back-link/BackLink.tsx index 0bd549b1..eb299ece 100644 --- a/src/components/back-link/BackLink.tsx +++ b/src/components/back-link/BackLink.tsx @@ -11,7 +11,7 @@ const BackLink: React.FC> = ({ }) => (
- + {children}
diff --git a/src/components/back-link/__tests__/__snapshots__/BackLink.test.tsx.snap b/src/components/back-link/__tests__/__snapshots__/BackLink.test.tsx.snap index 24b6cf8e..bbf0ad8c 100644 --- a/src/components/back-link/__tests__/__snapshots__/BackLink.test.tsx.snap +++ b/src/components/back-link/__tests__/__snapshots__/BackLink.test.tsx.snap @@ -8,7 +8,10 @@ exports[`BackLink matches snapshot: BackLink 1`] = ` className="nhsuk-back-link__link" href="/back" > - + Back diff --git a/src/components/do-dont-list/DoDontList.tsx b/src/components/do-dont-list/DoDontList.tsx index 1d4aa308..e39b126a 100644 --- a/src/components/do-dont-list/DoDontList.tsx +++ b/src/components/do-dont-list/DoDontList.tsx @@ -1,9 +1,7 @@ -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'; -import useDevWarning from '../../util/hooks/UseDevWarning'; -import { NHSUKFrontendV5UpgradeWarnings } from '../../deprecated/warnings'; type ListType = 'do' | 'dont'; @@ -27,7 +25,6 @@ const DoDontList: DoDontList = ({ headingLevel, ...rest }) => { - useDevWarning(NHSUKFrontendV5UpgradeWarnings.DoDontListPrefix, () => listType === 'dont'); return (
@@ -48,13 +45,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 93429a67..461174b0 100644 --- a/src/components/do-dont-list/__tests__/DoDontList.test.tsx +++ b/src/components/do-dont-list/__tests__/DoDontList.test.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { shallow, mount } from 'enzyme'; import DoDontList from '..'; -import { NHSUKFrontendV5UpgradeWarnings } from '../../../deprecated/warnings'; describe('DoDontList', () => { it('matches snapshot', () => { @@ -64,6 +63,59 @@ 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(); + }); }); }); @@ -73,14 +125,6 @@ describe('dont list dev warning', () => { jest.clearAllMocks(); }); - it('should warn when using dont list', () => { - const element = mount(); - expect(console.warn).toHaveBeenCalled(); - expect((console.warn as jest.Mock).mock.calls[0][0]).toBe( - NHSUKFrontendV5UpgradeWarnings.DoDontListPrefix, - ); - element.unmount(); - }); it('should not warn when using do list', () => { const element = mount(); expect(console.warn).not.toHaveBeenCalled(); diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index 453bea9e..616df350 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -1,26 +1,12 @@ import React, { HTMLProps } from 'react'; import classNames from 'classnames'; import { Container } from '../layout'; -import useDevWarning from '../../util/hooks/UseDevWarning'; -import { NHSUKFrontendV5UpgradeWarnings } from '../../deprecated/warnings'; -interface FooterListProps extends HTMLProps { - columns?: boolean; -} +type FooterListProps = HTMLProps; -const FooterList: React.FC = ({ className, columns, ...rest }) => { - useDevWarning(NHSUKFrontendV5UpgradeWarnings.FooterColumns, () => columns); - return ( -
      - ); -}; +const FooterList: React.FC = ({ className, ...rest }) => ( +
        +); const FooterListItem: React.FC> = ({ className, ...rest }) => (
      • diff --git a/src/components/footer/__tests__/Footer.test.tsx b/src/components/footer/__tests__/Footer.test.tsx index 220a8908..290e44a9 100644 --- a/src/components/footer/__tests__/Footer.test.tsx +++ b/src/components/footer/__tests__/Footer.test.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { shallow, mount } from 'enzyme'; import Footer from '..'; -import { NHSUKFrontendV5UpgradeWarnings } from '../../../deprecated/warnings'; jest.spyOn(console, 'warn').mockImplementation(); @@ -39,27 +38,6 @@ describe('Footer', () => { expect(component).toMatchSnapshot('Footer.List'); component.unmount(); }); - - it('adds class when columns', () => { - const component = shallow(); - expect(component.hasClass('nhsuk-footer__list--three-columns')).toBeTruthy(); - component.unmount(); - }); - - it('has dev warning when columns', () => { - const element = mount(); - expect(console.warn).toHaveBeenCalledTimes(1); - expect((console.warn as jest.Mock).mock.calls[0][0]).toBe( - NHSUKFrontendV5UpgradeWarnings.FooterColumns, - ); - element.unmount(); - }); - - it('no dev warning when columns is false', () => { - const element = mount(); - expect(console.warn).not.toHaveBeenCalled(); - element.unmount(); - }); }); describe('Footer.ListItem', () => { diff --git a/src/components/header/components/MenuToggle.tsx b/src/components/header/components/MenuToggle.tsx index b0fdfe52..f0864a51 100644 --- a/src/components/header/components/MenuToggle.tsx +++ b/src/components/header/components/MenuToggle.tsx @@ -1,6 +1,4 @@ -import React, { - HTMLProps, useContext, useEffect, MouseEvent, -} from 'react'; +import React, { HTMLProps, useContext, useEffect, MouseEvent } from 'react'; import classNames from 'classnames'; import HeaderContext, { IHeaderContext } from '../HeaderContext'; @@ -28,7 +26,7 @@ const MenuToggle: React.FC = ({ onClick, ...rest }) => {
        @@ -33,11 +31,11 @@ const Search: React.FC = ({ diff --git a/src/components/header/components/TransactionalServiceName.tsx b/src/components/header/components/TransactionalServiceName.tsx index 40bbf37b..cf988eb8 100644 --- a/src/components/header/components/TransactionalServiceName.tsx +++ b/src/components/header/components/TransactionalServiceName.tsx @@ -1,32 +1,13 @@ import React, { HTMLProps } from 'react'; import classNames from 'classnames'; -import useDevWarning from '../../../util/hooks/UseDevWarning'; -import { NHSUKFrontendV5UpgradeWarnings } from '../../../deprecated/warnings'; -export interface TransactionalServiceNameProps extends HTMLProps { - long?: boolean; -} - -const TransactionalServiceName: React.FC = ({ +const TransactionalServiceName: React.FC> = ({ className, - long, ...rest -}) => { - useDevWarning( - NHSUKFrontendV5UpgradeWarnings.TransactionalServiceNameLongVariantRemoved, - () => long, - ); - return ( -
        - -
        - ); -}; +}) => ( + +); export default TransactionalServiceName; diff --git a/src/components/header/components/__tests__/TransactionalServiceName.test.tsx b/src/components/header/components/__tests__/TransactionalServiceName.test.tsx index 6e37a561..9a6012dc 100644 --- a/src/components/header/components/__tests__/TransactionalServiceName.test.tsx +++ b/src/components/header/components/__tests__/TransactionalServiceName.test.tsx @@ -1,6 +1,5 @@ import React from 'react'; import TransactionalServiceName from '../TransactionalServiceName'; -import { NHSUKFrontendV5UpgradeWarnings } from '../../../../deprecated/warnings'; import { mount } from 'enzyme'; describe('TransactionalServiceName long variant deprecation warning', () => { @@ -9,16 +8,6 @@ describe('TransactionalServiceName long variant deprecation warning', () => { jest.clearAllMocks(); }); - it('should warn when long is true', () => { - const spy = jest.spyOn(console, 'warn'); - const component = mount(); - expect(spy).toHaveBeenCalledTimes(1); - expect(spy.mock.calls[0][0]).toBe( - NHSUKFrontendV5UpgradeWarnings.TransactionalServiceNameLongVariantRemoved, - ); - component.unmount(); - }); - it('should not warn when long is false', () => { const spy = jest.spyOn(console, 'warn'); const component = mount(); diff --git a/src/components/icons/Icons.tsx b/src/components/icons/Icons.tsx index a5d42c32..9a9076eb 100644 --- a/src/components/icons/Icons.tsx +++ b/src/components/icons/Icons.tsx @@ -9,8 +9,8 @@ interface BaseIconSVGProps extends HTMLProps { export const BaseIconSVG: React.FC = ({ className, children, - height, - width, + height = 34, + width = 34, iconType, ...rest }) => ( @@ -27,11 +27,6 @@ export const BaseIconSVG: React.FC = ({ ); -BaseIconSVG.defaultProps = { - height: 32, - width: 32, -}; - export const ArrowLeft: React.FC = (props) => ( @@ -71,19 +66,25 @@ export const Close: React.FC = (props) => ( export const Cross: React.FC = (props) => ( - - + + ); -export const SmallEmdash: React.FC = ({ height, width, ...rest }) => ( - +export const SmallEmdash: React.FC = ({ height = 1, width = 16, ...rest }) => ( + ); -export const Emdash: React.FC = ({ height, width, ...rest }) => ( - +export const Emdash: React.FC = ({ height = 1, width = 19, ...rest }) => ( + ); diff --git a/src/components/icons/__tests__/__snapshots__/Icons.test.tsx.snap b/src/components/icons/__tests__/__snapshots__/Icons.test.tsx.snap index 328901cf..78ca5e44 100644 --- a/src/components/icons/__tests__/__snapshots__/Icons.test.tsx.snap +++ b/src/components/icons/__tests__/__snapshots__/Icons.test.tsx.snap @@ -3,16 +3,14 @@ exports[`Icons all icons match snapshots: ArrowLeft 1`] = ` @@ -68,7 +62,11 @@ const PanelItem: React.FC> = ({ className, ...rest }) =
      • ); -const PanelLinkItem: React.FC> = ({ className, asElement: Component = 'a', ...rest }) => ( +const PanelLinkItem: React.FC> = ({ + className, + asElement: Component = 'a', + ...rest +}) => ( diff --git a/src/components/list-panel/__tests__/ListPanel.test.tsx b/src/components/list-panel/__tests__/ListPanel.test.tsx index f7fc95b9..f695edab 100644 --- a/src/components/list-panel/__tests__/ListPanel.test.tsx +++ b/src/components/list-panel/__tests__/ListPanel.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount, shallow } from 'enzyme'; import ListPanel from '..'; describe('ListPanel', () => { @@ -35,7 +35,7 @@ describe('ListPanel', () => { }); it('renders back to top button with custom text', () => { - const component = shallow(); + const component = mount(); expect(component.find('.nhsuk-back-to-top__link').text()).toBe('Custom'); component.unmount(); }); diff --git a/src/components/review-date/ReviewDate.tsx b/src/components/review-date/ReviewDate.tsx deleted file mode 100644 index 7e7f02ce..00000000 --- a/src/components/review-date/ReviewDate.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React, { HTMLProps } from 'react'; -import classNames from 'classnames'; -import useDevWarning from '../../util/hooks/UseDevWarning'; -import { NHSUKFrontendV5UpgradeWarnings } from '../../deprecated/warnings'; - -interface ReviewDateProps extends HTMLProps { - lastReviewed?: string; - nextReview?: string; -} - -const ReviewDate: React.FC = ({ - className, - lastReviewed, - nextReview, - ...rest -}) => { - useDevWarning(NHSUKFrontendV5UpgradeWarnings.ReviewDateMovedToPattern); - return ( -
        -

        - {lastReviewed ? `Page last reviewed: ${lastReviewed}` : null} - {lastReviewed && nextReview ?
        : null} - {nextReview ? `Next review due: ${nextReview}` : null} -

        -
        - ); -}; - -export default ReviewDate; diff --git a/src/deprecated/warnings.ts b/src/deprecated/warnings.ts index 542a7ced..4939ad29 100644 --- a/src/deprecated/warnings.ts +++ b/src/deprecated/warnings.ts @@ -3,16 +3,3 @@ export const PromoDeprecationWarning = export const PanelDeprecationWarning = 'The Promo component is deprecated, and will be removed in the next major version of nhsuk-react-components. The Card component is the intended replacement.'; - -export const NHSUKFrontendV5UpgradeWarnings = { - FooterColumns: - 'The footer columns prop is deprecated and will be removed in the next major release, as this has been removed from the NHS.UK frontend library v5.', - DoDontListPrefix: - "Items with a `type` of `dont` will automatically have a 'do not' prefix text added in the next major release to align with the NHS.UK frontend library v5.", - TransactionalServiceNameLongVariantRemoved: - 'The `long` variant of the `TransactionalServiceName` component will be removed in the next major release to align with the NHS.UK frontend library v5.', - ReviewDateMovedToPattern: - 'The `ReviewDate` component will be removed in the next major release to align with the NHS.UK frontend library v5. ' + - 'The `ReviewDate` component will exist as a `pattern`. ' + - 'If you use the default import the path will change from `/lib/components/ReviewDate` to `/lib/patterns/ReviewDate`.', -} as const; diff --git a/src/index.ts b/src/index.ts index 52a15198..83ec1750 100644 --- a/src/index.ts +++ b/src/index.ts @@ -42,7 +42,6 @@ export { default as ListPanel } from './components/list-panel'; export { default as NavAZ } from './components/nav-a-z'; export { default as Pagination } from './components/pagination'; export { default as Radios } from './components/radios'; -export { default as ReviewDate } from './components/review-date'; export { default as Select } from './components/select'; export { default as SkipLink } from './components/skip-link'; export { default as SummaryList } from './components/summary-list'; @@ -53,3 +52,5 @@ export { LedeText, BodyText } from './components/typography'; export { default as WarningCallout } from './components/warning-callout'; export { default as Clearfix } from './components/utils/Clearfix'; export { default as ReadingWidth } from './components/utils/ReadingWidth'; + +export { default as ReviewDate } from './patterns/review-date'; diff --git a/src/patterns/review-date/ReviewDate.tsx b/src/patterns/review-date/ReviewDate.tsx new file mode 100644 index 00000000..c63c5e9f --- /dev/null +++ b/src/patterns/review-date/ReviewDate.tsx @@ -0,0 +1,28 @@ +import React, { HTMLProps } from 'react'; +import classNames from 'classnames'; + +interface ReviewDateProps extends HTMLProps { + lastReviewed?: string; + nextReview?: string; +} + +const ReviewDate: React.FC = ({ + className, + lastReviewed, + nextReview, + ...rest +}) => ( +

        + {lastReviewed ? `Page last reviewed: ${lastReviewed}` : null} + {lastReviewed && nextReview ?
        : null} + {nextReview ? `Next review due: ${nextReview}` : null} +

        +); + +export default ReviewDate; diff --git a/src/components/review-date/__tests__/ReviewDate.test.tsx b/src/patterns/review-date/__tests__/ReviewDate.test.tsx similarity index 66% rename from src/components/review-date/__tests__/ReviewDate.test.tsx rename to src/patterns/review-date/__tests__/ReviewDate.test.tsx index 034ab1d2..77ec9985 100644 --- a/src/components/review-date/__tests__/ReviewDate.test.tsx +++ b/src/patterns/review-date/__tests__/ReviewDate.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { mount, shallow } from 'enzyme'; +import { shallow } from 'enzyme'; import ReviewDate from '..'; describe('ReviewDate', () => { @@ -19,14 +19,4 @@ describe('ReviewDate', () => { ); element.unmount(); }); -}); - -describe('dev warnings', () => { - jest.spyOn(console, 'warn'); - it('warns when ReviewDate is used', () => { - const spy = jest.spyOn(console, 'warn'); - const component = mount(); - expect(spy).toHaveBeenCalled(); - component.unmount(); - }); -}); +}); \ No newline at end of file diff --git a/src/components/review-date/__tests__/__snapshots__/ReviewDate.test.tsx.snap b/src/patterns/review-date/__tests__/__snapshots__/ReviewDate.test.tsx.snap similarity index 55% rename from src/components/review-date/__tests__/__snapshots__/ReviewDate.test.tsx.snap rename to src/patterns/review-date/__tests__/__snapshots__/ReviewDate.test.tsx.snap index 0f299a57..220a50ce 100644 --- a/src/components/review-date/__tests__/__snapshots__/ReviewDate.test.tsx.snap +++ b/src/patterns/review-date/__tests__/__snapshots__/ReviewDate.test.tsx.snap @@ -1,11 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ReviewDate matches snapshot: ReviewDate 1`] = ` -
        -

        -

        +

        `; diff --git a/src/components/review-date/index.ts b/src/patterns/review-date/index.ts similarity index 100% rename from src/components/review-date/index.ts rename to src/patterns/review-date/index.ts diff --git a/stories/Components/Card.stories.tsx b/stories/Components/Card.stories.tsx index a00fa089..0f6a558f 100644 --- a/stories/Components/Card.stories.tsx +++ b/stories/Components/Card.stories.tsx @@ -1,7 +1,7 @@ /* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react'; import { Card } from '../../src'; -import { Meta, StoryObj, ArgTypes } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; import { ColWidth } from '../../src/util/types/NHSUKTypes'; const meta: Meta = { 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 + + + + ), +} diff --git a/stories/Components/Footer.stories.tsx b/stories/Components/Footer.stories.tsx index a7cf222d..f2f9ba75 100644 --- a/stories/Components/Footer.stories.tsx +++ b/stories/Components/Footer.stories.tsx @@ -26,28 +26,3 @@ export const Standard: Story = { ), }; - -export const WithThreeColumns: Story = { - render: () => ( - <> -

        -
        - - NHS sites - About us - Contact us - - Profile editor login - - Sitemap - Accessibility - Our policies - - Cookies - - - © Crown copyright -
        - - ), -}; diff --git a/stories/Components/Header.stories.tsx b/stories/Components/Header.stories.tsx index a5972d5e..93084bdb 100644 --- a/stories/Components/Header.stories.tsx +++ b/stories/Components/Header.stories.tsx @@ -101,19 +101,6 @@ export const TransactionalHeaderWithServiceName: Story = { ), }; -export const TransactionalHeaderWithALongServiceName: Story = { - render: () => ( -
        - - - - Find out why your NHS data matters - - -
        - ), -}; - export const OrganisationalHeader: Story = { render: () => (
        diff --git a/stories/MigrationGuides/UpgradeTov3.mdx b/stories/MigrationGuides/UpgradeTov3.mdx new file mode 100644 index 00000000..2e8c8ca3 --- /dev/null +++ b/stories/MigrationGuides/UpgradeTov3.mdx @@ -0,0 +1,6 @@ +import Docs from "../../docs/upgrade-to-3.0.md?raw" +import {Markdown, Meta} from "@storybook/blocks" + + + +{Docs} \ No newline at end of file diff --git a/stories/Components/ReviewDate.stories.tsx b/stories/Patterns/ReviewDate.stories.tsx similarity index 94% rename from stories/Components/ReviewDate.stories.tsx rename to stories/Patterns/ReviewDate.stories.tsx index 074e3baa..1f883383 100644 --- a/stories/Components/ReviewDate.stories.tsx +++ b/stories/Patterns/ReviewDate.stories.tsx @@ -2,7 +2,7 @@ import { ReviewDate } from '../../src'; import { Meta, StoryObj } from '@storybook/react'; const meta: Meta = { - title: 'Components/ReviewDate', + title: 'Patterns/ReviewDate', component: ReviewDate, }; export default meta; diff --git a/yarn.lock b/yarn.lock index 1ad7eb6d..504d9320 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3405,7 +3405,7 @@ accepts@~1.3.5, accepts@~1.3.8: mime-types "~2.1.34" negotiator "0.6.3" -accessible-autocomplete@^2.0.2, accessible-autocomplete@^2.0.3: +accessible-autocomplete@^2.0.2: version "2.0.3" resolved "https://registry.yarnpkg.com/accessible-autocomplete/-/accessible-autocomplete-2.0.3.tgz#3ed8d529b227b77e99ab509eec5d2c8d1b8bea8b" integrity sha512-bUswBs/mDH17dUFRAJMTtcGafJ++w1YLPPFjdfJj3lnuBsLpByAw2gmr8qxXX8oc7tzoKS3Ay5FKOPM+WMBxIw== @@ -8319,12 +8319,10 @@ neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1: accessible-autocomplete "^2.0.2" sass-mq "^5.0.1" -nhsuk-frontend@4.1.0: - version "4.1.0" - resolved "https://registry.yarnpkg.com/nhsuk-frontend/-/nhsuk-frontend-4.1.0.tgz#5f3569350282a1a7d53253ab60d71b4d81eefdac" - integrity sha512-Qg/2O72XeHkyzMnEV58bvrYb9Wg0QcoTIZgBAa8B0ch6yO0rW+u6tNv3eD2fSkQ8NLBGWVRmdBAXGtcn1xMQZw== - dependencies: - accessible-autocomplete "^2.0.3" +nhsuk-frontend@5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/nhsuk-frontend/-/nhsuk-frontend-5.0.0.tgz#21d000494ea4166983e9b2808b1bc581dc1c52e9" + integrity sha512-QOTrASBm6Vv2PnGSuEhJhCRsYZ3gCnFovLkv6CGXfafHgG1uArBtOXfAjMjySlw2GULVz+vQv//fCIT/Muuswg== nice-try@^1.0.4: version "1.0.5"