fixup! fixup! Feat(web-react): Add alignmentX and alignmentY prop to …

…Grid component #DS-1414
lmc-eu · Aug 13, 2024 · ee373ad · ee373ad
1 parent 085d34a
commit ee373ad
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 32 deletions.
diff --git a/packages/web-react/src/components/Grid/demo/GridAlignment.tsx b/packages/web-react/src/components/Grid/demo/GridAlignment.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import DocsBox from '../../../../docs/DocsBox';
 import Grid from '../Grid';
-import GridItem from '../GridItem';
 
 const GridAlignment = () => (
   <>
@@ -39,17 +38,13 @@ const GridAlignment = () => (
 
     <Grid cols={2}>
       <Grid cols={1} alignmentX="center" alignmentY="center" UNSAFE_className="bg-cover">
-        <GridItem>
-          <DocsBox size="small">
-            Center
-            <br />…
-          </DocsBox>
-        </GridItem>
+        <DocsBox size="small">
+          Center
+          <br />…
+        </DocsBox>
       </Grid>
       <Grid cols={1} alignmentX="center" alignmentY="center" UNSAFE_className="bg-cover">
-        <GridItem>
-          <DocsBox size="small">Center</DocsBox>
-        </GridItem>
+        <DocsBox size="small">Center</DocsBox>
       </Grid>
     </Grid>
 

diff --git a/packages/web-react/src/components/Grid/stories/Grid.stories.tsx b/packages/web-react/src/components/Grid/stories/Grid.stories.tsx
@@ -29,9 +29,6 @@ const meta: Meta<typeof Grid> = {
         defaultValue: { summary: undefined },
       },
     },
-    children: {
-      control: 'object',
-    },
     cols: {
       control: 'object',
     },
@@ -54,25 +51,6 @@ const meta: Meta<typeof Grid> = {
   args: {
     alignmentX: undefined,
     alignmentY: undefined,
-    children: (
-      <>
-        {[...Array(12)].map((_, index) => {
-          const key = `item-${index}`;
-
-          return (
-            <DocsBox key={key}>
-              {index === 11 ? (
-                <>
-                  Item <br />…<br />…
-                </>
-              ) : (
-                'Item'
-              )}
-            </DocsBox>
-          );
-        })}
-      </>
-    ),
     cols: {
       mobile: 2,
       tablet: 3,
@@ -102,4 +80,29 @@ type Story = StoryObj<typeof Grid>;
 
 export const Playground: Story = {
   name: 'Grid',
+  render: (args) => {
+    const { alignmentX, alignmentY, ...restProps } = args;
+
+    return (
+      <Grid {...restProps}>
+        {[...Array(12)].map((_, index) => {
+          const key = `item-${index}`;
+
+          return (
+            <Grid key={key} cols={1} alignmentX={alignmentX} alignmentY={alignmentY} UNSAFE_className="bg-cover">
+              <DocsBox key={key}>
+                {index === 11 ? (
+                  <>
+                    Item <br />…<br />…
+                  </>
+                ) : (
+                  'Item'
+                )}
+              </DocsBox>
+            </Grid>
+          );
+        })}
+      </Grid>
+    );
+  },
 };