@simplybusiness/mobius 3.7.1 → 3.9.0

package/src/components/Progress/Progress.story.mdx

@@ -1,172 +0,0 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
-import { Progress, ProgressProps } from "./Progress";
-import { excludeControls } from "../../utils/excludeControls";
-
-<Meta
-  title="Components/Progress"
-  component={Progress}
-  argTypes={{
-    value: {
-      control: {
-        type: "range",
-        min: 0,
-        max: 10,
-        step: 1,
-      },
-    },
-    minValue: {
-      control: {
-        type: "range",
-        min: 0,
-        max: 10,
-        step: 1,
-      },
-    },
-    maxValue: {
-      control: {
-        type: "range",
-        min: 0,
-        max: 10,
-        step: 1,
-      },
-    },
-    label: {
-      control: {
-        type: "text",
-      },
-    },
-    variant: {
-      control: "radio",
-      options: ["primary", "secondary"],
-    },
-    ...excludeControls("className", "valueFormatter"),
-  }}
-/>
-
-# Progress
-
-Progress bars allow users to see how far along a task or workflow is. For
-example, what step they are on in a multi-step form.
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { Progress } from "@simplybusiness/mobius";
-```
-
-## Primary
-
-<Canvas>
-  <Story
-    name="Primary"
-    args={{
-      value: 2,
-      minValue: 0,
-      maxValue: 10,
-      label: "Progress",
-      variant: "primary",
-      showValueLabel: true,
-    }}
-  >
-    {args => <Progress {...args} />}
-  </Story>
-</Canvas>
-
-## Secondary
-
-<Canvas>
-  <Story
-    name="Secondary"
-    args={{
-      value: 2,
-      minValue: 0,
-      maxValue: 10,
-      label: "Secondary",
-      variant: "secondary",
-      showValueLabel: true,
-    }}
-  >
-    {args => <Progress {...args} />}
-  </Story>
-</Canvas>
-
-## No Visible Label
-
-<Canvas>
-  <Story
-    name="No Visible Label"
-    args={{
-      value: 1,
-      minValue: 0,
-      maxValue: 4,
-      label: "",
-      variant: "primary",
-      "aria-label": "Progress",
-      showValueLabel: true,
-    }}
-    parameters={{ controls: { exclude: ["aria-label"] } }}
-  >
-    {args => <Progress {...args} />}
-  </Story>
-</Canvas>
-
-## Custom value format
-
-export const customValueFormatter = (value, minValue, maxValue) =>
-  `Step ${value} of ${maxValue}`;
-
-<Canvas>
-  <Story
-    name="Custom Value Format"
-    args={{
-      value: 1,
-      minValue: 0,
-      maxValue: 4,
-      label: "Progress",
-      variant: "primary",
-      showValueLabel: true,
-      valueFormatter: customValueFormatter,
-    }}
-  >
-    {args => <Progress {...args} />}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable of={Progress} />
-
-## Component HTML Structure and Class names
-
-The following HTML is rendered for a Progress:
-
-```html
-<div
-  id="react-aria123"
-  aria-labelledby="react-aria456"
-  aria-valuenow="2"
-  aria-valuemin="0"
-  aria-valuemax="10"
-  aria-valuetext="20%"
-  role="progressbar"
-  class="mobius mobius/Progress --is-primary"
->
-  <label class="mobius mobius/Label mobius/ProgressLabel" id="react-aria456"
-    >Primary</label
-  >
-  <div class="mobius/ProgressTrack">
-    <div class="mobius/ProgressBar css-ufscxh"></div>
-  </div>
-  <label class="mobius mobius/Label">20%</label>
-</div>
-```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Progress) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Radio/Radio.story.mdx

@@ -1,402 +0,0 @@
-import { Fragment, useState } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
-import { Radio } from "./Radio";
-import { RadioGroup } from "./RadioGroup";
-import { Flex } from "../Flex";
-import { Divider } from "../Divider";
-import { Box } from "../Box";
-import { excludeControls } from "../../utils/excludeControls";
-
-<Meta
-  title="Forms/Radio"
-  component={Radio}
-  argTypes={{
-    validationState: {
-      control: {
-        type: "radio",
-        options: {
-          valid: "valid",
-          invalid: "invalid",
-          neither: "",
-        },
-        defaultValue: {
-          neither: "",
-        },
-      },
-    },
-    orientation: {
-      control: "radio",
-      options: ["horizontal", "vertical"],
-    },
-    ...excludeControls("children", "className", "elementType"),
-  }}
-/>
-
-# Radio
-
-Radio is a component for creating radio buttons. It must be contained within a
-`<RadioGroup />` component to handle the ARIA attributes correctly.
-
-It can be used to wrap one or more other components while ensuring consistency with the current theme.
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { Radio, RadioGroup } from "@simplybusiness/mobius";
-```
-
-## Examples
-
-### Normal
-
-For a radio to appear selected use `value` prop which expects a string.
-
-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",
-      isDisabled: false,
-      errorMessage: "",
-      validationState: "",
-      orientation: "vertical",
-      defaultValue: "blue",
-    }}
-  >
-    {args => (
-      <RadioGroup {...args}>
-        <Radio value="red" label="Red" />
-        <Radio value="blue" label="Blue" />
-      </RadioGroup>
-    )}
-  </Story>
-</Canvas>
-
-### Controlled Value
-
-You may want a radio to appear selected based on some conditional logic in another component.
-
-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",
-      isDisabled: false,
-      errorMessage: "",
-      validationState: "",
-      orientation: "vertical",
-      value: "blue",
-    }}
-  >
-    {args => (
-      <RadioGroup {...args}>
-        <Radio value="red" label="Red" />
-        <Radio value="blue" label="Blue" />
-      </RadioGroup>
-    )}
-  </Story>
-</Canvas>
-
-### Disabled
-
-<Canvas>
-  <Story
-    name="Disabled"
-    args={{
-      label: "Color",
-      isDisabled: true,
-      errorMessage: "",
-      validationState: "",
-      orientation: "vertical",
-    }}
-  >
-    {args => (
-      <RadioGroup {...args}>
-        <Radio value="red" label="Red" isDisabled />
-        <Radio value="blue" label="Blue" />
-      </RadioGroup>
-    )}
-  </Story>
-</Canvas>
-
-### Disabled Individual Radios
-
-<Canvas>
-  <Story
-    name="Disabled Individual Radios"
-    args={{
-      label: "Color",
-      isDisabled: false,
-      errorMessage: "",
-      validationState: "",
-      orientation: "vertical",
-    }}
-  >
-    {args => (
-      <RadioGroup {...args}>
-        <Radio value="red" label="Red" isDisabled />
-        <Radio value="blue" label="Blue" />
-      </RadioGroup>
-    )}
-  </Story>
-</Canvas>
-
-### Valid
-
-<Canvas>
-  <Story
-    name="Valid"
-    args={{
-      label: "Color",
-      isDisabled: false,
-      errorMessage: "",
-      validationState: "valid",
-      orientation: "vertical",
-    }}
-  >
-    {args => (
-      <RadioGroup {...args}>
-        <Radio value="red" label="Red" />
-        <Radio value="blue" label="Blue" />
-      </RadioGroup>
-    )}
-  </Story>
-</Canvas>
-
-### Invalid
-
-<Canvas>
-  <Story
-    name="Invalid"
-    args={{
-      label: "Color",
-      isDisabled: false,
-      errorMessage: "Please select a color",
-      validationState: "invalid",
-      orientation: "vertical",
-    }}
-  >
-    {args => (
-      <RadioGroup {...args}>
-        <Radio value="red" label="Red" />
-        <Radio value="blue" label="Blue" />
-      </RadioGroup>
-    )}
-  </Story>
-</Canvas>
-
-### Complex label
-
-<Story
-  name="Complex label"
-  args={{
-    label: "Payment Options",
-    isDisabled: false,
-    errorMessage: "",
-    validationState: "",
-    orientation: "vertical",
-  }}
->
-  {args => (
-    <RadioGroup {...args}>
-      <Radio value="annual" label="Pay annually">
-        <Flex
-          style={{
-            width: "100%",
-            flexDirection: "row",
-            justifyContent: "space-between",
-          }}
-        >
-          <div>To pay today</div>
-          <div>$1265.00</div>
-        </Flex>
-      </Radio>
-      <Radio value="monthly" label="Pay monthly">
-        <Flex
-          style={{
-            width: "100%",
-            flexDirection: "row",
-            justifyContent: "space-between",
-            marginBottom: "var(--size-20)",
-          }}
-        >
-          <div>To pay today</div>
-          <div>$316.25</div>
-        </Flex>
-        <Flex
-          style={{
-            width: "100%",
-            flexDirection: "row",
-            justifyContent: "space-between",
-          }}
-        >
-          <div>10 monthly payments of</div>
-          <div>$94.88</div>
-        </Flex>
-        <Divider />
-        <Flex
-          style={{
-            width: "100%",
-            flexDirection: "row",
-            justifyContent: "space-between",
-          }}
-        >
-          <div>
-            <strong>Total</strong>
-          </div>
-          <div>
-            <strong>$1265.00</strong>
-          </div>
-        </Flex>
-      </Radio>
-    </RadioGroup>
-  )}
-</Story>
-
-```jsx
-<RadioGroup>
-  <Radio value="annual" label="Pay annually">
-    <Flex
-      style={{
-        width: "100%",
-        flexDirection: "row",
-        justifyContent: "space-between",
-      }}
-    >
-      <div>To pay today</div>
-      <div>$1265.00</div>
-    </Flex>
-  </Radio>
-  <Radio value="monthly" label="Pay monthly">
-    <Flex
-      style={{
-        width: "100%",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        marginBottom: "var(--size-20)",
-      }}
-    >
-      <div>To pay today</div>
-      <div>$316.25</div>
-    </Flex>
-    <Flex
-      style={{
-        width: "100%",
-        flexDirection: "row",
-        justifyContent: "space-between",
-      }}
-    >
-      <div>10 monthly payments of</div>
-      <div>$94.88</div>
-    </Flex>
-    <Divider />
-    <Flex
-      style={{
-        width: "100%",
-        flexDirection: "row",
-        justifyContent: "space-between",
-      }}
-    >
-      <div>
-        <strong>Total</strong>
-      </div>
-      <div>
-        <strong>$1265.00</strong>
-      </div>
-    </Flex>
-  </Radio>
-</RadioGroup>
-```
-
-### Horizontal Layout
-
-<Canvas>
-  <Story
-    name="Horizontal Layout"
-    args={{
-      label: "Color",
-      isDisabled: false,
-      errorMessage: "",
-      validationState: "",
-      orientation: "horizontal",
-    }}
-  >
-    {args => (
-      <RadioGroup {...args}>
-        <Radio value="red" label="Red" />
-        <Radio value="blue" label="Blue" />
-      </RadioGroup>
-    )}
-  </Story>
-</Canvas>
-
-## Accessibility
-
-When the `label` prop is not provided, make sure to provide the `aria-label` prop instead. If the radio group is labeled by a separate element, the `aria-labelledby` props must be used with the id of the labeling element.
-
-## Events
-
-The `onChange` prop can be used to listen to changes of the selected radio button. See the prop table for the complete list of events supported.
-
-## Radio Props
-
-<ArgsTable components={{ RadioGroup: RadioGroup, Radio: Radio }} />
-
-## Component HTML Structure and Class names
-
-The following HTML is rendered for a Radio Group:
-
-```html
-<div class="mobius/RadioGroup --is-invalid" role="radiogroup">
-  <label class="mobius/Label --is-invalid"> Color </label>
-  <div class="mobius/RadioWrapper">
-    <label class="mobius/RadioLabel --is-invalid">
-      <span class="mobius/RadioBullet"></span>
-      <input class="mobius/RadioInput" type="radio" value="red" />
-      Red
-    </label>
-    <label class="mobius/RadioLabel --is-invalid">
-      <span class="mobius/RadioBullet"></span>
-      <input class="mobius/RadioInput" type="radio" value="blue" />
-      Blue
-    </label>
-  </div>
-</div>
-```
-
-The span allows for an image overlay to replace the standard radio UX in browsers.
-
-Class names are augmented with the following flags if true (affected classes shown above):
-
-- --is-focused
-- --is-disabled
-- --is-hovered
-- --is-selected
-- --is-valid
-- --is-invalid
-
-Class names for `<RadioGroup />`:
-
-- --is-disabled
-- --is-valid
-- --is-invalid
-- --is-required
-- --is-optional
-- --is-horizontal
-- --is-vertical
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Radio) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Slider/Slider.story.mdx

