@simplybusiness/mobius 4.2.2 → 4.2.3

package/src/components/List/List.stories.tsx

@@ -1,10 +1,12 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { cross, tick } from "@simplybusiness/icons";
 import { Icon, Text } from "../index";
 import { List, ListItem, ListProps } from ".";
-import { excludeControls } from "../../utils/excludeControls";
+import { excludeControls } from "../../utils";
 
-export default {
+type StoryType = StoryObj<typeof List>;
+
+const meta: Meta<typeof List> = {
   title: "Components/List",
   component: List,
   argTypes: {
@@ -29,7 +31,7 @@ export default {
   },
 };
 
-export const Unordered: Meta<typeof List> = {
+export const Unordered: StoryType = {
   render: (args: ListProps) => (
     <List {...args}>
       <ListItem>Foo</ListItem>
@@ -44,7 +46,7 @@ export const Unordered: Meta<typeof List> = {
   },
 };
 
-export const Ordered: Meta<typeof List> = {
+export const Ordered: StoryType = {
   render: (args: ListProps) => (
     <List {...args}>
       <ListItem>Foo</ListItem>
@@ -59,7 +61,7 @@ export const Ordered: Meta<typeof List> = {
   },
 };
 
-export const StartingFromASpecificNumber: Meta<typeof List> = {
+export const StartingFromASpecificNumber: StoryType = {
   render: (args: ListProps) => (
     <List {...args}>
       <ListItem>Foo</ListItem>
@@ -79,7 +81,7 @@ export const StartingFromASpecificNumber: Meta<typeof List> = {
   },
 };
 
-export const Reversed: Meta<typeof List> = {
+export const Reversed: StoryType = {
   render: (args: ListProps) => (
     <List {...args}>
       <ListItem>Foo</ListItem>
@@ -99,7 +101,7 @@ export const Reversed: Meta<typeof List> = {
   },
 };
 
-export const WithCustomIcons: Meta<typeof List> = {
+export const WithCustomIcons: StoryType = {
   render: (args: ListProps) => (
     <List {...args}>
       <ListItem>
@@ -134,3 +136,5 @@ export const WithCustomIcons: Meta<typeof List> = {
     },
   },
 };
+
+export default meta;

package/src/components/LoadingIndicator/LoadingIndicator.mdx

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

package/src/components/LoadingIndicator/LoadingIndicator.stories.tsx

@@ -1,10 +1,12 @@
 import { home, loading, refreshArrow } from "@simplybusiness/icons";
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { LoadingIndicator, LoadingIndicatorProps } from "./LoadingIndicator";
 
 const iconOptions = { loading, refreshArrow, home };
 
-export default {
+type StoryType = StoryObj<typeof LoadingIndicator>;
+
+const meta: Meta<typeof LoadingIndicator> = {
   title: "Components/LoadingIndicator",
   component: LoadingIndicator,
   argTypes: {
@@ -17,41 +19,40 @@ export default {
       options: ["darkcyan", "deeppink", "royalblue", "tomato"],
       control: { type: "radio" },
     },
-    fontSize: {
-      options: ["72px", "48px", "24px"],
-      control: { type: "radio" },
-    },
   },
 };
 
-export const Normal: Meta<typeof LoadingIndicator> = {
+export const Normal: StoryType = {
   render: (args: LoadingIndicatorProps) => <LoadingIndicator {...args} />,
   args: {
     icon: loading,
-    fontSize: "24px",
+    size: "md",
   },
 };
 
-export const Large: Meta<typeof LoadingIndicator> = {
+export const Large: StoryType = {
   render: (args: LoadingIndicatorProps) => <LoadingIndicator {...args} />,
   args: {
     icon: loading,
-    fontSize: "72px",
+    size: "lg",
   },
 };
 
-export const WithCustomColour: Meta<typeof LoadingIndicator> = {
+export const WithCustomColour: StoryType = {
   render: (args: LoadingIndicatorProps) => <LoadingIndicator {...args} />,
   args: {
     icon: loading,
-    fontSize: "24px",
+    size: "md",
+    color: "tomato",
   },
 };
 
-export const WithCustomIcon: Meta<typeof LoadingIndicator> = {
+export const WithCustomIcon: StoryType = {
   render: (args: LoadingIndicatorProps) => <LoadingIndicator {...args} />,
   args: {
     icon: refreshArrow,
-    fontSize: "24px",
+    size: "md",
   },
 };
+
+export default meta;

package/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -1,15 +1,12 @@
 import { Ref, forwardRef, RefAttributes } from "react";
 import classNames from "classnames/dedupe";
-import { loading, type IconDefinition } from "@simplybusiness/icons";
+import { loading } from "@simplybusiness/icons";
 import { ForwardedRefComponent } from "../../types/components";
-import { Icon } from "../Icon";
+import { Icon, IconProps } from "../Icon";
 
-export interface LoadingIndicatorProps extends RefAttributes<SVGSVGElement> {
-  className?: string;
-  icon?: IconDefinition;
-  fontSize?: string;
-  color?: string;
-}
+export interface LoadingIndicatorProps
+  extends RefAttributes<SVGSVGElement>,
+    IconProps {}
 
 export type LoadingIndicatorRef = Ref<SVGSVGElement>;
 

package/src/components/Logo/Logo.stories.tsx

@@ -1,8 +1,10 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Logo, LogoProps } from "..";
-import { excludeControls } from "../../utils/excludeControls";
+import { excludeControls } from "../../utils";
 
-export default {
+type StoryType = StoryObj<typeof Logo>;
+
+const meta: Meta<typeof Logo> = {
   title: "Components/Logo",
   component: Logo,
   argTypes: {
@@ -12,11 +14,13 @@ export default {
     ...excludeControls("height"),
   },
   args: {
-    width: 144,
+    width: "144",
   },
 };
 
-export const Normal: Meta<typeof Logo> = {
+export const Normal: StoryType = {
   render: (args: LogoProps) => <Logo {...args} />,
   args: {},
 };
+
+export default meta;

package/src/components/Modal/Modal.stories.tsx

@@ -1,10 +1,39 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { Modal, ModalProps } from ".";
-import { excludeControls } from "../../utils/excludeControls";
+import { excludeControls } from "../../utils";
 import { Button } from "../Button";
 import { Text } from "../Text";
 
+type StoryType = StoryObj<typeof Modal>;
+
+const meta: Meta<typeof Modal> = {
+  title: "Components/Modal",
+  component: Modal,
+  argTypes: {
+    animation: {
+      options: ["slideUp", "fade", "neither"],
+      control: { type: "radio" },
+      mapping: {
+        slideUp: "slideUp",
+        fade: "fade",
+        neither: undefined,
+      },
+    },
+    ...excludeControls(
+      "appElement",
+      "parentSelector",
+      "isOpen",
+      "preventCloseOnEsc",
+      "shouldFocusAfterRender",
+      "size",
+    ),
+  },
+  args: {
+    isFullScreen: false,
+  },
+};
+
 const Demo = (props: ModalProps) => {
   const [open, setOpen] = useState(false);
   return (
@@ -213,34 +242,7 @@ const WithNestedDemo = ({ animation, closeLabel }: ModalProps) => {
   );
 };
 
-export default {
-  title: "Components/Modal",
-  component: Modal,
-  argTypes: {
-    animation: {
-      options: ["slideUp", "fade", "neither"],
-      control: { type: "radio" },
-      mapping: {
-        slideUp: "slideUp",
-        fade: "fade",
-        neither: undefined,
-      },
-    },
-    ...excludeControls(
-      "appElement",
-      "parentSelector",
-      "isOpen",
-      "preventCloseOnEsc",
-      "shouldFocusAfterRender",
-      "size",
-    ),
-  },
-  args: {
-    isFullScreen: false,
-  },
-};
-
-export const Normal: Meta<typeof Demo> = {
+export const Normal: StoryType = {
   render: (args: ModalProps) => <Demo {...args} />,
   args: {
     isOpen: false,
@@ -248,7 +250,7 @@ export const Normal: Meta<typeof Demo> = {
   },
 };
 
-export const FullScreen: Meta<typeof FullScreenDemo> = {
+export const FullScreen: StoryType = {
   render: (args: ModalProps) => <FullScreenDemo {...args} />,
   args: {
     isOpen: false,
@@ -257,7 +259,7 @@ export const FullScreen: Meta<typeof FullScreenDemo> = {
   },
 };
 
-export const WithAnimation: Meta<typeof WithAnimationDemo> = {
+export const WithAnimation: StoryType = {
   render: (args: ModalProps) => <WithAnimationDemo {...args} />,
   args: {
     isOpen: false,
@@ -266,7 +268,7 @@ export const WithAnimation: Meta<typeof WithAnimationDemo> = {
   },
 };
 
-export const WithLongContent: Meta<typeof WithLongContentDemo> = {
+export const WithLongContent: StoryType = {
   render: (args: ModalProps) => <WithLongContentDemo {...args} />,
   args: {
     isOpen: false,
@@ -274,10 +276,12 @@ export const WithLongContent: Meta<typeof WithLongContentDemo> = {
   },
 };
 
-export const WithNested: Meta<typeof WithNestedDemo> = {
+export const WithNested: StoryType = {
   render: (args: ModalProps) => <WithNestedDemo {...args} />,
   args: {
     isOpen: false,
     closeLabel: "Close",
   },
 };
+
+export default meta;

package/src/components/NumberField/NumberField.stories.tsx

@@ -1,8 +1,10 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { NumberField, NumberFieldProps } from "./NumberField";
-import { excludeControls } from "../../utils/excludeControls";
+import { StoryContainer, excludeControls } from "../../utils";
 
-export default {
+type StoryType = StoryObj<typeof NumberField>;
+
+const meta: Meta<typeof NumberField> = {
   title: "Forms/NumberField",
   component: NumberField,
   argTypes: {
@@ -40,9 +42,16 @@ export default {
     isDisabled: false,
     isReadOnly: false,
   },
+  decorators: [
+    Story => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
 };
 
-export const Normal: Meta<typeof NumberField> = {
+export const Normal: StoryType = {
   render: (args: NumberFieldProps) => <NumberField {...args} />,
   args: {
     label: "Number field",
@@ -53,7 +62,7 @@ export const Normal: Meta<typeof NumberField> = {
   },
 };
 
-export const LimitedRange: Meta<typeof NumberField> = {
+export const LimitedRange: StoryType = {
   render: (args: NumberFieldProps) => <NumberField {...args} />,
   args: {
     label: "Number field",
@@ -66,7 +75,7 @@ export const LimitedRange: Meta<typeof NumberField> = {
   },
 };
 
-export const Valid: Meta<typeof NumberField> = {
+export const Valid: StoryType = {
   render: (args: NumberFieldProps) => <NumberField {...args} />,
   args: {
     label: "Number field",
@@ -78,7 +87,7 @@ export const Valid: Meta<typeof NumberField> = {
   },
 };
 
-export const Invalid: Meta<typeof NumberField> = {
+export const Invalid: StoryType = {
   render: (args: NumberFieldProps) => <NumberField {...args} />,
   args: {
     label: "Number field",
@@ -90,7 +99,7 @@ export const Invalid: Meta<typeof NumberField> = {
   },
 };
 
-export const Disabled: Meta<typeof NumberField> = {
+export const Disabled: StoryType = {
   render: (args: NumberFieldProps) => <NumberField {...args} />,
   args: {
     label: "Number field",
@@ -101,3 +110,5 @@ export const Disabled: Meta<typeof NumberField> = {
     isRequired: false,
   },
 };
+
+export default meta;

package/src/components/PasswordField/PasswordField.mdx

@@ -1,8 +1,5 @@
-import { useState } from "react";
 import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { PasswordField } from "./PasswordField";
-import { Label, Segment, SegmentGroup } from "..";
-import { excludeControls } from "../../utils/excludeControls";
 import * as PasswordFieldStories from "./PasswordField.stories";
 
 <Meta of={PasswordFieldStories} />

package/src/components/PasswordField/PasswordField.stories.tsx

@@ -1,8 +1,10 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { PasswordField, PasswordFieldProps } from "./PasswordField";
-import { excludeControls } from "../../utils/excludeControls";
+import { StoryContainer, excludeControls } from "../../utils";
 
-export default {
+type StoryType = StoryObj<typeof PasswordField>;
+
+const meta: Meta<typeof PasswordField> = {
   title: "Forms/PasswordField",
   component: PasswordField,
   argTypes: {
@@ -24,9 +26,16 @@ export default {
   args: {
     isReadOnly: false,
   },
+  decorators: [
+    Story => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
 };
 
-export const Normal: Meta<typeof PasswordField> = {
+export const Normal: StoryType = {
   render: (args: PasswordFieldProps) => <PasswordField {...args} />,
   args: {
     label: "Password",
@@ -37,3 +46,5 @@ export const Normal: Meta<typeof PasswordField> = {
     isRequired: false,
   },
 };
+
+export default meta;

package/src/components/Popover/Popover.stories.tsx

@@ -1,9 +1,11 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Ref, forwardRef } from "react";
 import { Button, Flex, Popover, PopoverProps } from "..";
-import { excludeControls } from "../../utils/excludeControls";
+import { excludeControls } from "../../utils";
 
-export default {
+type StoryType = StoryObj<typeof Popover>;
+
+const meta: Meta<typeof Popover> = {
   title: "Components/Popover",
   component: Popover,
   argTypes: {
@@ -17,7 +19,7 @@ export default {
       return <Story />;
     },
   ],
-} satisfies Meta<typeof Popover>;
+};
 
 type QuestionIconProps = {};
 
@@ -57,7 +59,7 @@ const QuestionIcon = forwardRef(
   ),
 );
 
-export const Normal: Meta<typeof Popover> = {
+export const Normal: StoryType = {
   render: (args: PopoverProps) => <Popover {...args} />,
   args: {
     children: <>No way! Now I know everything I need to 🚀.</>,
@@ -65,7 +67,7 @@ export const Normal: Meta<typeof Popover> = {
   },
 };
 
-export const CustomTrigger: Meta<typeof Popover> = {
+export const CustomTrigger: StoryType = {
   render: () => (
     <div className="popover-example">
       <Popover
@@ -85,3 +87,5 @@ export const CustomTrigger: Meta<typeof Popover> = {
     </div>
   ),
 };
+
+export default meta;

package/src/components/Progress/Progress.mdx

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

package/src/components/Progress/Progress.stories.tsx

@@ -1,14 +1,10 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Progress, ProgressProps } from "./Progress";
-import { excludeControls } from "../../utils/excludeControls";
+import { StoryContainer, excludeControls } from "../../utils";
 
-const customValueFormatter = (
-  value: number,
-  minValue: number,
-  maxValue: number,
-) => `Step ${value} of ${maxValue}`;
+type StoryType = StoryObj<typeof Progress>;
 
-export default {
+const meta: Meta<typeof Progress> = {
   title: "Components/Progress",
   component: Progress,
   argTypes: {
@@ -47,9 +43,22 @@ export default {
     },
     ...excludeControls("valueFormatter"),
   },
+  decorators: [
+    Story => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
 };
 
-export const Primary: Meta<typeof Progress> = {
+const customValueFormatter = (
+  value: number,
+  minValue: number,
+  maxValue: number,
+) => `Step ${value} of ${maxValue}`;
+
+export const Primary: StoryType = {
   render: (args: ProgressProps) => <Progress {...args} />,
   args: {
     value: 2,
@@ -61,7 +70,7 @@ export const Primary: Meta<typeof Progress> = {
   },
 };
 
-export const Secondary: Meta<typeof Progress> = {
+export const Secondary: StoryType = {
   render: (args: ProgressProps) => <Progress {...args} />,
   args: {
     value: 2,
@@ -73,7 +82,7 @@ export const Secondary: Meta<typeof Progress> = {
   },
 };
 
-export const NoVisibleLabel: Meta<typeof Progress> = {
+export const NoVisibleLabel: StoryType = {
   render: (args: ProgressProps) => <Progress {...args} />,
   args: {
     value: 1,
@@ -91,7 +100,7 @@ export const NoVisibleLabel: Meta<typeof Progress> = {
   },
 };
 
-export const CustomValueFormat: Meta<typeof Progress> = {
+export const CustomValueFormat: StoryType = {
   render: (args: ProgressProps) => <Progress {...args} />,
   args: {
     value: 1,
@@ -103,3 +112,5 @@ export const CustomValueFormat: Meta<typeof Progress> = {
     valueFormatter: customValueFormatter,
   },
 };
+
+export default meta;

package/src/components/Radio/Radio.mdx

@@ -1,11 +1,6 @@
-import { Fragment, useState } from "react";
 import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
 import { Radio } from "./Radio";
 import { RadioGroup } from "./RadioGroup";
-import { Flex } from "../Flex";
-import { Divider } from "../Divider";
-import { Box } from "../Box";
-import { excludeControls } from "../../utils/excludeControls";
 import * as RadioStories from "./Radio.stories";
 
 <Meta of={RadioStories} />

package/src/components/Radio/Radio.stories.tsx

@@ -1,13 +1,15 @@
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Radio } from "./Radio";
 import { RadioGroup, RadioGroupProps } from "./RadioGroup";
 import { Flex } from "../Flex";
 import { Divider } from "../Divider";
-import { excludeControls } from "../../utils/excludeControls";
+import { StoryContainer, excludeControls } from "../../utils";
 
-export default {
+type StoryType = StoryObj<typeof RadioGroup>;
+
+const meta: Meta<typeof RadioGroup> = {
   title: "Forms/Radio",
-  component: Radio,
+  component: RadioGroup,
   argTypes: {
     validationState: {
       options: ["valid", "invalid", "neither"],
@@ -34,9 +36,16 @@ export default {
       "value",
     ),
   },
+  decorators: [
+    Story => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
 };
 
-export const Normal: Meta<typeof RadioGroup> = {
+export const Normal: StoryType = {
   render: (args: RadioGroupProps) => (
     <RadioGroup {...args}>
       <Radio value="red" label="Red" />
@@ -53,7 +62,7 @@ export const Normal: Meta<typeof RadioGroup> = {
   },
 };
 
-export const Disabled: Meta<typeof RadioGroup> = {
+export const Disabled: StoryType = {
   render: (args: RadioGroupProps) => (
     <RadioGroup {...args}>
       <Radio value="red" label="Red" isDisabled />
@@ -69,7 +78,7 @@ export const Disabled: Meta<typeof RadioGroup> = {
   },
 };
 
-export const DisabledIndividualRadios: Meta<typeof RadioGroup> = {
+export const DisabledIndividualRadios: StoryType = {
   render: (args: RadioGroupProps) => (
     <RadioGroup {...args}>
       <Radio value="red" label="Red" isDisabled />
@@ -85,7 +94,7 @@ export const DisabledIndividualRadios: Meta<typeof RadioGroup> = {
   },
 };
 
-export const Valid: Meta<typeof RadioGroup> = {
+export const Valid: StoryType = {
   render: (args: RadioGroupProps) => (
     <RadioGroup {...args}>
       <Radio value="red" label="Red" />
@@ -102,7 +111,7 @@ export const Valid: Meta<typeof RadioGroup> = {
   },
 };
 
-export const Invalid: Meta<typeof RadioGroup> = {
+export const Invalid: StoryType = {
   render: (args: RadioGroupProps) => (
     <RadioGroup {...args}>
       <Radio value="red" label="Red" />
@@ -119,7 +128,7 @@ export const Invalid: Meta<typeof RadioGroup> = {
   },
 };
 
-export const ComplexLabel: Meta<typeof RadioGroup> = {
+export const ComplexLabel: StoryType = {
   render: (args: RadioGroupProps) => (
     <RadioGroup {...args}>
       <Radio value="annual" label="Pay annually">
@@ -183,7 +192,7 @@ export const ComplexLabel: Meta<typeof RadioGroup> = {
   },
 };
 
-export const HorizontalLayout: Meta<typeof RadioGroup> = {
+export const HorizontalLayout: StoryType = {
   render: (args: RadioGroupProps) => (
     <RadioGroup {...args}>
       <Radio value="red" label="Red" />
@@ -198,3 +207,5 @@ export const HorizontalLayout: Meta<typeof RadioGroup> = {
     orientation: "horizontal",
   },
 };
+
+export default meta;

package/src/components/Radio/RadioButton.mdx

@@ -1,11 +1,6 @@
-import { Fragment, useState } from "react";
 import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
 import { RadioButton } from "./RadioButton";
 import { RadioGroup } from "./RadioGroup";
-import { Flex } from "../Flex";
-import { Box } from "../Box";
-import { Icon } from "../Icon";
-import { excludeControls } from "../../utils/excludeControls";
 import * as RadioButtonStories from "./RadioButton.stories";
 
 <Meta of={RadioButtonStories} />