@simplybusiness/mobius 3.8.0 → 3.9.1

package/src/components/Grid/{Grid.story.mdx → Grid.mdx}

@@ -1,9 +1,10 @@
 import { useState, Fragment } from "react";
-import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Story } from "@storybook/blocks";
 import { Grid } from ".";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
 import { RadioGroup, Radio, Select } from "../Radio";
+import * as GridStories from "./Grid.stories";
 
 import { ThemeContext } from "../../contexts";
 
@@ -22,72 +23,7 @@ export const sizeOptions = [
   "size-100",
 ];
 
-<Meta
-  title="Layout/Grid"
-  component={Grid}
-  argTypes={{
-    columns: {
-      control: "number",
-    },
-    gap: {
-      control: "select",
-      options: [...sizeOptions],
-    },
-    rowGap: {
-      control: "select",
-      options: [...sizeOptions],
-      if: {
-        arg: "gap",
-        truthy: false,
-      },
-    },
-    columnGap: {
-      control: "select",
-      options: [...sizeOptions],
-      if: {
-        arg: "gap",
-        truthy: false,
-      },
-    },
-    alignContent: {
-      control: "select",
-      options: [
-        "",
-        "center",
-        "space-around",
-        "space-between",
-        "space-evenly",
-        "stretch",
-      ],
-    },
-    justifyContent: {
-      control: "select",
-      options: [
-        "",
-        "center",
-        "start",
-        "end",
-        "space-around",
-        "space-between",
-        "space-evenly",
-      ],
-    },
-    alignItems: {
-      control: "select",
-      options: ["", "center", "start", "end", "stretch", "baseline"],
-    },
-    justifyItems: {
-      control: "select",
-      options: ["", "start", "end", "center", "stretch"],
-    },
-  }}
-  decorators={[
-    Story => {
-      require("./Grid.story.styles.css");
-      return <Story />;
-    },
-  ]}
-/>
+<Meta of={GridStories} />
 
 # Grid
 
@@ -180,39 +116,73 @@ Different items can have different widths. This is especially useful when creati
   <Grid.Item span={12}>
     <Card>span=12</Card>
   </Grid.Item>
-  <Grid.Item span={11}>
-    <Card>span=11</Card>
-  </Grid.Item>
-  <Grid.Item span={1}>
-    <Card>span=1</Card>
-  </Grid.Item>
-  <Grid.Item span={10}>
-    <Card>span=10</Card>
-  </Grid.Item>
-  <Grid.Item span={2}>
-    <Card>span=2</Card>
-  </Grid.Item>
-  <Grid.Item span={9}>
-    <Card>span=9</Card>
-  </Grid.Item>
-  <Grid.Item span={3}>
-    <Card>span=3</Card>
-  </Grid.Item>
-  <Grid.Item span={8}>
-    <Card>span=8</Card>
-  </Grid.Item>
-  <Grid.Item span={4}>
-    <Card>span=4</Card>
-  </Grid.Item>
-  <Grid.Item span={7}>
-    <Card>span=7</Card>
-  </Grid.Item>
-  <Grid.Item span={5}>
-    <Card>span=5</Card>
-  </Grid.Item>
-  <Grid.Item span={6}>
-    <Card>span=6</Card>
-  </Grid.Item>
+
+{" "}
+
+<Grid.Item span={11}>
+  <Card>span=11</Card>
+</Grid.Item>
+
+{" "}
+
+<Grid.Item span={1}>
+  <Card>span=1</Card>
+</Grid.Item>
+
+{" "}
+
+<Grid.Item span={10}>
+  <Card>span=10</Card>
+</Grid.Item>
+
+{" "}
+
+<Grid.Item span={2}>
+  <Card>span=2</Card>
+</Grid.Item>
+
+{" "}
+
+<Grid.Item span={9}>
+  <Card>span=9</Card>
+</Grid.Item>
+
+{" "}
+
+<Grid.Item span={3}>
+  <Card>span=3</Card>
+</Grid.Item>
+
+{" "}
+
+<Grid.Item span={8}>
+  <Card>span=8</Card>
+</Grid.Item>
+
+{" "}
+
+<Grid.Item span={4}>
+  <Card>span=4</Card>
+</Grid.Item>
+
+{" "}
+
+<Grid.Item span={7}>
+  <Card>span=7</Card>
+</Grid.Item>
+
+{" "}
+
+<Grid.Item span={5}>
+  <Card>span=5</Card>
+</Grid.Item>
+
+{" "}
+
+<Grid.Item span={6}>
+  <Card>span=6</Card>
+</Grid.Item>
+
   <Grid.Item span={6}>
     <Card>span=6</Card>
   </Grid.Item>
