@simplybusiness/mobius 4.2.2 → 4.2.3

package/src/components/Accordion/Accordion.mdx

@@ -1,5 +1,5 @@
 import { Meta, ArgTypes, Story } from "@storybook/blocks";
-import { Accordion, Segment, SegmentGroup } from "..";
+import { Accordion } from "..";
 import * as AccordionStories from "./Accordion.stories";
 
 <Meta of={AccordionStories} />
@@ -63,15 +63,15 @@ import { Accordion } from "@simplybusiness/mobius";
 </Accordion>
 ```
 
-### Top Header
+### Bottom Header
 
-<Story of={AccordionStories.TopHeader} />
+<Story of={AccordionStories.BottomHeader} />
 
 {/* prettier-ignore */}
 ```jsx
 import { Accordion } from "@simplybusiness/mobius";
 
-<Accordion showText="See more" hideText="See less" headerPosition="top">
+<Accordion showText="See more" hideText="See less" headerPosition="bottom">
   <p>
     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus
     deleniti architecto

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,14 +1,23 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Accordion, AccordionProps, Button, Segment, SegmentGroup } from "..";
-import { excludeControls } from "../../utils/excludeControls";
+import { excludeControls } from "../../utils";
 
-export default {
+type StoryType = StoryObj<typeof Accordion>;
+
+const meta: Meta<typeof Accordion> = {
   title: "Components/Accordion",
   component: Accordion,
   argTypes: excludeControls("headerChildren"),
+  decorators: [
+    Story => (
+      <div style={{ minHeight: 150 }}>
+        <Story />
+      </div>
+    ),
+  ],
 };
 
-export const Normal: Meta<typeof Accordion> = {
+export const Normal: StoryType = {
   render: (args: AccordionProps) => (
     <Accordion {...args}>
       <p>
@@ -29,7 +38,7 @@ export const Normal: Meta<typeof Accordion> = {
   },
 };
 
-export const StartExpanded: Meta<typeof Accordion> = {
+export const StartExpanded: StoryType = {
   render: (args: AccordionProps) => (
     <Accordion {...args}>
       <p>
@@ -46,7 +55,7 @@ export const StartExpanded: Meta<typeof Accordion> = {
   },
 };
 
-export const BottomHeader: Meta<typeof Accordion> = {
+export const BottomHeader: StoryType = {
   render: (args: AccordionProps) => (
     <Accordion {...args}>
       <p>
@@ -63,7 +72,7 @@ export const BottomHeader: Meta<typeof Accordion> = {
   },
 };
 
-export const WithChildren: Meta<typeof Accordion> = {
+export const WithChildren: StoryType = {
   render: (args: AccordionProps) => (
     <Accordion {...args}>
       <p>
@@ -81,7 +90,7 @@ export const WithChildren: Meta<typeof Accordion> = {
   },
 };
 
-export const ComplexContent: Meta<typeof Accordion> = {
+export const ComplexContent: StoryType = {
   render: (args: AccordionProps) => (
     <Accordion {...args}>
       <SegmentGroup>
@@ -103,3 +112,5 @@ export const ComplexContent: Meta<typeof Accordion> = {
     startOpen: false,
   },
 };
+
+export default meta;

package/src/components/Alert/Alert.mdx

@@ -1,6 +1,5 @@
 import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
-import { Alert, AlertProps } from "./Alert";
-import { excludeControls } from "../../utils/excludeControls";
+import { Alert } from "./Alert";
 import * as AlertStories from "./Alert.stories";
 
 <Meta of={AlertStories} />

package/src/components/Alert/Alert.stories.tsx

@@ -1,7 +1,9 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Alert, AlertProps } from "./Alert";
 
-export default {
+type StoryType = StoryObj<typeof Alert>;
+
+const meta: Meta<typeof Alert> = {
   title: "Components/Alert",
   component: Alert,
   argTypes: {
@@ -12,7 +14,7 @@ export default {
   },
 };
 
-export const Normal: Meta<typeof Alert> = {
+export const Normal: StoryType = {
   render: (args: AlertProps) => (
     <Alert {...args}>
       Today is{" "}
@@ -28,7 +30,7 @@ export const Normal: Meta<typeof Alert> = {
   },
 };
 
-export const WithHeader: Meta<typeof Alert> = {
+export const WithHeader: StoryType = {
   render: (args: AlertProps) => (
     <Alert {...args}>
       Today is{" "}
@@ -43,3 +45,5 @@ export const WithHeader: Meta<typeof Alert> = {
     header: "Information",
   },
 };
+
+export default meta;

package/src/components/Box/Box.mdx

@@ -1,7 +1,5 @@
 import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
-import { Box, BoxProps } from "./Box";
-import { Button } from "../Button";
-import { excludeControls } from "../../utils/excludeControls";
+import { Box } from "./Box";
 import * as BoxStories from "./Box.stories";
 
 <Meta of={BoxStories} />

package/src/components/Box/Box.stories.tsx

@@ -1,15 +1,17 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Box, BoxProps } from "./Box";
 import { Button } from "../Button";
-import { excludeControls } from "../../utils/excludeControls";
+import { excludeControls } from "../../utils";
 
-export default {
+type StoryType = StoryObj<typeof Box>;
+
+const meta: Meta<typeof Box> = {
   title: "Layout/Box",
   component: Box,
   argTypes: excludeControls("style"),
 };
 
-export const Normal: Meta<typeof Box> = {
+export const Normal: StoryType = {
   render: (args: BoxProps) => (
     <Box {...args}>
       <Button>Click me</Button>
@@ -17,10 +19,12 @@ export const Normal: Meta<typeof Box> = {
   ),
 };
 
-export const CustomElement = {
+export const CustomElement: StoryType = {
   render: (args: BoxProps) => <Box {...args}>This text is inside a span</Box>,
   name: "Custom Element",
   args: {
     elementType: "span",
   },
 };
+
+export default meta;

package/src/components/Breadcrumbs/Breadcrumbs.mdx

@@ -1,9 +1,5 @@
 import { Meta, ArgTypes, Story } from "@storybook/blocks";
 import { Breadcrumbs } from "./Breadcrumbs";
-import { BreadcrumbItem } from "./BreadcrumbItem";
-import { Link } from "../Link";
-import { Flex } from "../Flex";
-import { excludeControls } from "../../utils/excludeControls";
 import * as BreadcrumbsStories from "./Breadcrumbs.stories";
 
 <Meta of={BreadcrumbsStories} />

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,14 +1,16 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Breadcrumbs, BreadcrumbsProps } from "./Breadcrumbs";
 import { BreadcrumbItem } from "./BreadcrumbItem";
 import { Link } from "../Link";
 
-export default {
+type StoryType = StoryObj<typeof Breadcrumbs>;
+
+const meta: Meta<typeof Breadcrumbs> = {
   title: "Components/Breadcrumbs",
   component: Breadcrumbs,
 };
 
-export const Normal: Meta<typeof Breadcrumbs> = {
+export const Normal: StoryType = {
   render: (args: BreadcrumbsProps) => (
     <Breadcrumbs {...args}>
       <BreadcrumbItem key="business-insurance">
@@ -24,7 +26,7 @@ export const Normal: Meta<typeof Breadcrumbs> = {
   ),
 };
 
-export const WithLogo: Meta<typeof Breadcrumbs> = {
+export const WithLogo: StoryType = {
   render: (args: BreadcrumbsProps) => (
     <Breadcrumbs {...args}>
       <BreadcrumbItem key="root">
@@ -48,3 +50,5 @@ export const WithLogo: Meta<typeof Breadcrumbs> = {
     </Breadcrumbs>
   ),
 };
+
+export default meta;

package/src/components/Button/Button.mdx

@@ -1,7 +1,5 @@
-import { useState } from "react";
 import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
 import { Button } from "./Button";
-import { excludeControls } from "../../utils/excludeControls";
 import * as ButtonStories from "./Button.stories";
 
 <Meta of={ButtonStories} />

package/src/components/Button/Button.stories.tsx

@@ -1,11 +1,13 @@
 import { useState } from "react";
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { leftArrow, menu } from "@simplybusiness/icons";
 import { Button, ButtonProps } from "./Button";
 import { Icon } from "../Icon";
-import { excludeControls } from "../../utils/excludeControls";
+import { excludeControls } from "../../utils";
 
-export default {
+type StoryType = StoryObj<typeof Button>;
+
+const meta: Meta<typeof Button> = {
   title: "Components/Button",
   component: Button,
   excludeStories: ["Counter", "PressButton"],
@@ -50,7 +52,7 @@ export default {
   },
 };
 
-export const Normal: Meta<typeof Button> = {
+export const Normal: StoryType = {
   render: (args: ButtonProps) => <Button {...args} />,
   args: {
     children: "Confirm",
@@ -63,7 +65,7 @@ export const Normal: Meta<typeof Button> = {
   },
 };
 
-export const Secondary: Meta<typeof Button> = {
+export const Secondary: StoryType = {
   render: (args: ButtonProps) => <Button {...args} />,
   args: {
     variant: "secondary",
@@ -76,7 +78,7 @@ export const Secondary: Meta<typeof Button> = {
   },
 };
 
-export const Ghost: Meta<typeof Button> = {
+export const Ghost: StoryType = {
   render: (args: ButtonProps) => <Button {...args} />,
   args: {
     variant: "ghost",
@@ -89,7 +91,7 @@ export const Ghost: Meta<typeof Button> = {
   },
 };
 
-export const Basic: Meta<typeof Button> = {
+export const Basic: StoryType = {
   render: (args: ButtonProps) => <Button {...args} />,
   args: {
     variant: "basic",
@@ -102,7 +104,7 @@ export const Basic: Meta<typeof Button> = {
   },
 };
 
-export const Large: Meta<typeof Button> = {
+export const Large: StoryType = {
   render: (args: ButtonProps) => <Button {...args} />,
   args: {
     children: "Large Button",
@@ -115,7 +117,7 @@ export const Large: Meta<typeof Button> = {
   },
 };
 
-export const Link: Meta<typeof Button> = {
+export const Link: StoryType = {
   render: (args: ButtonProps) => <Button {...args} />,
   args: {
     children: "Link Button",
@@ -131,7 +133,7 @@ export const Link: Meta<typeof Button> = {
   },
 };
 
-export const Loading: Meta<typeof Button> = {
+export const Loading: StoryType = {
   render: (args: ButtonProps) => <Button {...args} />,
   args: {
     children: "Loading",
@@ -144,7 +146,7 @@ export const Loading: Meta<typeof Button> = {
   },
 };
 
-export const Success: Meta<typeof Button> = {
+export const Success: StoryType = {
   render: (args: ButtonProps) => <Button {...args} />,
   args: {
     children: "Success",
@@ -157,7 +159,7 @@ export const Success: Meta<typeof Button> = {
   },
 };
 
-export const Disabled: Meta<typeof Button> = {
+export const Disabled: StoryType = {
   render: (args: ButtonProps) => <Button {...args} />,
   args: {
     children: "Disabled",
@@ -170,7 +172,7 @@ export const Disabled: Meta<typeof Button> = {
   },
 };
 
-export const WithIconOnTheLeft: Meta<typeof Button> = {
+export const WithIconOnTheLeft: StoryType = {
   render: (args: ButtonProps) => {
     // eslint-disable-next-line global-require
     require("./Button.story.styles.css");
@@ -193,7 +195,7 @@ export const WithIconOnTheLeft: Meta<typeof Button> = {
   },
 };
 
-export const WithIconOnTheRight: Meta<typeof Button> = {
+export const WithIconOnTheRight: StoryType = {
   render: (args: ButtonProps) => {
     // eslint-disable-next-line global-require
     require("./Button.story.styles.css");
@@ -215,7 +217,7 @@ export const WithIconOnTheRight: Meta<typeof Button> = {
   },
 };
 
-export const Themed: Meta<typeof Button> = {
+export const Themed: StoryType = {
   render: (args: ButtonProps) => {
     // eslint-disable-next-line global-require
     require("./Button.story.styles.css");
@@ -257,3 +259,5 @@ export const PressButton = () => {
     </div>
   );
 };
+
+export default meta;

package/src/components/Checkbox/Checkbox.mdx

@@ -1,8 +1,5 @@
-import { useState } from "react";
 import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { Checkbox } from "./Checkbox";
-import { Box } from "../Box";
-import { excludeControls } from "../../utils/excludeControls";
 import * as CheckboxStories from "./Checkbox.stories";
 
 <Meta of={CheckboxStories} />

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,8 +1,10 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Checkbox, CheckboxProps } from ".";
-import { excludeControls } from "../../utils/excludeControls";
+import { StoryContainer, excludeControls } from "../../utils";
 
-export default {
+type StoryType = StoryObj<typeof Checkbox>;
+
+const meta: Meta<typeof Checkbox> = {
   title: "Forms/Checkbox",
   component: Checkbox,
   argTypes: {
@@ -28,9 +30,16 @@ export default {
       "groupDisabled",
     ),
   },
+  decorators: [
+    Story => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
 };
 
-export const Normal: Meta<typeof Checkbox> = {
+export const Normal: StoryType = {
   render: (args: CheckboxProps) => <Checkbox {...args} />,
   args: {
     label: "I agree",
@@ -42,7 +51,7 @@ export const Normal: Meta<typeof Checkbox> = {
   },
 };
 
-export const Disabled: Meta<typeof Checkbox> = {
+export const Disabled: StoryType = {
   render: (args: CheckboxProps) => <Checkbox {...args} />,
   args: {
     label: "I agree",
@@ -54,7 +63,7 @@ export const Disabled: Meta<typeof Checkbox> = {
   },
 };
 
-export const Valid: Meta<typeof Checkbox> = {
+export const Valid: StoryType = {
   render: (args: CheckboxProps) => <Checkbox {...args} />,
   args: {
     label: "I agree",
@@ -67,7 +76,7 @@ export const Valid: Meta<typeof Checkbox> = {
   },
 };
 
-export const Invalid: Meta<typeof Checkbox> = {
+export const Invalid: StoryType = {
   render: (args: CheckboxProps) => <Checkbox {...args} />,
   args: {
     label: "I agree",
@@ -80,7 +89,7 @@ export const Invalid: Meta<typeof Checkbox> = {
   },
 };
 
-export const LongLabel: Meta<typeof Checkbox> = {
+export const LongLabel: StoryType = {
   render: (args: CheckboxProps) => <Checkbox {...args} />,
   args: {
     label: (
@@ -104,3 +113,5 @@ export const LongLabel: Meta<typeof Checkbox> = {
     isRequired: false,
   },
 };
+
+export default meta;

package/src/components/Checkbox/CheckboxGroup.mdx

@@ -1,5 +1,5 @@
 import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
-import { CheckboxGroup, Checkbox } from ".";
+import { CheckboxGroup } from ".";
 import * as CheckboxGroupStories from "./CheckboxGroup.stories";
 
 <Meta of={CheckboxGroupStories} />

package/src/components/Checkbox/CheckboxGroup.stories.tsx

@@ -1,8 +1,10 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { CheckboxGroup, CheckboxGroupProps, Checkbox } from ".";
-import { excludeControls } from "../../utils/excludeControls";
+import { StoryContainer, excludeControls } from "../../utils";
 
-export default {
+type StoryType = StoryObj<typeof CheckboxGroup>;
+
+const meta: Meta<typeof CheckboxGroup> = {
   title: "Forms/CheckboxGroup",
   component: CheckboxGroup,
   argTypes: {
@@ -17,9 +19,16 @@ export default {
     },
     ...excludeControls("isRequired", "isReadOnly", "defaultValue", "value"),
   },
+  decorators: [
+    Story => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
 };
 
-export const Normal: Meta<typeof CheckboxGroup> = {
+export const Normal: StoryType = {
   render: (args: CheckboxGroupProps) => (
     <CheckboxGroup {...args}>
       <Checkbox label="Option 1" value="option1" />
@@ -37,7 +46,7 @@ export const Normal: Meta<typeof CheckboxGroup> = {
   },
 };
 
-export const Disabled: Meta<typeof CheckboxGroup> = {
+export const Disabled: StoryType = {
   render: (args: CheckboxGroupProps) => (
     <CheckboxGroup {...args}>
       <Checkbox label="Option 1" value="option1" />
@@ -54,7 +63,7 @@ export const Disabled: Meta<typeof CheckboxGroup> = {
   },
 };
 
-export const Valid: Meta<typeof CheckboxGroup> = {
+export const Valid: StoryType = {
   render: (args: CheckboxGroupProps) => (
     <CheckboxGroup {...args}>
       <Checkbox label="Option 1" value="option1" />
@@ -72,7 +81,7 @@ export const Valid: Meta<typeof CheckboxGroup> = {
   },
 };
 
-export const Invalid: Meta<typeof CheckboxGroup> = {
+export const Invalid: StoryType = {
   render: (args: CheckboxGroupProps) => (
     <CheckboxGroup {...args}>
       <Checkbox label="Option 1" value="option1" />
@@ -89,3 +98,5 @@ export const Invalid: Meta<typeof CheckboxGroup> = {
     isRequired: false,
   },
 };
+
+export default meta;

package/src/components/Container/Container.mdx

@@ -1,6 +1,5 @@
 import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { Container } from "./Container";
-import { excludeControls } from "../../utils/excludeControls";
 import * as ContainerStories from "./Container.stories";
 
 <Meta of={ContainerStories} />

package/src/components/Container/Container.stories.tsx

@@ -1,12 +1,14 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Container, ContainerProps } from "./Container";
 
-export default {
+type StoryType = StoryObj<typeof Container>;
+
+const meta: Meta<typeof Container> = {
   title: "Layout/Container",
   component: Container,
 };
 
-export const Normal: Meta<typeof Container> = {
+export const Normal: StoryType = {
   render: (args: ContainerProps) => (
     <Container {...args}>
       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
@@ -16,3 +18,5 @@ export const Normal: Meta<typeof Container> = {
     </Container>
   ),
 };
+
+export default meta;

package/src/components/Divider/Divider.mdx

@@ -1,7 +1,5 @@
 import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { Divider } from "./Divider";
-import { Text, Flex } from "..";
-import { excludeControls } from "../../utils/excludeControls";
 import * as DividerStories from "./Divider.stories";
 
 <Meta of={DividerStories} />

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

@@ -1,11 +1,23 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Divider, DividerProps } from "./Divider";
+import { StoryContainer } from "../../utils";
 
-export default {
+type StoryType = StoryObj<typeof Divider>;
+
+const meta: Meta<typeof Divider> = {
   title: "Components/Divider",
   component: Divider,
+  decorators: [
+    Story => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
 };
 
-export const Normal: Meta<typeof Divider> = {
+export const Normal: StoryType = {
   render: (args: DividerProps) => <Divider {...args} />,
 };
+
+export default meta;

package/src/components/Drawer/Drawer.stories.tsx

@@ -1,10 +1,24 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { Drawer, DrawerProps } from ".";
-import { excludeControls } from "../../utils/excludeControls";
+import { excludeControls } from "../../utils";
 import { Button } from "../Button";
 import { Text } from "../Text";
 
+type StoryType = StoryObj<typeof Drawer>;
+
+const meta: Meta<typeof Drawer> = {
+  title: "Components/Drawer",
+  component: Drawer,
+  argTypes: {
+    direction: {
+      options: ["top", "bottom", "left", "right"],
+      control: { type: "radio" },
+    },
+    ...excludeControls("isOpen"),
+  },
+};
+
 const Demo = ({ direction, closeLabel }: DrawerProps) => {
   const [open, setOpen] = useState(false);
   return (
@@ -133,19 +147,7 @@ const WithLongContentDemo = (props: DrawerProps) => {
   );
 };
 
-export default {
-  title: "Components/Drawer",
-  component: Drawer,
-  argTypes: {
-    direction: {
-      options: ["top", "bottom", "left", "right"],
-      control: { type: "radio" },
-    },
-    ...excludeControls("isOpen"),
-  },
-};
-
-export const Normal: Meta<typeof Demo> = {
+export const Normal: StoryType = {
   render: (args: DrawerProps) => <Demo {...args} />,
   args: {
     isOpen: false,
@@ -154,7 +156,7 @@ export const Normal: Meta<typeof Demo> = {
   },
 };
 
-export const WithLogoHeader: Meta<typeof LogoHeader> = {
+export const WithLogoHeader: StoryType = {
   render: (args: DrawerProps) => <LogoHeader {...args} />,
   args: {
     isOpen: false,
@@ -163,10 +165,12 @@ export const WithLogoHeader: Meta<typeof LogoHeader> = {
   },
 };
 
-export const WithLongContent: Meta<typeof WithLongContentDemo> = {
+export const WithLongContent: StoryType = {
   render: (args: DrawerProps) => <WithLongContentDemo {...args} />,
   args: {
     isOpen: false,
     direction: "right",
   },
 };
+
+export default meta;

package/src/components/DropdownMenu/DropdownMenu.mdx

@@ -2,7 +2,6 @@ import { forwardRef } from "react";
 import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { DropdownMenu } from ".";
 import { Icon } from "../Icon";
-import { excludeControls } from "../../utils/excludeControls";
 import * as DropdownMenuStories from "./DropdownMenu.stories";
 
 <Meta of={DropdownMenuStories} />