wip

webiny · Nov 21, 2024 · a254d5f · a254d5f
1 parent 90d0c94
commit a254d5f
Show file tree

Hide file tree

Showing 5 changed files with 190 additions and 41 deletions.
diff --git a/packages/admin-ui/src/Container/Container.stories.tsx b/packages/admin-ui/src/Container/Container.stories.tsx
@@ -1,13 +1,22 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Text } from "~/Text";
+import {  Grid } from "~/Grid";
+import { StyledColumn } from "./stories/StyledColumn";
 
 import { Container } from "./Container";
 
 const meta: Meta<typeof Container> = {
     title: "Components/Container",
     component: Container,
-    tags: ["autodocs"]
+    tags: ["autodocs"],
+    decorators: [
+        Story => (
+            <div className="w-[700px]">
+                <Story />
+            </div>
+        )
+    ]
 };
 
 export default meta;
@@ -16,21 +25,79 @@ type Story = StoryObj<typeof Container>;
 
 export const Default: Story = {
     args: {
-        className: "bg-neutral-light p-4",
+        className: "bg-neutral-light max-w-[500px]",
         children: <Text text={"This is a container."} />
     }
 };
 
-export const ComfortableGap: Story = {
+export const FluidWidth: Story = {
+    args: {
+        ...Default.args,
+        className: "bg-neutral-light",
+        children: (
+            <>
+                <Text text={"This is a fluid container."} /> <br />
+                <Text text={"Fluid container has 100% max-width."} />
+            </>
+        )
+    }
+};
+
+export const FixedWidth: Story = {
+    args: {
+        ...Default.args,
+        className: "w-[500px] bg-neutral-light",
+        children: (
+            <>
+                <Text text={"This is a fixed container."} /> <br />
+                <Text text={"Fixed container has a fixed width. In this case, 500px."} />
+            </>
+        )
+    }
+};
+
+export const ComfortablePadding: Story = {
     args: {
         ...Default.args,
         padding: "comfortable"
     }
 };
 
-export const SpaciousGap: Story = {
+export const SpaciousPadding: Story = {
     args: {
         ...Default.args,
         padding: "spacious"
     }
 };
+
+export const WithGridFluid: Story = {
+    name: "With Grid (Fluid)",
+    args: {
+        ...Default.args,
+        className: "bg-neutral-light",
+        children: (
+            <Grid className={"bg-neutral-light"}>
+                <StyledColumn span={3} index={1}/>
+                <StyledColumn span={3} index={2}/>
+                <StyledColumn span={3} index={3}/>
+                <StyledColumn span={3} index={4}/>
+            </Grid>
+        )
+    }
+};
+
+export const WithGridFixed: Story = {
+    name: "With Grid (Fixed)",
+    args: {
+        ...Default.args,
+        className: "w-[500px] bg-neutral-light",
+        children: (
+            <Grid>
+                <StyledColumn span={3} index={1}/>
+                <StyledColumn span={3} index={2}/>
+                <StyledColumn span={3} index={3}/>
+                <StyledColumn span={3} index={4}/>
+            </Grid>
+        )
+    }
+};
diff --git a/packages/admin-ui/src/Container/Container.tsx b/packages/admin-ui/src/Container/Container.tsx
@@ -3,9 +3,10 @@ import { makeDecoratable } from "@webiny/react-composition";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "~/utils";
 
-const containerVariants = cva("container", {
+const containerVariants = cva("m-auto", {
     variants: {
         padding: {
+            none: "px-none",
             comfortable: "px-xl",
             spacious: "px-xxl"
         }

diff --git a/packages/admin-ui/src/Container/stories/StyledColumn.tsx b/packages/admin-ui/src/Container/stories/StyledColumn.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { type ColumnProps, Grid } from "~/Grid";
+
+export interface StyledColumnProps extends ColumnProps {
+    index: number;
+}
+
+export const StyledColumn = (props: StyledColumnProps) => (
+    <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm" {...props}>
+        Col {props.index}
+        {props.span && (
+            <>
+                <br />
+                <code>span: {props.span}</code>
+            </>
+        )}
+        {props.offset && (
+            <>
+                <br />
+                <code>offset: {props.offset}</code>
+            </>
+        )}
+    </Grid.Column>
+);
diff --git a/packages/admin-ui/src/Grid/Grid.stories.tsx b/packages/admin-ui/src/Grid/Grid.stories.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Grid } from "./Grid";
+import { Container } from "~/Container";
+import { StyledColumn } from "./stories/StyledColumn";
 
 const meta: Meta<typeof Grid> = {
     title: "Components/Grid",
@@ -13,28 +15,20 @@ export default meta;
 
 type Story = StoryObj<typeof Grid>;
 
-const StyledColumn = ({ ...props }) => (
-    <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm" {...props} />
-);
-
 export const Default: Story = {
     args: {
         className: "bg-neutral-light p-4",
         children: (
             <>
-                <StyledColumn>Col 1</StyledColumn>
-                <StyledColumn span={3}>
-                    Col 2 (<code>span: 3</code>)
-                </StyledColumn>
-                <StyledColumn>Col 3</StyledColumn>
-                <StyledColumn>Col 4</StyledColumn>
-                <StyledColumn>Col 5</StyledColumn>
-                <StyledColumn>Col 6</StyledColumn>
-                <StyledColumn span={2}>
-                    Col 7 (<code>span: 2</code>)
-                </StyledColumn>
-                <StyledColumn>Col 8</StyledColumn>
-                <StyledColumn>Col 9</StyledColumn>
+                <StyledColumn index={1} />
+                <StyledColumn index={2} span={3} />
+                <StyledColumn index={3} />
+                <StyledColumn index={4} />
+                <StyledColumn index={5} />
+                <StyledColumn index={6} />
+                <StyledColumn index={7} span={2} />
+                <StyledColumn index={8} />
+                <StyledColumn index={9} />
             </>
         )
     }
@@ -51,38 +45,77 @@ export const WithOffset: Story = {
     parameters: {
         layout: "padded"
     },
-    decorators: [
-        Story => (
-            <div className="w-full">
-                <Story />
-            </div>
-        )
-    ],
     args: {
         ...Default.args,
         children: (
             <>
                 {/* Row 1 */}
-                <StyledColumn span={8} offset={2}>
-                    Col (<code>span: 8</code>, <code>offset: 2</code>)
-                </StyledColumn>
+                <StyledColumn span={8} offset={2} index={1} />
                 <Grid.Column span={2} />
 
                 {/* Row 2 */}
-                <StyledColumn span={8} offset={4}>
-                    Col (<code>span: 8</code>, <code>offset: 4</code>)
-                </StyledColumn>
+                <StyledColumn span={8} offset={4} index={1} />
 
                 {/* Row 3 */}
-                <StyledColumn span={10} offset={1}>
-                    Col (<code>span: 10</code>, <code>offset: 1</code>)
-                </StyledColumn>
+                <StyledColumn span={10} offset={1} index={1} />
                 <Grid.Column span={1} />
 
                 {/* Row 4 */}
-                <StyledColumn span={12}>
-                    Col (<code>span: 12</code>)
-                </StyledColumn>
+                <StyledColumn span={12} index={1} />
+            </>
+        )
+    }
+};
+
+export const WithContainerFluid: Story = {
+    name: "With Container (Fluid)",
+    decorators: [
+        Story => (
+            <div className="w-[700px]">
+                <Story />
+            </div>
+        )
+    ],
+    render: ({ children }) => (
+        <Container className={"bg-neutral-light"}>
+            <Grid>{children}</Grid>
+        </Container>
+    ),
+    args: {
+        ...Default.args,
+        children: (
+            <>
+                <StyledColumn span={3} index={1} />
+                <StyledColumn span={3} index={2} />
+                <StyledColumn span={3} index={3} />
+                <StyledColumn span={3} index={4} />
+            </>
+        )
+    }
+};
+
+export const WithContainerFixed: Story = {
+    name: "With Container (Fixed)",
+    decorators: [
+        Story => (
+            <div className="w-[700px]">
+                <Story />
+            </div>
+        )
+    ],
+    render: ({ children }) => (
+        <Container className={"w-[500px] bg-neutral-light"}>
+            <Grid>{children}</Grid>
+        </Container>
+    ),
+    args: {
+        ...Default.args,
+        children: (
+            <>
+                <StyledColumn span={3} index={1} />
+                <StyledColumn span={3} index={2} />
+                <StyledColumn span={3} index={3} />
+                <StyledColumn span={3} index={4} />
             </>
         )
     }

diff --git a/packages/admin-ui/src/Grid/stories/StyledColumn.tsx b/packages/admin-ui/src/Grid/stories/StyledColumn.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { type ColumnProps, Grid } from "~/Grid";
+
+export interface StyledColumnProps extends ColumnProps {
+    index: number;
+}
+
+export const StyledColumn = (props: StyledColumnProps) => (
+    <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm" {...props}>
+        Col {props.index}
+        {props.span && (
+            <>
+                <br />
+                <code>span: {props.span}</code>
+            </>
+        )}
+        {props.offset && (
+            <>
+                <br />
+                <code>offset: {props.offset}</code>
+            </>
+        )}
+    </Grid.Column>
+);