@simplybusiness/mobius 3.8.0 → 3.9.0

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

@@ -1,4 +1,4 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import * as baseIcons from "@simplybusiness/icons";
 import { DataTable } from ".";
 import { data, columns } from "./mockTableData";
@@ -6,12 +6,9 @@ import { ThemeContext } from "../../contexts";
 import { Button } from "../Button";
 import { Flex } from "../Flex";
 import { excludeControls } from "../../utils/excludeControls";
+import * as DataTableStories from "./DataTable.stories";
 
-<Meta
-  title="Components/DataTable"
-  component={DataTable}
-  argTypes={excludeControls("className", "caption", "spanData", "collapseData")}
-/>
+<Meta of={DataTableStories} />
 
 # DataTable
 
@@ -122,21 +119,7 @@ Each row is an object with `accessor` (see `columns` prop above) as key and uniq
 ## Table Layout
 
 <Canvas>
-  <Story
-    name="Table Layout"
-    args={{
-      data,
-      columns,
-      layout: "table",
-      isSortable: false,
-    }}
-  >
-    {args => (
-      <div>
-        <DataTable {...args} />
-      </div>
-    )}
-  </Story>
+  <Story of={DataTableStories.TableLayout} />
 </Canvas>
 
 ## Flex based layout
@@ -145,21 +128,7 @@ Traditional `table` based layouts are great for displaying basic tabular data. T
 It becomes useful when implementing resizable tables that must also be able to stretch to fill all available space.
 
 <Canvas>
-  <Story
-    name="Div Layout"
-    args={{
-      data,
-      columns,
-      layout: "flex",
-      isSortable: false,
-    }}
-  >
-    {args => (
-      <div>
-        <DataTable {...args} />
-      </div>
-    )}
-  </Story>
+  <Story of={DataTableStories.DivLayout} />
 </Canvas>
 
 ## Sorting
@@ -167,21 +136,7 @@ It becomes useful when implementing resizable tables that must also be able to s
 Sort tabular data by clicking on header cells.
 
 <Canvas>
-  <Story
-    name="Sorting"
-    args={{
-      data,
-      columns,
-      layout: "table",
-      isSortable: true,
-    }}
-  >
-    {args => (
-      <div>
-        <DataTable {...args} />
-      </div>
-    )}
-  </Story>
+  <Story of={DataTableStories.Sorting} />
 </Canvas>
 
 ## Collapsing
@@ -202,44 +157,7 @@ To collapse the `highest_excess` and `lowest_excess` table columns on "md" viewp
   />
 ```
 
-<Story
-  name="Collapsing"
-  args={{
-    data,
-    columns,
-    collapseData: {
-      collapseOnSize: "md",
-      collapseColumns: ["lowest_excess"],
-    },
-    layout: "table",
-    isSortable: false,
-  }}
-  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 },
-          ],
-          icons: baseIcons,
-        }}
-      >
-        <Story />
-      </ThemeContext.Provider>
-    ),
-  ]}
->
-  {args => (
-    <div>
-      <DataTable {...args} />
-    </div>
-  )}
-</Story>
+<Story of={DataTableStories.Collapsing} />
 
 ```jsx
 import { DataTable } from "@simplybusiness/mobius";
@@ -282,129 +200,18 @@ To span two adjacent table cells together use `spanData` prop as follows:
 - `spanClass` - the class name value, which can be added to the cell (optional);
 
 <Canvas>
-  <Story
-    name="Column Spanning"
-    args={{
-      data: [
-        {
-          insurance_cover: "Employers' liability",
-          lowest_excess: "£250",
-          highest_excess: "£2,500",
-        },
-        {
-          insurance_cover: "Public liability",
-          lowest_excess: "£350",
-        },
-        {
-          insurance_cover: "Stock",
-          lowest_excess: "£100",
-          highest_excess: "£500",
-        },
-      ],
-      columns,
-      spanData: {
-        lowest_excess: {
-          colspan: 2,
-          targetValue: "£350",
-          substValue:
-            "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
-          spanClass: "customSpanClass",
-        },
-      },
-      layout: "table",
-      isSortable: false,
-    }}
-  >
-    {args => (
-      <div>
-        <DataTable {...args} />
-      </div>
-    )}
-  </Story>
+  <Story of={DataTableStories.ColumnSpanning} />
 </Canvas>
 
 ## Row Spanning (for Table layout)
 
 <Canvas>
