@simplybusiness/mobius 3.8.0 → 3.9.1

package/src/components/TextField/TextField.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta } from "@storybook/react";
+import { TextField, TextFieldProps } from "./TextField";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Forms/TextField",
+  component: TextField,
+  argTypes: {
+    validationState: {
+      options: ["valid", "invalid", "neither"],
+      control: { type: "radio" },
+      mapping: {
+        valid: "valid",
+        invalid: "invalid",
+        neither: "",
+      },
+    },
+    type: {
+      options: ["text", "password", "email", "tel", "url", "hidden"],
+      control: { type: "radio" },
+    },
+    ...excludeControls("className"),
+  },
+  args: {
+    isRequired: false,
+  },
+};
+
+export const Normal: Meta<typeof TextField> = {
+  render: (args: TextFieldProps) => <TextField {...args} />,
+  args: {
+    label: "First name",
+    placeholder: "",
+    type: "text",
+    isDisabled: false,
+    errorMessage: "",
+  },
+};
+
+export const Placeholder: Meta<typeof TextField> = {
+  render: (args: TextFieldProps) => <TextField {...args} />,
+  args: {
+    label: "Email",
+    placeholder: "email@example.com",
+    type: "text",
+    isDisabled: false,
+    errorMessage: "",
+  },
+};
+
+export const ControlledValue: Meta<typeof TextField> = {
+  render: (args: TextFieldProps) => <TextField {...args} />,
+  args: {
+    label: "First name",
+    placeholder: "",
+    defaultValue: "john.doe@email.com",
+    type: "text",
+    isDisabled: false,
+    errorMessage: "",
+  },
+};
+
+export const Disabled: Meta<typeof TextField> = {
+  render: (args: TextFieldProps) => <TextField {...args} />,
+  args: {
+    label: "First name",
+    placeholder: "",
+    defaultValue: "john.doe@email.com",
+    type: "text",
+    isDisabled: true,
+    errorMessage: "",
+  },
+};
+
+export const Valid: Meta<typeof TextField> = {
+  render: (args: TextFieldProps) => <TextField {...args} />,
+  args: {
+    label: "First name",
+    placeholder: "",
+    defaultValue: "john.doe@email.com",
+    type: "text",
+    isDisabled: false,
+    validationState: "valid",
+    errorMessage: "",
+  },
+};
+
+export const Hidden: Meta<typeof TextField> = {
+  render: (args: TextFieldProps) => <TextField {...args} />,
+  args: {
+    label: "Secret",
+    placeholder: "",
+    defaultValue: "",
+    type: "hidden",
+    isDisabled: false,
+    errorMessage: "",
+  },
+};
+
+export const Invalid: Meta<typeof TextField> = {
+  render: (args: TextFieldProps) => <TextField {...args} />,
+  args: {
+    label: "First name",
+    placeholder: "",
+    defaultValue: "john.doe@email.com",
+    type: "text",
+    isDisabled: false,
+    validationState: "invalid",
+    errorMessage: "This is an error message",
+  },
+};

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

@@ -1,12 +1,9 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { Title, TitleProps } from "./Title";
 import { excludeControls } from "../../utils/excludeControls";
+import * as TitleStories from "./Title.stories";
 
-<Meta
-  title="Components/Title"
-  component={Title}
-  argTypes={excludeControls("className", "elementType")}
-/>
+<Meta of={TitleStories} />
 
 # Title
 
@@ -29,12 +26,7 @@ import { Title } from "@simplybusiness/mobius";
 ## Normal
 
 <Canvas>
-  <Story
-    name="Normal"
-    args={{ title: "General Liability", description: "Business Co." }}
-  >
-    {args => <Title {...args} />}
-  </Story>
+  <Story of={TitleStories.Normal} />
 </Canvas>
 
 ## Props

package/src/components/Title/Title.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta } from "@storybook/react";
+import { Title, TitleProps } from "./Title";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Components/Title",
+  component: Title,
+  argTypes: excludeControls("className", "elementType"),
+};
+
+export const Normal: Meta<typeof Title> = {
+  render: (args: TitleProps) => <Title {...args} />,
+  args: {
+    title: "General Liability",
+    description: "Business Co.",
+  },
+};

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

@@ -1,12 +1,9 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { VisuallyHidden, VisuallyHiddenProps } from ".";
 import { excludeControls } from "../../utils/excludeControls";
+import * as VisuallyHiddenStories from "./VisuallyHidden.stories";
 
-<Meta
-  title="Components/VisuallyHidden"
-  component={VisuallyHidden}
-  argTypes={excludeControls("className", "elementType")}
-/>
+<Meta of={VisuallyHiddenStories} />
 
 # VisuallyHidden
 
