docs(dialog-fullscreen): make WithBox story private

Sage · Oct 22, 2024 · 6f648cc · 6f648cc
1 parent af30d10
commit 6f648cc
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 41 deletions.
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
@@ -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",
@@ -216,3 +217,33 @@ WithTwoDifferentNodes.decorators = [
 WithTwoDifferentNodes.parameters = {
   layout: "fullscreen",
 };
+
+export const WithWrappedStickyForm: StoryType = {
+  args: {
+    children: (
+      <Box p="0px 40px" minHeight="0">
+        <Form
+          stickyFooter
+          leftSideButtons={<Button onClick={() => {}}>Cancel</Button>}
+          saveButton={
+            <Button buttonType="primary" type="submit">
+              Save
+            </Button>
+          }
+        >
+          <Textbox label="First Name" />
+          <Textbox label="Middle Name" />
+          <Textbox label="Surname" />
+          <Textbox label="Birth Place" />
+          <Textbox label="Favourite Colour" />
+          <Textbox label="Address" />
+        </Form>
+      </Box>
+    ),
+    open: true,
+    onCancel: () => {},
+    title: "Title",
+    subtitle: "Subtitle",
+  },
+  parameters: { chromatic: { disableSnapshot: true } },
+};
diff --git a/src/components/dialog-full-screen/dialog-full-screen.stories.tsx b/src/components/dialog-full-screen/dialog-full-screen.stories.tsx
@@ -718,47 +718,6 @@ WithHideableHeaderChildren.parameters = {
   chromatic: { disableSnapshot: true },
 };
 
-export const WithBox: Story = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Open DialogFullScreen</Button>
-      <DialogFullScreen
-        open={isOpen}
-        onCancel={() => setIsOpen(false)}
-        title="Title"
-        subtitle="Subtitle"
-      >
-        <Box p="0px 40px">
-          <Form
-            stickyFooter
-            leftSideButtons={
-              <Button onClick={() => setIsOpen(false)}>Cancel</Button>
-            }
-            saveButton={
-              <Button buttonType="primary" type="submit">
-                Save
-              </Button>
-            }
-          >
-            <Box>
-              This is an example of a full screen Dialog with a Form as content
-            </Box>
-            <Textbox label="First Name" />
-            <Textbox label="Middle Name" />
-            <Textbox label="Surname" />
-            <Textbox label="Birth Place" />
-            <Textbox label="Favourite Colour" />
-            <Textbox label="Address" />
-          </Form>
-        </Box>
-      </DialogFullScreen>
-    </>
-  );
-};
-WithBox.storyName = "With Box";
-WithBox.parameters = { chromatic: { disableSnapshot: true } };
-
 export const FocusingADifferentFirstElement: Story = () => {
   const [isOpenOne, setIsOpenOne] = useState(false);
   const [isOpenTwo, setIsOpenTwo] = useState(false);