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) => (
-
- ),
-};
-
-export const WithHintText: Story = {
- render: (args) => (
-
- ),
-};
-
-export const WithDisabledItem: Story = {
- render: (args) => (
-
- ),
-};
-
-export const WithConditionalContent: Story = {
- render: (args) => (
-
} value="mines">
- Waste from mines or quarries
-
-
-
-
- ),
-};
-
-export const WithLegendAsPageHeading: Story = {
- render: (args) => (
-
- ),
-};
-
-export const WithExclusiveNoneOption: Story = {
- render: (args) => (
-
- ),
-};
-
-export const WithErrorBoolean: Story = {
- render: (args) => {
- // eslint-disable-next-line react-hooks/rules-of-hooks
- const [errorToggle, setErrorToggle] = useState(true);
- return (
-
- );
- },
-
- 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 (
-
- );
- },
- 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) => (
+
+ ),
+};
+
+export const WithHintText: Story = {
+ render: (args) => (
+
+ ),
+};
+
+export const WithDisabledItem: Story = {
+ render: (args) => (
+
+ ),
+};
+
+export const WithConditionalContent: Story = {
+ render: (args) => (
+
+ ),
+};
+
+export const WithLegendAsPageHeading: Story = {
+ render: (args) => (
+
+ ),
+};
+
+export const WithExclusiveNoneOption: Story = {
+ render: (args) => (
+
+ ),
+};
+
+export const WithErrorBoolean: Story = {
+ render: (args) => {
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ const [errorToggle, setErrorToggle] = useState(true);
+ return (
+
+ );
+ },
+
+ 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 (
+
+ );
+ },
+ 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 ;
}
```