fix(nhsuk-frontend-react): add missing summary-list variant

rowellx68 · Feb 14, 2025 · 29988c4 · 29988c4
1 parent 725f371
commit 29988c4
Show file tree

Hide file tree

Showing 5 changed files with 222 additions and 4 deletions.
diff --git a/.changeset/fuzzy-items-pull.md b/.changeset/fuzzy-items-pull.md
@@ -0,0 +1,5 @@
+---
+"nhsuk-frontend-react": patch
+---
+
+fix(nhsuk-frontend-react): add missing summary-list variant
diff --git a/...hsuk-frontend-react/src/components/content-presentation/summary-list/SummaryList.spec.tsx b/...hsuk-frontend-react/src/components/content-presentation/summary-list/SummaryList.spec.tsx
@@ -2,9 +2,13 @@ import React from 'react';
 import { it, expect } from 'vitest';
 import { render } from '@testing-library/react';
 import { composeStory } from '@storybook/react';
-import meta, { Default as DefaultStory } from './SummaryList.stories';
+import meta, {
+  Default as DefaultStory,
+  NoBorder as NoBorderStory,
+} from './SummaryList.stories';
 
 const Default = composeStory(DefaultStory, meta);
+const NoBorder = composeStory(NoBorderStory, meta);
 
 it('should render the SummaryList component', () => {
   const { container } = render(<Default />);
@@ -14,3 +18,15 @@ it('should render the SummaryList component', () => {
     container.querySelectorAll('a > .nhsuk-u-visually-hidden'),
   ).toHaveLength(4);
 });
+
+it('should render the SummaryList component with no border', () => {
+  const { container } = render(<NoBorder />);
+
+  expect(
+    container.querySelectorAll('.nhsuk-summary-list--no-border'),
+  ).toHaveLength(1);
+  expect(container).toMatchSnapshot();
+  expect(
+    container.querySelectorAll('a > .nhsuk-u-visually-hidden'),
+  ).toHaveLength(4);
+});
diff --git a/...k-frontend-react/src/components/content-presentation/summary-list/SummaryList.stories.tsx b/...k-frontend-react/src/components/content-presentation/summary-list/SummaryList.stories.tsx
@@ -69,3 +69,57 @@ export const Default: Story = {
     </SummaryList>
   ),
 };
+
+export const NoBorder: Story = {
+  args: {
+    variant: 'no-border',
+  },
+  render: (args) => (
+    <SummaryList {...args}>
+      <SummaryList.Row>
+        <SummaryList.Key>Name</SummaryList.Key>
+        <SummaryList.Value>John Smith</SummaryList.Value>
+        <SummaryList.Actions>
+          <SummaryList.ActionLink visuallyHiddenText="name" href="#">
+            Change
+          </SummaryList.ActionLink>
+        </SummaryList.Actions>
+      </SummaryList.Row>
+      <SummaryList.Row>
+        <SummaryList.Key>Date of birth </SummaryList.Key>
+        <SummaryList.Value>1 January 1990</SummaryList.Value>
+        <SummaryList.Actions>
+          <SummaryList.ActionLink visuallyHiddenText="date of birth" href="#">
+            Change
+          </SummaryList.ActionLink>
+        </SummaryList.Actions>
+      </SummaryList.Row>
+      <SummaryList.Row>
+        <SummaryList.Key>Address</SummaryList.Key>
+        <SummaryList.Value>
+          1 Smith Street, Smithville, <br />
+          Smithfield, <br />
+          Smithshire, <br />
+          SM1 1SM
+        </SummaryList.Value>
+        <SummaryList.Actions>
+          <SummaryList.ActionLink visuallyHiddenText="address" href="#">
+            Change
+          </SummaryList.ActionLink>
+        </SummaryList.Actions>
+      </SummaryList.Row>
+      <SummaryList.Row>
+        <SummaryList.Key>Contact details</SummaryList.Key>
+        <SummaryList.Value>
+          07000 000000 <br />
+          [email protected]
+        </SummaryList.Value>
+        <SummaryList.Actions>
+          <SummaryList.ActionLink visuallyHiddenText="contact details" href="#">
+            Change
+          </SummaryList.ActionLink>
+        </SummaryList.Actions>
+      </SummaryList.Row>
+    </SummaryList>
+  ),
+};
diff --git a/...ges/nhsuk-frontend-react/src/components/content-presentation/summary-list/SummaryList.tsx b/...ges/nhsuk-frontend-react/src/components/content-presentation/summary-list/SummaryList.tsx
@@ -9,7 +9,13 @@ import { AsElementProps, ElementProps } from '@/types/shared';
 import clsx from 'clsx';
 import React from 'react';
 
