@simplybusiness/mobius 3.8.0 → 3.9.0

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

@@ -1,38 +1,11 @@
 import { useState } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { PasswordField } from "./PasswordField";
 import { Label, Segment, SegmentGroup } from "..";
 import { excludeControls } from "../../utils/excludeControls";
+import * as PasswordFieldStories from "./PasswordField.stories";
 
-<Meta
-  title="Forms/PasswordField"
-  component={PasswordField}
-  argTypes={{
-    validationState: {
-      control: {
-        type: "radio",
-        options: {
-          valid: "valid",
-          invalid: "invalid",
-          neither: "",
-        },
-        defaultValue: {
-          neither: "",
-        },
-      },
-    },
-    type: {
-      control: {
-        type: "radio",
-        options: {
-          text: "text",
-          password: "password",
-        },
-      },
-    },
-    ...excludeControls("className"),
-  }}
-/>
+<Meta of={PasswordFieldStories} />
 
 # PasswordField
 
@@ -55,19 +28,7 @@ import { PasswordField } from "@simplybusiness/mobius";
 ### Normal
 
 <Canvas>
-  <Story
-    name="Normal"
-    args={{
-      label: "Password",
-      placeholder: "",
-      isDisabled: false,
-      validationState: "",
-      errorMessage: "",
-      type: "password",
-    }}
-  >
-    {args => <PasswordField {...args}></PasswordField>}
-  </Story>
+  <Story of={PasswordFieldStories.Normal} />
 </Canvas>
 
 ## Accessibility
@@ -97,12 +58,12 @@ The following HTML is rendered for a PasswordField:
 
 Class names are augmented with the following flags if true:
 
-- --is-focused
-- --is-disabled
-- --is-hovered
-- --is-selected
-- --is-valid
-- --is-invalid
+- \--is-focused
+- \--is-disabled
+- \--is-hovered
+- \--is-selected
+- \--is-valid
+- \--is-invalid
 
 ---
 

package/src/components/PasswordField/PasswordField.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta } from "@storybook/react";
+import { PasswordField, PasswordFieldProps } from "./PasswordField";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Forms/PasswordField",
+  component: PasswordField,
+  argTypes: {
+    validationState: {
+      options: ["valid", "invalid", "neither"],
+      control: { type: "radio" },
+      mapping: {
+        valid: "valid",
+        invalid: "invalid",
+        neither: "",
+      },
+    },
+    type: {
+      control: { type: "radio" },
+      options: ["text", "password"],
+    },
+    ...excludeControls("className"),
+  },
+};
+
+export const Normal: Meta<typeof PasswordField> = {
+  render: (args: PasswordFieldProps) => <PasswordField {...args} />,
+  args: {
+    label: "Password",
+    placeholder: "",
+    isDisabled: false,
+    errorMessage: "",
+    type: "password",
+    isRequired: false,
+  },
+};

package/src/components/Progress/Progress.mdx

@@ -0,0 +1,83 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Progress, ProgressProps } from "./Progress";
+import { excludeControls } from "../../utils/excludeControls";
+import * as ProgressStories from "./Progress.stories";
+
+<Meta of={ProgressStories} />
+
+# 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 of={ProgressStories.Primary} />
+</Canvas>
+
+## Secondary
+
+<Canvas>
+  <Story of={ProgressStories.Secondary} />
+</Canvas>
+
+## No Visible Label
+
+<Canvas>
+  <Story of={ProgressStories.NoVisibleLabel} />
+</Canvas>
+
+## Custom value format
+
+export const customValueFormatter = (value, minValue, maxValue) =>
+  `Step ${value} of ${maxValue}`;
+
+<Canvas>
+  <Story of={ProgressStories.CustomValueFormat} />
+</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/Progress/Progress.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta } from "@storybook/react";
+import { Progress, ProgressProps } from "./Progress";
+import { excludeControls } from "../../utils/excludeControls";
+
+const customValueFormatter = (
+  value: number,
+  minValue: number,
+  maxValue: number,
+) => `Step ${value} of ${maxValue}`;
+
+export default {
+  title: "Components/Progress",
+  component: Progress,
+  argTypes: {
+    value: {
+      control: {
+        control: { type: "range" },
+        min: 0,
+        max: 10,
+        step: 1,
+      },
+    },
+    minValue: {
+      control: {
+        control: { type: "range" },
+        min: 0,
+        max: 10,
+        step: 1,
+      },
+    },
+    maxValue: {
+      control: {
+        control: { type: "range" },
+        min: 0,
+        max: 10,
+        step: 1,
+      },
+    },
+    label: {
+      control: {
+        control: { type: "text" },
+      },
+    },
+    variant: {
+      control: { type: "radio" },
+      options: ["primary", "secondary"],
+    },
+    ...excludeControls("className", "valueFormatter"),
+  },
+};
+
+export const Primary: Meta<typeof Progress> = {
+  render: (args: ProgressProps) => <Progress {...args} />,
+  args: {
+    value: 2,
+    minValue: 0,
+    maxValue: 10,
+    label: "Progress",
+    variant: "primary",
+    showValueLabel: true,
+  },
+};
+
+export const Secondary: Meta<typeof Progress> = {
+  render: (args: ProgressProps) => <Progress {...args} />,
+  args: {
+    value: 2,
+    minValue: 0,
+    maxValue: 10,
+    label: "Secondary",
+    variant: "secondary",
+    showValueLabel: true,
+  },
+};
+
+export const NoVisibleLabel: Meta<typeof Progress> = {
+  render: (args: ProgressProps) => <Progress {...args} />,
+  args: {
+    value: 1,
+    minValue: 0,
+    maxValue: 4,
+    label: "",
+    variant: "primary",
+    "aria-label": "Progress",
+    showValueLabel: true,
+  },
+  parameters: {
+    controls: {
+      exclude: ["aria-label"],
+    },
+  },
+};
+
+export const CustomValueFormat: Meta<typeof Progress> = {
+  render: (args: ProgressProps) => <Progress {...args} />,
+  args: {
+    value: 1,
+    minValue: 0,
+    maxValue: 4,
+    label: "Progress",
+    variant: "primary",
+    showValueLabel: true,
+    valueFormatter: customValueFormatter,
+  },
+};

