Add panel component

Author: colinrotherham

src/__tests__/index.test.ts

@@ -52,6 +52,7 @@ describe('Index', () => {
       'Legend',
       'NavAZ',
       'Pagination',
+      'Panel',
       'Radios',
       'RadiosContext',
       'ReadingWidth',

src/components/content-presentation/index.ts

@@ -4,6 +4,7 @@ export * from './hero/index.js';
 export * from './icons/index.js';
 export * from './images/index.js';
 export * from './inset-text/index.js';
+export * from './panel/index.js';
 export * from './summary-list/index.js';
 export * from './table/index.js';
 export * from './tabs/index.js';

src/components/content-presentation/panel/Panel.tsx

@@ -0,0 +1,36 @@
+import classNames from 'classnames';
+import { Children, forwardRef, type ComponentPropsWithoutRef, type FC } from 'react';
+import { HeadingLevel, type HeadingLevelProps } from '#components/utils/HeadingLevel.js';
+import { childIsOfComponentType } from '#util/types/TypeGuards.js';
+
+export type PanelTitleProps = HeadingLevelProps;
+
+const PanelTitle: FC<PanelTitleProps> = ({ children, headingLevel = 'h1', ...rest }) => (
+  <HeadingLevel className="nhsuk-panel__title" headingLevel={headingLevel} {...rest}>
+    {children}
+  </HeadingLevel>
+);
+
+export type PanelProps = ComponentPropsWithoutRef<'div'>;
+
+const PanelComponent = forwardRef<HTMLDivElement, PanelProps>(
+  ({ children, className, ...rest }, forwardedRef) => {
+    const items = Children.toArray(children);
+    const title = items.find((child) => childIsOfComponentType(child, PanelTitle));
+    const bodyItems = items.filter((child) => !childIsOfComponentType(child, PanelTitle));
+
+    return (
+      <div className={classNames('nhsuk-panel', className)} ref={forwardedRef} {...rest}>
+        {title}
+        {bodyItems ? <div className="nhsuk-panel__body">{bodyItems}</div> : null}
+      </div>
+    );
+  },
+);
+
+PanelComponent.displayName = 'Panel';
+PanelComponent.displayName = 'Panel.Title';
+
+export const Panel = Object.assign(PanelComponent, {
+  Title: PanelTitle,
+});

src/components/content-presentation/panel/__tests__/Panel.test.tsx

@@ -0,0 +1,74 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Panel, type PanelTitleProps } from '..';
+import { renderClient, renderServer } from '#util/components';
+
+describe('Panel', () => {
+  it('matches snapshot', async () => {
+    const { container } = await renderClient(
+      <Panel>
+        <Panel.Title>Booking complete</Panel.Title>
+        We have sent you a confirmation email
+      </Panel>,
+      { className: 'nhsuk-panel' },
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('matches snapshot (via server)', async () => {
+    const { container, element } = await renderServer(
+      <Panel>
+        <Panel.Title>Booking complete</Panel.Title>
+        We have sent you a confirmation email
+      </Panel>,
+      { className: 'nhsuk-panel' },
+    );
+
+    expect(container).toMatchSnapshot('server');
+
+    await renderClient(element, {
+      className: 'nhsuk-panel',
+      hydrate: true,
+      container,
+    });
+
+    expect(container).toMatchSnapshot('client');
+  });
+
+  it('forwards refs', async () => {
+    const ref = createRef<HTMLDivElement>();
+
+    const { modules } = await renderClient(
+      <Panel ref={ref}>
+        <Panel.Title>Booking complete</Panel.Title>
+        We have sent you a confirmation email
+      </Panel>,
+      { className: 'nhsuk-panel' },
+    );
+
+    const [panelEl] = modules;
+
+    expect(ref.current).toBe(panelEl);
+    expect(ref.current).toHaveClass('nhsuk-panel');
+  });
+
+  it.each<PanelTitleProps | undefined>([
+    undefined,
+    { headingLevel: 'h1' },
+    { headingLevel: 'h2' },
+    { headingLevel: 'h3' },
+    { headingLevel: 'h4' },
+  ])('renders heading level $headingLevel if specified', (props) => {
+    const { container } = render(
+      <Panel>
+        <Panel.Title {...props}>Booking complete</Panel.Title>
+        We have sent you a confirmation email
+      </Panel>,
+    );
+
+    const title = container.querySelector('.nhsuk-panel__title');
+
+    expect(title).toHaveProperty('tagName', props?.headingLevel?.toUpperCase() ?? 'H1');
+  });
+});

src/components/content-presentation/panel/__tests__/__snapshots__/Panel.test.tsx.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Panel matches snapshot (via server): client 1`] = `
+<div>
+  <div
+    class="nhsuk-panel"
+  >
+    <h1
+      class="nhsuk-panel__title"
+    >
+      Booking complete
+    </h1>
+    <div
+      class="nhsuk-panel__body"
+    >
+      We have sent you a confirmation email
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Panel matches snapshot (via server): server 1`] = `
+<div>
+  <div
+    class="nhsuk-panel"
+  >
+    <h1
+      class="nhsuk-panel__title"
+    >
+      Booking complete
+    </h1>
+    <div
+      class="nhsuk-panel__body"
+    >
+      We have sent you a confirmation email
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Panel matches snapshot 1`] = `
+<div>
+  <div
+    class="nhsuk-panel"
+  >
+    <h1
+      class="nhsuk-panel__title"
+    >
+      Booking complete
+    </h1>
+    <div
+      class="nhsuk-panel__body"
+    >
+      We have sent you a confirmation email
+    </div>
+  </div>
+</div>
+`;

src/components/content-presentation/panel/index.ts

@@ -0,0 +1 @@
+export * from './Panel.js';

stories/Content Presentation/Panel.stories.tsx

@@ -0,0 +1,27 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Panel } from '#components';
+
+const meta: Meta<typeof Panel> = {
+  title: 'Content Presentation/Panel',
+  component: Panel,
+};
+export default meta;
+type Story = StoryObj<typeof Panel>;
+
+export const StandardPanel: Story = {
+  render: () => (
+    <Panel>
+      <Panel.Title>Booking complete</Panel.Title>
+      We have sent you a confirmation email
+    </Panel>
+  ),
+};
+
+export const PanelWithCustomHeadingLevel: Story = {
+  render: () => (
+    <Panel>
+      <Panel.Title headingLevel="h2">Booking complete</Panel.Title>
+      We have sent you a confirmation email
+    </Panel>
+  ),
+};