-  <Story
-    name="Row Spanning"
-    args={{
-      data: [
-        {
-          insurance_cover: "Employers' liability",
-          lowest_excess: "£250",
-          highest_excess: "£2,500",
-        },
-        {
-          insurance_cover: "Public liability",
-          lowest_excess: "£350",
-          highest_excess: "£500",
-        },
-        {
-          lowest_excess: "£100",
-          highest_excess: "£500",
-        },
-      ],
-      columns,
-      spanData: {
-        insurance_cover: {
-          rowspan: 2,
-          targetValue: "Public liability",
-          spanClass: "customSpanClass",
-        },
-      },
-      layout: "table",
-      isSortable: false,
-    }}
-  >
-    {args => (
-      <div>
-        <DataTable {...args} />
-      </div>
-    )}
-  </Story>
+  <Story of={DataTableStories.RowSpanning} />
 </Canvas>
 
 ## Render Cells with custom Elements
 
-<Story
-  name="Render Cells with custom Elements"
-  args={{
-    data,
-    columns: [
-      {
-        Header: "Insurance cover",
-        accessor: "insurance_cover",
-      },
-      {
-        Header: "Lowest excess",
-        accessor: "lowest_excess",
-      },
-      {
-        Header: "Highest excess",
-        accessor: "highest_excess",
-        Cell: props => {
-          return (
-            <Flex>
-              <Button onClick={() => console.log(props.value)}>Buy</Button>
-              <Button variant="basic" onClick={() => console.log(props.value)}>
-                Details
-              </Button>
-            </Flex>
-          );
-        },
-      },
-    ],
-    layout: "table",
-    isSortable: false,
-  }}
->
-  {args => (
-    <div>
-      <DataTable {...args} />
-    </div>
-  )}
-</Story>
+<Story of={DataTableStories.RenderCellsWithCustomElements} />
 
 ```jsx
 <DataTable

package/src/components/DataTable/DataTable.stories.tsx

@@ -0,0 +1,228 @@
+import type { Meta } from "@storybook/react";
+import * as baseIcons from "@simplybusiness/icons";
+import { DataTable, DataTableProps } from ".";
+import { data, columns } from "./mockTableData";
+import { BreakpointsType, ThemeContext } from "../../contexts";
+import { Button } from "../Button";
+import { Flex } from "../Flex";
+import { excludeControls } from "../../utils/excludeControls";
+
+const 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,
+  },
+] as BreakpointsType;
+
+const setBreakpoints = () => {};
+
+export default {
+  title: "Components/DataTable",
+  component: DataTable,
+  argTypes: excludeControls("className", "caption", "spanData", "collapseData"),
+};
+
+export const TableLayout: Meta<typeof DataTable> = {
+  render: (args: DataTableProps) => (
+    <div>
+      <DataTable {...args} />
+    </div>
+  ),
+  args: {
+    data,
+    columns,
+    layout: "table",
+    isSortable: false,
+  },
+};
+
+export const DivLayout: Meta<typeof DataTable> = {
+  render: (args: DataTableProps) => (
+    <div>
+      <DataTable {...args} />
+    </div>
+  ),
+  args: {
+    data,
+    columns,
+    layout: "flex",
+    isSortable: false,
+  },
+};
+
+export const Sorting: Meta<typeof DataTable> = {
+  render: (args: DataTableProps) => (
+    <div>
+      <DataTable {...args} />
+    </div>
+  ),
+  args: {
+    data,
+    columns,
+    layout: "table",
+    isSortable: true,
+  },
+};
+
+export const Collapsing: Meta<typeof DataTable> = {
+  render: (args: DataTableProps) => (
+    <div>
+      <DataTable {...args} />
+    </div>
+  ),
+  args: {
+    data,
+    columns,
+
+    collapseData: {
+      collapseOnSize: "md",
+      collapseColumns: ["lowest_excess"],
+    },
+    layout: "table",
+    isSortable: false,
+  },
+  decorators: [
+    Story => (
+      <ThemeContext.Provider
+        value={{
+          breakpoints,
+          setBreakpoints,
+          icons: baseIcons,
+        }}
+      >
+        <Story />
+      </ThemeContext.Provider>
+    ),
+  ],
+};
+
+export const ColumnSpanning: Meta<typeof DataTable> = {
+  render: (args: DataTableProps) => (
+    <div>
+      <DataTable {...args} />
+    </div>
+  ),
+  args: {
+    data: [
+      {
+        insurance_cover: "Employers' liability",
+        lowest_excess: "£250",
+        highest_excess: "£2,500",
+      },
+      {
+        insurance_cover: "Public liability",
+        lowest_excess: "£350",
+      },
+      {
+        insurance_cover: "Stock",
+        lowest_excess: "£100",
+        highest_excess: "£500",
+      },
+    ],
+    columns,
+    spanData: {
+      lowest_excess: {
+        colspan: 2,
+        targetValue: "£350",
+        substValue:
+          "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
+        spanClass: "customSpanClass",
+      },
+    },
+    layout: "table",
+    isSortable: false,
+  },
+};
+
+export const RowSpanning: Meta<typeof DataTable> = {
+  render: (args: DataTableProps) => (
+    <div>
+      <DataTable {...args} />
+    </div>
+  ),
+  args: {
+    data: [
+      {
+        insurance_cover: "Employers' liability",
+        lowest_excess: "£250",
+        highest_excess: "£2,500",
+      },
+      {
+        insurance_cover: "Public liability",
+        lowest_excess: "£350",
+        highest_excess: "£500",
+      },
+      {
+        lowest_excess: "£100",
+        highest_excess: "£500",
+      },
+    ],
+    columns,
+    spanData: {
+      insurance_cover: {
+        rowspan: 2,
+        targetValue: "Public liability",
+        spanClass: "customSpanClass",
+      },
+    },
+    layout: "table",
+    isSortable: false,
+  },
+};
+
+export const RenderCellsWithCustomElements: Meta<typeof DataTable> = {
+  render: (args: DataTableProps) => (
+    <div>
+      <DataTable {...args} />
+    </div>
+  ),
+  args: {
+    data,
+    columns: [
+      {
+        Header: "Insurance cover",
+        accessor: "insurance_cover",
+      },
+      {
+        Header: "Lowest excess",
+        accessor: "lowest_excess",
+      },
+      {
+        Header: "Highest excess",
+        accessor: "highest_excess",
+        Cell: ({ value }) => (
+          <Flex>
+            {/* eslint-disable-next-line no-console */}
+            <Button onClick={() => console.log(value)}>Buy</Button>
+            {/* eslint-disable-next-line no-console */}
+            <Button variant="basic" onClick={() => console.log(value)}>
+              Details
+            </Button>
+          </Flex>
+        ),
+      },
+    ],
+    layout: "table",
+    isSortable: false,
+  },
+};

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

@@ -1,21 +1,11 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { DatePicker } from "./DatePicker";
 import { Button } from "../Button";
 import { parseDate } from "@internationalized/date";
 import { I18nProvider } from "@react-aria/i18n";
+import * as DatePickerStories from "./DatePicker.stories";
 
-<Meta
-  title="Forms/DatePicker"
-  component={DatePicker}
-  argTypes={{
-    locale: {
-      control: {
-        type: "select",
-        options: ["en-GB", "en-US"],
-      },
-    },
-  }}
-/>
+<Meta of={DatePickerStories} />
 
 # DatePicker
 
@@ -35,19 +25,9 @@ import { DatePicker } from "@simplybusiness/mobius";
 
 ## Normal
 
-<Story name="Normal" args={{ locale: "en-GB", label: "Start date" }}>
-  {args => (
-    <I18nProvider locale={args.locale}>
-      <DatePicker
-        minValue={parseDate("2022-05-05")}
-        label="Start date"
-        {...args}
-      />
-    </I18nProvider>
-  )}
-</Story>
+<Story of={DatePickerStories.Normal} />
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { DatePicker } from "@simplybusiness/mobius";
 import { I18nProvider } from "@react-aria/i18n";
@@ -519,10 +499,10 @@ The following HTML is rendered for a DatePicker:
 
 Class names are augmented with the following flags if true:
 
-- --is-valid
-- --is-invalid
-- --is-required
-- --is-optional
+- \--is-valid
+- \--is-invalid
+- \--is-required
+- \--is-optional
 
 ---
 

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta } from "@storybook/react";
+import { parseDate } from "@internationalized/date";
+import { I18nProvider } from "@react-aria/i18n";
+import { DatePicker, DatePickerProps } from "./DatePicker";
+
+export default {
+  title: "Forms/DatePicker",
+  component: DatePicker,
+  argTypes: {
+    locale: {
+      control: { type: "select" },
+      options: ["", "en-GB", "en-US"],
+    },
+  },
+};
+
+export const Normal: Meta<typeof DatePicker> = {
+  render: (args: DatePickerProps) => (
+    <DatePicker minValue={parseDate("2022-05-05")} {...args} />
+  ),
+  args: {
+    label: "Start date",
+    isRequired: false,
+  },
+  decorators: [
+    (Story, context) => (
+      <I18nProvider locale={context.allArgs.locale}>
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+};

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

@@ -1,13 +1,10 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { Divider } from "./Divider";
 import { Text, Flex } from "..";
 import { excludeControls } from "../../utils/excludeControls";
+import * as DividerStories from "./Divider.stories";
 
-<Meta
-  title="Components/Divider"
-  component={Divider}
-  argTypes={excludeControls("className")}
-/>
+<Meta of={DividerStories} />
 
 # Divider
 
@@ -30,9 +27,7 @@ import { Divider } from "@simplybusiness/mobius";
 ### Normal
 
 <Canvas>
-  <Story name="Normal" args={{}}>
-    {args => <Divider {...args} />}
-  </Story>
+  <Story of={DividerStories.Normal} />
 </Canvas>
 
 ## Props

package/src/components/Divider/Divider.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from "@storybook/react";
+import { Divider, DividerProps } from "./Divider";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Components/Divider",
+  component: Divider,
+  argTypes: excludeControls("className"),
+};
+
+export const Normal: Meta<typeof Divider> = {
+  render: (args: DividerProps) => <Divider {...args} />,
+};

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

@@ -1,14 +1,11 @@
 import { forwardRef } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { DropdownMenu } from ".";
 import { Icon } from "../Icon";
 import { excludeControls } from "../../utils/excludeControls";
+import * as DropdownMenuStories from "./DropdownMenu.stories";
 
-<Meta
-  title="Components/DropdownMenu"
-  component={DropdownMenu}
-  argTypes={excludeControls("className", "elementType", "trigger", "style")}
-/>
+<Meta of={DropdownMenuStories} />
 
 # DropdownMenu
 
@@ -38,17 +35,7 @@ behaviours are handled correctly.
 ## Normal
 
 <Canvas>
-  <Story name="Normal" args={{ label: "Menu" }}>
-    {args => (
-      <div style={{ height: 300 }}>
-        <DropdownMenu {...args}>
-          <DropdownMenu.Item>Home</DropdownMenu.Item>
-          <DropdownMenu.Item>My details</DropdownMenu.Item>
-          <DropdownMenu.Item>Sign out</DropdownMenu.Item>
-        </DropdownMenu>
-      </div>
-    )}
-  </Story>
+  <Story of={DropdownMenuStories.Normal} />
 </Canvas>
 
 ## With Customisations
@@ -107,28 +94,7 @@ export const CustomTrigger = forwardRef((props, ref) => {
 });
 
 <Canvas>
-  <Story
-    name="With Custom Trigger"
-    args={{
-      trigger: <CustomTrigger />,
-      style: {
-        textAlign: "right",
-      },
-    }}
-    parameters={{ controls: { exclude: ["label"] } }}
-  >
-    {args => (
-      <div style={{ height: 300 }}>
-        <DropdownMenu {...args}>
-          <DropdownMenu.Item onClick={() => alert("Clicked Home")}>
-            Home
-          </DropdownMenu.Item>
-          <DropdownMenu.Item>My details</DropdownMenu.Item>
-          <DropdownMenu.Item>Sign out</DropdownMenu.Item>
-        </DropdownMenu>
-      </div>
-    )}
-  </Story>
+  <Story of={DropdownMenuStories.WithCustomTrigger} />
 </Canvas>
 
 ## Props