diff --git a/src/components/navigation/contents-list/index.ts b/src/components/navigation/contents-list/index.ts
index 475d04c00..1d37f98aa 100644
--- a/src/components/navigation/contents-list/index.ts
+++ b/src/components/navigation/contents-list/index.ts
@@ -1 +1 @@
-export { default } from './ContentsList';
+export * from './ContentsList.js';
diff --git a/src/components/navigation/footer/Footer.tsx b/src/components/navigation/footer/Footer.tsx
index 5246adf36..bcc2f202a 100644
--- a/src/components/navigation/footer/Footer.tsx
+++ b/src/components/navigation/footer/Footer.tsx
@@ -1,8 +1,7 @@
-import React, { Children, ComponentPropsWithoutRef, FC, forwardRef } from 'react';
import classNames from 'classnames';
-import { Container } from '@components/layout';
-import { AsElementLink } from '@util/types/LinkTypes';
-import { childIsOfComponentType } from '@util/types/TypeGuards';
+import { Children, forwardRef, type ComponentPropsWithoutRef, type FC } from 'react';
+import { Container } from '#components/layout/index.js';
+import { childIsOfComponentType, type AsElementLink } from '#util/types/index.js';
export interface FooterMetaProps extends FooterListProps {
visuallyHiddenText?: string;
@@ -106,7 +105,7 @@ FooterList.displayName = 'Footer.List';
FooterListItem.displayName = 'Footer.ListItem';
FooterCopyright.displayName = 'Footer.Copyright';
-export default Object.assign(FooterComponent, {
+export const Footer = Object.assign(FooterComponent, {
Meta: FooterMeta,
List: FooterList,
ListItem: FooterListItem,
diff --git a/src/components/navigation/footer/__tests__/Footer.test.tsx b/src/components/navigation/footer/__tests__/Footer.test.tsx
index 796639395..6e59b65b2 100644
--- a/src/components/navigation/footer/__tests__/Footer.test.tsx
+++ b/src/components/navigation/footer/__tests__/Footer.test.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
import { render } from '@testing-library/react';
-import Footer from '../';
+import { Footer } from '..';
jest.spyOn(console, 'warn').mockImplementation();
diff --git a/src/components/navigation/footer/__tests__/__snapshots__/Footer.test.tsx.snap b/src/components/navigation/footer/__tests__/__snapshots__/Footer.test.tsx.snap
index be65b0663..d196ac396 100644
--- a/src/components/navigation/footer/__tests__/__snapshots__/Footer.test.tsx.snap
+++ b/src/components/navigation/footer/__tests__/__snapshots__/Footer.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`Footer Footer.Copyright matches snapshot: Footer.Copyright 1`] = `
diff --git a/src/components/navigation/footer/index.ts b/src/components/navigation/footer/index.ts
index be92134c1..bbfb18593 100644
--- a/src/components/navigation/footer/index.ts
+++ b/src/components/navigation/footer/index.ts
@@ -1 +1 @@
-export { default } from './Footer';
+export * from './Footer.js';
diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx
index b0b1eb7bc..b6dc39e37 100644
--- a/src/components/navigation/header/Header.tsx
+++ b/src/components/navigation/header/Header.tsx
@@ -1,24 +1,28 @@
-import React, {
- ComponentPropsWithoutRef,
- useState,
- useEffect,
- useMemo,
+'use client';
+
+import classNames from 'classnames';
+import { type Header as HeaderModule } from 'nhsuk-frontend';
+import {
Children,
- forwardRef,
createRef,
+ forwardRef,
+ useEffect,
+ useMemo,
+ useState,
+ type ComponentPropsWithoutRef,
} from 'react';
-import classNames from 'classnames';
-import { Container } from '@components/layout';
-import { childIsOfComponentType } from '@util/types/TypeGuards';
-import HeaderContext, { IHeaderContext } from './HeaderContext';
-import Account from './components/Account';
-import AccountItem from './components/AccountItem';
-import Logo from './components/Logo';
-import Navigation from './components/Navigation';
-import NavigationItem from './components/NavigationItem';
-import Search from './components/Search';
-import ServiceName from './components/ServiceName';
-import { type Header } from 'nhsuk-frontend';
+import {
+ Account,
+ AccountItem,
+ Logo,
+ Navigation,
+ NavigationItem,
+ Search,
+ ServiceName,
+} from './components/index.js';
+import { HeaderContext, type IHeaderContext } from './HeaderContext.js';
+import { Container } from '#components/layout/index.js';
+import { childIsOfComponentType } from '#util/types/index.js';
export interface HeaderProps extends ComponentPropsWithoutRef<'div'> {
containerClasses?: string;
@@ -37,7 +41,7 @@ const HeaderComponent = forwardRef
((props, forwardedRe
const [logoProps, setLogoProps] = useState(logo);
const [serviceProps, setServiceProps] = useState(service);
const [organisationProps, setOrganisationProps] = useState(organisation);
- const [instance, setInstance] = useState();
+ const [instance, setInstance] = useState();
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
@@ -104,7 +108,7 @@ const HeaderComponent = forwardRef((props, forwardedRe
setServiceProps,
setOrganisationProps,
};
- }, [logoProps, serviceProps, organisationProps]);
+ }, [logoProps, serviceProps, organisationProps, menuOpen]);
const items = Children.toArray(children);
const childLogo = items.find((child) => childIsOfComponentType(child, Logo));
@@ -139,7 +143,7 @@ const HeaderComponent = forwardRef((props, forwardedRe
HeaderComponent.displayName = 'Header';
-export default Object.assign(HeaderComponent, {
+export const Header = Object.assign(HeaderComponent, {
Account,
AccountItem,
Logo,
diff --git a/src/components/navigation/header/HeaderContext.ts b/src/components/navigation/header/HeaderContext.ts
index f9b0cece1..72a3b01d8 100644
--- a/src/components/navigation/header/HeaderContext.ts
+++ b/src/components/navigation/header/HeaderContext.ts
@@ -1,10 +1,12 @@
-import { Dispatch, SetStateAction, createContext } from 'react';
+'use client';
+
+import { createContext, type Dispatch, type SetStateAction } from 'react';
export interface IHeaderContext {
logoProps?: {
- href?: string;
- src?: string;
- alt?: string;
+ 'href'?: string;
+ 'src'?: string;
+ 'alt'?: string;
'aria-label'?: string;
};
serviceProps?: {
@@ -23,8 +25,7 @@ export interface IHeaderContext {
setOrganisationProps: Dispatch>;
}
-export default createContext({
- /* eslint-disable @typescript-eslint/no-empty-function */
+export const HeaderContext = createContext({
logoProps: undefined,
serviceProps: undefined,
organisationProps: undefined,
diff --git a/src/components/navigation/header/__tests__/Header.test.tsx b/src/components/navigation/header/__tests__/Header.test.tsx
index 9eb952097..e1891ca96 100644
--- a/src/components/navigation/header/__tests__/Header.test.tsx
+++ b/src/components/navigation/header/__tests__/Header.test.tsx
@@ -1,6 +1,6 @@
-import React, { ComponentProps, createRef } from 'react';
-import Header from '../Header';
-import { renderClient, renderServer } from '@util/components';
+import { createRef, type ComponentProps } from 'react';
+import { Header } from '..';
+import { renderClient, renderServer } from '#util/components';
describe('Header', () => {
it('matches snapshot', async () => {
diff --git a/src/components/navigation/header/__tests__/__snapshots__/Header.test.tsx.snap b/src/components/navigation/header/__tests__/__snapshots__/Header.test.tsx.snap
index 7e56cbeed..1db8ce3ac 100644
--- a/src/components/navigation/header/__tests__/__snapshots__/Header.test.tsx.snap
+++ b/src/components/navigation/header/__tests__/__snapshots__/Header.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`Header Header.Account matches snapshot 1`] = `
diff --git a/src/components/navigation/header/components/Account.tsx b/src/components/navigation/header/components/Account.tsx
index a93599d79..fdba72363 100644
--- a/src/components/navigation/header/components/Account.tsx
+++ b/src/components/navigation/header/components/Account.tsx
@@ -1,12 +1,12 @@
-import React, { ComponentPropsWithoutRef, FC } from 'react';
import classNames from 'classnames';
+import { type ComponentPropsWithoutRef, type FC } from 'react';
export type AccountProps = Pick<
ComponentPropsWithoutRef<'nav'>,
'aria-label' | 'children' | 'className'
>;
-const Account: FC
= ({
+export const Account: FC = ({
className,
children,
'aria-label': ariaLabel = 'Account',
@@ -17,5 +17,3 @@ const Account: FC = ({
);
Account.displayName = 'Header.Account';
-
-export default Account;
diff --git a/src/components/navigation/header/components/AccountItem.tsx b/src/components/navigation/header/components/AccountItem.tsx
index b83a48c94..452f174a6 100644
--- a/src/components/navigation/header/components/AccountItem.tsx
+++ b/src/components/navigation/header/components/AccountItem.tsx
@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithRef, ForwardedRef, ReactNode, forwardRef } from 'react';
import classNames from 'classnames';
-import { User as UserIcon } from '@components/content-presentation/icons';
-import { AsElementLink } from '@util/types/LinkTypes';
+import { forwardRef, type ComponentPropsWithRef, type ForwardedRef, type ReactNode } from 'react';
+import { UserIcon } from '#components/content-presentation/index.js';
+import { type AsElementLink } from '#util/types/LinkTypes.js';
export interface AccountItemButtonProps extends AsElementLink {
as?: 'button';
@@ -42,7 +42,7 @@ const AccountItemLink = forwardRef(
),
);
-const AccountItem = forwardRef<
+export const AccountItem = forwardRef<
HTMLAnchorElement | HTMLButtonElement,
AccountItemButtonProps | AccountItemLinkProps
>(({ children, className, icon, ...rest }, forwardedRef) => {
@@ -77,5 +77,3 @@ const AccountItem = forwardRef<
AccountItem.displayName = 'Header.AccountItem';
AccountItemLink.displayName = 'Header.AccountItemLink';
AccountItemButton.displayName = 'Header.AccountItemButton';
-
-export default AccountItem;
diff --git a/src/components/navigation/header/components/Logo.tsx b/src/components/navigation/header/components/Logo.tsx
index a4b01cdb5..b9b508f80 100644
--- a/src/components/navigation/header/components/Logo.tsx
+++ b/src/components/navigation/header/components/Logo.tsx
@@ -1,9 +1,11 @@
-import React, { FC, useContext, useEffect } from 'react';
-import HeaderContext, { IHeaderContext } from '../HeaderContext';
+'use client';
+
+import { useContext, useEffect, type FC } from 'react';
+import { HeaderContext, type IHeaderContext } from '../HeaderContext.js';
export type LogoProps = NonNullable;
-const Logo: FC = (logo) => {
+export const Logo: FC = (logo) => {
const { organisationProps: organisation, setLogoProps } =
useContext(HeaderContext);
@@ -14,7 +16,7 @@ const Logo: FC = (logo) => {
setLogoProps(logo);
return () => setLogoProps(undefined);
- }, [logo]);
+ }, [logo, setLogoProps]);
const { alt = 'NHS' } = logo;
@@ -60,5 +62,3 @@ const Logo: FC = (logo) => {
};
Logo.displayName = 'Header.Logo';
-
-export default Logo;
diff --git a/src/components/navigation/header/components/MenuToggle.tsx b/src/components/navigation/header/components/MenuToggle.tsx
index d48690fad..ab2db3d47 100644
--- a/src/components/navigation/header/components/MenuToggle.tsx
+++ b/src/components/navigation/header/components/MenuToggle.tsx
@@ -1,8 +1,8 @@
-import React, { ComponentPropsWithoutRef , FC } from 'react';
+import { type ComponentPropsWithoutRef, type FC } from 'react';
export type MenuToggleProps = ComponentPropsWithoutRef<'button'>;
-const MenuToggle: FC = (props) => (
+export const MenuToggle: FC = (props) => (
);
-
-export default MenuToggle;
diff --git a/src/components/navigation/header/components/Navigation.tsx b/src/components/navigation/header/components/Navigation.tsx
index faefe2cef..9900d26a7 100644
--- a/src/components/navigation/header/components/Navigation.tsx
+++ b/src/components/navigation/header/components/Navigation.tsx
@@ -1,15 +1,17 @@
-import React, { ComponentPropsWithoutRef , FC, useContext, useEffect } from 'react';
+'use client';
+
import classNames from 'classnames';
-import { Container } from '@components/layout';
-import HeaderContext, { IHeaderContext } from '../HeaderContext';
-import MenuToggle from './MenuToggle';
+import { useContext, useEffect, type ComponentPropsWithoutRef, type FC } from 'react';
+import { HeaderContext, type IHeaderContext } from '../HeaderContext.js';
+import { MenuToggle } from './MenuToggle.js';
+import { Container } from '#components/layout/index.js';
export interface NavigationProps extends ComponentPropsWithoutRef<'nav'> {
white?: boolean;
open?: boolean;
}
-const Navigation: FC = ({
+export const Navigation: FC = ({
className,
children,
white,
@@ -26,7 +28,7 @@ const Navigation: FC = ({
setMenuOpen(open);
return () => setMenuOpen(false);
- }, [open]);
+ }, [open, setMenuOpen]);
return (
diff --git a/src/components/navigation/pagination/index.ts b/src/components/navigation/pagination/index.ts
index eaef04eb7..454be1781 100644
--- a/src/components/navigation/pagination/index.ts
+++ b/src/components/navigation/pagination/index.ts
@@ -1 +1 @@
-export { default } from './Pagination';
+export * from './Pagination.js';
diff --git a/src/components/navigation/skip-link/SkipLink.tsx b/src/components/navigation/skip-link/SkipLink.tsx
index 7803302d0..2d5ef657a 100644
--- a/src/components/navigation/skip-link/SkipLink.tsx
+++ b/src/components/navigation/skip-link/SkipLink.tsx
@@ -1,14 +1,16 @@
-import React, { ComponentPropsWithoutRef, createRef, forwardRef, useEffect, useState } from 'react';
-import { type SkipLink } from 'nhsuk-frontend';
+'use client';
+
import classNames from 'classnames';
+import { type SkipLink as SkipLinkModule } from 'nhsuk-frontend';
+import { createRef, forwardRef, useEffect, useState, type ComponentPropsWithoutRef } from 'react';
export type SkipLinkProps = ComponentPropsWithoutRef<'a'>;
-const SkipLinkComponent = forwardRef
((props, forwardedRef) => {
+export const SkipLink = forwardRef((props, forwardedRef) => {
const { children = 'Skip to main content', className, href = '#maincontent', ...rest } = props;
const [moduleRef] = useState(() => forwardedRef || createRef());
- const [instance, setInstance] = useState();
+ const [instance, setInstance] = useState();
useEffect(() => {
if (!('current' in moduleRef) || !moduleRef.current || instance) {
@@ -35,6 +37,4 @@ const SkipLinkComponent = forwardRef((props, f
);
});
-SkipLinkComponent.displayName = 'SkipLink';
-
-export default SkipLinkComponent;
+SkipLink.displayName = 'SkipLink';
diff --git a/src/components/navigation/skip-link/__tests__/SkipLink.test.tsx b/src/components/navigation/skip-link/__tests__/SkipLink.test.tsx
index b8af156ff..f2bacd4b5 100644
--- a/src/components/navigation/skip-link/__tests__/SkipLink.test.tsx
+++ b/src/components/navigation/skip-link/__tests__/SkipLink.test.tsx
@@ -1,8 +1,8 @@
-import React, { createRef } from 'react';
-import { Container } from '@components/layout';
import { waitFor } from '@testing-library/react';
-import { renderClient, renderServer } from '@util/components';
-import SkipLink from '../';
+import { createRef } from 'react';
+import { SkipLink } from '..';
+import { Container } from '#components/layout';
+import { renderClient, renderServer } from '#util/components';
describe('SkipLink', () => {
it('matches snapshot', async () => {
diff --git a/src/components/navigation/skip-link/__tests__/__snapshots__/SkipLink.test.tsx.snap b/src/components/navigation/skip-link/__tests__/__snapshots__/SkipLink.test.tsx.snap
index ccd0d4d48..35e73bb2b 100644
--- a/src/components/navigation/skip-link/__tests__/__snapshots__/SkipLink.test.tsx.snap
+++ b/src/components/navigation/skip-link/__tests__/__snapshots__/SkipLink.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`SkipLink matches snapshot (via server): client 1`] = `
diff --git a/src/components/navigation/skip-link/index.ts b/src/components/navigation/skip-link/index.ts
index 532a2fa61..024a78bc9 100644
--- a/src/components/navigation/skip-link/index.ts
+++ b/src/components/navigation/skip-link/index.ts
@@ -1 +1 @@
-export { default } from './SkipLink';
+export * from './SkipLink.js';
diff --git a/src/components/typography/BodyText.tsx b/src/components/typography/BodyText.tsx
index afa814bfe..bb8f9bc41 100644
--- a/src/components/typography/BodyText.tsx
+++ b/src/components/typography/BodyText.tsx
@@ -1,8 +1,6 @@
-import React, { ComponentPropsWithoutRef, FC } from 'react';
import classNames from 'classnames';
+import { type ComponentPropsWithoutRef, type FC } from 'react';
-const BodyText: FC
> = ({ className, ...rest }) => (
+export const BodyText: FC> = ({ className, ...rest }) => (
);
-
-export default BodyText;
diff --git a/src/components/typography/LedeText.tsx b/src/components/typography/LedeText.tsx
index 5c377beaa..b3da42c64 100644
--- a/src/components/typography/LedeText.tsx
+++ b/src/components/typography/LedeText.tsx
@@ -1,8 +1,6 @@
-import React, { ComponentPropsWithoutRef, FC } from 'react';
import classNames from 'classnames';
+import { type ComponentPropsWithoutRef, type FC } from 'react';
-const LedeText: FC> = ({ className, ...rest }) => (
+export const LedeText: FC> = ({ className, ...rest }) => (
);
-
-export default LedeText;
diff --git a/src/components/typography/__tests__/BodyText.test.tsx b/src/components/typography/__tests__/BodyText.test.tsx
index 344754ac0..a190b3659 100644
--- a/src/components/typography/__tests__/BodyText.test.tsx
+++ b/src/components/typography/__tests__/BodyText.test.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
import { render } from '@testing-library/react';
-import BodyText from '../BodyText';
+import { BodyText } from '..';
describe('BodyText', () => {
it('matches snapshot', () => {
diff --git a/src/components/typography/__tests__/LedeText.test.tsx b/src/components/typography/__tests__/LedeText.test.tsx
index 75866f178..00d2ab862 100644
--- a/src/components/typography/__tests__/LedeText.test.tsx
+++ b/src/components/typography/__tests__/LedeText.test.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
import { render } from '@testing-library/react';
-import LedeText from '../LedeText';
+import { LedeText } from '..';
describe('LedeText', () => {
it('matches snapshot', () => {
diff --git a/src/components/typography/__tests__/__snapshots__/BodyText.test.tsx.snap b/src/components/typography/__tests__/__snapshots__/BodyText.test.tsx.snap
index edc1ad4ce..a8838dcb6 100644
--- a/src/components/typography/__tests__/__snapshots__/BodyText.test.tsx.snap
+++ b/src/components/typography/__tests__/__snapshots__/BodyText.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`BodyText matches snapshot 1`] = `
diff --git a/src/components/typography/__tests__/__snapshots__/LedeText.test.tsx.snap b/src/components/typography/__tests__/__snapshots__/LedeText.test.tsx.snap
index 1d88987fd..685b44158 100644
--- a/src/components/typography/__tests__/__snapshots__/LedeText.test.tsx.snap
+++ b/src/components/typography/__tests__/__snapshots__/LedeText.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`LedeText matches snapshot 1`] = `
diff --git a/src/components/typography/index.ts b/src/components/typography/index.ts
index 222a5ce77..8fecce3c7 100644
--- a/src/components/typography/index.ts
+++ b/src/components/typography/index.ts
@@ -1,4 +1,2 @@
-import LedeText from './LedeText';
-import BodyText from './BodyText';
-
-export { LedeText, BodyText };
+export * from './LedeText.js';
+export * from './BodyText.js';
diff --git a/src/components/utils/Clearfix.tsx b/src/components/utils/Clearfix.tsx
index 75887b462..6b1befd5e 100644
--- a/src/components/utils/Clearfix.tsx
+++ b/src/components/utils/Clearfix.tsx
@@ -1,7 +1,5 @@
-import React, { ComponentPropsWithoutRef, FC } from 'react';
+import { type ComponentPropsWithoutRef, type FC } from 'react';
-const Clearfix: FC
> = (props) => (
+export const Clearfix: FC> = (props) => (
);
-
-export default Clearfix;
diff --git a/src/components/utils/FormGroup.tsx b/src/components/utils/FormGroup.tsx
index 9b70c1fbd..d3bdbed2e 100644
--- a/src/components/utils/FormGroup.tsx
+++ b/src/components/utils/FormGroup.tsx
@@ -1,14 +1,23 @@
-import React, { ComponentPropsWithoutRef, ReactNode, useContext, useEffect, useState } from 'react';
+'use client';
+
import classNames from 'classnames';
-import ErrorMessage from '../form-elements/error-message/ErrorMessage';
-import Fieldset from '../form-elements/fieldset/Fieldset';
-import HintText from '../form-elements/hint-text/HintText';
-import Label from '../form-elements/label/Label';
-import Legend from '../form-elements/legend/Legend';
-import { useFormContext } from '../form-elements/form';
-import { generateRandomID } from '../../util/RandomID';
-import { FormElementProps } from '../../util/types/FormTypes';
-import FormGroupContext, { IFormGroupContext } from './FormGroupContext';
+import {
+ useContext,
+ useEffect,
+ useState,
+ type ComponentPropsWithoutRef,
+ type JSX,
+ type ReactNode,
+} from 'react';
+import { FormGroupContext, type IFormGroupContext } from './FormGroupContext.js';
+import { ErrorMessage } from '#components/form-elements/error-message/index.js';
+import { Fieldset } from '#components/form-elements/fieldset/index.js';
+import { useFormContext } from '#components/form-elements/form/index.js';
+import { HintText } from '#components/form-elements/hint-text/index.js';
+import { Label } from '#components/form-elements/label/index.js';
+import { Legend } from '#components/form-elements/legend/index.js';
+import { generateRandomID } from '#util/tools/index.js';
+import { type FormElementProps } from '#util/types/FormTypes.js';
type ExcludedProps =
| Extract<
@@ -40,7 +49,9 @@ export type FormGroupProps = FormElementProps & {
inputType: 'input' | 'radios' | 'select' | 'checkboxes' | 'dateinput' | 'textarea';
};
-const FormGroup = (props: FormGroupProps): JSX.Element => {
+export const FormGroup = (
+ props: FormGroupProps,
+): JSX.Element => {
const {
children,
hint,
@@ -94,12 +105,12 @@ const FormGroup = (props: FormGroupProps {
passError(elementID, disableErrorFromComponents ? false : Boolean(error));
return () => passError(elementID, false);
- }, [elementID, error]);
+ }, [disableErrorFromComponents, elementID, error, passError]);
useEffect(() => {
registerComponent(elementID);
return () => registerComponent(elementID, true);
- }, []);
+ }, [elementID, registerComponent]);
return (
(props: FormGroupProps
);
};
-
-export default FormGroup;
diff --git a/src/components/utils/FormGroupContext.ts b/src/components/utils/FormGroupContext.ts
index 7c9d4675d..aa3c6514c 100644
--- a/src/components/utils/FormGroupContext.ts
+++ b/src/components/utils/FormGroupContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
import { createContext } from 'react';
export type IFormGroupContext = {
@@ -5,9 +7,7 @@ export type IFormGroupContext = {
registerComponent: (componentId: string, deregister?: boolean) => void;
};
-const FormGroupContext = createContext({
+export const FormGroupContext = createContext({
passError: () => {},
registerComponent: () => {},
});
-
-export default FormGroupContext;
diff --git a/src/components/utils/HeadingLevel.tsx b/src/components/utils/HeadingLevel.tsx
index 0a2aa4593..3d45135cb 100644
--- a/src/components/utils/HeadingLevel.tsx
+++ b/src/components/utils/HeadingLevel.tsx
@@ -1,25 +1,25 @@
-import React, { ElementType, HTMLAttributes, forwardRef } from 'react';
+import { forwardRef, type ElementType, type HTMLAttributes } from 'react';
export interface HeadingLevelProps extends HTMLAttributes {
headingLevel?: Extract;
}
-const HeadingLevel = forwardRef((props, forwardedRef) => {
- const { headingLevel = 'h3', children, ...rest } = props;
- let Element = headingLevel;
+export const HeadingLevel = forwardRef(
+ (props, forwardedRef) => {
+ const { headingLevel = 'h3', children, ...rest } = props;
+ let Element = headingLevel;
- if (!['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(Element.toLowerCase())) {
- console.error(`HeadingLevel: Invalid headingLevel prop: ${Element}`);
- Element = 'h3';
- }
+ if (!['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(Element.toLowerCase())) {
+ console.error(`HeadingLevel: Invalid headingLevel prop: ${Element}`);
+ Element = 'h3';
+ }
- return (
-
- {children}
-
- );
-});
+ return (
+
+ {children}
+
+ );
+ },
+);
HeadingLevel.displayName = 'HeadingLevel';
-
-export default HeadingLevel;
diff --git a/src/components/utils/ReadingWidth.tsx b/src/components/utils/ReadingWidth.tsx
index 1676f8b33..c8d0c387d 100644
--- a/src/components/utils/ReadingWidth.tsx
+++ b/src/components/utils/ReadingWidth.tsx
@@ -1,8 +1,6 @@
-import React, { ComponentPropsWithoutRef, FC } from 'react';
import classNames from 'classnames';
+import { type ComponentPropsWithoutRef, type FC } from 'react';
-const ReadingWidth: FC> = ({ className, ...rest }) => (
+export const ReadingWidth: FC> = ({ className, ...rest }) => (
);
-
-export default ReadingWidth;
diff --git a/src/components/utils/__tests__/FormGroup.test.tsx b/src/components/utils/__tests__/FormGroup.test.tsx
index cdcfbfebe..dc26c29ad 100644
--- a/src/components/utils/__tests__/FormGroup.test.tsx
+++ b/src/components/utils/__tests__/FormGroup.test.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
import { axe, toHaveNoViolations } from 'jest-axe';
-import FormGroup, { FormElementRenderProps } from '../FormGroup';
-import { TextInputProps } from '../../form-elements/text-input/TextInput';
-import { renderClient, renderServer } from '@util/components';
+import { FormGroup, type FormElementRenderProps } from '..';
+import { type TextInputProps } from '#components/form-elements';
+import { renderClient, renderServer } from '#util/components';
expect.extend(toHaveNoViolations);
diff --git a/src/components/utils/__tests__/HeadingLevel.test.tsx b/src/components/utils/__tests__/HeadingLevel.test.tsx
index 8c4286a05..9c5e48447 100644
--- a/src/components/utils/__tests__/HeadingLevel.test.tsx
+++ b/src/components/utils/__tests__/HeadingLevel.test.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
import { render } from '@testing-library/react';
-import HeadingLevel, { HeadingLevelProps } from '../HeadingLevel';
+import { HeadingLevel, type HeadingLevelProps } from '..';
describe('HeadingLevel', () => {
it.each>>([
@@ -19,7 +18,6 @@ describe('HeadingLevel', () => {
});
it('console.warn when headingLevel is invalid', () => {
- // eslint-disable-next-line @typescript-eslint/no-empty-function
const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
// @ts-expect-error - testing invalid prop
render();
diff --git a/src/components/utils/__tests__/__snapshots__/FormGroup.test.tsx.snap b/src/components/utils/__tests__/__snapshots__/FormGroup.test.tsx.snap
index 3df58e0f8..4cc9bb3ac 100644
--- a/src/components/utils/__tests__/__snapshots__/FormGroup.test.tsx.snap
+++ b/src/components/utils/__tests__/__snapshots__/FormGroup.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`FormGroup matches snapshot (via server): client 1`] = `
diff --git a/src/components/utils/index.ts b/src/components/utils/index.ts
new file mode 100644
index 000000000..77602c09e
--- /dev/null
+++ b/src/components/utils/index.ts
@@ -0,0 +1,5 @@
+export * from './Clearfix.js';
+export * from './FormGroup.js';
+export * from './FormGroupContext.js';
+export * from './HeadingLevel.js';
+export * from './ReadingWidth.js';
diff --git a/src/index.ts b/src/index.ts
index edb89e823..520858f76 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,52 +1,3 @@
-export { default as ActionLink } from './components/navigation/action-link';
-export { default as BackLink } from './components/navigation/back-link';
-export { default as Breadcrumb } from './components/navigation/breadcrumb';
-export { default as Button } from './components/form-elements/button';
-export { default as Card } from './components/navigation/card';
-export { default as CharacterCount } from './components/form-elements/character-count';
-export { default as Checkboxes } from './components/form-elements/checkboxes';
-export { default as ContentsList } from './components/navigation/contents-list';
-export { default as DateInput } from './components/form-elements/date-input';
-export { default as Details } from './components/content-presentation/details';
-export { default as DoAndDontList } from './components/content-presentation/do-and-dont-list';
-export { default as ErrorMessage } from './components/form-elements/error-message';
-export { default as ErrorSummary } from './components/form-elements/error-summary';
-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/content-presentation/hero';
-export { default as HintText } from './components/form-elements/hint-text';
-export { default as Legend } from './components/form-elements/legend';
-export {
- ArrowLeft as ArrowLeftIcon,
- ArrowRight as ArrowRightIcon,
- ArrowRightCircle as ArrowRightCircleIcon,
- ChevronRightCircle as ChevronRightCircleIcon,
- Cross as CrossIcon,
- Search as SearchIcon,
- Tick as TickIcon,
- User as UserIcon,
-} 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';
-export { default as Label } from './components/form-elements/label';
-export { Container, Col, Row } from './components/layout';
-export { default as NavAZ } from './patterns/nav-a-z';
-export { default as Pagination } from './components/navigation/pagination';
-export { default as Radios } from './components/form-elements/radios';
-export { default as Select } from './components/form-elements/select';
-export { default as SkipLink } from './components/navigation/skip-link';
-export { default as SummaryList } from './components/content-presentation/summary-list';
-export { default as Table } from './components/content-presentation/table';
-export { default as Tabs } from './components/content-presentation/tabs';
-export { default as Tag } from './components/content-presentation/tag';
-export { default as Textarea } from './components/form-elements/textarea';
-export { LedeText, BodyText } from './components/typography';
-export { default as WarningCallout } from './components/content-presentation/warning-callout';
-export { default as Clearfix } from './components/utils/Clearfix';
-export { default as ReadingWidth } from './components/utils/ReadingWidth';
-export { default as FormGroup } from './components/utils/FormGroup';
-
-export { default as ReviewDate } from './patterns/review-date';
+export * from './components/index.js';
+export * from './patterns/index.js';
+export * from './util/types/index.js';
diff --git a/src/patterns/index.ts b/src/patterns/index.ts
new file mode 100644
index 000000000..2b7edf1b6
--- /dev/null
+++ b/src/patterns/index.ts
@@ -0,0 +1,2 @@
+export * from './nav-a-z/index.js';
+export * from './review-date/index.js';
diff --git a/src/patterns/nav-a-z/NavAZ.tsx b/src/patterns/nav-a-z/NavAZ.tsx
index e1498116b..8c131e294 100644
--- a/src/patterns/nav-a-z/NavAZ.tsx
+++ b/src/patterns/nav-a-z/NavAZ.tsx
@@ -1,11 +1,11 @@
-import React, { ComponentPropsWithoutRef, FC, forwardRef } from 'react';
import classNames from 'classnames';
-import { AsElementLink } from '@util/types/LinkTypes';
+import { forwardRef, type ComponentPropsWithoutRef, type FC, type ReactNode } from 'react';
+import { type AsElementLink } from '#util/types/LinkTypes.js';
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const processLetters = (
- children: React.ReactNode,
+ children: ReactNode,
fullAlphabet: boolean | undefined,
removedLetters: Array | undefined,
disabledLetters: Array | undefined,
@@ -43,7 +43,7 @@ export interface NavAZProps extends ComponentPropsWithoutRef<'div'> {
letters?: Array;
}
-const NavAZ = forwardRef((props, forwardedRef) => {
+const NavAZComponent = forwardRef((props, forwardedRef) => {
const {
className,
children,
@@ -103,11 +103,11 @@ const DisabledItem: FC