@simplybusiness/mobius 3.8.0 → 3.9.0

package/src/components/Button/Button.mdx

@@ -0,0 +1,227 @@
+import { useState } from "react";
+import { Meta, ArgsTable, Canvas, Source, Story } from "@storybook/blocks";
+import { Button } from "./Button";
+import { excludeControls } from "../../utils/excludeControls";
+import * as ButtonStories from "./Button.stories";
+
+<Meta of={ButtonStories} />
+
+# 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 of={ButtonStories.Normal} />
+</Canvas>
+
+## Secondary
+
+<Canvas>
+  <Story of={ButtonStories.Secondary} />
+</Canvas>
+
+## Ghost
+
+<Canvas>
+  <Story of={ButtonStories.Ghost} />
+</Canvas>
+
+## Basic
+
+<Canvas>
+  <Story of={ButtonStories.Basic} />
+</Canvas>
+
+## Large
+
+<Canvas>
+  <Story of={ButtonStories.Large} />
+</Canvas>
+
+## Link
+
+<Canvas>
+  <Story of={ButtonStories.Link} />
+</Canvas>
+
+## Loading
+
+<Canvas>
+  <Story of={ButtonStories.Loading} />
+</Canvas>
+
+## Success
+
+<Canvas>
+  <Story of={ButtonStories.Success} />
+</Canvas>
+
+## Disabled
+
+<Canvas>
+  <Story of={ButtonStories.Disabled} />
+</Canvas>
+
+## With Icon
+
+<Canvas>
+  <Story of={ButtonStories.WithIcon} />
+</Canvas>
+
+## Themed
+
+<Story of={ButtonStories.Themed} />
+
+{/* 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/Button/Button.stories.tsx

@@ -0,0 +1,225 @@
+import type { Meta } from "@storybook/react";
+import { Button, ButtonProps } from "./Button";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Components/Button",
+  component: Button,
+  argTypes: {
+    icon: {
+      options: ["", "menu", "rightArrow", "leftArrow", "dropdown", "home"],
+      control: { type: "select" },
+    },
+    iconPosition: {
+      if: {
+        arg: "icon",
+      },
+    },
+    isLoading: {
+      if: {
+        arg: "isSuccess",
+        truthy: false,
+      },
+    },
+    isSuccess: {
+      if: {
+        arg: "isLoading",
+        truthy: false,
+      },
+    },
+    href: {
+      if: {
+        arg: "elementType",
+        eq: "a",
+      },
+    },
+    rel: {
+      if: {
+        arg: "elementType",
+        eq: "a",
+      },
+    },
+    target: {
+      if: {
+        arg: "elementType",
+        eq: "a",
+      },
+    },
+    type: {
+      if: {
+        arg: "elementType",
+        neq: "a",
+      },
+    },
+    ...excludeControls(
+      "className",
+      "onClick",
+      "elementType",
+      "onPress",
+      "role",
+    ),
+  },
+};
+
+export const Normal: Meta<typeof Button> = {
+  render: (args: ButtonProps) => <Button {...args} />,
+  args: {
+    children: "Confirm",
+    variant: "primary",
+    size: "medium",
+    isDisabled: false,
+    isLoading: false,
+    isSuccess: false,
+    type: "button",
+  },
+};
+
+export const Secondary: Meta<typeof Button> = {
+  render: (args: ButtonProps) => <Button {...args} />,
+  args: {
+    variant: "secondary",
+    size: "medium",
+    children: "Secondary Button",
+    isDisabled: false,
+    isLoading: false,
+    isSuccess: false,
+    type: "button",
+  },
+};
+
+export const Ghost: Meta<typeof Button> = {
+  render: (args: ButtonProps) => <Button {...args} />,
+  args: {
+    variant: "ghost",
+    size: "medium",
+    children: "Ghost Button",
+    isDisabled: false,
+    isLoading: false,
+    isSuccess: false,
+    type: "button",
+  },
+};
+
+export const Basic: Meta<typeof Button> = {
+  render: (args: ButtonProps) => <Button {...args} />,
+  args: {
+    variant: "basic",
+    size: "medium",
+    children: "Basic Button",
+    isDisabled: false,
+    isLoading: false,
+    isSuccess: false,
+    type: "button",
+  },
+};
+
+export const Large: Meta<typeof Button> = {
+  render: (args: ButtonProps) => <Button {...args} />,
+  args: {
+    children: "Large Button",
+    variant: "primary",
+    size: "large",
+    isDisabled: false,
+    isLoading: false,
+    isSuccess: false,
+    type: "button",
+  },
+};
+
+export const Link: Meta<typeof Button> = {
+  render: (args: ButtonProps) => <Button {...args} />,
+  args: {
+    children: "Link Button",
+    elementType: "a",
+    variant: "primary",
+    size: "medium",
+    isDisabled: false,
+    isLoading: false,
+    isSuccess: false,
+    href: "",
+    rel: "",
+    target: "",
+  },
+};
+
+export const Loading: Meta<typeof Button> = {
+  render: (args: ButtonProps) => <Button {...args} />,
+  args: {
+    children: "Loading",
+    variant: "primary",
+    size: "medium",
+    isDisabled: false,
+    isLoading: true,
+    isSuccess: false,
+    type: "button",
+  },
+  parameters: {
+    controls: {
+      exclude: ["icon", "iconPosition"],
+    },
+  },
+};
+
+export const Success: Meta<typeof Button> = {
+  render: (args: ButtonProps) => <Button {...args} />,
+  args: {
+    children: "Success",
+    variant: "primary",
+    size: "medium",
+    isDisabled: false,
+    isLoading: false,
+    isSuccess: true,
+    type: "button",
+  },
+  parameters: {
+    controls: {
+      exclude: ["icon", "iconPosition"],
+    },
+  },
+};
+
+export const Disabled: Meta<typeof Button> = {
+  render: (args: ButtonProps) => <Button {...args} />,
+  args: {
+    children: "Disabled",
+    variant: "primary",
+    size: "medium",
+    isDisabled: true,
+    isLoading: false,
+    isSuccess: false,
+    type: "button",
+  },
+};
+
+export const WithIcon: Meta<typeof Button> = {
+  render: (args: ButtonProps) => <Button {...args} />,
+  args: {
+    children: "Menu",
+    variant: "primary",
+    size: "medium",
+    icon: "menu",
+    iconPosition: "right",
+    isDisabled: false,
+    isLoading: false,
+    isSuccess: false,
+    type: "button",
+  },
+};
+
+export const Themed: Meta<typeof Button> = {
+  render: (args: ButtonProps) => {
+    // eslint-disable-next-line global-require
+    require("./Button.story.styles.css");
+    return <Button {...args} />;
+  },
+  args: {
+    children: "Confirm",
+    variant: "primary",
+    size: "medium",
+    isDisabled: false,
+    isLoading: false,
+    isSuccess: false,
+    className: "button-example-with-theme",
+    type: "button",
+  },
+};

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

@@ -0,0 +1,3 @@
+.button-example-with-theme.mobius\/Button {
+  background-color: darkred;
+}

package/src/components/Checkbox/Checkbox.mdx

@@ -0,0 +1,122 @@
+import { useState } from "react";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Checkbox } from "./Checkbox";
+import { Box } from "../Box";
+import { excludeControls } from "../../utils/excludeControls";
+import * as CheckboxStories from "./Checkbox.stories";
+
+<Meta of={CheckboxStories} />
+
+# 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 of={CheckboxStories.Normal} />
+</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 of={CheckboxStories.ControlledValue} />
+</Canvas>
+
+### Disabled
+
+<Canvas>
+  <Story of={CheckboxStories.Disabled} />
+</Canvas>
+
+### Indeterminate
+
+<Canvas>
+  <Story of={CheckboxStories.Indeterminate} />
+</Canvas>
+
+### Valid
+
+<Canvas>
+  <Story of={CheckboxStories.Valid} />
+</Canvas>
+
+### Invalid
+
+<Canvas>
+  <Story of={CheckboxStories.Invalid} />
+</Canvas>
+
+### Long label
+
+<Canvas>
+  <Story of={CheckboxStories.LongLabel} />
+</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)

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,122 @@
+import type { Meta } from "@storybook/react";
+import { Checkbox, CheckboxProps } from ".";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Forms/Checkbox",
+  component: Checkbox,
+  argTypes: {
+    validationState: {
+      options: ["valid", "invalid", "neither"],
+      control: { type: "radio" },
+      mapping: {
+        valid: "valid",
+        invalid: "invalid",
+        neither: "",
+      },
+    },
+    label: {
+      control: { type: "text" },
+    },
+    ...excludeControls("className"),
+  },
+};
+
+export const Normal: Meta<typeof Checkbox> = {
+  render: (args: CheckboxProps) => <Checkbox {...args} />,
+  args: {
+    label: "Value",
+    isDisabled: false,
+    isIndeterminate: false,
+    errorMessage: "",
+    defaultSelected: false,
+    isRequired: false,
+  },
+};
+
+export const ControlledValue: Meta<typeof Checkbox> = {
+  render: (args: CheckboxProps) => <Checkbox {...args} />,
+  args: {
+    label: "Value",
+    isDisabled: false,
+    isIndeterminate: false,
+    errorMessage: "",
+    isSelected: true,
+    isRequired: false,
+  },
+};
+
+export const Disabled: Meta<typeof Checkbox> = {
+  render: (args: CheckboxProps) => <Checkbox {...args} />,
+  args: {
+    label: "Value",
+    isDisabled: true,
+    isIndeterminate: false,
+    errorMessage: "",
+    defaultSelected: false,
+    isRequired: false,
+  },
+};
+
+export const Indeterminate: Meta<typeof Checkbox> = {
+  render: (args: CheckboxProps) => <Checkbox {...args} />,
+  args: {
+    label: "Value",
+    isDisabled: false,
+    isIndeterminate: true,
+    errorMessage: "",
+    defaultSelected: false,
+    isRequired: false,
+  },
+};
+
+export const Valid: Meta<typeof Checkbox> = {
+  render: (args: CheckboxProps) => <Checkbox {...args} />,
+  args: {
+    label: "Value",
+    isDisabled: false,
+    isIndeterminate: false,
+    errorMessage: "",
+    validationState: "valid",
+    defaultSelected: false,
+    isRequired: false,
+  },
+};
+
+export const Invalid: Meta<typeof Checkbox> = {
+  render: (args: CheckboxProps) => <Checkbox {...args} />,
+  args: {
+    label: "Value",
+    isDisabled: false,
+    isIndeterminate: false,
+    validationState: "invalid",
+    errorMessage: "This is an error message",
+    defaultSelected: false,
+    isRequired: false,
+  },
+};
+
+export const LongLabel: Meta<typeof Checkbox> = {
+  render: (args: CheckboxProps) => <Checkbox {...args} />,
+  args: {
+    label: (
+      <>
+        Example
+        <br />
+        of
+        <br />
+        long
+        <br />
+        label
+        <br />
+        text
+        <br />
+      </>
+    ),
+    isDisabled: false,
+    isIndeterminate: false,
+    errorMessage: "",
+    defaultSelected: false,
+    isRequired: false,
+  },
+};