@simplybusiness/mobius 3.8.0 → 3.9.0

package/src/components/Radio/{RadioButton.story.mdx → RadioButton.mdx}

@@ -1,23 +1,14 @@
 import { Fragment, useState } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } 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
-  title="Forms/RadioButton"
-  component={RadioButton}
-  argTypes={{
-    orientation: {
-      control: "radio",
-      options: ["horizontal", "vertical"],
-    },
-    ...excludeControls("className", "children"),
-  }}
-/>
+<Meta of={RadioButtonStories} />
 
 # RadioButton
 
@@ -48,22 +39,7 @@ For example, `<RadioGroup defaultValue="blue">`
 This will allow user to change the value. Alternatively, see _Controlled Value_ example.
 
 <Canvas>
-  <Story
-    name="Normal"
-    args={{
-      label: "Color",
-      orientation: "horizontal",
-      isDisabled: false,
-      defaultValue: "blue",
-    }}
-  >
-    {args => (
-      <RadioGroup {...args}>
-        <RadioButton value="red">Red</RadioButton>
-        <RadioButton value="blue">Blue</RadioButton>
-      </RadioGroup>
-    )}
-  </Story>
+  <Story of={RadioButtonStories.Normal} />
 </Canvas>
 
 ### Controlled Value
@@ -73,132 +49,37 @@ You may want a radio button to appear selected based on some conditional logic i
 You can use `value` prop which expects a string. To make `Blue` appear selected use `<RadioGroup value="blue">`
 
 <Canvas>
-  <Story
-    name="Controlled Value"
-    args={{
-      label: "Color",
-      orientation: "horizontal",
-      isDisabled: false,
-      value: "blue",
-    }}
-  >
-    {args => (
-      <RadioGroup {...args}>
-        <RadioButton value="red">Red</RadioButton>
-        <RadioButton value="blue">Blue</RadioButton>
-      </RadioGroup>
-    )}
-  </Story>
+  <Story of={RadioButtonStories.ControlledValue} />
 </Canvas>
 
 ### Label Prop
 
 <Canvas>
-  <Story
-    name="Label Prop"
-    args={{
-      label: "Color",
-      orientation: "horizontal",
-      isDisabled: false,
-    }}
-  >
-    {args => (
-      <RadioGroup {...args}>
-        <RadioButton value="red" label="Red" />
-        <RadioButton value="blue" label="Blue" />
-      </RadioGroup>
-    )}
-  </Story>
+  <Story of={RadioButtonStories.LabelProp} />
 </Canvas>
 
 ### Selected
 
 <Canvas>
-  <Story
-    name="Selected"
-    args={{
-      label: "Color",
-      defaultValue: "red",
-      orientation: "horizontal",
-      isDisabled: false,
-    }}
-    argTypes={{
-      value: {
-        control: "radio",
-        options: ["red", "blue"],
-      },
-    }}
-  >
-    {args => (
-      <RadioGroup {...args}>
-        <RadioButton value="red" label="Red" />
-        <RadioButton value="blue" label="Blue" />
-      </RadioGroup>
-    )}
-  </Story>
+  <Story of={RadioButtonStories.Selected} />
 </Canvas>
 
 ### Disabled
 
 <Canvas>
-  <Story
-    name="Disabled"
-    args={{
-      label: "Color",
-      orientation: "horizontal",
-      isDisabled: true,
-    }}
-  >
-    {args => (
-      <RadioGroup {...args}>
-        <RadioButton value="red" label="Red" />
-        <RadioButton value="blue" label="Blue" />
-      </RadioGroup>
-    )}
-  </Story>
+  <Story of={RadioButtonStories.Disabled} />
 </Canvas>
 
 ### Vertical Orientation
 
 <Canvas>
-  <Story
-    name="Vertical Orientation"
-    args={{ label: "Color", orientation: "vertical", isDisabled: false }}
-  >
-    {args => (
-      <RadioGroup {...args}>
-        <RadioButton value="red" label="Red" />
-        <RadioButton value="blue" label="Blue" />
-      </RadioGroup>
-    )}
-  </Story>
+  <Story of={RadioButtonStories.VerticalOrientation} />
 </Canvas>
 
 ### Icon Buttons
 
 <Canvas>