@@ -40,13 +37,7 @@ function MyComponent() {
 ## Normal
 
 <Canvas>
-  <Story name="Normal">
-    {args => (
-      <VisuallyHidden {...args}>
-        This will only be visible to screen readers.
-      </VisuallyHidden>
-    )}
-  </Story>
+  <Story of={VisuallyHiddenStories.Normal} />
 </Canvas>
 
 ---

package/src/components/VisuallyHidden/VisuallyHidden.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta } from "@storybook/react";
+import { VisuallyHidden, VisuallyHiddenProps } from ".";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Components/VisuallyHidden",
+  component: VisuallyHidden,
+  argTypes: excludeControls("className", "elementType"),
+};
+
+export const Normal: Meta<typeof VisuallyHidden> = {
+  render: (args: VisuallyHiddenProps) => (
+    <VisuallyHidden {...args}>
+      This will only be visible to screen readers.
+    </VisuallyHidden>
+  ),
+};

package/src/hooks/useBreakpoint/{useBreakpoint.story.mdx → useBreakpoint.mdx}

@@ -1,31 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/addon-docs";
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as UseBreakpointStories from "./useBreakpoint.stories";
 
 import { useBreakpoint } from "./useBreakpoint";
 
 import { ThemeContext } from "../../contexts";
 
-<Meta
-  title="Theming/useBreakpoint"
-  component={useBreakpoint}
-  decorators={[
-    Story => (
-      <ThemeContext.Provider
-        value={{
-          breakpoints: [
-            { size: "xs", value: 320 },
-            { size: "sm", value: 480 },
-            { size: "md", value: 640 },
-            { size: "lg", value: 960 },
-            { size: "xl", value: 1200 },
-            { size: "xxl", value: 1320 },
-          ],
-        }}
-      >
-        <Story />
-      </ThemeContext.Provider>
-    ),
-  ]}
-/>
+<Meta of={UseBreakpointStories} />
 
 # useBreakpoint
 
@@ -45,7 +25,7 @@ _Note: the following has to be done only once_
 
 If breakpoint value is required across your entire application, you will need to wrap the app with `<ThemeProvider />` like so:
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```js
 import { ThemeProvider } from "@simplybusiness/mobius";
 
@@ -137,16 +117,7 @@ const breakpoints = [
 ```
 
 <Canvas>
-  <Story name="Normal">
-    {() => {
-      const { breakpoint } = useBreakpoint();
-      return (
-        <div>
-          The current breakpoint: {breakpoint.size}, {breakpoint.value}
-        </div>
-      );
-    }}
-  </Story>
+  <Story of={UseBreakpointStories.Normal} />
 </Canvas>
 
 ### `up` and `down` helpers
@@ -167,17 +138,5 @@ const isDesktop = up("md");
 ```
 
 <Canvas>
-  <Story name="Up and Down">
-    {() => {
-      const { down, up } = useBreakpoint();
-      const isMobile = down("sm");
-      const isDesktop = up("md");
-      return (
-        <>
-          <div>isMobile is: {isMobile ? "true" : "false"}</div>
-          <div>isDesktop is: {isDesktop ? "true" : "false"}</div>
-        </>
-      );
-    }}
-  </Story>
+  <Story of={UseBreakpointStories.UpAndDown} />
 </Canvas>

package/src/hooks/useBreakpoint/useBreakpoint.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta } from "@storybook/react";
+import { useBreakpoint } from "./useBreakpoint";
+import { BreakpointsType, ThemeContext } from "../../contexts";
+
+const breakpoints = [
+  { size: "xs", value: 320 },
+  { size: "sm", value: 480 },
+  { size: "md", value: 670 },
+  { size: "lg", value: 960 },
+  { size: "xl", value: 1200 },
+  { size: "xxl", value: 1320 },
+] as BreakpointsType;
+
+const setBreakpoints = () => {};
+
+export default {
+  title: "Theming/useBreakpoint",
+  component: useBreakpoint,
+  decorators: [
+    // FIXME: not sure how to define this one
+    (Story: any) => (
+      <ThemeContext.Provider
+        value={{
+          breakpoints,
+          setBreakpoints,
+        }}
+      >
+        <Story />
+      </ThemeContext.Provider>
+    ),
+  ],
+};
+
+export const Normal: Meta<typeof useBreakpoint> = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { breakpoint } = useBreakpoint();
+
+    return (
+      <div>
+        The current breakpoint: {breakpoint.size}, {breakpoint.value}
+      </div>
+    );
+  },
+};
+
+export const UpAndDown: Meta<typeof useBreakpoint> = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { down, up } = useBreakpoint();
+    const isMobile = down("sm");
+    const isDesktop = up("md");
+
+    return (
+      <>
+        <div>isMobile is:{isMobile ? "true" : "false"}</div>
+        <div>isDesktop is:{isDesktop ? "true" : "false"}</div>
+      </>
+    );
+  },
+};