@@ -1,130 +0,0 @@
-import { Fragment, useState } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
-import { Slider } from "./Slider";
-import { excludeControls } from "../../utils/excludeControls";
-
-<Meta
-  title="Components/Slider"
-  component={Slider}
-  argTypes={{
-    // Note: minValue, maxValue, defaultValue only work with certain settings.
-    // For example, minValue: 0, maxValue: 100, defaultValue: 25 work well, but
-    // minValue: 50, maxValue: 500, defaultValue: 0 break. Hiding these controls
-    // will still allow users to interact with example settings, but without
-    // allowing the user to break the UI.
-    ...excludeControls(
-      "className",
-      "onChange",
-      "onChangeEnd",
-      "formatOptions",
-      "minValue",
-      "maxValue",
-      "defaultValue",
-    ),
-  }}
-/>
-
-# Slider
-
-Slider allows creating a range slider input, with a `minValue`, `maxValue`, and `step`. It also allows providing an optional `minLabel` and `maxLabel`.
-
-The output of the slider can be formatted by providing a `formatOptions` prop, which is an object as documented in [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat#using_options).
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { Slider } from "@simplybusiness/mobius";
-```
-
-## Examples
-
-### Primary
-
-<Canvas>
-  <Story
-    name="Primary"
-    args={{
-      label: "Tools value",
-      minValue: 20,
-      maxValue: 500,
-      defaultValue: 100,
-      variant: "primary",
-      minLabel: "",
-      maxLabel: "",
-      isDisabled: false,
-    }}
-  >
-    {args => <Slider {...args} />}
-  </Story>
-</Canvas>
-
-### Secondary
-
-<Canvas>
-  <Story
-    name="Secondary"
-    args={{
-      label: "Tools value",
-      minValue: 20,
-      maxValue: 500,
-      defaultValue: 100,
-      variant: "secondary",
-      minLabel: "",
-      maxLabel: "",
-      isDisabled: false,
-    }}
-  >
-    {args => <Slider {...args} />}
-  </Story>
-</Canvas>
-
-### No label
-
-<Canvas>
-  <Story
-    name="No Label"
-    args={{
-      label: "",
-      "aria-label": "Tools value",
-      minValue: 20,
-      maxValue: 500,
-      variant: "primary",
-      defaultValue: 100,
-      minLabel: "",
-      maxLabel: "",
-      isDisabled: false,
-    }}
-  >
-    {args => <Slider {...args} />}
-  </Story>
-</Canvas>
-
-### Disabled
-
-<Canvas>
-  <Story
-    name="Disabled"
-    args={{
-      label: "Tools value",
-      minValue: 20,
-      maxValue: 500,
-      variant: "primary",
-      defaultValue: 100,
-      minLabel: "",
-      maxLabel: "",
-      isDisabled: true,
-    }}
-  >
-    {args => <Slider {...args} />}
-  </Story>
-</Canvas>
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Slider) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)