@simplybusiness/mobius 3.7.1 → 3.9.0

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta } from "@storybook/react";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { DropdownMenu, DropdownMenuProps } from ".";
+import { Icon } from "../Icon";
+import { excludeControls } from "../../utils/excludeControls";
+
+type CustomTriggerProps = {
+  className?: string;
+  open?: boolean;
+};
+
+const CustomTrigger = forwardRef((props: CustomTriggerProps) => {
+  const { className, open, ...otherProps } = props;
+  const classes = clsx({
+    "--is-open": open,
+  });
+  return (
+    <button type="button" className={className} {...otherProps}>
+      {open ? "Close" : "Open"} <Icon name="chevronDown" className={classes} />
+    </button>
+  );
+});
+
+export default {
+  title: "Components/DropdownMenu",
+  component: DropdownMenu,
+  argTypes: excludeControls("className", "elementType", "trigger", "style"),
+  decorators: [
+    Story => {
+      // eslint-disable-next-line global-require
+      require("./DropdownMenu.story.styles.css");
+
+      return <Story />;
+    },
+  ],
+} satisfies Meta<typeof DropdownMenu>;
+
+export const Normal: Meta<typeof DropdownMenu> = {
+  render: (args: DropdownMenuProps) => (
+    <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>
+  ),
+  args: {
+    label: "Menu",
+  },
+};
+
+export const WithCustomTrigger: Meta<typeof DropdownMenu> = {
+  render: (args: DropdownMenuProps) => (
+    <div
+      style={{
+        height: 300,
+      }}
+      className="dropdownmenu-example-custom-trigger"
+    >
+      <DropdownMenu {...args}>
+        {/* eslint-disable-next-line no-alert */}
+        <DropdownMenu.Item onClick={() => alert("Clicked Home")}>
+          Home
+        </DropdownMenu.Item>
+        <DropdownMenu.Item>My details</DropdownMenu.Item>
+        <DropdownMenu.Item>Sign out</DropdownMenu.Item>
+      </DropdownMenu>
+    </div>
+  ),
+  args: {
+    trigger: <CustomTrigger />,
+  },
+  parameters: {
+    controls: {
+      exclude: ["label"],
+    },
+  },
+};

package/src/components/DropdownMenu/DropdownMenu.story.styles.css

@@ -0,0 +1,12 @@
+.dropdownmenu-example-custom-trigger .mobius\/DropdownMenu {
+  text-align: right;
+}
+
+.dropdownmenu-example-custom-trigger .mobius\/Icon {
+  transform: rotate(0deg);
+  transition: transform 150ms ease-in-out 0s;
+}
+
+.dropdownmenu-example-custom-trigger .mobius\/Icon.--is-open {
+  transform: rotate(180deg);
+}

package/src/components/ErrorMessage/ErrorMessage.mdx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { Meta, ArgsTable, Story, Canvas } from "@storybook/blocks";
+import { Box } from "../Box";
+import { Button } from "../Button";
+import { ErrorMessage } from ".";
+import { excludeControls } from "../../utils/excludeControls";
+import * as ErrorMessageStories from "./ErrorMessage.stories";
+
+<Meta of={ErrorMessageStories} />
+
+# ErrorMessage
+
+The `ErrorMessage` component is used for displaying generic error information.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { ErrorMessage } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+### Normal
+
+<Canvas>
+  <Story of={ErrorMessageStories.Normal} />
+</Canvas>
+
+### Long message
+
+<Canvas>
+  <Story of={ErrorMessageStories.LongMessage} />
+</Canvas>

package/src/components/ErrorMessage/ErrorMessage.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta } from "@storybook/react";
+import { ErrorMessage, ErrorMessageProps } from ".";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Forms/ErrorMessage",
+  component: ErrorMessage,
+  argTypes: excludeControls("id", "className"),
+};
+
+export const Normal: Meta<typeof ErrorMessage> = {
+  render: (args: ErrorMessageProps) => <ErrorMessage {...args} />,
+  args: {
+    errorMessage: "This is an error message",
+  },
+};
+
+export const LongMessage: Meta<typeof ErrorMessage> = {
+  render: (args: ErrorMessageProps) => <ErrorMessage {...args} />,
+  args: {
+    errorMessage:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum, mauris ac egestas rutrum, dui urna imperdiet velit, ac malesuada velit augue eget orci. Duis id purus et elit tempus egestas ut eget tellus. Praesent tempus sit amet metus iaculis auctor. Morbi aliquet nibh sit amet neque congue dictum. Proin auctor pellentesque facilisis. Donec rutrum at ante a pulvinar. In hac habitasse platea dictumst. Mauris non blandit nulla. Duis facilisis fringilla cursus. Interdum et malesuada fames ac ante ipsum primis in faucibus.",
+  },
+};

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

