From f968377b8561dec554aa2fb35202abaa15448bb3 Mon Sep 17 00:00:00 2001
From: "tom.davies" <thomas.davies@sage.com>
Date: Tue, 12 Nov 2024 15:04:26 +0000
Subject: [PATCH] chore: add test stories

---
 .../dialog-full-screen-test.stories.tsx       | 15 +++++++++++++
 src/components/dialog/dialog-test.stories.tsx | 14 +++++++++++++
 .../sidebar/sidebar-test.stories.tsx          | 21 +++++++++++++++++++
 3 files changed, 50 insertions(+)

diff --git a/src/components/dialog-full-screen/dialog-full-screen-test.stories.tsx b/src/components/dialog-full-screen/dialog-full-screen-test.stories.tsx
index de44eddb64..8e55f4ed48 100644
--- a/src/components/dialog-full-screen/dialog-full-screen-test.stories.tsx
+++ b/src/components/dialog-full-screen/dialog-full-screen-test.stories.tsx
@@ -9,6 +9,7 @@ import Icon from "../icon";
 import Textbox from "../textbox";
 import Box from "../box";
 import { StepFlow } from "../step-flow";
+import Typography from "../typography";
 
 export default {
   title: "Dialog Full Screen/Test",
@@ -246,3 +247,17 @@ export const WithWrappedStickyForm: StoryType = {
   },
   parameters: { chromatic: { disableSnapshot: true } },
 };
+
+export const WithOverflowingContent: StoryType = () => (
+  <DialogFullScreen title="With Overflowing Content" open onCancel={() => {}}>
+    {Array.from({ length: 30 }, (_, i) => (
+      <Typography key={i}>This is line {i + 1}</Typography>
+    ))}
+  </DialogFullScreen>
+);
+
+WithOverflowingContent.parameters = {
+  chromatic: {
+    disableSnapshot: true,
+  },
+};
diff --git a/src/components/dialog/dialog-test.stories.tsx b/src/components/dialog/dialog-test.stories.tsx
index 83ddc4960c..5059bc88d7 100644
--- a/src/components/dialog/dialog-test.stories.tsx
+++ b/src/components/dialog/dialog-test.stories.tsx
@@ -494,3 +494,17 @@ export const WithButton = {
     );
   },
 };
+
+export const WithOverflowingContent: StoryType = () => (
+  <Dialog title="With Overflowing Content" open onCancel={() => {}}>
+    {Array.from({ length: 30 }, (_, i) => (
+      <Typography key={i}>This is line {i + 1}</Typography>
+    ))}
+  </Dialog>
+);
+
+WithOverflowingContent.parameters = {
+  chromatic: {
+    disableSnapshot: true,
+  },
+};
diff --git a/src/components/sidebar/sidebar-test.stories.tsx b/src/components/sidebar/sidebar-test.stories.tsx
index 070fc0ec94..71fd2a6bc3 100644
--- a/src/components/sidebar/sidebar-test.stories.tsx
+++ b/src/components/sidebar/sidebar-test.stories.tsx
@@ -175,3 +175,24 @@ export const WithForm: StoryObj<typeof Sidebar> = {
     </Sidebar>
   ),
 };
+
+export const WithOverflowingContent: StoryObj<typeof Sidebar> = {
+  render: (args) => (
+    <Sidebar
+      {...args}
+      header={<Typography variant="h3">With overflowing content</Typography>}
+      open
+      onCancel={() => {}}
+    >
+      {Array.from({ length: 30 }, (_, i) => (
+        <Typography key={i}>This is line {i + 1}</Typography>
+      ))}
+    </Sidebar>
+  ),
+};
+
+WithOverflowingContent.parameters = {
+  chromatic: {
+    disableSnapshot: true,
+  },
+};