package/src/components/Radio/Radio.mdx

@@ -0,0 +1,202 @@
+import { Fragment, useState } from "react";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+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";
+import * as RadioStories from "./Radio.stories";
+
+<Meta of={RadioStories} />
+
+# 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 of={RadioStories.Normal} />
+</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 of={RadioStories.ControlledValue} />
+</Canvas>
+
+### Disabled
+
+<Canvas>
+  <Story of={RadioStories.Disabled} />
+</Canvas>
+
+### Disabled Individual Radios
+
+<Canvas>
+  <Story of={RadioStories.DisabledIndividualRadios} />
+</Canvas>
+
+### Valid
+
+<Canvas>
+  <Story of={RadioStories.Valid} />
+</Canvas>
+
+### Invalid
+
+<Canvas>
+  <Story of={RadioStories.Invalid} />
+</Canvas>
+
+### Complex label
+
+<Story of={RadioStories.ComplexLabel} />
+
+```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 of={RadioStories.HorizontalLayout} />
+</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/Radio/Radio.stories.tsx

@@ -0,0 +1,202 @@
+import type { Meta } from "@storybook/react";
+import { Radio } from "./Radio";
+import { RadioGroup, RadioGroupProps } from "./RadioGroup";
+import { Flex } from "../Flex";
+import { Divider } from "../Divider";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Forms/Radio",
+  component: Radio,
+  argTypes: {
+    validationState: {
+      options: ["valid", "invalid", "neither"],
+      control: { type: "radio" },
+      mapping: {
+        valid: "valid",
+        invalid: "invalid",
+        neither: "",
+      },
+    },
+    orientation: {
+      control: { type: "radio" },
+      options: ["horizontal", "vertical"],
+    },
+    label: {
+      control: { type: "text" },
+    },
+    ...excludeControls("children", "className", "elementType"),
+  },
+};
+
+export const Normal: Meta<typeof RadioGroup> = {
+  render: (args: RadioGroupProps) => (
+    <RadioGroup {...args}>
+      <Radio value="red" label="Red" />
+      <Radio value="blue" label="Blue" />
+    </RadioGroup>
+  ),
+  args: {
+    label: "Color",
+    isDisabled: false,
+    errorMessage: "",
+    orientation: "vertical",
+    defaultValue: "blue",
+  },
+};
+
+export const ControlledValue: Meta<typeof RadioGroup> = {
+  render: (args: RadioGroupProps) => (
+    <RadioGroup {...args}>
+      <Radio value="red" label="Red" />
+      <Radio value="blue" label="Blue" />
+    </RadioGroup>
+  ),
+  args: {
+    label: "Color",
+    isDisabled: false,
+    errorMessage: "",
+    orientation: "vertical",
+    value: "blue",
+  },
+};
+
+export const Disabled: Meta<typeof RadioGroup> = {
+  render: (args: RadioGroupProps) => (
+    <RadioGroup {...args}>
+      <Radio value="red" label="Red" isDisabled />
+      <Radio value="blue" label="Blue" />
+    </RadioGroup>
+  ),
+  args: {
+    label: "Color",
+    isDisabled: true,
+    errorMessage: "",
+    orientation: "vertical",
+  },
+};
+
+export const DisabledIndividualRadios: Meta<typeof RadioGroup> = {
+  render: (args: RadioGroupProps) => (
+    <RadioGroup {...args}>
+      <Radio value="red" label="Red" isDisabled />
+      <Radio value="blue" label="Blue" />
+    </RadioGroup>
+  ),
+  args: {
+    label: "Color",
+    isDisabled: false,
+    errorMessage: "",
+    orientation: "vertical",
+  },
+};
+
+export const Valid: Meta<typeof RadioGroup> = {
+  render: (args: RadioGroupProps) => (
+    <RadioGroup {...args}>
+      <Radio value="red" label="Red" />
+      <Radio value="blue" label="Blue" />
+    </RadioGroup>
+  ),
+  args: {
+    label: "Color",
+    isDisabled: false,
+    errorMessage: "",
+    validationState: "valid",
+    orientation: "vertical",
+  },
+};
+
+export const Invalid: Meta<typeof RadioGroup> = {
+  render: (args: RadioGroupProps) => (
+    <RadioGroup {...args}>
+      <Radio value="red" label="Red" />
+      <Radio value="blue" label="Blue" />
+    </RadioGroup>
+  ),
+  args: {
+    label: "Color",
+    isDisabled: false,
+    errorMessage: "Please select a color",
+    validationState: "invalid",
+    orientation: "vertical",
+  },
+};
+
+export const ComplexLabel: Meta<typeof RadioGroup> = {
+  render: (args: RadioGroupProps) => (
+    <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>
+  ),
+  args: {
+    label: "Payment Options",
+    isDisabled: false,
+    errorMessage: "",
+    orientation: "vertical",
+  },
+};
+
+export const HorizontalLayout: Meta<typeof RadioGroup> = {
+  render: (args: RadioGroupProps) => (
+    <RadioGroup {...args}>
+      <Radio value="red" label="Red" />
+      <Radio value="blue" label="Blue" />
+    </RadioGroup>
+  ),
+  args: {
+    label: "Color",
+    isDisabled: false,
+    errorMessage: "",
+    orientation: "horizontal",
+  },
+};