@@ -1,13 +1,10 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { Fieldset } from "./Fieldset";
 import { TextField } from "../TextField";
 import { excludeControls } from "../../utils/excludeControls";
+import * as FieldsetStories from "./Fieldset.stories";
 
-<Meta
-  title="Forms/Fieldset"
-  component={Fieldset}
-  argTypes={excludeControls("className", "legendComponent")}
-/>
+<Meta of={FieldsetStories} />
 
 # Fieldset
 
@@ -30,33 +27,13 @@ import { Fieldset } from "@simplybusiness/mobius";
 ## Normal
 
 <Canvas>
-  <Story name="Normal" args={{ legend: "" }}>
-    {args => (
-      <Fieldset {...args}>
-        <TextField label="Full name" />
-        <TextField label="Street" />
-        <TextField label="Number" />
-        <TextField label="City" />
-        <TextField label="Postcode" />
-      </Fieldset>
-    )}
-  </Story>
+  <Story of={FieldsetStories.Normal} />
 </Canvas>
 
 ## With Legend
 
 <Canvas>
-  <Story name="With Legend" args={{ legend: "Contact Details" }}>
-    {args => (
-      <Fieldset {...args}>
-        <TextField label="Full name" />
-        <TextField label="Street" />
-        <TextField label="Number" />
-        <TextField label="City" />
-        <TextField label="Postcode" />
-      </Fieldset>
-    )}
-  </Story>
+  <Story of={FieldsetStories.WithLegend} />
 </Canvas>
 
 ## Accessibility

package/src/components/Fieldset/Fieldset.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta } from "@storybook/react";
+import { Fieldset, FieldsetProps } from "./Fieldset";
+import { TextField } from "../TextField";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Forms/Fieldset",
+  component: Fieldset,
+  argTypes: excludeControls("className", "legendComponent"),
+};
+
+export const Normal: Meta<typeof Fieldset> = {
+  render: (args: FieldsetProps) => (
+    <Fieldset {...args}>
+      <TextField label="Full name" />
+      <TextField label="Street" />
+      <TextField label="Number" />
+      <TextField label="City" />
+      <TextField label="Postcode" />
+    </Fieldset>
+  ),
+  args: {
+    legend: "",
+  },
+};
+
+export const WithLegend: Meta<typeof Fieldset> = {
+  render: (args: FieldsetProps) => (
+    <Fieldset {...args}>
+      <TextField label="Full name" />
+      <TextField label="Street" />
+      <TextField label="Number" />
+      <TextField label="City" />
+      <TextField label="Postcode" />
+    </Fieldset>
+  ),
+  args: {
+    legend: "Contact Details",
+  },
+};

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

@@ -1,7 +1,8 @@
-import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Story } from "@storybook/blocks";
 import { Flex } from "./Flex";
 import { Box } from "../Box";
 import { excludeControls } from "../../utils/excludeControls";
