From 76781934d195c029ebb232c2044bda39edb77200 Mon Sep 17 00:00:00 2001 From: Jake Barron Date: Wed, 10 Apr 2024 09:12:52 +0100 Subject: [PATCH] Fixes/workaround for CJS consumption of components with nhsuk-frontend JS references. Better align components and stories to their folders/categories. --- .storybook/preview.ts | 10 +- docs/upgrade-to-4.0.md | 4 + .../do-and-dont-list/DoAndDontList.tsx | 2 +- .../{ => content-presentation}/hero/Hero.tsx | 2 +- .../hero/__tests__/Hero.test.tsx | 2 +- .../__snapshots__/Hero.test.tsx.snap | 0 .../{ => content-presentation}/hero/index.ts | 0 .../icons/BaseIcon.tsx | 0 .../icons/__tests__/Icons.test.tsx | 0 .../__snapshots__/Icons.test.tsx.snap | 0 .../{ => content-presentation}/icons/index.ts | 0 .../icons/individual/ArrowLeft.tsx | 0 .../icons/individual/ArrowRight.tsx | 0 .../icons/individual/ArrowRightCircle.tsx | 0 .../icons/individual/ChevronDown.tsx | 0 .../icons/individual/ChevronLeft.tsx | 0 .../icons/individual/ChevronRight.tsx | 0 .../icons/individual/ChevronRightCircle.tsx | 0 .../icons/individual/Close.tsx | 0 .../icons/individual/Cross.tsx | 0 .../icons/individual/Emdash.tsx | 0 .../icons/individual/Minus.tsx | 0 .../icons/individual/Plus.tsx | 0 .../icons/individual/Search.tsx | 0 .../icons/individual/SmallEmdash.tsx | 0 .../icons/individual/Tick.tsx | 0 .../content-presentation/tabs/Tabs.tsx | 4 +- .../character-count/CharacterCount.tsx | 4 +- .../form-elements/checkboxes/Checkboxes.tsx | 4 +- .../navigation/action-link/ActionLink.tsx | 2 +- .../navigation/back-link/BackLink.tsx | 2 +- src/components/navigation/header/Header.tsx | 4 +- .../header/components/NavDropdownMenu.tsx | 2 +- .../navigation/header/components/Search.tsx | 2 +- .../navigation/pagination/Pagination.tsx | 2 +- src/global.d.ts | 10 +- src/index.ts | 4 +- stories/Components/Checkboxes.stories.tsx | 215 ------------------ .../Hero.stories.tsx | 2 +- .../Icons.stories.tsx | 2 +- stories/Content Presentation/Tabs.stories.tsx | 2 +- stories/Form Elements/Checkboxes.stories.tsx | 204 ++++++++++++++++- stories/Form Elements/Label.stories.tsx | 2 +- .../{Components => Layout}/Grid.stories.tsx | 2 +- stories/Navigation/Card.stories.tsx | 2 +- stories/Patterns/Panel.stories.tsx | 2 +- stories/Welcome.mdx | 11 +- 47 files changed, 252 insertions(+), 252 deletions(-) rename src/components/{ => content-presentation}/hero/Hero.tsx (97%) rename src/components/{ => content-presentation}/hero/__tests__/Hero.test.tsx (99%) rename src/components/{ => content-presentation}/hero/__tests__/__snapshots__/Hero.test.tsx.snap (100%) rename src/components/{ => content-presentation}/hero/index.ts (100%) rename src/components/{ => content-presentation}/icons/BaseIcon.tsx (100%) rename src/components/{ => content-presentation}/icons/__tests__/Icons.test.tsx (100%) rename src/components/{ => content-presentation}/icons/__tests__/__snapshots__/Icons.test.tsx.snap (100%) rename src/components/{ => content-presentation}/icons/index.ts (100%) rename src/components/{ => content-presentation}/icons/individual/ArrowLeft.tsx (100%) rename src/components/{ => content-presentation}/icons/individual/ArrowRight.tsx (100%) rename src/components/{ => content-presentation}/icons/individual/ArrowRightCircle.tsx (100%) rename src/components/{ => content-presentation}/icons/individual/ChevronDown.tsx (100%) rename src/components/{ => content-presentation}/icons/individual/ChevronLeft.tsx (100%) rename src/components/{ => content-presentation}/icons/individual/ChevronRight.tsx (100%) rename src/components/{ => content-presentation}/icons/individual/ChevronRightCircle.tsx (100%) rename src/components/{ => content-presentation}/icons/individual/Close.tsx (100%) rename src/components/{ => content-presentation}/icons/individual/Cross.tsx (100%) rename src/components/{ => content-presentation}/icons/individual/Emdash.tsx (100%) rename src/components/{ => content-presentation}/icons/individual/Minus.tsx (100%) rename src/components/{ => content-presentation}/icons/individual/Plus.tsx (100%) rename src/components/{ => content-presentation}/icons/individual/Search.tsx (100%) rename src/components/{ => content-presentation}/icons/individual/SmallEmdash.tsx (100%) rename src/components/{ => content-presentation}/icons/individual/Tick.tsx (100%) delete mode 100644 stories/Components/Checkboxes.stories.tsx rename stories/{Components => Content Presentation}/Hero.stories.tsx (96%) rename stories/{Components => Content Presentation}/Icons.stories.tsx (97%) rename stories/{Components => Layout}/Grid.stories.tsx (97%) diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 4141c9ef..fce54dde 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -6,7 +6,15 @@ const preview: Preview = { actions: { argTypesRegex: '^on[A-Z].*' }, options: { storySort: { - order: ['Welcome', 'Migration Guides', 'Form Elements', 'Content Presentation', 'Navigation', 'Components', 'Patterns'], + order: [ + 'Welcome', + 'Migration Guides', + 'Form Elements', + 'Content Presentation', + 'Navigation', + 'Layout', + 'Patterns', + ], }, }, }, diff --git a/docs/upgrade-to-4.0.md b/docs/upgrade-to-4.0.md index 5a36dc21..d7bc0127 100644 --- a/docs/upgrade-to-4.0.md +++ b/docs/upgrade-to-4.0.md @@ -117,6 +117,10 @@ The `NavAZ` component is still available, however the `ListPanel` component has An additional storybook story has been added to give a full example of an A-Z page, combining both of these components. This helps to bring this library into alignment with the [NHS digital service manual listing](https://service-manual.nhs.uk/design-system/patterns/a-to-z-page) for this pattern. +### Hint + +`Hint` has been renamed to `HintText`. + ## New features ### Text input prefixes + suffixes diff --git a/src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx b/src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx index 6702ba2c..38191e5d 100644 --- a/src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx +++ b/src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx @@ -1,7 +1,7 @@ 'use client'; import React, { FC, HTMLProps, createContext, useContext, ReactNode } from 'react'; import classNames from 'classnames'; -import { Tick, Cross } from '@components/icons'; +import { Tick, Cross } from '@components/content-presentation/icons'; import HeadingLevel, { HeadingLevelType } from '@util/HeadingLevel'; type ListType = 'do' | 'dont'; diff --git a/src/components/hero/Hero.tsx b/src/components/content-presentation/hero/Hero.tsx similarity index 97% rename from src/components/hero/Hero.tsx rename to src/components/content-presentation/hero/Hero.tsx index 77dbb4aa..15999056 100644 --- a/src/components/hero/Hero.tsx +++ b/src/components/content-presentation/hero/Hero.tsx @@ -1,6 +1,6 @@ import React, { FC, HTMLProps } from 'react'; import classNames from 'classnames'; -import { Container, Row, Col } from '../layout'; +import { Container, Row, Col } from '../../layout'; import HeadingLevel, { HeadingLevelType } from '@util/HeadingLevel'; interface HeroContentProps extends HTMLProps { diff --git a/src/components/hero/__tests__/Hero.test.tsx b/src/components/content-presentation/hero/__tests__/Hero.test.tsx similarity index 99% rename from src/components/hero/__tests__/Hero.test.tsx rename to src/components/content-presentation/hero/__tests__/Hero.test.tsx index a3dd9fd0..788a012d 100644 --- a/src/components/hero/__tests__/Hero.test.tsx +++ b/src/components/content-presentation/hero/__tests__/Hero.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { render } from '@testing-library/react'; -import Hero from '../'; +import Hero from '..'; describe('Hero', () => { it('matches snapshot', () => { diff --git a/src/components/hero/__tests__/__snapshots__/Hero.test.tsx.snap b/src/components/content-presentation/hero/__tests__/__snapshots__/Hero.test.tsx.snap similarity index 100% rename from src/components/hero/__tests__/__snapshots__/Hero.test.tsx.snap rename to src/components/content-presentation/hero/__tests__/__snapshots__/Hero.test.tsx.snap diff --git a/src/components/hero/index.ts b/src/components/content-presentation/hero/index.ts similarity index 100% rename from src/components/hero/index.ts rename to src/components/content-presentation/hero/index.ts diff --git a/src/components/icons/BaseIcon.tsx b/src/components/content-presentation/icons/BaseIcon.tsx similarity index 100% rename from src/components/icons/BaseIcon.tsx rename to src/components/content-presentation/icons/BaseIcon.tsx diff --git a/src/components/icons/__tests__/Icons.test.tsx b/src/components/content-presentation/icons/__tests__/Icons.test.tsx similarity index 100% rename from src/components/icons/__tests__/Icons.test.tsx rename to src/components/content-presentation/icons/__tests__/Icons.test.tsx diff --git a/src/components/icons/__tests__/__snapshots__/Icons.test.tsx.snap b/src/components/content-presentation/icons/__tests__/__snapshots__/Icons.test.tsx.snap similarity index 100% rename from src/components/icons/__tests__/__snapshots__/Icons.test.tsx.snap rename to src/components/content-presentation/icons/__tests__/__snapshots__/Icons.test.tsx.snap diff --git a/src/components/icons/index.ts b/src/components/content-presentation/icons/index.ts similarity index 100% rename from src/components/icons/index.ts rename to src/components/content-presentation/icons/index.ts diff --git a/src/components/icons/individual/ArrowLeft.tsx b/src/components/content-presentation/icons/individual/ArrowLeft.tsx similarity index 100% rename from src/components/icons/individual/ArrowLeft.tsx rename to src/components/content-presentation/icons/individual/ArrowLeft.tsx diff --git a/src/components/icons/individual/ArrowRight.tsx b/src/components/content-presentation/icons/individual/ArrowRight.tsx similarity index 100% rename from src/components/icons/individual/ArrowRight.tsx rename to src/components/content-presentation/icons/individual/ArrowRight.tsx diff --git a/src/components/icons/individual/ArrowRightCircle.tsx b/src/components/content-presentation/icons/individual/ArrowRightCircle.tsx similarity index 100% rename from src/components/icons/individual/ArrowRightCircle.tsx rename to src/components/content-presentation/icons/individual/ArrowRightCircle.tsx diff --git a/src/components/icons/individual/ChevronDown.tsx b/src/components/content-presentation/icons/individual/ChevronDown.tsx similarity index 100% rename from src/components/icons/individual/ChevronDown.tsx rename to src/components/content-presentation/icons/individual/ChevronDown.tsx diff --git a/src/components/icons/individual/ChevronLeft.tsx b/src/components/content-presentation/icons/individual/ChevronLeft.tsx similarity index 100% rename from src/components/icons/individual/ChevronLeft.tsx rename to src/components/content-presentation/icons/individual/ChevronLeft.tsx diff --git a/src/components/icons/individual/ChevronRight.tsx b/src/components/content-presentation/icons/individual/ChevronRight.tsx similarity index 100% rename from src/components/icons/individual/ChevronRight.tsx rename to src/components/content-presentation/icons/individual/ChevronRight.tsx diff --git a/src/components/icons/individual/ChevronRightCircle.tsx b/src/components/content-presentation/icons/individual/ChevronRightCircle.tsx similarity index 100% rename from src/components/icons/individual/ChevronRightCircle.tsx rename to src/components/content-presentation/icons/individual/ChevronRightCircle.tsx diff --git a/src/components/icons/individual/Close.tsx b/src/components/content-presentation/icons/individual/Close.tsx similarity index 100% rename from src/components/icons/individual/Close.tsx rename to src/components/content-presentation/icons/individual/Close.tsx diff --git a/src/components/icons/individual/Cross.tsx b/src/components/content-presentation/icons/individual/Cross.tsx similarity index 100% rename from src/components/icons/individual/Cross.tsx rename to src/components/content-presentation/icons/individual/Cross.tsx diff --git a/src/components/icons/individual/Emdash.tsx b/src/components/content-presentation/icons/individual/Emdash.tsx similarity index 100% rename from src/components/icons/individual/Emdash.tsx rename to src/components/content-presentation/icons/individual/Emdash.tsx diff --git a/src/components/icons/individual/Minus.tsx b/src/components/content-presentation/icons/individual/Minus.tsx similarity index 100% rename from src/components/icons/individual/Minus.tsx rename to src/components/content-presentation/icons/individual/Minus.tsx diff --git a/src/components/icons/individual/Plus.tsx b/src/components/content-presentation/icons/individual/Plus.tsx similarity index 100% rename from src/components/icons/individual/Plus.tsx rename to src/components/content-presentation/icons/individual/Plus.tsx diff --git a/src/components/icons/individual/Search.tsx b/src/components/content-presentation/icons/individual/Search.tsx similarity index 100% rename from src/components/icons/individual/Search.tsx rename to src/components/content-presentation/icons/individual/Search.tsx diff --git a/src/components/icons/individual/SmallEmdash.tsx b/src/components/content-presentation/icons/individual/SmallEmdash.tsx similarity index 100% rename from src/components/icons/individual/SmallEmdash.tsx rename to src/components/content-presentation/icons/individual/SmallEmdash.tsx diff --git a/src/components/icons/individual/Tick.tsx b/src/components/content-presentation/icons/individual/Tick.tsx similarity index 100% rename from src/components/icons/individual/Tick.tsx rename to src/components/content-presentation/icons/individual/Tick.tsx diff --git a/src/components/content-presentation/tabs/Tabs.tsx b/src/components/content-presentation/tabs/Tabs.tsx index 4688cd1b..b0764489 100644 --- a/src/components/content-presentation/tabs/Tabs.tsx +++ b/src/components/content-presentation/tabs/Tabs.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import React, { FC, HTMLAttributes, useEffect } from 'react'; import HeadingLevel, { HeadingLevelType } from '@util/HeadingLevel'; -import TabsJs from 'nhsuk-frontend/packages/components/tabs/tabs.js'; +import TabsJs from 'nhsuk-frontend/packages/components/tabs/tabs'; type TabsProps = HTMLAttributes; @@ -55,7 +55,7 @@ interface Tabs extends FC { const Tabs: Tabs = ({ className, children, ...rest }) => { useEffect(() => { - TabsJs(); + TabsJs.default ? TabsJs.default() : TabsJs(); }, []); return ( diff --git a/src/components/form-elements/character-count/CharacterCount.tsx b/src/components/form-elements/character-count/CharacterCount.tsx index ac519377..0cc527ec 100644 --- a/src/components/form-elements/character-count/CharacterCount.tsx +++ b/src/components/form-elements/character-count/CharacterCount.tsx @@ -1,6 +1,6 @@ 'use client'; import React, { FC, useEffect } from 'react'; -import CharacterCountJs from 'nhsuk-frontend/packages/components/character-count/character-count.js'; +import CharacterCountJs from 'nhsuk-frontend/packages/components/character-count/character-count'; import { HTMLAttributesWithData } from '@util/types/NHSUKTypes'; export enum CharacterCountType { @@ -25,7 +25,7 @@ const CharacterCount: FC = ({ ...rest }) => { useEffect(() => { - CharacterCountJs(); + CharacterCountJs.default ? CharacterCountJs.default() : CharacterCountJs(); }, []); const characterCountProps: HTMLAttributesWithData = diff --git a/src/components/form-elements/checkboxes/Checkboxes.tsx b/src/components/form-elements/checkboxes/Checkboxes.tsx index d2f8a338..d75d1ce6 100644 --- a/src/components/form-elements/checkboxes/Checkboxes.tsx +++ b/src/components/form-elements/checkboxes/Checkboxes.tsx @@ -8,7 +8,7 @@ import CheckboxContext, { ICheckboxContext } from './CheckboxContext'; import Box from './components/Box'; import Divider from './components/Divider'; import { generateRandomName } from '@util/RandomID'; -import CheckboxJs from 'nhsuk-frontend/packages/components/checkboxes/checkboxes.js'; +import CheckboxJs from 'nhsuk-frontend/packages/components/checkboxes/checkboxes'; interface CheckboxesProps extends HTMLProps, FormElementProps { idPrefix?: string; @@ -20,7 +20,7 @@ const Checkboxes = ({ children, idPrefix, ...rest }: CheckboxesProps) => { let _boxIds: Record = {}; useEffect(() => { - CheckboxJs(); + CheckboxJs.default ? CheckboxJs.default() : CheckboxJs(); }, []); const getBoxId = (id: string, reference: string): string => { diff --git a/src/components/navigation/action-link/ActionLink.tsx b/src/components/navigation/action-link/ActionLink.tsx index e4873932..0a3a38be 100644 --- a/src/components/navigation/action-link/ActionLink.tsx +++ b/src/components/navigation/action-link/ActionLink.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; import classNames from 'classnames'; -import { ArrowRightCircle } from '@components/icons'; +import { ArrowRightCircle } from '@components/content-presentation/icons'; import { AsElementLink } from '@util/types/LinkTypes'; const ActionLink: FC> = ({ diff --git a/src/components/navigation/back-link/BackLink.tsx b/src/components/navigation/back-link/BackLink.tsx index ea0f6587..e032626e 100644 --- a/src/components/navigation/back-link/BackLink.tsx +++ b/src/components/navigation/back-link/BackLink.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; import classNames from 'classnames'; -import { ChevronLeft } from '@components/icons'; +import { ChevronLeft } from '@components/content-presentation/icons'; import { AsElementLink } from '@util/types/LinkTypes'; const BackLink: FC> = ({ diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx index f4fa4049..00f451aa 100644 --- a/src/components/navigation/header/Header.tsx +++ b/src/components/navigation/header/Header.tsx @@ -11,7 +11,7 @@ import NavDropdownMenu from './components/NavDropdownMenu'; import { Container } from '@components/layout'; import Content from './components/Content'; import TransactionalServiceName from './components/TransactionalServiceName'; -import HeaderJs from 'nhsuk-frontend/packages/components/header/header.js'; +import HeaderJs from 'nhsuk-frontend/packages/components/header/header'; const BaseHeaderLogo: FC = (props) => { const { orgName } = useContext(HeaderContext); @@ -51,7 +51,7 @@ const Header = ({ const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { - HeaderJs(); + HeaderJs.default ? HeaderJs.default() : HeaderJs(); }, []); const setMenuToggle = (toggle: boolean): void => { diff --git a/src/components/navigation/header/components/NavDropdownMenu.tsx b/src/components/navigation/header/components/NavDropdownMenu.tsx index 1a3f9ae8..43abd852 100644 --- a/src/components/navigation/header/components/NavDropdownMenu.tsx +++ b/src/components/navigation/header/components/NavDropdownMenu.tsx @@ -1,7 +1,7 @@ 'use client'; import React, { FC, HTMLProps, useContext, useEffect, MouseEvent } from 'react'; import HeaderContext, { IHeaderContext } from '../HeaderContext'; -import { ChevronDown as ChevronDownIcon } from '@components/icons'; +import { ChevronDown as ChevronDownIcon } from '@components/content-presentation/icons'; export interface NavDropdownMenuProps extends HTMLProps { type?: 'button' | 'submit' | 'reset'; diff --git a/src/components/navigation/header/components/Search.tsx b/src/components/navigation/header/components/Search.tsx index 92f4c0bf..9d0b29d0 100644 --- a/src/components/navigation/header/components/Search.tsx +++ b/src/components/navigation/header/components/Search.tsx @@ -1,6 +1,6 @@ import React, { FC, HTMLProps, useContext, useEffect } from 'react'; import classNames from 'classnames'; -import { Search as SearchIcon } from '@components/icons'; +import { Search as SearchIcon } from '@components/content-presentation/icons'; import HeaderContext, { IHeaderContext } from '../HeaderContext'; export interface SearchProps extends HTMLProps { diff --git a/src/components/navigation/pagination/Pagination.tsx b/src/components/navigation/pagination/Pagination.tsx index b8b4440b..b8f7c0f0 100644 --- a/src/components/navigation/pagination/Pagination.tsx +++ b/src/components/navigation/pagination/Pagination.tsx @@ -1,6 +1,6 @@ import React, { FC, HTMLProps } from 'react'; import classNames from 'classnames'; -import { ArrowLeft, ArrowRight } from '@components/icons'; +import { ArrowLeft, ArrowRight } from '@components/content-presentation/icons'; interface PaginationLinkProps extends HTMLProps { previous?: boolean; diff --git a/src/global.d.ts b/src/global.d.ts index d80b32e8..4d00cad0 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -1,5 +1,5 @@ -declare module 'nhsuk-frontend/packages/components/header/header.js'; -declare module 'nhsuk-frontend/packages/components/checkboxes/checkboxes.js'; -declare module 'nhsuk-frontend/packages/components/radios/radios.js'; -declare module 'nhsuk-frontend/packages/components/character-count/character-count.js'; -declare module 'nhsuk-frontend/packages/components/tabs/tabs.js'; +declare module 'nhsuk-frontend/packages/components/header/header'; +declare module 'nhsuk-frontend/packages/components/checkboxes/checkboxes'; +declare module 'nhsuk-frontend/packages/components/radios/radios'; +declare module 'nhsuk-frontend/packages/components/character-count/character-count'; +declare module 'nhsuk-frontend/packages/components/tabs/tabs'; diff --git a/src/index.ts b/src/index.ts index 3e195da8..964d9778 100644 --- a/src/index.ts +++ b/src/index.ts @@ -22,7 +22,7 @@ export { default as Fieldset } from './components/form-elements/fieldset'; export { default as Footer } from './components/navigation/footer'; export { default as Form, useFormContext } from './components/form-elements/form'; export { default as Header } from './components/navigation/header'; -export { default as Hero } from './components/hero'; +export { default as Hero } from './components/content-presentation/hero'; export { default as HintText } from './components/form-elements/hint-text'; export { ArrowLeft as ArrowLeftIcon, @@ -38,7 +38,7 @@ export { Plus as PlusIcon, Search as SearchIcon, Tick as TickIcon, -} from './components/icons'; +} from './components/content-presentation/icons'; export { default as Images } from './components/content-presentation/images'; export { default as TextInput } from './components/form-elements/text-input'; export { default as InsetText } from './components/content-presentation/inset-text'; diff --git a/stories/Components/Checkboxes.stories.tsx b/stories/Components/Checkboxes.stories.tsx deleted file mode 100644 index aef51cb9..00000000 --- a/stories/Components/Checkboxes.stories.tsx +++ /dev/null @@ -1,215 +0,0 @@ -import React, { useState } from 'react'; -import { Fieldset, Checkboxes, TextInput } from '../../src'; -import { Button } from '@components/form-elements/button'; -import { Meta, StoryObj } from '@storybook/react'; - -/** - * This component can be found in the `nhsuk-frontend` repository here. - * - * ## Implementation Notes - * - * For details on the new form design pattern, check the documentation for the `Form` component. - * - * The `Checkbox` component provides a `CheckboxContext` context, which the `Checkbox.Box` components use. When each box initially renders, it will attempt to assign itself an `id` by calling the `getBoxId` method in the context. This will assign each box a sequential ID using either the `idPrefix` or `name` supplied to the Checkbox. If neither are provided, the element will generate it's own unique identifier. - * - * ## Usage - * - * ### Standard - * - * ```jsx - * import { Checkboxes } from "nhsuk-react-components"; - * - * const Element = () => { - * return ( - * - * British - * Irish - * Citizen of another country - * - * ); - * } - * ``` - */ -const meta: Meta = { - title: 'Components/Checkboxes', - component: Checkboxes, -}; -export default meta; -type Story = StoryObj; - -Checkboxes.Box.displayName = 'Checkboxes.Box'; -Checkboxes.Divider.displayName = 'Checkboxes.Divider'; - -export const Standard: Story = { - render: (args) => ( -
-
- What is your nationality? - - British - Irish - Citizen of another country - -
-
- ), -}; - -export const WithHintText: Story = { - render: (args) => ( -
-
- How do you want to sign in? - - - Sign in with Government Gateway - - - Sign in with NHS.UK login - - -
-
- ), -}; - -export const WithDisabledItem: Story = { - render: (args) => ( -
- - Red - Green - - Blue - - -
- ), -}; - -export const WithConditionalContent: Story = { - render: (args) => ( -
-
- - Which types of waste do you transport regularly? - - - This includes rocks and earth.

} value="mines"> - Waste from mines or quarries - - -
-
- ), -}; - -export const WithLegendAsPageHeading: Story = { - render: (args) => ( -
-
- - Which types of waste do you transport regularly? - - - Waste from animal carcasses - Waste from mines or quarries - Farm or agricultural waste - -
-
- ), -}; - -export const WithExclusiveNoneOption: Story = { - render: (args) => ( -
-
- Do you have any of these symptoms? - - Sore throat - Runny nose - Muscle or joint pain - - - None - - -
-
- ), -}; - -export const WithErrorBoolean: Story = { - render: (args) => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const [errorToggle, setErrorToggle] = useState(true); - return ( -
-
- - Which types of waste do you transport regularly? - - - Waste from animal carcasses - Waste from mines or quarries - Farm or agricultural waste - -
- -
- ); - }, - - name: 'With Error (Boolean)', -}; - -export const WithErrorString: Story = { - render: (args) => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const [error, setError] = useState('Please select an option'); - return ( -
-
- - Which types of waste do you transport regularly? - - - Waste from animal carcasses - Waste from mines or quarries - Farm or agricultural waste - -
- setError(e.currentTarget.value)} - /> - - ); - }, - name: 'With Error (String)', -}; diff --git a/stories/Components/Hero.stories.tsx b/stories/Content Presentation/Hero.stories.tsx similarity index 96% rename from stories/Components/Hero.stories.tsx rename to stories/Content Presentation/Hero.stories.tsx index a1039052..4836aced 100644 --- a/stories/Components/Hero.stories.tsx +++ b/stories/Content Presentation/Hero.stories.tsx @@ -3,7 +3,7 @@ import { Hero } from '../../src'; import { Meta, StoryObj } from '@storybook/react'; const meta: Meta = { - title: 'Components/Hero', + title: 'Content Presentation/Hero', component: Hero, }; export default meta; diff --git a/stories/Components/Icons.stories.tsx b/stories/Content Presentation/Icons.stories.tsx similarity index 97% rename from stories/Components/Icons.stories.tsx rename to stories/Content Presentation/Icons.stories.tsx index 1ca0118f..51cd33fc 100644 --- a/stories/Components/Icons.stories.tsx +++ b/stories/Content Presentation/Icons.stories.tsx @@ -17,7 +17,7 @@ import { import { Meta, StoryObj } from '@storybook/react'; const meta: Meta = { - title: 'Components/Icons', + title: 'Content Presentation/Icons', }; export default meta; type Story = StoryObj; diff --git a/stories/Content Presentation/Tabs.stories.tsx b/stories/Content Presentation/Tabs.stories.tsx index 7cb0201e..fe842c94 100644 --- a/stories/Content Presentation/Tabs.stories.tsx +++ b/stories/Content Presentation/Tabs.stories.tsx @@ -11,7 +11,7 @@ import { Meta, StoryObj } from '@storybook/react'; */ const meta: Meta = { - title: 'Form Elements/Tabs', + title: 'Content Presentation/Tabs', component: Tabs, }; diff --git a/stories/Form Elements/Checkboxes.stories.tsx b/stories/Form Elements/Checkboxes.stories.tsx index 2203f335..1938b426 100644 --- a/stories/Form Elements/Checkboxes.stories.tsx +++ b/stories/Form Elements/Checkboxes.stories.tsx @@ -1,7 +1,35 @@ import React, { useRef, useState, useEffect, SyntheticEvent } from 'react'; -import { Checkboxes } from '../../src'; +import { Fieldset, Checkboxes, TextInput, Button } from '../../src'; import { Meta, StoryObj } from '@storybook/react'; +/** + * This component can be found in the `nhsuk-frontend` repository here. + * + * ## Implementation Notes + * + * For details on the new form design pattern, check the documentation for the `Form` component. + * + * The `Checkbox` component provides a `CheckboxContext` context, which the `Checkbox.Box` components use. When each box initially renders, it will attempt to assign itself an `id` by calling the `getBoxId` method in the context. This will assign each box a sequential ID using either the `idPrefix` or `name` supplied to the Checkbox. If neither are provided, the element will generate it's own unique identifier. + * + * ## Usage + * + * ### Standard + * + * ```jsx + * import { Checkboxes } from "nhsuk-react-components"; + * + * const Element = () => { + * return ( + * + * British + * Irish + * Citizen of another country + * + * ); + * } + * ``` + */ + const meta: Meta = { title: 'Form Elements/Checkboxes', component: Checkboxes, @@ -15,6 +43,180 @@ type CheckboxState = { box3: { name?: string; id?: string }; }; +export const Standard: Story = { + render: (args) => ( +
+
+ What is your nationality? + + British + Irish + Citizen of another country + +
+
+ ), +}; + +export const WithHintText: Story = { + render: (args) => ( +
+
+ How do you want to sign in? + + + Sign in with Government Gateway + + + Sign in with NHS.UK login + + +
+
+ ), +}; + +export const WithDisabledItem: Story = { + render: (args) => ( +
+ + Red + Green + + Blue + + +
+ ), +}; + +export const WithConditionalContent: Story = { + render: (args) => ( +
+
+ + Which types of waste do you transport regularly? + + + This includes rocks and earth.

} value="mines"> + Waste from mines or quarries + + +
+
+ ), +}; + +export const WithLegendAsPageHeading: Story = { + render: (args) => ( +
+
+ + Which types of waste do you transport regularly? + + + Waste from animal carcasses + Waste from mines or quarries + Farm or agricultural waste + +
+
+ ), +}; + +export const WithExclusiveNoneOption: Story = { + render: (args) => ( +
+
+ Do you have any of these symptoms? + + Sore throat + Runny nose + Muscle or joint pain + + + None + + +
+
+ ), +}; + +export const WithErrorBoolean: Story = { + render: (args) => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const [errorToggle, setErrorToggle] = useState(true); + return ( +
+
+ + Which types of waste do you transport regularly? + + + Waste from animal carcasses + Waste from mines or quarries + Farm or agricultural waste + +
+ +
+ ); + }, + + name: 'With Error (Boolean)', +}; + +export const WithErrorString: Story = { + render: (args) => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const [error, setError] = useState('Please select an option'); + return ( +
+
+ + Which types of waste do you transport regularly? + + + Waste from animal carcasses + Waste from mines or quarries + Farm or agricultural waste + +
+ setError(e.currentTarget.value)} + /> + + ); + }, + name: 'With Error (String)', +}; + export const NoIDSupplied: Story = { render: function NoIDSuppliedRender() { const checkbox1Ref = useRef(null); diff --git a/stories/Form Elements/Label.stories.tsx b/stories/Form Elements/Label.stories.tsx index b375168b..e894b0e6 100644 --- a/stories/Form Elements/Label.stories.tsx +++ b/stories/Form Elements/Label.stories.tsx @@ -2,7 +2,7 @@ import { Label } from '../../src'; import { Meta, StoryObj } from '@storybook/react'; const meta: Meta = { - title: 'Components/Label', + title: 'Form Elements/Label', component: Label, args: { children: 'National Insurance Number', diff --git a/stories/Components/Grid.stories.tsx b/stories/Layout/Grid.stories.tsx similarity index 97% rename from stories/Components/Grid.stories.tsx rename to stories/Layout/Grid.stories.tsx index 65b4181a..6589ff60 100644 --- a/stories/Components/Grid.stories.tsx +++ b/stories/Layout/Grid.stories.tsx @@ -3,7 +3,7 @@ import { Row, Col, Card, Container } from '../../src'; import { Meta, StoryObj } from '@storybook/react'; const meta: Meta = { - title: 'Components/Grid', + title: 'Layout/Grid', }; export default meta; diff --git a/stories/Navigation/Card.stories.tsx b/stories/Navigation/Card.stories.tsx index 3c23d2ef..8780b8e9 100644 --- a/stories/Navigation/Card.stories.tsx +++ b/stories/Navigation/Card.stories.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { Card } from '../../src'; import { Meta, StoryObj } from '@storybook/react'; import { ColWidth } from '../../src/util/types/NHSUKTypes'; -import { ChevronRightCircle } from '@components/icons'; +import { ChevronRightCircle } from '@components/content-presentation/icons'; const meta: Meta = { title: 'Navigation/Card', diff --git a/stories/Patterns/Panel.stories.tsx b/stories/Patterns/Panel.stories.tsx index 4462efee..fa3bac5e 100644 --- a/stories/Patterns/Panel.stories.tsx +++ b/stories/Patterns/Panel.stories.tsx @@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react'; import Panel from '@patterns/panel/Panel'; const meta: Meta = { - title: 'Components/Panel', + title: 'Patterns/Panel', component: Panel, }; export default meta; diff --git a/stories/Welcome.mdx b/stories/Welcome.mdx index 699a6f96..29c029a8 100644 --- a/stories/Welcome.mdx +++ b/stories/Welcome.mdx @@ -9,7 +9,6 @@ NHS.UK Frontend ported to React [![CD Build and Publish to NPM](https://github.com/NHSDigital/nhsuk-react-components/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/NHSDigital/nhsuk-react-components/actions/workflows/release.yml) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/nhsuk-react-components.svg)](https://bundlephobia.com/result?p=nhsuk-react-components) - ## Installation You can install this package using either `yarn` or `npm`. @@ -28,6 +27,10 @@ If you are coming from older versions, please see the migration guides below: [1.x To v2](/docs/migration-guides-upgrade-to-2-0--docs#upgrading-to-20) +[2.x To v3](/docs/migration-guides-upgrade-to-3-0--docs#upgrading-to-30) + +[3.x To v4](/docs/migration-guides-upgrade-to-4-0--docs#upgrading-to-40) + ## Usage ```jsx @@ -39,9 +42,7 @@ import { Button } from 'nhsuk-react-components'; // Or you can import components directly import Button from 'nhsuk-react-components/lib/components/button'; -function GetStartedButton(){ - return ( - - ); +function GetStartedButton() { + return ; } ```