@@ -299,52 +269,7 @@ export const Square = ({ children, ...props }) => (
   </Flex>
 );
 
-<Story
-  name="Alignment properties"
-  args={{
-    columns: 12,
-    gap: "size-20",
-    rowGap: "",
-    columnGap: "",
-    alignContent: "",
-    justifyContent: "",
-    alignItems: "stretch",
-    justifyItems: "stretch",
-    className: "grid-example-fixed-size-grid",
-  }}
->
-  {args => (
-    <Grid {...args}>
-      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
-        <Square>1</Square>
-      </Grid.Item>
-      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
-        <Square>2</Square>
-      </Grid.Item>
-      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
-        <Square>3</Square>
-      </Grid.Item>
-      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
-        <Square>4</Square>
-      </Grid.Item>
-      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
-        <Square>5</Square>
-      </Grid.Item>
-      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
-        <Square>6</Square>
-      </Grid.Item>
-      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
-        <Square>7</Square>
-      </Grid.Item>
-      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
-        <Square>8</Square>
-      </Grid.Item>
-      <Grid.Item className="grid-example-grid-alignment-item" span={4}>
-        <Square>9</Square>
-      </Grid.Item>
-    </Grid>
-  )}
-</Story>
+<Story of={GridStories.AlignmentProperties} />
 
 ```jsx
 import { Grid } from "@simplybusiness/mobius";
@@ -384,63 +309,7 @@ import { Grid } from "@simplybusiness/mobius";
 
 ### Normal
 
-<Story
-  name="Normal"
-  args={{
-    columns: 12,
-    gap: "size-20",
-    rowGap: "",
-    columnGap: "",
-    alignContent: "",
-    justifyContent: "",
-    alignItems: "stretch",
-    justifyItems: "stretch",
-  }}
->
-  {args => (
-    <Grid {...args}>
-      <Grid.Item span={12}>
-        <Card>span=12</Card>
-      </Grid.Item>
-      <Grid.Item span={11}>
-        <Card>span=11</Card>
-      </Grid.Item>
-      <Grid.Item span={1}>
-        <Card>span=1</Card>
-      </Grid.Item>
-      <Grid.Item span={10}>
-        <Card>span=10</Card>
-      </Grid.Item>
-      <Grid.Item span={2}>
-        <Card>span=2</Card>
-      </Grid.Item>
-      <Grid.Item span={9}>
-        <Card>span=9</Card>
-      </Grid.Item>
-      <Grid.Item span={3}>
-        <Card>span=3</Card>
-      </Grid.Item>
-      <Grid.Item span={8}>
-        <Card>span=8</Card>
-      </Grid.Item>
-      <Grid.Item span={4}>
-        <Card>span=4</Card>
-      </Grid.Item>
-      <Grid.Item span={7}>
-        <Card>span=7</Card>
-      </Grid.Item>
-      <Grid.Item span={5}>
-        <Card>span=5</Card>
-      </Grid.Item>
-      <Grid.Item span={6}>
-        <Card>span=6</Card>
-      </Grid.Item>
-      <Grid.Item span={6}>
-        <Card>span=6</Card>
-      </Grid.Item>
-    </Grid>
-  )}
-</Story>
+<Story of={GridStories.Normal} />
 
 ```jsx
 import { Grid } from "@simplybusiness/mobius";
