Fixes/workaround for CJS consumption of components with nhsuk-frontend JS references. Better align components and stories to their folders/categories.

.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',
+        ],
       },
     },
   },

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

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';

src/components/hero/Hero.tsx → 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<HTMLDivElement> {

src/components/hero/__tests__/Hero.test.tsx → 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', () => {

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<HTMLDivElement>;
 
@@ -55,7 +55,7 @@ interface Tabs extends FC<TabsProps> {
 
 const Tabs: Tabs = ({ className, children, ...rest }) => {
   useEffect(() => {
-    TabsJs();
+    TabsJs.default ? TabsJs.default() : TabsJs();
   }, []);
 
   return (

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<CharacterCountProps> = ({
   ...rest
 }) => {
   useEffect(() => {
-    CharacterCountJs();
+    CharacterCountJs.default ? CharacterCountJs.default() : CharacterCountJs();
   }, []);
 
   const characterCountProps: HTMLAttributesWithData<HTMLDivElement> =

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<HTMLDivElement>, FormElementProps {
   idPrefix?: string;
@@ -20,7 +20,7 @@ const Checkboxes = ({ children, idPrefix, ...rest }: CheckboxesProps) => {
   let _boxIds: Record<string, string> = {};
 
   useEffect(() => {
-    CheckboxJs();
+    CheckboxJs.default ? CheckboxJs.default() : CheckboxJs();
   }, []);
 
   const getBoxId = (id: string, reference: string): string => {

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<AsElementLink<HTMLAnchorElement>> = ({

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<AsElementLink<HTMLAnchorElement>> = ({

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<OrganisationalLogoProps & NHSLogoNavProps> = (props) => {
   const { orgName } = useContext<IHeaderContext>(HeaderContext);
@@ -51,7 +51,7 @@ const Header = ({
   const [menuOpen, setMenuOpen] = useState(false);
 
   useEffect(() => {
-    HeaderJs();
+    HeaderJs.default ? HeaderJs.default() : HeaderJs();
   }, []);
 
   const setMenuToggle = (toggle: boolean): void => {

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<HTMLButtonElement> {
   type?: 'button' | 'submit' | 'reset';

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<HTMLInputElement> {

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<HTMLAnchorElement> {
   previous?: boolean;

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';

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';