-export type SummaryListProps = ElementProps<'dl'>;
+export type SummaryListProps = {
+  /**
+   * The variant of the summary list
+   * @default 'default'
+   */
+  variant?: 'default' | 'no-border';
+} & ElementProps<'dl'>;
 
 type SummaryListFactory = Factory<{
   props: SummaryListProps;
@@ -24,10 +30,14 @@ type SummaryListFactory = Factory<{
 }>;
 
 const SummaryList = factory<SummaryListFactory>(
-  ({ className, ...props }, ref) => {
+  ({ className, variant, ...props }, ref) => {
     return (
       <dl
-        className={clsx('nhsuk-summary-list', className)}
+        className={clsx(
+          'nhsuk-summary-list',
+          { 'nhsuk-summary-list--no-border': variant === 'no-border' },
+          className,
+        )}
         {...props}
         ref={ref}
       />

diff --git a/.../src/components/content-presentation/summary-list/__snapshots__/SummaryList.spec.tsx.snap b/.../src/components/content-presentation/summary-list/__snapshots__/SummaryList.spec.tsx.snap
@@ -132,3 +132,136 @@ exports[`should render the SummaryList component 1`] = `
   </dl>
 </div>
 `;
+
+exports[`should render the SummaryList component with no border 1`] = `
+<div>
+  <dl
+    class="nhsuk-summary-list nhsuk-summary-list--no-border"
+  >
+    <div
+      class="nhsuk-summary-list__row"
+    >
+      <dt
+        class="nhsuk-summary-list__key"
+      >
+        Name
+      </dt>
+      <dd
+        class="nhsuk-summary-list__value"
+      >
+        John Smith
+      </dd>
+      <dd
+        class="nhsuk-summary-list__actions"
+      >
+        <a
+          href="#"
+        >
+          Change
+          <span
+            class="nhsuk-u-visually-hidden"
+          >
+             
+            name
+          </span>
+        </a>
+      </dd>
+    </div>
+    <div
+      class="nhsuk-summary-list__row"
+    >
+      <dt
+        class="nhsuk-summary-list__key"
+      >
+        Date of birth 
+      </dt>
+      <dd
+        class="nhsuk-summary-list__value"
+      >
+        1 January 1990
+      </dd>
+      <dd
+        class="nhsuk-summary-list__actions"
+      >
+        <a
+          href="#"
+        >
+          Change
+          <span
+            class="nhsuk-u-visually-hidden"
+          >
+             
+            date of birth
+          </span>
+        </a>
+      </dd>
+    </div>
+    <div
+      class="nhsuk-summary-list__row"
+    >
+      <dt
+        class="nhsuk-summary-list__key"
+      >
+        Address
+      </dt>
+      <dd
+        class="nhsuk-summary-list__value"
+      >
+        1 Smith Street, Smithville, 
+        <br />
+        Smithfield, 
+        <br />
+        Smithshire, 
+        <br />
+        SM1 1SM
+      </dd>
+      <dd
+        class="nhsuk-summary-list__actions"
+      >
+        <a
+          href="#"
+        >
+          Change
+          <span
+            class="nhsuk-u-visually-hidden"
+          >
+             
+            address
+          </span>
+        </a>
+      </dd>
+    </div>
+    <div
+      class="nhsuk-summary-list__row"
+    >
+      <dt
+        class="nhsuk-summary-list__key"
+      >
+        Contact details
+      </dt>
+      <dd
+        class="nhsuk-summary-list__value"
+      >
+        07000 000000 
+        <br />
+        [email protected]
+      </dd>
+      <dd
+        class="nhsuk-summary-list__actions"
+      >
+        <a
+          href="#"
+        >
+          Change
+          <span
+            class="nhsuk-u-visually-hidden"
+          >
+             
+            contact details
+          </span>
+        </a>
+      </dd>
+    </div>
+  </dl>
+</div>
+`;