+import * as FlexStories from "./Flex.stories";
 
 export const sizeOptions = [
   "",
@@ -18,102 +19,7 @@ export const sizeOptions = [
   "var(--size-100)",
 ];
 
-<Meta
-  title="Layout/Flex"
-  component={Flex}
-  argTypes={{
-    flexDirection: {
-      control: "select",
-      options: ["", "row", "row-reverse", "column", "column-reverse"],
-    },
-    flexWrap: {
-      control: "select",
-      options: ["", "nowrap", "wrap", "wrap-reverse"],
-    },
-    flexGrow: {
-      control: "text",
-      if: {
-        arg: "flex",
-        truthy: false,
-      },
-    },
-    flex: {
-      control: "text",
-    },
-    justifyContent: {
-      control: "select",
-      options: [
-        "",
-        "space-around",
-        "space-between",
-        "space-evenly",
-        "stretch",
-        "center",
-        "end",
-        "flex-end",
-        "flex-start",
-        "start",
-        "left",
-        "normal",
-        "right",
-      ],
-    },
-    alignItems: {
-      control: "select",
-      options: [
-        "",
-        "center",
-        "end",
-        "flex-end",
-        "flex-start",
-        "self-end",
-        "self-start",
-        "start",
-        "baseline",
-        "normal",
-        "stretch",
-      ],
-    },
-    alignContent: {
-      control: "select",
-      options: [
-        "",
-        "space-around",
-        "space-between",
-        "space-evenly",
-        "stretch",
-        "center",
-        "end",
-        "flex-end",
-        "flex-start",
-        "start",
-        "baseline",
-        "normal",
-      ],
-    },
-    gap: {
-      control: "select",
-      options: [...sizeOptions],
-    },
-    rowGap: {
-      control: "select",
-      options: [...sizeOptions],
-      if: {
-        arg: "gap",
-        truthy: false,
-      },
-    },
-    columnGap: {
-      control: "select",
-      options: [...sizeOptions],
-      if: {
-        arg: "gap",
-        truthy: false,
-      },
-    },
-    ...excludeControls("className", "elementType", "style"),
-  }}
-/>
+<Meta of={FlexStories} />
 
 # Flex
 
@@ -163,15 +69,16 @@ export const Card = ({ children, style, ...props }) => (
   >
     Header
   </Flex>
+
   <Flex flexDirection="row" gap={4} style={{ height: "var(--size-80)" }}>
     <Flex style={{ backgroundColor: "var(--color-background)" }} flex={2}>
       Main
     </Flex>
-    <Flex
-      style={{ backgroundColor: "var(--color-background-muted)" }}
-      flex={1}
-    />
+
+    <Flex style={{ backgroundColor: "var(--color-background-muted)" }} flex={1} />
+
   </Flex>
+
   <Flex
     alignItems="center"
     style={{
@@ -230,7 +137,7 @@ You can use the `flexWrap` prop to wrap the elements inside the `Flex` container
   ))}
 </Flex>
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Flex, Box } from "@simplybusiness/mobius";
 
@@ -264,31 +171,9 @@ const Card = ({ children, ...props }) => (
 
 _Note:_ `row` layout is the default value, so `flexDirection: "row"` may be omitted
 
-<Story
-  name="Row Layout"
-  args={{
-    flexDirection: "row",
-    flexWrap: "nowrap",
-    flexGrow: "0",
-    flex: "1 1 0px",
-    justifyContent: "normal",
-    alignItems: "stretch",
-    alignContent: "flex-start",
-    gap: "var(--size-20)",
-    rowGap: "",
-    columnGap: "",
-  }}
->
-  {args => (
-    <Flex {...args}>
-      <Card>Item</Card>
-      <Card>Item</Card>
-      <Card>Item</Card>
-    </Flex>
-  )}
-</Story>
+<Story of={FlexStories.RowLayout} />
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Flex, Box } from "@simplybusiness/mobius";
 
@@ -318,31 +203,9 @@ const Card = ({ children, ...props }) => (
 
 ### Column Layout
 
-<Story
-  name="Column Layout"
-  args={{
-    flexDirection: "column",
-    flexWrap: "nowrap",
-    flexGrow: "0",
-    flex: "1 1 0px",
-    justifyContent: "normal",
-    alignItems: "stretch",
-    alignContent: "normal",
-    gap: "var(--size-20)",
-    rowGap: "",
-    columnGap: "",
-  }}
->
-  {args => (
-    <Flex {...args}>
-      <Card>Item</Card>
-      <Card>Item</Card>
-      <Card>Item</Card>
-    </Flex>
-  )}
-</Story>
+<Story of={FlexStories.ColumnLayout} />
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Flex, Box } from "@simplybusiness/mobius";
 

package/src/components/Flex/Flex.stories.tsx

