Split summary list into child components

Author: colinrotherham

src/components/content-presentation/summary-list/SummaryList.tsx

@@ -1,21 +1,12 @@
 import classNames from 'classnames';
-import { forwardRef, type ComponentPropsWithoutRef, type FC } from 'react';
+import { forwardRef, type ComponentPropsWithoutRef } from 'react';
 
-export const SummaryListRow: FC<ComponentPropsWithoutRef<'div'>> = ({ className, ...rest }) => (
-  <div className={classNames('nhsuk-summary-list__row', className)} {...rest} />
-);
-
-export const SummaryListKey: FC<ComponentPropsWithoutRef<'dt'>> = ({ className, ...rest }) => (
-  <dt className={classNames('nhsuk-summary-list__key', className)} {...rest} />
-);
-
-export const SummaryListValue: FC<ComponentPropsWithoutRef<'dd'>> = ({ className, ...rest }) => (
-  <dd className={classNames('nhsuk-summary-list__value', className)} {...rest} />
-);
-
-export const SummaryListActions: FC<ComponentPropsWithoutRef<'dd'>> = ({ className, ...rest }) => (
-  <dd className={classNames('nhsuk-summary-list__actions', className)} {...rest} />
-);
+import {
+  SummaryListActions,
+  SummaryListKey,
+  SummaryListRow,
+  SummaryListValue,
+} from './components/index.js';
 
 export interface SummaryListProps extends ComponentPropsWithoutRef<'dl'> {
   noBorder?: boolean;
@@ -36,10 +27,6 @@ const SummaryListComponent = forwardRef<HTMLDListElement, SummaryListProps>(
 );
 
 SummaryListComponent.displayName = 'SummaryList';
-SummaryListRow.displayName = 'SummaryList.Row';
-SummaryListKey.displayName = 'SummaryList.Key';
-SummaryListValue.displayName = 'SummaryList.Value';
-SummaryListActions.displayName = 'SummaryList.Actions';
 
 export const SummaryList = Object.assign(SummaryListComponent, {
   Row: SummaryListRow,

src/components/content-presentation/summary-list/components/SummaryListActions.tsx

@@ -0,0 +1,8 @@
+import classNames from 'classnames';
+import { type ComponentPropsWithoutRef, type FC } from 'react';
+
+export const SummaryListActions: FC<ComponentPropsWithoutRef<'dd'>> = ({ className, ...rest }) => (
+  <dd className={classNames('nhsuk-summary-list__actions', className)} {...rest} />
+);
+
+SummaryListActions.displayName = 'SummaryList.Actions';

src/components/content-presentation/summary-list/components/SummaryListKey.tsx

@@ -0,0 +1,8 @@
+import classNames from 'classnames';
+import { type ComponentPropsWithoutRef, type FC } from 'react';
+
+export const SummaryListKey: FC<ComponentPropsWithoutRef<'dt'>> = ({ className, ...rest }) => (
+  <dt className={classNames('nhsuk-summary-list__key', className)} {...rest} />
+);
+
+SummaryListKey.displayName = 'SummaryList.Key';

src/components/content-presentation/summary-list/components/SummaryListRow.tsx

@@ -0,0 +1,8 @@
+import classNames from 'classnames';
+import { type ComponentPropsWithoutRef, type FC } from 'react';
+
+export const SummaryListRow: FC<ComponentPropsWithoutRef<'div'>> = ({ className, ...rest }) => (
+  <div className={classNames('nhsuk-summary-list__row', className)} {...rest} />
+);
+
+SummaryListRow.displayName = 'SummaryList.Row';

src/components/content-presentation/summary-list/components/SummaryListValue.tsx

@@ -0,0 +1,8 @@
+import classNames from 'classnames';
+import { type ComponentPropsWithoutRef, type FC } from 'react';
+
+export const SummaryListValue: FC<ComponentPropsWithoutRef<'dd'>> = ({ className, ...rest }) => (
+  <dd className={classNames('nhsuk-summary-list__value', className)} {...rest} />
+);
+
+SummaryListValue.displayName = 'SummaryList.Value';

src/components/content-presentation/summary-list/components/index.ts

@@ -0,0 +1,4 @@
+export * from './SummaryListActions.js';
+export * from './SummaryListKey.js';
+export * from './SummaryListRow.js';
+export * from './SummaryListValue.js';

src/components/content-presentation/summary-list/index.ts

@@ -1 +1,2 @@
+export * from './components/index.js';
 export * from './SummaryList.js';