-  <Story
-    name="Icon Buttons"
-    args={{
-      label: "Business Type",
-      orientation: "horizontal",
-      isDisabled: false,
-    }}
-  >
-    {args => (
-      <RadioGroup {...args}>
-        <RadioButton value="sole_trader" label="Sole Trader">
-          <Icon name="user" fontSize={28} />
-        </RadioButton>
-        <RadioButton value="partnership" label="Partnership">
-          <Icon name="star" fontSize={28} />
-        </RadioButton>
-        <RadioButton value="company" label="Ltd Company">
-          <Icon name="menu" fontSize={28} />
-        </RadioButton>
-      </RadioGroup>
-    )}
-  </Story>
+  <Story of={RadioButtonStories.IconButtons} />
 </Canvas>
 
 ### Circular Buttons
@@ -208,29 +89,7 @@ Circular buttons currently only display label text below the button; allowing it
 The `circular` prop is applied to the RadioGroup and inheritted by each button to avoid mixed styles.
 
 <Canvas>
-  <Story
-    name="Circular Buttons"
-    args={{
-      label: "Business Type",
-      orientation: "horizontal",
-      circular: true,
-      isDisabled: false,
-    }}
-  >
-    {args => (
-      <RadioGroup {...args}>
-        <RadioButton value="sole_trader" label="Sole Trader">
-          <Icon name="user" fontSize={28} />
-        </RadioButton>
-        <RadioButton value="partnership" label="Partnership">
-          <Icon name="star" fontSize={28} />
-        </RadioButton>
-        <RadioButton value="company" label="Ltd Company">
-          <Icon name="menu" fontSize={28} />
-        </RadioButton>
-      </RadioGroup>
-    )}
-  </Story>
+  <Story of={RadioButtonStories.CircularButtons} />
 </Canvas>
 
 ## Accessibility
@@ -287,10 +146,10 @@ The span allows for an image overlay to replace the standard radio UX in browser
 
 Class names are augmented with the following flags if true (affected classes shown above):
 
-- --is-focused
-- --is-disabled
-- --is-hovered
-- --is-selected
+- \--is-focused
+- \--is-disabled
+- \--is-hovered
+- \--is-selected
 - circular
 
 ---

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

@@ -0,0 +1,153 @@
+import type { Meta } from "@storybook/react";
+import { RadioButton } from "./RadioButton";
+import { RadioGroup, RadioGroupProps } from "./RadioGroup";
+import { Icon } from "../Icon";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Forms/RadioButton",
+  component: RadioButton,
+  argTypes: {
+    orientation: {
+      control: { type: "radio" },
+      options: ["horizontal", "vertical"],
+    },
+    ...excludeControls("className", "children"),
+  },
+};
+
+export const Normal: Meta<typeof RadioGroup> = {
+  render: (args: RadioGroupProps) => (
+    <RadioGroup {...args}>
+      <RadioButton value="red">Red</RadioButton>
+      <RadioButton value="blue">Blue</RadioButton>
+    </RadioGroup>
+  ),
+  args: {
+    label: "Color",
+    orientation: "horizontal",
+    isDisabled: false,
+    defaultValue: "blue",
+  },
+};
+
+export const ControlledValue: Meta<typeof RadioGroup> = {
+  render: (args: RadioGroupProps) => (
+    <RadioGroup {...args}>
+      <RadioButton value="red">Red</RadioButton>
+      <RadioButton value="blue">Blue</RadioButton>
+    </RadioGroup>
+  ),
+  args: {
+    label: "Color",
+    orientation: "horizontal",
+    isDisabled: false,
+    value: "blue",
+  },
+};
+
+export const LabelProp: Meta<typeof RadioGroup> = {
+  render: (args: RadioGroupProps) => (
+    <RadioGroup {...args}>
+      <RadioButton value="red" label="Red" />
+      <RadioButton value="blue" label="Blue" />
+    </RadioGroup>
+  ),
+  args: {
+    label: "Color",
+    orientation: "horizontal",
+    isDisabled: false,
+  },
+};
+
+export const Selected: Meta<typeof RadioGroup> = {
+  render: (args: RadioGroupProps) => (
+    <RadioGroup {...args}>
+      <RadioButton value="red" label="Red" />
+      <RadioButton value="blue" label="Blue" />
+    </RadioGroup>
+  ),
+  args: {
+    label: "Color",
+    defaultValue: "red",
+    orientation: "horizontal",
+    isDisabled: false,
+  },
+  argTypes: {
+    value: {
+      control: { type: "radio" },
+      options: ["red", "blue"],
+    },
+  },
+};
+
+export const Disabled: Meta<typeof RadioGroup> = {
+  render: (args: RadioGroupProps) => (
+    <RadioGroup {...args}>
+      <RadioButton value="red" label="Red" />
+      <RadioButton value="blue" label="Blue" />
+    </RadioGroup>
+  ),
+  args: {
+    label: "Color",
+    orientation: "horizontal",
+    isDisabled: true,
+  },
+};
+
+export const VerticalOrientation: Meta<typeof RadioGroup> = {
+  render: (args: RadioGroupProps) => (
+    <RadioGroup {...args}>
+      <RadioButton value="red" label="Red" />
+      <RadioButton value="blue" label="Blue" />
+    </RadioGroup>
+  ),
+  args: {
+    label: "Color",
+    orientation: "vertical",
+    isDisabled: false,
+  },
+};
+
+export const IconButtons: Meta<typeof RadioGroup> = {
+  render: (args: RadioGroupProps) => (
+    <RadioGroup {...args}>
+      <RadioButton value="sole_trader" label="Sole Trader">
+        <Icon name="user" fontSize="28px" />
+      </RadioButton>
+      <RadioButton value="partnership" label="Partnership">
+        <Icon name="star" fontSize="28px" />
+      </RadioButton>
+      <RadioButton value="company" label="Ltd Company">
+        <Icon name="menu" fontSize="28px" />
+      </RadioButton>
+    </RadioGroup>
+  ),
+  args: {
+    label: "Business Type",
+    orientation: "horizontal",
+    isDisabled: false,
+  },
+};
+
+export const CircularButtons: Meta<typeof RadioGroup> = {
+  render: (args: RadioGroupProps) => (
+    <RadioGroup {...args}>
+      <RadioButton value="sole_trader" label="Sole Trader">
+        <Icon name="user" fontSize="28px" />
+      </RadioButton>
+      <RadioButton value="partnership" label="Partnership">
+        <Icon name="star" fontSize="28px" />
+      </RadioButton>
+      <RadioButton value="company" label="Ltd Company">
+        <Icon name="menu" fontSize="28px" />
+      </RadioButton>
+    </RadioGroup>
+  ),
+  args: {
+    label: "Business Type",
+    orientation: "horizontal",
+    circular: true,
+    isDisabled: false,
+  },
+};

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

