@simplybusiness/mobius 3.7.1 → 3.9.0

package/src/components/Label/Label.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta } from "@storybook/react";
+import { Label, LabelProps } from "./Label";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Forms/Label",
+  component: Label,
+  argTypes: excludeControls("className", "elementType"),
+};
+
+export const Normal: Meta<typeof Label> = {
+  render: (args: LabelProps) => <Label {...args} />,
+  args: {
+    children: "Example label",
+  },
+};

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

@@ -1,31 +1,9 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { Link } from "./Link";
 import { excludeControls } from "../../utils/excludeControls";
+import * as LinkStories from "./Link.stories";
 
-<Meta
-  title="Components/Link"
-  component={Link}
-  argTypes={{
-    target: {
-      options: ["_self", "_blank", "_parent", "_top"],
-      control: "select",
-    },
-    to: {
-      control: "text",
-    },
-    title: {
-      control: "text",
-    },
-    download: {
-      control: "boolean",
-    },
-    rel: {
-      options: ["noopener noreferrer", "canonical", "nofollow"],
-      control: "select",
-    },
-    ...excludeControls("className", "elementType", "style", "onClick"),
-  }}
-/>
+<Meta of={LinkStories} />
 
 # Link
 
@@ -47,7 +25,7 @@ import { Link } from "@simplybusiness/mobius";
 
 To use with react-router-dom, you need to pass the `to` prop and the elementType prop as the `Link` component.
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```js
 import { Link as RouterLink } from "react-router-dom";
 import { Link } from "@simplybusiness/mobius";
@@ -68,7 +46,7 @@ NextJS has some peccadillos about how `next/link` should be used, notably:
 
 Taking these into account, the correct "Next Way" is to wrap our Mobius Link like so:
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```js
 import NextLink from "next/link";
 import { Link } from "@simplybusiness/mobius";
@@ -84,7 +62,7 @@ import { Link } from "@simplybusiness/mobius";
 
 NextJS v13 updated the `next/link` component to no longer require passing a link as a child to the component. This means that the above example can be simplified to:
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```js
 import NextLink from "next/link";
 import { Link } from "@simplybusiness/mobius";
@@ -99,35 +77,13 @@ import { Link } from "@simplybusiness/mobius";
 ### Normal
 
 <Canvas>
-  <Story
-    name="Normal"
-    args={{
-      href: "https://www.google.com",
-      isDisabled: false,
-      download: false,
-      to: "",
-      title: "",
-    }}
-  >
-    {args => <Link {...args}>Link text</Link>}
-  </Story>
+  <Story of={LinkStories.Normal} />
 </Canvas>
 
 ### Disabled
 
 <Canvas>
-  <Story
-    name="Disabled"
-    args={{
-      href: "https://www.google.com",
-      isDisabled: true,
-      download: false,
-      to: "",
-      title: "",
-    }}
-  >
-    {args => <Link {...args}>Link text</Link>}
-  </Story>
+  <Story of={LinkStories.Disabled} />
 </Canvas>
 
 ## Props

package/src/components/Link/Link.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta } from "@storybook/react";
+import { Link, LinkProps } from "./Link";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Components/Link",
+  component: Link,
+  argTypes: {
+    target: {
+      options: ["_self", "_blank", "_parent", "_top"],
+      control: { type: "select" },
+    },
+    to: {
+      control: { type: "text" },
+    },
+    title: {
+      control: { type: "text" },
+    },
+    download: {
+      control: { type: "boolean" },
+    },
+    rel: {
+      options: ["noopener noreferrer", "canonical", "nofollow"],
+      control: { type: "select" },
+    },
+    ...excludeControls("className", "elementType", "style", "onClick"),
+  },
+};
+
+export const Normal: Meta<typeof Link> = {
+  render: (args: LinkProps) => <Link {...args}>Link text</Link>,
+  args: {
+    href: "https://www.google.com",
+    isDisabled: false,
+    download: false,
+    to: "",
+    title: "",
+  },
+};
+
+export const Disabled: Meta<typeof Link> = {
+  render: (args: LinkProps) => <Link {...args}>Link text</Link>,
+  args: {
+    href: "https://www.google.com",
+    isDisabled: true,
+    download: false,
+    to: "",
+    title: "",
+  },
+};

package/src/components/LinkButton/LinkButton.mdx

@@ -0,0 +1,45 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { LinkButton } from "./LinkButton";
+import { excludeControls } from "../../utils/excludeControls";
+import * as LinkButtonStories from "./LinkButton.stories";
+
+<Meta of={LinkButtonStories} />
+
+# LinkButton
+
+LinkButton component is a link element styled like a button. It takes all The
+props that `Button` takes.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { LinkButton } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+<Canvas>
+  <Story of={LinkButtonStories.Normal} />
+</Canvas>
+
+## Props
+
+<ArgsTable of={LinkButton} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a LinkButton:
+
+```html
+<a class="mobius/LinkButton mobius/Button" href="path/to/page">{link text}</a>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/LinkButton) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/LinkButton/LinkButton.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta } from "@storybook/react";
+import { LinkButton, LinkButtonProps } from "./LinkButton";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Components/LinkButton",
+  component: LinkButton,
+  argTypes: {
+    target: {
+      options: ["_self", "_blank", "_parent", "_top"],
+      control: { type: "select" },
+    },
+    to: {
+      control: { type: "text" },
+    },
+    title: {
+      control: { type: "text" },
+    },
+    download: {
+      control: { type: "boolean" },
+    },
+    rel: {
+      options: ["noopener noreferrer", "canonical", "nofollow"],
+      control: { type: "select" },
+    },
+    icon: {
+      options: ["menu", "rightArrow", "leftArrow", "dropdown", "home"],
+      control: { type: "radio" },
+    },
+    iconPosition: {
+      if: {
+        arg: "icon",
+      },
+    },
+    ...excludeControls(
+      "children",
+      "className",
+      "elementType",
+      "style",
+      "onClick",
+      "onPress",
+    ),
+  },
+};
+
+export const Normal: Meta<typeof LinkButton> = {
+  render: (args: LinkButtonProps) => (
+    <LinkButton {...args}>LinkButton text</LinkButton>
+  ),
+  args: {
+    href: "https://www.google.com",
+    to: "",
+    title: "",
+    size: "medium",
+    download: false,
+    isDisabled: false,
+    isSuccess: false,
+    isLoading: false,
+    role: "",
+  },
+};

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

