docs(dialog-fullscreen): make WithBox story private

Sage · Oct 22, 2024 · 338e5db · 338e5db
1 parent 4803f1f
commit 338e5db
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 45 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
@@ -216,3 +216,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.mdx b/src/components/dialog-full-screen/dialog-full-screen.mdx
@@ -57,10 +57,6 @@ to have a possibility to manage active `Tabs` group
 
 <Canvas of={DialogFullScreenStories.WithHideableHeaderChildren} />
 
-### With `Box`
-
-<Canvas of={DialogFullScreenStories.WithBox} />
-
 ### Overriding the first focused element
 
 By default, when a dialog is opened it will automatically focus the first element within its children that can be focussed.

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);