diff --git a/.changeset/fuzzy-items-pull.md b/.changeset/fuzzy-items-pull.md
new file mode 100644
index 00000000..ad86fe1c
--- /dev/null
+++ 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/packages/nhsuk-frontend-react/src/components/content-presentation/summary-list/SummaryList.spec.tsx b/packages/nhsuk-frontend-react/src/components/content-presentation/summary-list/SummaryList.spec.tsx
index 4bbfe872..eca19dfd 100644
--- a/packages/nhsuk-frontend-react/src/components/content-presentation/summary-list/SummaryList.spec.tsx
+++ b/packages/nhsuk-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();
@@ -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();
+
+ 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/packages/nhsuk-frontend-react/src/components/content-presentation/summary-list/SummaryList.stories.tsx b/packages/nhsuk-frontend-react/src/components/content-presentation/summary-list/SummaryList.stories.tsx
index b628420f..958179e4 100644
--- a/packages/nhsuk-frontend-react/src/components/content-presentation/summary-list/SummaryList.stories.tsx
+++ b/packages/nhsuk-frontend-react/src/components/content-presentation/summary-list/SummaryList.stories.tsx
@@ -69,3 +69,57 @@ export const Default: Story = {
),
};
+
+export const NoBorder: Story = {
+ args: {
+ variant: 'no-border',
+ },
+ render: (args) => (
+
+
+ Name
+ John Smith
+
+
+ Change
+
+
+
+
+ Date of birth
+ 1 January 1990
+
+
+ Change
+
+
+
+
+ Address
+
+ 1 Smith Street, Smithville,
+ Smithfield,
+ Smithshire,
+ SM1 1SM
+
+
+
+ Change
+
+
+
+
+ Contact details
+
+ 07000 000000
+ john.smith@email.com
+
+
+
+ Change
+
+
+
+
+ ),
+};
diff --git a/packages/nhsuk-frontend-react/src/components/content-presentation/summary-list/SummaryList.tsx b/packages/nhsuk-frontend-react/src/components/content-presentation/summary-list/SummaryList.tsx
index 97c80413..76f0058a 100644
--- a/packages/nhsuk-frontend-react/src/components/content-presentation/summary-list/SummaryList.tsx
+++ b/packages/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(
- ({ className, ...props }, ref) => {
+ ({ className, variant, ...props }, ref) => {
return (
diff --git a/packages/nhsuk-frontend-react/src/components/content-presentation/summary-list/__snapshots__/SummaryList.spec.tsx.snap b/packages/nhsuk-frontend-react/src/components/content-presentation/summary-list/__snapshots__/SummaryList.spec.tsx.snap
index 3ebd0d10..e3a9b8e2 100644
--- a/packages/nhsuk-frontend-react/src/components/content-presentation/summary-list/__snapshots__/SummaryList.spec.tsx.snap
+++ b/packages/nhsuk-frontend-react/src/components/content-presentation/summary-list/__snapshots__/SummaryList.spec.tsx.snap
@@ -132,3 +132,136 @@ exports[`should render the SummaryList component 1`] = `
`;
+
+exports[`should render the SummaryList component with no border 1`] = `
+
+`;