chore(odyssey-react-mui): fix Layout story margin

okta · Jul 24, 2024 · 2cdca35 · 2cdca35
1 parent 145e627
commit 2cdca35
Showing 1 changed file with 99 additions and 70 deletions.
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/Layout/Layout.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/Layout/Layout.stories.tsx
@@ -47,6 +47,12 @@ const RegionDisclaimer = () => {
   );
 };
 
+const MarginContainer = styled.div({
+  "& + &": {
+    marginBlockStart: "16px",
+  },
+});
+
 const storybookMeta: Meta<LayoutProps> = {
   title: "Labs Components/Layout",
   component: Layout,
@@ -250,76 +256,99 @@ export const KitchenSink: StoryObj<LayoutProps> = {
   render: function () {
     return (
       <>
-        <Layout regions={[1]}>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-        </Layout>
-        <Layout regions={[1, 1]}>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-        </Layout>
-        <Layout regions={[2, 1]}>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-        </Layout>
-        <Layout regions={[1, 2]}>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-        </Layout>
-        <Layout regions={[3, 1]}>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-        </Layout>
-        <Layout regions={[1, 3]}>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-        </Layout>
-        <Layout regions={[1, 1, 1]}>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-        </Layout>
-        <Layout regions={[1, 1, 1, 1]}>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-          <VisibleRegion>
-            <RegionLabel>Region</RegionLabel>
-          </VisibleRegion>
-        </Layout>
+        <MarginContainer>
+          <Layout regions={[1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[1, 1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[2, 1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[1, 2]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[3, 1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[1, 3]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[1, 1, 1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[1, 1, 1, 1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
       </>
     );
   },