@@ -1,32 +1,10 @@
-import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Story } from "@storybook/blocks";
 import { Icon, Text } from "../index";
 import { List, ListItem } from ".";
 import { excludeControls } from "../../utils/excludeControls";
+import * as ListStories from "./List.stories";
 
-<Meta
-  title="Components/List"
-  component={List}
-  argTypes={{
-    liststyletype: {
-      control: "radio",
-      if: {
-        arg: "isOrdered",
-        truthy: false,
-      },
-    },
-    isReversed: {
-      if: {
-        arg: "isOrdered",
-      },
-    },
-    start: {
-      if: {
-        arg: "isOrdered",
-      },
-    },
-    ...excludeControls("className", "icon"),
-  }}
-/>
+<Meta of={ListStories} />
 
 # List
 
@@ -48,20 +26,9 @@ import { List, ListItem } from "@simplybusiness/mobius";
 
 ### Unordered
 
-<Story
-  name="Unordered"
-  args={{ isOrdered: false, isReversed: false, liststyletype: "disc" }}
->
-  {args => (
-    <List {...args}>
-      <ListItem>Foo</ListItem>
-      <ListItem>Bar</ListItem>
-      <ListItem>Baz</ListItem>
-    </List>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={ListStories.Unordered} />
+
+{/* prettier-ignore */}
 ```jsx
 import { List, ListItem } from "@simplybusiness/mobius";
 
@@ -74,17 +41,9 @@ import { List, ListItem } from "@simplybusiness/mobius";
 
 ### Ordered
 
-<Story name="Ordered" args={{ isOrdered: true, isReversed: false, start: 1 }}>
-  {args => (
-    <List {...args}>
-      <ListItem>Foo</ListItem>
-      <ListItem>Bar</ListItem>
-      <ListItem>Baz</ListItem>
-    </List>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={ListStories.Ordered} />
+
+{/* prettier-ignore */}
 ```jsx
 import { List, ListItem } from "@simplybusiness/mobius";
 
@@ -97,21 +56,9 @@ import { List, ListItem } from "@simplybusiness/mobius";
 
 #### Starting from a specific number
 
-<Story
-  name="Starting from a specific number"
-  args={{ isOrdered: true, start: 12, isReversed: false }}
-  parameters={{ controls: { exclude: ["liststyletype"] } }}
->
-  {args => (
-    <List {...args}>
-      <ListItem>Foo</ListItem>
-      <ListItem>Bar</ListItem>
-      <ListItem>Baz</ListItem>
-    </List>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={ListStories.StartingFromASpecificNumber} />
+
+{/* prettier-ignore */}
 ```jsx
 import { List, ListItem } from "@simplybusiness/mobius";
 
@@ -124,21 +71,9 @@ import { List, ListItem } from "@simplybusiness/mobius";
 
 #### Reverse order
 
-<Story
-  name="Reversed"
-  args={{ isOrdered: true, isReversed: true, start: 3 }}
-  parameters={{ controls: { exclude: ["liststyletype"] } }}
->
-  {args => (
-    <List {...args}>
-      <ListItem>Foo</ListItem>
-      <ListItem>Bar</ListItem>
-      <ListItem>Baz</ListItem>
-    </List>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={ListStories.Reversed} />
+
+{/* prettier-ignore */}
 ```jsx
 import { List, ListItem } from "@simplybusiness/mobius";
 
@@ -151,39 +86,9 @@ import { List, ListItem } from "@simplybusiness/mobius";
 
 ### With Custom Icons
 
-<Story
-  name="With Custom Icons"
-  args={{ icon: <Icon name="tick" color="green" /> }}
-  parameters={{ controls: { exclude: ["isOrdered", "liststyletype"] } }}
->
-  {args => (
-    <List {...args}>
-      <ListItem>
-        <Text variant="body" spacing="tight">
-          Morbi eget sapien nulla. Mauris sodales est vel ullamcorper efficitur.
-          Nam lobortis metus et ultricies imperdiet. Phasellus at sapien
-          pharetra, commodo lorem eu, malesuada dui. Curabitur vulputate massa
-          nec massa blandit, auctor elementum dolor ultricies.
-        </Text>
-      </ListItem>
-      <ListItem icon={<Icon name="cross" color="red" />}>
-        Etiam feugiat neque vel nulla semper ultrices. Phasellus lobortis nisl
-        id mollis malesuada. Suspendisse ut porttitor purus. Praesent ornare
-        felis a mattis pharetra. Pellentesque habitant morbi tristique senectus
-        et netus et malesuada fames ac turpis egestas. Donec venenatis tristique
-        condimentum.
-      </ListItem>
-      <ListItem>
-        Nunc at turpis iaculis, finibus tellus eget, tempus mi. Vestibulum eget
-        egestas mauris, non porttitor nisl. Nam a facilisis sem. Interdum et
-        malesuada fames ac ante ipsum primis in faucibus. Suspendisse sit amet
-        neque tempor, vestibulum eros ut, vulputate quam.
-      </ListItem>
-    </List>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={ListStories.WithCustomIcons} />
+
+{/* prettier-ignore */}
 ```jsx
 import { List, ListItem, Text, Icon } from "@simplybusiness/mobius";
 

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

@@ -0,0 +1,135 @@
+import type { Meta } from "@storybook/react";
+import { Icon, Text } from "../index";
+import { List, ListItem, ListProps } from ".";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Components/List",
+  component: List,
+  argTypes: {
+    liststyletype: {
+      control: { type: "radio" },
+      if: {
+        arg: "isOrdered",
+        truthy: false,
+      },
+    },
+    isReversed: {
+      if: {
+        arg: "isOrdered",
+      },
+    },
+    start: {
+      if: {
+        arg: "isOrdered",
+      },
+    },
+    ...excludeControls("className", "icon"),
+  },
+};
+
+export const Unordered: Meta<typeof List> = {
+  render: (args: ListProps) => (
+    <List {...args}>
+      <ListItem>Foo</ListItem>
+      <ListItem>Bar</ListItem>
+      <ListItem>Baz</ListItem>
+    </List>
+  ),
+  args: {
+    isOrdered: false,
+    isReversed: false,
+    liststyletype: "disc",
+  },
+};
+
+export const Ordered: Meta<typeof List> = {
+  render: (args: ListProps) => (
+    <List {...args}>
+      <ListItem>Foo</ListItem>
+      <ListItem>Bar</ListItem>
+      <ListItem>Baz</ListItem>
+    </List>
+  ),
+  args: {
+    isOrdered: true,
+    isReversed: false,
+    start: 1,
+  },
+};
+
+export const StartingFromASpecificNumber: Meta<typeof List> = {
+  render: (args: ListProps) => (
+    <List {...args}>
+      <ListItem>Foo</ListItem>
+      <ListItem>Bar</ListItem>
+      <ListItem>Baz</ListItem>
+    </List>
+  ),
+  args: {
+    isOrdered: true,
+    start: 12,
+    isReversed: false,
+  },
+  parameters: {
+    controls: {
+      exclude: ["liststyletype"],
+    },
+  },
+};
+
+export const Reversed: Meta<typeof List> = {
+  render: (args: ListProps) => (
+    <List {...args}>
+      <ListItem>Foo</ListItem>
+      <ListItem>Bar</ListItem>
+      <ListItem>Baz</ListItem>
+    </List>
+  ),
+  args: {
+    isOrdered: true,
+    isReversed: true,
+    start: 3,
+  },
+  parameters: {
+    controls: {
+      exclude: ["liststyletype"],
+    },
+  },
+};
+
+export const WithCustomIcons: Meta<typeof List> = {
+  render: (args: ListProps) => (
+    <List {...args}>
+      <ListItem>
+        <Text variant="body" spacing="tight">
+          Morbi eget sapien nulla. Mauris sodales est vel ullamcorper efficitur.
+          Nam lobortis metus et ultricies imperdiet. Phasellus at sapien
+          pharetra, commodo lorem eu, malesuada dui. Curabitur vulputate massa
+          nec massa blandit, auctor elementum dolor ultricies.
+        </Text>
+      </ListItem>
+      <ListItem icon={<Icon name="cross" color="red" />}>
+        Etiam feugiat neque vel nulla semper ultrices. Phasellus lobortis nisl
+        id mollis malesuada. Suspendisse ut porttitor purus. Praesent ornare
+        felis a mattis pharetra. Pellentesque habitant morbi tristique senectus
+        et netus et malesuada fames ac turpis egestas. Donec venenatis tristique
+        condimentum.
+      </ListItem>
+      <ListItem>
+        Nunc at turpis iaculis, finibus tellus eget, tempus mi. Vestibulum eget
+        egestas mauris, non porttitor nisl. Nam a facilisis sem. Interdum et
+        malesuada fames ac ante ipsum primis in faucibus. Suspendisse sit amet
+        neque tempor, vestibulum eros ut, vulputate quam.
+      </ListItem>
+    </List>
+  ),
+  args: {
+    icon: <Icon name="tick" color="green" />,
+  },
+  parameters: {
+    controls: {
+      exclude: ["isOrdered", "liststyletype"],
+    },
+  },
+};

package/src/components/LoadingIndicator/LoadingIndicator.mdx

@@ -0,0 +1,59 @@
+import { useContext } from "react";
+import { Meta, ArgsTable, Story } from "@storybook/blocks";
+import { LoadingIndicator } from "./LoadingIndicator";
+import { excludeControls } from "../../utils/excludeControls";
+import * as LoadingIndicatorStories from "./LoadingIndicator.stories";
+
+<Meta of={LoadingIndicatorStories} />
+
+# LoadingIndicator
+
+LoadingIndicator is a component for displaying loading state.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { LoadingIndicator } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+### Normal
+
+<Story of={LoadingIndicatorStories.Normal} />
+
+### Large
+
+<Story of={LoadingIndicatorStories.Large} />
+
+### With Custom Colour
+
+<Story of={LoadingIndicatorStories.WithCustomColour} />
+
+### With Custom Icon
+
+<Story of={LoadingIndicatorStories.WithCustomIcon} />
+
+## Props
+
+<ArgsTable of={LoadingIndicator} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for an Icon:
+
+```html
+<svg class="mobius/Icon mobius/LoadingIndicator" focusable="false" role="img">
+  <g ... />
+</svg>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/LoadingIndicator) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

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

@@ -0,0 +1,59 @@
+import type { Meta } from "@storybook/react";
+import { LoadingIndicator, LoadingIndicatorProps } from "./LoadingIndicator";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Components/LoadingIndicator",
+  component: LoadingIndicator,
+  argTypes: {
+    icon: {
+      options: ["loading", "refreshArrow", "home"],
+      control: { type: "radio" },
+    },
+    color: {
+      options: ["darkcyan", "deeppink", "royalblue", "tomato"],
+      control: { type: "radio" },
+    },
+    fontSize: {
+      options: ["72px", "48px", "24px"],
+      control: { type: "radio" },
+    },
+    ...excludeControls("className"),
+  },
+};
+
+export const Normal: Meta<typeof LoadingIndicator> = {
+  render: (args: LoadingIndicatorProps) => <LoadingIndicator {...args} />,
+  args: {
+    icon: "loading",
+    fontSize: "24px",
+    color: "darkcyan",
+  },
+};
+
+export const Large: Meta<typeof LoadingIndicator> = {
+  render: (args: LoadingIndicatorProps) => <LoadingIndicator {...args} />,
+  args: {
+    icon: "loading",
+    fontSize: "72px",
+    color: "darkcyan",
+  },
+};
+
+export const WithCustomColour: Meta<typeof LoadingIndicator> = {
+  render: (args: LoadingIndicatorProps) => <LoadingIndicator {...args} />,
+  args: {
+    icon: "loading",
+    fontSize: "24px",
+    color: "darkcyan",
+  },
+};
+
+export const WithCustomIcon: Meta<typeof LoadingIndicator> = {
+  render: (args: LoadingIndicatorProps) => <LoadingIndicator {...args} />,
+  args: {
+    icon: "refreshArrow",
+    fontSize: "24px",
+    color: "darkcyan",
+  },
+};