@@ -0,0 +1,182 @@
+import type { Meta } from "@storybook/react";
+import { CSSProperties, ReactNode } from "react";
+import { Flex } from "./Flex";
+import { Box } from "../Box";
+import { excludeControls } from "../../utils/excludeControls";
+import { FlexProps } from "./types";
+
+const sizeOptions = [
+  "",
+  "var(--size-0)",
+  "var(--size-10)",
+  "var(--size-20)",
+  "var(--size-30)",
+  "var(--size-40)",
+  "var(--size-50)",
+  "var(--size-60)",
+  "var(--size-70)",
+  "var(--size-80)",
+  "var(--size-90)",
+  "var(--size-100)",
+];
+
+type CardProps = {
+  children: ReactNode;
+  style?: CSSProperties;
+};
+
+const Card = ({ children, style, ...props }: CardProps) => (
+  <Box
+    style={{
+      borderRadius: "4px",
+      padding: "8px",
+      backgroundColor: "#dddddd",
+      width: "100%",
+      ...style,
+    }}
+    {...props}
+  >
+    {children}
+  </Box>
+);
+
+export default {
+  title: "Layout/Flex",
+  component: Flex,
+  argTypes: {
+    flexDirection: {
+      control: { type: "select" },
+      options: ["", "row", "row-reverse", "column", "column-reverse"],
+    },
+    flexWrap: {
+      control: { type: "select" },
+      options: ["", "nowrap", "wrap", "wrap-reverse"],
+    },
+    flexGrow: {
+      control: { type: "text" },
+      if: {
+        arg: "flex",
+        truthy: false,
+      },
+    },
+    flex: {
+      control: { type: "text" },
+    },
+    justifyContent: {
+      control: { type: "select" },
+      options: [
+        "",
+        "space-around",
+        "space-between",
+        "space-evenly",
+        "stretch",
+        "center",
+        "end",
+        "flex-end",
+        "flex-start",
+        "start",
+        "left",
+        "normal",
+        "right",
+      ],
+    },
+    alignItems: {
+      control: { type: "select" },
+      options: [
+        "",
+        "center",
+        "end",
+        "flex-end",
+        "flex-start",
+        "self-end",
+        "self-start",
+        "start",
+        "baseline",
+        "normal",
+        "stretch",
+      ],
+    },
+    alignContent: {
+      control: { type: "select" },
+      options: [
+        "",
+        "space-around",
+        "space-between",
+        "space-evenly",
+        "stretch",
+        "center",
+        "end",
+        "flex-end",
+        "flex-start",
+        "start",
+        "baseline",
+        "normal",
+      ],
+    },
+    gap: {
+      control: { type: "select" },
+      options: [...sizeOptions],
+    },
+    rowGap: {
+      control: { type: "select" },
+      options: [...sizeOptions],
+      if: {
+        arg: "gap",
+        truthy: false,
+      },
+    },
+    columnGap: {
+      control: { type: "select" },
+      options: [...sizeOptions],
+      if: {
+        arg: "gap",
+        truthy: false,
+      },
+    },
+    ...excludeControls("className", "elementType", "style"),
+  },
+};
+
+export const RowLayout: Meta<typeof Flex> = {
+  render: (args: FlexProps) => (
+    <Flex {...args}>
+      <Card>Item</Card>
+      <Card>Item</Card>
+      <Card>Item</Card>
+    </Flex>
+  ),
+  args: {
+    flexDirection: "row",
+    flexWrap: "nowrap",
+    flexGrow: "0",
+    flex: "1 1 0px",
+    justifyContent: "normal",
+    alignItems: "stretch",
+    alignContent: "flex-start",
+    gap: "var(--size-20)",
+    rowGap: "",
+    columnGap: "",
+  },
+};
+
+export const ColumnLayout: Meta<typeof Flex> = {
+  render: (args: FlexProps) => (
+    <Flex {...args}>
+      <Card>Item</Card>
+      <Card>Item</Card>
+      <Card>Item</Card>
+    </Flex>
+  ),
+  args: {
+    flexDirection: "column",
+    flexWrap: "nowrap",
+    flexGrow: "0",
+    flex: "1 1 0px",
+    justifyContent: "normal",
+    alignItems: "stretch",
+    alignContent: "normal",
+    gap: "var(--size-20)",
+    rowGap: "",
+    columnGap: "",
+  },
+};