@simplybusiness/mobius 3.8.0 → 3.9.0

package/src/components/ErrorMessage/ErrorMessage.story.mdx

@@ -1,57 +0,0 @@
-import { useState } from "react";
-import { Meta, ArgsTable, Story, Canvas } from "@storybook/addon-docs";
-import { Box } from "../Box";
-import { Button } from "../Button";
-import { ErrorMessage } from ".";
-import { excludeControls } from "../../utils/excludeControls";
-
-<Meta
-  title="Forms/ErrorMessage"
-  component={ErrorMessage}
-  argTypes={excludeControls("id")}
-/>
-
-# 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
-    name="Normal"
-    args={{
-      errorMessage: "This is an error message",
-    }}
-  >
-    {args => <ErrorMessage {...args} />}
-  </Story>
-</Canvas>
-
-### Long message
-
-<Canvas>
-  <Story
-    name="Long Message"
-    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.",
-    }}
-  >
-    {args => <ErrorMessage {...args} />}
-  </Story>
-</Canvas>

package/src/components/Icon/Icon.story.mdx

@@ -1,175 +0,0 @@
-import { useContext, useState } from "react";
-import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
-import { Icon } from "./Icon";
-import { Box } from "../Box";
-import { Text } from "../Text";
-import * as baseIcons from "../../../../icons";
-import { ThemeProvider, ThemeContext } from "../../contexts";
-import { excludeControls } from "../../utils/excludeControls";
-import { PARTNERS } from "../../../../../.storybook/partnerThemes";
-
-<Meta
-  title="Theming/Icon"
-  component={Icon}
-  argTypes={{
-    name: {
-      options: [
-        "menu",
-        "rightArrow",
-        "leftArrow",
-        "dropdown",
-        "home",
-        "star",
-        "youtube",
-        "error",
-        "search",
-        "user",
-        "chevronDown",
-        "loading",
-      ],
-      control: "radio",
-    },
-    spin: {
-      if: {
-        arg: "name",
-        eq: "loading",
-      },
-    },
-    ...excludeControls("className", "icon"),
-  }}
-/>
-
-# Icon
-
-Icon is a component for showing SVG icons provided by an icon library.
-
-See the [icons documentation](/?path=/story/icons-getting-started--page) for the full list of icons.
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { Icon } from "@simplybusiness/mobius";
-```
-
-## Icon Set
-
-export const AllIcons = () => {
-  const { icons } = useContext(ThemeContext);
-  const availableIcons = Object.keys(icons).length === 0 ? baseIcons : icons;
-  return Object.entries(availableIcons).map(([iconName, icon]) => (
-    <div
-      key={icon.iconName}
-      style={{
-        backgroundColor: "#eee",
-        padding: "10px",
-        borderRadius: "5px",
-        color: "var(--color-primary)",
-      }}
-    >
-      <Icon fontSize="48px" key={icon.name} name={iconName} />
-      <div style={{ marginTop: "20px" }}>{iconName}</div>
-    </div>
-  ));
-};
-
-<Story name="Icon Set">
-  {(args, { globals: { theme } }) => {
-    const [icons, setIcons] = useState({});
-    const partnerThemes = {
-      [PARTNERS.SB]: () => import("../../../../partners/sb/icons"),
-      [PARTNERS.CHOPIN]: () => import("../../../../partners/chopin/icons"),
-      [PARTNERS.OTT]: () => import("../../../../partners/ott/icons"),
-      [PARTNERS.SBLEGACY]: () => {},
-    };
-    const partnerIcons = partnerThemes[theme]()?.then(data =>
-      setIcons(data.default),
-    );
-    return (
-      <ThemeProvider
-        icons={{
-          ...baseIcons,
-          ...icons,
-        }}
-      >
-        <Text style={{ marginBottom: "16px" }}>
-          <em>NOTE:</em> when switching between the themes, refresh the page for
-          the icons to update
-        </Text>
-        <div
-          style={{
-            display: "grid",
-            gap: "16px",
-            gridTemplateColumns: "repeat(auto-fill,minmax(150px,1fr))",
-            textAlign: "center",
-            fontFamily:
-              'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
-          }}
-        >
-          <AllIcons />
-        </div>
-      </ThemeProvider>
-    );
-  }}
-</Story>
-
-## Examples
-
-### Normal
-
-<Story name="Normal" args={{ name: "chevronDown" }}>
-  {args => <Icon {...args} />}
-</Story>
-
-<!-- prettier-ignore -->
-```jsx
-import { Icon } from "@simplybusiness/mobius";
-
-<Icon name="chevronDown" />
-```
-
-### Spinning
-
-<Story name="Spinning" args={{ spin: true, name: "loading" }}>
-  {args => <Icon {...args} />}
-</Story>
-
-<!-- prettier-ignore -->
-```jsx
-import { Icon } from "@simplybusiness/mobius";
-
-<Icon name="loading" spin={true} />
-```
-
-## Accessibility
-
-All icons are marked with aria-hidden and should not be used without some form of description outside of the icon. For example:
-
-```jsx
-<Link aria-label="Go back to home" href="/">
-  <Icon name="chevronLeft" title="Go back" />
-</Link>
-```
-
-## Props
-
-<ArgsTable of={Icon} />
-
-## Component HTML Structure and Class names
-
-The following HTML is rendered for an Icon:
-
-```html
-<svg class="mobius/Icon" focusable="false" role="img">
-  <g ... />
-</svg>
-```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Icon) | [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.story.mdx

@@ -1,96 +0,0 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
-import { LinkButton } from "./LinkButton";
-import { excludeControls } from "../../utils/excludeControls";
-
-<Meta
-  title="Components/LinkButton"
-  component={LinkButton}
-  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",
-    },
-    icon: {
-      options: ["menu", "rightArrow", "leftArrow", "dropdown", "home"],
-      control: "radio",
-    },
-    iconPosition: {
-      if: {
-        arg: "icon",
-      },
-    },
-    ...excludeControls(
-      "children",
-      "className",
-      "elementType",
-      "style",
-      "onClick",
-    ),
-  }}
-/>
-
-# 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
-    name="Normal"
-    args={{
-      href: "https://www.google.com",
-      to: "",
-      title: "",
-      size: "medium",
-      download: false,
-      isDisabled: false,
-      isSuccess: false,
-      isLoading: false,
-    }}
-  >
-    {args => <LinkButton {...args}>LinkButton text</LinkButton>}
-  </Story>
-</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/LoadingIndicator/LoadingIndicator.story.mdx

@@ -1,96 +0,0 @@
-import { useContext } from "react";
-import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
-import { LoadingIndicator } from "./LoadingIndicator";
-import { excludeControls } from "../../utils/excludeControls";
-
-<Meta
-  title="Components/LoadingIndicator"
-  component={LoadingIndicator}
-  argTypes={{
-    icon: {
-      options: ["loading", "refreshArrow", "home"],
-      control: "radio",
-    },
-    color: {
-      options: ["darkcyan", "deeppink", "royalblue", "tomato"],
-      control: "radio",
-    },
-    fontSize: {
-      options: ["72px", "48px", "24px"],
-      control: "radio",
-    },
-    ...excludeControls("className"),
-  }}
-/>
-
-# 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
-  name="Normal"
-  args={{ icon: "loading", fontSize: "24px", color: "darkcyan" }}
->
-  {args => <LoadingIndicator {...args} />}
-</Story>
-
-### Large
-
-<Story
-  name="Large"
-  args={{ icon: "loading", fontSize: "72px", color: "darkcyan" }}
->
-  {args => <LoadingIndicator {...args} />}
-</Story>
-
-### With Custom Colour
-
-<Story
-  name="With Custom Colour"
-  args={{ icon: "loading", fontSize: "24px", color: "darkcyan" }}
->
-  {args => <LoadingIndicator {...args} />}
-</Story>
-
-### With Custom Icon
-
-<Story
-  name="With Custom Icon"
-  args={{ icon: "refreshArrow", fontSize: "24px", color: "darkcyan" }}
->
-  {args => <LoadingIndicator {...args} />}
-</Story>
-
-## 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/NumberField/NumberField.story.mdx

@@ -1,193 +0,0 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
-import { NumberField, NumberFieldProps } from "./NumberField";
-import { excludeControls } from "../../utils/excludeControls";
-
-<Meta
-  title="Forms/NumberField"
-  component={NumberField}
-  argTypes={{
-    validationState: {
-      control: {
-        type: "radio",
-        options: {
-          valid: "valid",
-          invalid: "invalid",
-          neither: "",
-        },
-        defaultValue: {
-          neither: "",
-        },
-      },
-    },
-    ...excludeControls("className", "value", "aria-describedby"),
-  }}
-/>
-
-# NumberField
-
-The `NumberField` component is used for creating a numeric input field. It can be customised by providing any of the valid
-[Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options)
-options as the `formatOptions` prop.
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { NumberField } from "@simplybusiness/mobius";
-```
-
-## Normal
-
-<Canvas>
-  <Story
-    name="Normal"
-    args={{
-      label: "Number field",
-      defaultValue: 0,
-      errorMessage: "",
-      step: 1,
-    }}
-  >
-    {args => <NumberField {...args} />}
-  </Story>
-</Canvas>
-
-## Formatted
-
-<Canvas>
-  <Story
-    name="Formatted"
-    args={{
-      label: "Number field",
-      validationState: "",
-      defaultValue: 0,
-      formatOptions: {
-        style: "percent",
-      },
-      errorMessage: "",
-      step: 1,
-    }}
-  >
-    {args => <NumberField {...args} />}
-  </Story>
-</Canvas>
-
-## Limited range
-
-<Canvas>
-  <Story
-    name="Limited range"
-    args={{
-      label: "Number field",
-      validationState: "",
-      minValue: -10,
-      maxValue: 10,
-      defaultValue: 0,
-      errorMessage: "",
-      step: 1,
-    }}
-  >
-    {args => <NumberField {...args} />}
-  </Story>
-</Canvas>
-
-## Valid
-
-<Canvas>
-  <Story
-    name="Valid"
-    args={{
-      label: "Number field",
-      validationState: "valid",
-      defaultValue: 0,
-      errorMessage: "",
-      step: 1,
-    }}
-  >
-    {args => <NumberField {...args} />}
-  </Story>
-</Canvas>
-
-## Valid
-
-<Canvas>
-  <Story
-    name="Invalid"
-    args={{
-      label: "Number field",
-      validationState: "invalid",
-      errorMessage: "Error message",
-      defaultValue: 0,
-      step: 1,
-    }}
-  >
-    {args => <NumberField {...args} />}
-  </Story>
-</Canvas>
-
-## Disabled
-
-<Canvas>
-  <Story
-    name="Disabled"
-    args={{
-      label: "Number field",
-      validationState: "",
-      isDisabled: true,
-      defaultValue: 0,
-      errorMessage: "",
-      step: 1,
-    }}
-  >
-    {args => <NumberField {...args} />}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable of={NumberField} />
-
-## Component HTML Structure and Class names
-
-The following HTML is rendered for a NumberField:
-
-```html
-<div class="mobius/NumberField">
-  <label class="mobius mobius/Label mobius/NumberFieldLabel">Label</label>
-  <div class="mobius/NumberFieldInputGroup">
-    <input class="mobius/NumberFieldInput" />
-    <button class="mobius/NumberFieldButton mobius/NumberFieldButtonPlus">
-      +
-    </button>
-    <button
-      type="button"
-      class="mobius/NumberFieldButton mobius/NumberFieldButtonMinus"
-      tabindex="-1"
-      aria-label="Decrease Number field"
-      aria-controls="react-aria7586995458-316"
-    >
-      -
-    </button>
-  </div>
-  <div class="mobius/ErrorMessage">Error message</div>
-</div>
-```
-
-Class names are augmented with the following flags if true:
-
-- --is-disabled
-- --is-hovered
-- --is-focused
-- --is-valid
-- --is-invalid
-- --is-required
-- --is-optional
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/NumberField) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)