@@ -1,12 +1,9 @@
-import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Story } from "@storybook/blocks";
 import { SVG } from "./SVG";
 import { excludeControls } from "../../utils/excludeControls";
+import * as SvgStories from "./SVG.stories";
 
-<Meta
-  title="Components/SVG"
-  component={SVG}
-  argTypes={excludeControls("className")}
-/>
+<Meta of={SvgStories} />
 
 # SVG
 
@@ -36,11 +33,9 @@ export const Star = (
 
 ## Examples
 
-<Story name="Normal" args={{ width: 75, height: 75 }}>
-  {args => <SVG {...args}>{Star}</SVG>}
-</Story>
+<Story of={SvgStories.Normal} />
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { SVG } from "@simplybusiness/mobius";
 

package/src/components/SVG/SVG.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta } from "@storybook/react";
+import { SVG, SVGProps } from "./SVG";
+import { excludeControls } from "../../utils/excludeControls";
+
+const Star = (
+  <svg viewBox="0 0 51 48">
+    <path
+      fill="none"
+      stroke="#000"
+      d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"
+    />
+  </svg>
+);
+
+export default {
+  title: "Components/SVG",
+  component: SVG,
+  argTypes: excludeControls("className"),
+};
+
+export const Normal: Meta<typeof SVG> = {
+  render: (args: SVGProps) => <SVG {...args}>{Star}</SVG>,
+  args: {
+    style: {
+      width: 75,
+      height: 75,
+    },
+  },
+};

package/src/components/SVG/SVG.test.tsx

@@ -16,29 +16,18 @@ describe("Test for SVG", () => {
 
   describe("uses correct class names", () => {
     it("uses Mobius class", () => {
-      render(
-        <SVG data-testid="test">
-          {SvgImage}
-        </SVG>,
-      );
+      render(<SVG data-testid="test">{SvgImage}</SVG>);
       expect(screen.getByTestId("test")).toHaveClass("mobius");
     });
 
     it("uses base Mobius class", () => {
-      render(
-        <SVG data-testid="test">
-          {SvgImage}
-        </SVG>,
-      );
+      render(<SVG data-testid="test">{SvgImage}</SVG>);
       expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
     });
 
     it("includes custom class name", () => {
       render(
-        <SVG
-          data-testid="test"
-          className="my-class"
-        >
+        <SVG data-testid="test" className="my-class">
           {SvgImage}
         </SVG>,
       );