@simplybusiness/mobius 3.8.0 → 3.9.0

package/src/components/Button/Button.story.mdx

@@ -1,401 +0,0 @@
-import { useState } from "react";
-import { Meta, ArgsTable, Canvas, Source, Story } from "@storybook/addon-docs";
-import { Button } from "./Button";
-import { excludeControls } from "../../utils/excludeControls";
-
-<Meta
-  title="Components/Button"
-  component={Button}
-  argTypes={{
-    icon: {
-      options: ["", "menu", "rightArrow", "leftArrow", "dropdown", "home"],
-      control: "select",
-    },
-    iconPosition: {
-      if: {
-        arg: "icon",
-      },
-    },
-    isLoading: {
-      if: {
-        arg: "isSuccess",
-        truthy: false,
-      },
-    },
-    isSuccess: {
-      if: {
-        arg: "isLoading",
-        truthy: false,
-      },
-    },
-    ...excludeControls("className", "onClick", "elementType"),
-  }}
-/>
-
-# Button
-
-Buttons allow users to perform actions like submitting form or move forward in a flow.
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { Button } from "@simplybusiness/mobius";
-```
-
-## Examples
-
-## Normal
-
-<Canvas>
-  <Story
-    name="Normal"
-    args={{
-      children: "Confirm",
-      variant: "primary",
-      size: "medium",
-      icon: "",
-      isDisabled: false,
-      isLoading: false,
-      isSuccess: false,
-    }}
-  >
-    {args => <Button {...args} />}
-  </Story>
-</Canvas>
-
-## Secondary
-
-<Canvas>
-  <Story
-    name="Secondary"
-    args={{
-      variant: "secondary",
-      size: "medium",
-      children: "Secondary Button",
-      icon: "",
-      isDisabled: false,
-      isLoading: false,
-      isSuccess: false,
-    }}
-  >
-    {args => <Button {...args} />}
-  </Story>
-</Canvas>
-
-## Ghost
-
-<Canvas>
-  <Story
-    name="Ghost"
-    args={{
-      variant: "ghost",
-      size: "medium",
-      children: "Ghost Button",
-      icon: "",
-      isDisabled: false,
-      isLoading: false,
-      isSuccess: false,
-    }}
-  >
-    {args => <Button {...args} />}
-  </Story>
-</Canvas>
-
-## Basic
-
-<Canvas>
-  <Story
-    name="Basic"
-    args={{
-      variant: "basic",
-      size: "medium",
-      children: "Basic Button",
-      icon: "",
-      isDisabled: false,
-      isLoading: false,
-      isSuccess: false,
-    }}
-  >
-    {args => <Button {...args} />}
-  </Story>
-</Canvas>
-
-## Large
-
-<Canvas>
-  <Story
-    name="Large"
-    args={{
-      children: "Large Button",
-      variant: "primary",
-      size: "large",
-      icon: "",
-      isDisabled: false,
-      isLoading: false,
-      isSuccess: false,
-    }}
-  >
-    {args => <Button {...args} />}
-  </Story>
-</Canvas>
-
-## Link
-
-<Canvas>
-  <Story
-    name="Link"
-    args={{
-      children: "Link Button",
-      elementType: "a",
-      variant: "primary",
-      size: "medium",
-      icon: "",
-      isDisabled: false,
-      isLoading: false,
-      isSuccess: false,
-    }}
-  >
-    {args => <Button {...args} />}
-  </Story>
-</Canvas>
-
-## Loading
-
-<Canvas>
-  <Story
-    name="Loading"
-    args={{
-      children: "Loading",
-      variant: "primary",
-      size: "medium",
-      icon: "",
-      isDisabled: false,
-      isLoading: true,
-      isSuccess: false,
-    }}
-    parameters={{ controls: { exclude: ["icon", "iconPosition"] } }}
-  >
-    {args => <Button {...args} />}
-  </Story>
-</Canvas>
-
-## Success
-
-<Canvas>
-  <Story
-    name="Success"
-    args={{
-      children: "Success",
-      variant: "primary",
-      size: "medium",
-      icon: "",
-      isDisabled: false,
-      isLoading: false,
-      isSuccess: true,
-    }}
-    parameters={{ controls: { exclude: ["icon", "iconPosition"] } }}
-  >
-    {args => <Button {...args} />}
-  </Story>
-</Canvas>
-
-## Disabled
-
-<Canvas>
-  <Story
-    name="Disabled"
-    args={{
-      children: "Disabled",
-      variant: "primary",
-      size: "medium",
-      icon: "",
-      isDisabled: true,
-      isLoading: false,
-      isSuccess: false,
-    }}
-  >
-    {args => <Button {...args} />}
-  </Story>
-</Canvas>
-
-## With Icon
-
-<Canvas>
-  <Story
-    name="With Icon"
-    args={{
-      children: "Menu",
-      variant: "primary",
-      size: "medium",
-      icon: "menu",
-      iconPosition: "right",
-      isDisabled: false,
-      isLoading: false,
-      isSuccess: false,
-    }}
-  >
-    {args => <Button {...args} />}
-  </Story>
-</Canvas>
-
-## Themed
-
-<Story
-  name="Themed"
-  args={{
-    children: "Confirm",
-    variant: "primary",
-    size: "medium",
-    icon: "",
-    isDisabled: false,
-    isLoading: false,
-    isSuccess: false,
-    style: { backgroundColor: "red" },
-  }}
->
-  {args => <Button {...args} />}
-</Story>
-
-<!-- prettier-ignore -->
-```jsx
-import { Button } from "@simplybusiness/mobius";
-import styled from "@emotion/styled";
-
-const StyledButton = styled(Button)`
-  background-color: red;
-`;
-
-<StyledButton>Sample Text</StyledButton>
-```
-
-## Accessibility
-
-When the button contains no text content (eg. when it only shows an icon), a value must be provided to the `aria-label` prop.
-
-## Events
-
-Button can be interacted with via keyboard, mouse and touch gestures. All these interactions are handled by the `onPress` prop.
-
-export const Counter = () => {
-  let [count, setCount] = useState(0);
-  return (
-    <Button onPress={() => setCount(c => c + 1)}>Pressed {count} times</Button>
-  );
-};
-
-```tsx
-const Counter = () => {
-  let [count, setCount] = useState(0);
-  return (
-    <Button onPress={() => setCount(c => c + 1)}>Pressed {count} times</Button>
-  );
-};
-```
-
-<Canvas withSource="none">
-  <Counter />
-</Canvas>
-
-export const PressButton = () => {
-  let [pressLogs, setPressLogs] = useState([]);
-  const log = e => {
-    setPressLogs(pressLogs => [...pressLogs.slice(-5), e]);
-  };
-  return (
-    <div>
-      <Button
-        onPressUp={() => log("onPressUp")}
-        onPressEnd={() => log("onPressEnd")}
-        onPress={() => log("onPress")}
-        onPressStart={() => log("onPressStart")}
-      >
-        Press me
-      </Button>
-      <ul>
-        {pressLogs.map((pressLog, i) => (
-          <li key={i}>{pressLog}</li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-```tsx
-const PressButton = () => {
-  let [pressLogs, setPressLogs] = useState([]);
-  const log = e => {
-    setPressLogs(pressLogs => [...pressLogs.slice(-5), e]);
-  };
-  return (
-    <div>
-      <Button
-        onPressUp={() => log("onPressUp")}
-        onPressEnd={() => log("onPressEnd")}
-        onPress={() => log("onPress")}
-        onPressStart={() => log("onPressStart")}
-      >
-        Press me
-      </Button>
-      <ul>
-        {pressLogs.map((pressLog, i) => (
-          <li key={i}>{pressLog}</li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-```
-
-<Canvas withSource="none">
-  <PressButton />
-</Canvas>
-
-## Props
-
-<ArgsTable of={Button} />
-
-## Component HTML Structure and Class names
-
-The following example HTML is rendered for a Text Button:
-
-```html
-<button class="mobius/Button --variant-primary --size-medium">Text</button>
-```
-
-And this for an Icon Button:
-
-```html
-<button class="mobius/Button --variant-primary --size-medium">
-  <div class="mobius/ButtonIconWrapper">
-    <svg class="mobius/Icon" role="img" focusable="false">(icon)</svg>
-  </div>
-</button>
-```
-
-Class names are augmented with the following flags if true:
-
-- --has-icon
-- --is-disabled
-- --is-hovered
-- --is-loading
-- --is-success
-- --is-focus-visible
-- --size-small
-- --size-medium
-- --size-large
-- --variant-primary
-- --variant-secondary
-- --variant-ghost
-- --variant-inverse
-- --variant-inverse-ghost
-- --variant-basic
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Button) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Checkbox/Checkbox.story.mdx

@@ -1,233 +0,0 @@
-import { useState } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
-import { Checkbox } from "./Checkbox";
-import { Box } from "../Box";
-import { excludeControls } from "../../utils/excludeControls";
-
-<Meta
-  title="Forms/Checkbox"
-  component={Checkbox}
-  argTypes={{
-    validationState: {
-      control: {
-        type: "radio",
-        options: {
-          valid: "valid",
-          invalid: "invalid",
-          neither: "",
-        },
-        defaultValue: {
-          neither: "",
-        },
-      },
-    },
-    ...excludeControls("className"),
-  }}
-/>
-
-# Checkbox
-
-Checkbox allows a user to select one or more options from a list.
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { Checkbox } from "@simplybusiness/mobius";
-```
-
-## Examples
-
-### Normal
-
-For this component appear selected use `defaultSelected` boolean prop.
-
-This will allow user to change the value. Alternatively, see _Controlled Value_ example.
-
-<Canvas>
-  <Story
-    name="Normal"
-    args={{
-      label: "Value",
-      isDisabled: false,
-      isIndeterminate: false,
-      errorMessage: "",
-      defaultSelected: false,
-    }}
-  >
-    {args => <Checkbox {...args} />}
-  </Story>
-</Canvas>
-
-### Controlled Value
-
-You may want to make this component appear selected based on some conditional
-
-logic in another component. In this instance you can pass `isSelected` boolean prop.
-
-<Canvas>
-  <Story
-    name="Controlled Value"
-    args={{
-      label: "Value",
-      isDisabled: false,
-      isIndeterminate: false,
-      errorMessage: "",
-      isSelected: true,
-    }}
-  >
-    {args => <Checkbox {...args} />}
-  </Story>
-</Canvas>
-
-### Disabled
-
-<Canvas>
-  <Story
-    name="Disabled"
-    args={{
-      label: "Value",
-      isDisabled: true,
-      isIndeterminate: false,
-      errorMessage: "",
-      defaultSelected: false,
-    }}
-  >
-    {args => <Checkbox {...args} />}
-  </Story>
-</Canvas>
-
-### Indeterminate
-
-<Canvas>
-  <Story
-    name="Indeterminate"
-    args={{
-      label: "Value",
-      isDisabled: false,
-      isIndeterminate: true,
-      errorMessage: "",
-      defaultSelected: false,
-    }}
-  >
-    {args => <Checkbox {...args} />}
-  </Story>
-</Canvas>
-
-### Valid
-
-<Canvas>
-  <Story
-    name="Valid"
-    args={{
-      label: "Value",
-      isDisabled: false,
-      isIndeterminate: false,
-      errorMessage: "",
-      validationState: "valid",
-      defaultSelected: false,
-    }}
-  >
-    {args => <Checkbox {...args} />}
-  </Story>
-</Canvas>
-
-### Invalid
-
-<Canvas>
-  <Story
-    name="Invalid"
-    args={{
-      label: "Value",
-      isDisabled: false,
-      isIndeterminate: false,
-      validationState: "invalid",
-      errorMessage: "This is an error message",
-      defaultSelected: false,
-    }}
-  >
-    {args => <Checkbox {...args} />}
-  </Story>
-</Canvas>
-
-### Long label
-
-<Canvas>
-  <Story
-    name="Long label"
-    args={{
-      label: (
-        <>
-          Example
-          <br />
-          of
-          <br />
-          long
-          <br />
-          label
-          <br />
-          text
-          <br />
-        </>
-      ),
-      isDisabled: false,
-      isIndeterminate: false,
-      validationState: "",
-      errorMessage: "",
-      defaultSelected: false,
-    }}
-  >
-    {args => <Checkbox {...args} />}
-  </Story>
-</Canvas>
-
-## Accessibility
-
-When the `label` prop is not provided, make sure to provide the `aria-label` prop instead. If the checkbox 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 state of the checkbox. See the prop table for the complete list of events supported.
-
-## Props
-
-<ArgsTable of={Checkbox} />
-
-## Component HTML Structure and Class names
-
-The following example HTML is rendered for a Checkbox:
-
-```html
-<div>
-  <label class="mobius/Checkbox --is-invalid" label="Checkbox">
-    <input class="mobius/CheckboxInput --is-invalid" />
-    <div class="mobius/CheckboxIcon --is-invalid"></div>
-    <span class="mobius/CheckboxLabel">Checkbox</span>
-  </label>
-  <div class="mobius/ErrorMessage">
-    <span class="mobius/ErrorIcon"></span>
-    <span class="mobius/Text span mobius/ErrorText"> There is a problem </span>
-  </div>
-</div>
-```
-
-Class names are augmented with the following flags if true:
-
-- --is-focused
-- --is-disabled
-- --is-indeterminate
-- --is-hovered
-- --is-selected
-- --is-valid
-- --is-invalid
-- --is-required
-- --is-optional
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Checkbox) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)