@simplybusiness/mobius 3.8.0 → 3.9.1

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

@@ -1,38 +1,12 @@
-import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Story } from "@storybook/blocks";
 import { Select } from "./Select";
 import { useState } from "react";
 import { Option } from "../Option";
 import { Box } from "../Box";
 import { excludeControls } from "../../utils/excludeControls";
+import * as SelectStories from "./Select.stories";
 
-<Meta
-  title="Forms/Select"
-  component={Select}
-  argTypes={{
-    validationState: {
-      control: {
-        type: "radio",
-        options: {
-          valid: "valid",
-          invalid: "invalid",
-          neither: "",
-        },
-        defaultValue: {
-          neither: "",
-        },
-      },
-    },
-    value: {
-      control: "select",
-      options: ["", "red", "blue", "green"],
-    },
-    defaultValue: {
-      control: "select",
-      options: ["", "red", "blue", "green"],
-    },
-    ...excludeControls("className", "onChange", "defaultValue"),
-  }}
-/>
+<Meta of={SelectStories} />
 
 # Select
 
@@ -54,36 +28,9 @@ import { Select, Option } from "@simplybusiness/mobius";
 
 ### Normal
 
-<Story
-  name="Normal"
-  args={{
-    name: "color",
-    label: "Colors",
-    defaultValue: "",
-    validationState: "",
-    errorMessage: "",
-    isDisabled: false,
-  }}
->
-  {args => (
-    <Select {...args}>
-      <Option key="none" value="" isDisabled>
-        Please select a color
-      </Option>
-      <Option key="red" value="red">
-        Red
-      </Option>
-      <Option key="blue" value="blue">
-        Blue
-      </Option>
-      <Option key="green" value="green">
-        Green
-      </Option>
-    </Select>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={SelectStories.Normal} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Select, Option } from "@simplybusiness/mobius";
 
@@ -105,36 +52,9 @@ import { Select, Option } from "@simplybusiness/mobius";
 
 ### Controlled Value
 
-<Story
-  name="Controlled Value"
-  args={{
-    name: "color",
-    label: "Colors",
-    value: "green",
-    validationState: "",
-    errorMessage: "",
-    isDisabled: false,
-  }}
->
-  {args => (
-    <Select {...args}>
-      <Option key="none" value="" isDisabled>
-        Please select a color
-      </Option>
-      <Option key="red" value="red">
-        Red
-      </Option>
-      <Option key="blue" value="blue">
-        Blue
-      </Option>
-      <Option key="green" value="green">
-        Green
-      </Option>
-    </Select>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={SelectStories.ControlledValue} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Select, Option } from "@simplybusiness/mobius";
 
@@ -156,36 +76,9 @@ import { Select, Option } from "@simplybusiness/mobius";
 
 ### Disabled
 
-<Story
-  name="Disabled"
-  args={{
-    name: "color",
-    label: "Colors",
-    defaultValue: "green",
-    validationState: "",
-    errorMessage: "",
-    isDisabled: true,
-  }}
->
-  {args => (
-    <Select {...args}>
-      <Option key="none" value="" isDisabled>
-        Please select a color
-      </Option>
-      <Option key="red" value="red">
-        Red
-      </Option>
-      <Option key="blue" value="blue">
-        Blue
-      </Option>
-      <Option key="green" value="green">
-        Green
-      </Option>
-    </Select>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={SelectStories.Disabled} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Select, Option } from "@simplybusiness/mobius";
 
@@ -207,36 +100,9 @@ import { Select, Option } from "@simplybusiness/mobius";
 
 ### Valid
 
-<Story
-  name="Valid"
-  args={{
-    name: "color",
-    label: "Colors",
-    defaultValue: "green",
-    validationState: "valid",
-    errorMessage: "",
-    isDisabled: false,
-  }}
->
-  {args => (
-    <Select {...args}>
-      <Option key="none" value="" isDisabled>
-        Please select a color
-      </Option>
-      <Option key="red" value="red">
-        Red
-      </Option>
-      <Option key="blue" value="blue">
-        Blue
-      </Option>
-      <Option key="green" value="green">
-        Green
-      </Option>
-    </Select>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={SelectStories.Valid} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Select, Option } from "@simplybusiness/mobius";
 
@@ -263,36 +129,9 @@ import { Select, Option } from "@simplybusiness/mobius";
 
 ### Invalid
 
-<Story
-  name="Invalid"
-  args={{
-    name: "color",
-    label: "Colors",
-    defaultValue: "green",
-    validationState: "invalid",
-    errorMessage: "Unacceptable color",
-    isDisabled: false,
-  }}
->
-  {args => (
-    <Select {...args}>
-      <Option key="none" value="" isDisabled>
-        Please select a color
-      </Option>
-      <Option key="red" value="red">
-        Red
-      </Option>
-      <Option key="blue" value="blue">
-        Blue
-      </Option>
-      <Option key="green" value="green">
-        Green
-      </Option>
-    </Select>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={SelectStories.Invalid} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Select, Option } from "@simplybusiness/mobius";
 
@@ -349,13 +188,13 @@ The following HTML is rendered for a Select:
 
 The span allows for an image overlay to replace the standard select UX in browsers. Class names are augmented with the following flags if true:
 
-- --is-focused
-- --is-disabled
-- --is-hovered
-- --is-selected
-- --is-valid
-- --is-invalid
-- --is-optional
+- \--is-focused
+- \--is-disabled
+- \--is-hovered
+- \--is-selected
+- \--is-valid
+- \--is-invalid
+- \--is-optional
 
 ---
 

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,163 @@
+import type { Meta } from "@storybook/react";
+import { Select, SelectProps } from "./Select";
+import { Option } from "../Option";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Forms/Select",
+  component: Select,
+  argTypes: {
+    validationState: {
+      options: ["valid", "invalid", "neither"],
+      control: { type: "radio" },
+      mapping: {
+        valid: "valid",
+        invalid: "invalid",
+        neither: "",
+      },
+    },
+    value: {
+      control: { type: "select" },
+      options: ["", "red", "blue", "green"],
+    },
+    ...excludeControls("className", "onChange", "aria-describedby"),
+  },
+};
+
+export const Normal: Meta<typeof Select> = {
+  render: (args: SelectProps) => (
+    <Select {...args}>
+      <Option key="none" value="" isDisabled>
+        Please select a color
+      </Option>
+      <Option key="red" value="red">
+        Red
+      </Option>
+      <Option key="blue" value="blue">
+        Blue
+      </Option>
+      <Option key="green" value="green">
+        Green
+      </Option>
+    </Select>
+  ),
+  args: {
+    name: "color",
+    label: "Colors",
+    defaultValue: "",
+    errorMessage: "",
+    isDisabled: false,
+    isRequired: false,
+  },
+};
+
+export const ControlledValue: Meta<typeof Select> = {
+  render: (args: SelectProps) => (
+    <Select {...args}>
+      <Option key="none" value="" isDisabled>
+        Please select a color
+      </Option>
+      <Option key="red" value="red">
+        Red
+      </Option>
+      <Option key="blue" value="blue">
+        Blue
+      </Option>
+      <Option key="green" value="green">
+        Green
+      </Option>
+    </Select>
+  ),
+  args: {
+    name: "color",
+    label: "Colors",
+    value: "green",
+    errorMessage: "",
+    defaultValue: "",
+    isDisabled: false,
+    isRequired: false,
+  },
+};
+
+export const Disabled: Meta<typeof Select> = {
+  render: (args: SelectProps) => (
+    <Select {...args}>
+      <Option key="none" value="" isDisabled>
+        Please select a color
+      </Option>
+      <Option key="red" value="red">
+        Red
+      </Option>
+      <Option key="blue" value="blue">
+        Blue
+      </Option>
+      <Option key="green" value="green">
+        Green
+      </Option>
+    </Select>
+  ),
+  args: {
+    name: "color",
+    label: "Colors",
+    defaultValue: "green",
+    errorMessage: "",
+    isDisabled: true,
+    isRequired: false,
+  },
+};
+
+export const Valid: Meta<typeof Select> = {
+  render: (args: SelectProps) => (
+    <Select {...args}>
+      <Option key="none" value="" isDisabled>
+        Please select a color
+      </Option>
+      <Option key="red" value="red">
+        Red
+      </Option>
+      <Option key="blue" value="blue">
+        Blue
+      </Option>
+      <Option key="green" value="green">
+        Green
+      </Option>
+    </Select>
+  ),
+  args: {
+    name: "color",
+    label: "Colors",
+    defaultValue: "green",
+    validationState: "valid",
+    errorMessage: "",
+    isDisabled: false,
+    isRequired: false,
+  },
+};
+
+export const Invalid: Meta<typeof Select> = {
+  render: (args: SelectProps) => (
+    <Select {...args}>
+      <Option key="none" value="" isDisabled>
+        Please select a color
+      </Option>
+      <Option key="red" value="red">
+        Red
+      </Option>
+      <Option key="blue" value="blue">
+        Blue
+      </Option>
+      <Option key="green" value="green">
+        Green
+      </Option>
+    </Select>
+  ),
+  args: {
+    name: "color",
+    label: "Colors",
+    defaultValue: "green",
+    validationState: "invalid",
+    errorMessage: "Unacceptable color",
+    isDisabled: false,
+    isRequired: false,
+  },
+};

package/src/components/Slider/Slider.mdx

@@ -0,0 +1,55 @@
+import { Fragment, useState } from "react";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Slider } from "./Slider";
+import { excludeControls } from "../../utils/excludeControls";
+import * as SliderStories from "./Slider.stories";
+
+<Meta of={SliderStories} />
+
+# 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 of={SliderStories.Primary} />
+</Canvas>
+
+### Secondary
+
+<Canvas>
+  <Story of={SliderStories.Secondary} />
+</Canvas>
+
+### No label
+
+<Canvas>
+  <Story of={SliderStories.NoLabel} />
+</Canvas>
+
+### Disabled
+
+<Canvas>
+  <Story of={SliderStories.Disabled} />
+</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)

package/src/components/Slider/Slider.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta } from "@storybook/react";
+import { Slider, SliderProps } from "./Slider";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Components/Slider",
+  component: Slider,
+  // Note: minValue, maxValue, defaultValue only work with certain settings.
+  argTypes:
+    // 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",
+      ),
+    },
+};
+
+export const Primary: Meta<typeof Slider> = {
+  render: (args: SliderProps) => <Slider {...args} />,
+  args: {
+    label: "Tools value",
+    minValue: 20,
+    maxValue: 500,
+    defaultValue: 100,
+    variant: "primary",
+    minLabel: "",
+    maxLabel: "",
+    isDisabled: false,
+  },
+};
+
+export const Secondary: Meta<typeof Slider> = {
+  render: (args: SliderProps) => <Slider {...args} />,
+  args: {
+    label: "Tools value",
+    minValue: 20,
+    maxValue: 500,
+    defaultValue: 100,
+    variant: "secondary",
+    minLabel: "",
+    maxLabel: "",
+    isDisabled: false,
+  },
+};
+
+export const NoLabel: Meta<typeof Slider> = {
+  render: (args: SliderProps) => <Slider {...args} />,
+  args: {
+    label: "",
+    "aria-label": "Tools value",
+    minValue: 20,
+    maxValue: 500,
+    variant: "primary",
+    defaultValue: 100,
+    minLabel: "",
+    maxLabel: "",
+    isDisabled: false,
+  },
+};
+
+export const Disabled: Meta<typeof Slider> = {
+  render: (args: SliderProps) => <Slider {...args} />,
+  args: {
+    label: "Tools value",
+    minValue: 20,
+    maxValue: 500,
+    variant: "primary",
+    defaultValue: 100,
+    minLabel: "",
+    maxLabel: "",
+    isDisabled: true,
+  },
+};