@@ -505,25 +374,7 @@ const Card = ({ children, ...props }) => (
 
 ### Eight Columns
 
-<Story
-  name="Eight Columns"
-  args={{
-    columns: 8,
-    gap: "size-20",
-    alignContent: "",
-    justifyContent: "",
-    alignItems: "stretch",
-    justifyItems: "stretch",
-  }}
->
-  {args => (
-    <Grid style={{ height: 300 }} {...args}>
-      {[...new Array(8)].map((_, k) => (
-        <Card key={k}>span=1</Card>
-      ))}
-    </Grid>
-  )}
-</Story>
+<Story of={GridStories.EightColumns} />
 
 ```jsx
 import { Grid } from "@simplybusiness/mobius";
@@ -557,87 +408,9 @@ const Card = ({ children, ...props }) => (
 
 ### Responsive
 
-<Story
-  name="Responsive"
-  args={{
-    gap: "size-20",
-    rowGap: "",
-    columnGap: "",
-    alignContent: "",
-    justifyContent: "",
-    alignItems: "stretch",
-    justifyItems: "stretch",
-    xs: 12,
-    sm: 6,
-    md: 2,
-    lg: 8,
-    xl: 12,
-    xxl: 4,
-  }}
-  parameters={{ controls: { exclude: ["columns"] } }}
-  argTypes={() => {
-    const breakpointControl = {
-      control: {
-        type: "number",
-        min: 0,
-        max: 12,
-        step: 1,
-      },
-    };
-    return {
-      xs: breakpointControl,
-      sm: breakpointControl,
-      md: breakpointControl,
-      lg: breakpointControl,
-      xl: breakpointControl,
-      xxl: breakpointControl,
-    };
-  }}
-  decorators={[
-    Story => (
-      <ThemeContext.Provider
-        value={{
-          breakpoints: [
-            { size: "xs", value: 320 },
-            { size: "sm", value: 540 },
-            { size: "md", value: 720 },
-            { size: "lg", value: 960 },
-            { size: "xl", value: 1140 },
-            { size: "xxl", value: 1320 },
-          ],
-        }}
-      >
-        <Story />
-      </ThemeContext.Provider>
-    ),
-  ]}
->
-  {args => {
-    const breakpointArgs = ["xs", "sm", "md", "lg", "xl", "xxl"];
-    const allArgs = Object.entries(args)
-      .filter(([breakpoint]) => breakpointArgs.includes(breakpoint))
-      .map(([breakpoint, value]) => `${breakpoint}=${value}`)
-      .join(" ");
-    return (
-      <Grid {...args}>
-        <Grid.Item>
-          <Card>{allArgs}</Card>
-        </Grid.Item>
-        <Grid.Item lg={4}>
-          <Card>lg=4</Card>
-        </Grid.Item>
-        <Grid.Item xs={5}>
-          <Card>xs=5</Card>
-        </Grid.Item>
-        <Grid.Item span={5}>
-          <Card>span=5</Card>
-        </Grid.Item>
-      </Grid>
-    );
-  }}
-</Story>
+<Story of={GridStories.Responsive} />
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Grid, ThemeContext } from "@simplybusiness/mobius";
 
@@ -700,64 +473,9 @@ export const AlignSquare = ({ children, ...props }) => (
   </Box>
 );
 
-<Story
-  name="Item positioning"
-  args={{
-    alignSelf: "center",
-    justifySelf: "end",
-  }}
-  argTypes={{
-    alignSelf: {
-      control: "select",
-      options: ["", "center", "start", "end", "stretch"],
-    },
-    justifySelf: {
-      control: "select",
-      options: ["", "center", "start", "end", "stretch"],
-    },
-  }}
-  parameters={{
-    controls: {
-      exclude: [
-        "columns",
-        "gap",
-        "rowGap",
-        "columnGap",
-        "alignContent",
-        "justifyContent",
-        "alignItems",
-        "justifyItems",
-      ],
-    },
-  }}
->
-  {args => (
-    <Grid
-      columns={12}
-      gap="size-20"
-      alignContent=""
-      justifyContent=""
-      alignItems="stretch"
-      justifyItems="stretch"
-      className="grid-example-fixed-size-grid"
-    >
-      <Grid.Item className="grid-example-align-square-item" span={4} {...args}>
-        <AlignSquare>1</AlignSquare>
-      </Grid.Item>
-      <Grid.Item className="grid-example-align-square-item" span={4}>
-        <AlignSquare>2</AlignSquare>
-      </Grid.Item>
-      <Grid.Item className="grid-example-align-square-item" span={4}>
-        <AlignSquare>3</AlignSquare>
-      </Grid.Item>
-      <Grid.Item className="grid-example-align-square-item" span={4}>
-        <AlignSquare>4</AlignSquare>
-      </Grid.Item>
-    </Grid>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={GridStories.ItemPositioning} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Grid, ThemeContext } from "@simplybusiness/mobius";