package/src/components/Slider/Slider.tsx

@@ -6,12 +6,15 @@ import { SliderProps as SpectrumSliderProps } from "@react-types/slider";
 import { useSliderState } from "@react-stately/slider";
 import { useNumberFormatter } from "@react-aria/i18n";
 import clsx from "clsx";
-import { DOMProps } from "@react-types/shared";
+import { DOMProps, AriaLabelingProps } from "@react-types/shared";
 import { SliderThumb } from "./Thumb";
 import { Label } from "../Label";
 import { useUnwrappedHandler, useWrappedValue } from "./helpers";
 
-export interface SliderProps extends SpectrumSliderProps<number>, DOMProps {
+export interface SliderProps
+  extends SpectrumSliderProps<number>,
+    DOMProps,
+    AriaLabelingProps {
   variant?: "primary" | "secondary";
   className?: string;
   onChange?: (value: number | undefined) => void;

package/src/components/Table/Table.mdx

@@ -0,0 +1,74 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { Table } from ".";
+import { excludeControls } from "../../utils/excludeControls";
+import * as TableStories from "./Table.stories";
+
+<Meta of={TableStories} />
+
+# Table
+
+The `Table` component is used for displaying tabular data, in rows and columns. It can be comprised
+of a head, body and foot, all of which are optional.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Table } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+### Normal
+
+<Canvas>
+  <Story of={TableStories.Normal} />
+</Canvas>
+
+### Extended
+
+<Canvas>
+  <Story of={TableStories.Extended} />
+</Canvas>
+
+## Accessibility
+
+In order to make the structure of the table clear, every table should include a `Table.Head` with `Table.HeaderCell` cells. Each row should also have
+a `Table.HeaderCell` to indicate what the data for that row is pertaining to.
+
+## Table Props
+
+<ArgsTable component={Table} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Table:
+
+```html
+<table class="mobius/Table">
+  <thead class="mobius/TableHead">
+    <tr class="mobius/TableRow">
+      <th class="mobius/TableCell">Header cell</th>
+    </tr>
+  </thead>
+  <tbody class="mobius/TableBody">
+    <tr class="mobius/TableRow">
+      <td class="mobius/TableCell">Body cell</td>
+    </tr>
+  </tbody>
+  <tfoot class="mobius/TableFoot">
+    <tr class="mobius/TableRow">
+      <td class="mobius/TableCell">Footer cell</td>
+    </tr>
+  </tfoot>
+</table>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Table) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)