@simplybusiness/mobius 3.7.1 → 3.9.0

package/src/components/Table/Table.story.mdx

@@ -1,213 +0,0 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
-import { Table } from ".";
-import { excludeControls } from "../../utils/excludeControls";
-
-<Meta
-  title="Components/Table"
-  component={Table}
-  argTypes={excludeControls("className")}
-/>
-
-# 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 name="Normal" args={{}}>
-    {args => (
-      <Table {...args}>
-        <Table.Head>
-          <Table.Row>
-            <Table.HeaderCell>Insurance cover</Table.HeaderCell>
-            <Table.HeaderCell>Lowest excess</Table.HeaderCell>
-            <Table.HeaderCell>Highest excess</Table.HeaderCell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>Public liability</Table.Cell>
-            <Table.Cell>£250</Table.Cell>
-            <Table.Cell>£2,500</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Employers&apos; liability</Table.Cell>
-            <Table.Cell>£250</Table.Cell>
-            <Table.Cell>£500</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Tools</Table.Cell>
-            <Table.Cell>£100</Table.Cell>
-            <Table.Cell>£500</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Stock</Table.Cell>
-            <Table.Cell>£250</Table.Cell>
-            <Table.Cell>£500</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Business and office equipment</Table.Cell>
-            <Table.Cell>£50</Table.Cell>
-            <Table.Cell>£500</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
-    )}
-  </Story>
-</Canvas>
-
-### Extended
-
-<Canvas>
-  <Story name="Extended" args={{}}>
-    {args => (
-      <Table {...args}>
-        <Table.Head>
-          <Table.Row>
-            <Table.HeaderCell>Column one</Table.HeaderCell>
-            <Table.HeaderCell>Column two</Table.HeaderCell>
-            <Table.HeaderCell>Column three</Table.HeaderCell>
-            <Table.HeaderCell>Column four</Table.HeaderCell>
-            <Table.HeaderCell>Column five</Table.HeaderCell>
-            <Table.HeaderCell>Column six</Table.HeaderCell>
-            <Table.HeaderCell>Column seven</Table.HeaderCell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>Lorem</Table.Cell>
-            <Table.Cell>Ipsum</Table.Cell>
-            <Table.Cell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
-              pulvinar tincidunt lorem vel vulputate. Quisque vulputate sed
-              tortor a aliquet. Curabitur egestas sodales nunc, bibendum cursus
-              mi ultrices vitae.
-            </Table.Cell>
-            <Table.Cell>
-              Vestibulum nec dolor urna. In ullamcorper auctor dignissim.
-              Quisque faucibus, nisi in faucibus cursus, turpis mi ullamcorper
-              arcu, id tempor enim ipsum eu elit. Mauris gravida libero nisl, in
-              consequat justo accumsan quis. Phasellus finibus ultrices blandit.
-              Donec vehicula leo odio, in dapibus massa scelerisque ac. Aliquam
-              nec dui erat. Duis auctor mauris in dolor accumsan elementum.
-              Donec vehicula commodo urna quis pretium. Nullam a dui sit amet
-              nisi porta sollicitudin.
-            </Table.Cell>
-            <Table.Cell>
-              Vestibulum nec dolor urna. In ullamcorper auctor dignissim.
-              Quisque faucibus, nisi in faucibus cursus, turpis mi ullamcorper
-              arcu, id tempor enim ipsum eu elit. Mauris gravida libero nisl, in
-              consequat justo accumsan quis.
-            </Table.Cell>
-            <Table.Cell>
-              Phasellus finibus ultrices blandit. Donec vehicula leo odio, in
-              dapibus massa scelerisque ac. Aliquam nec dui erat. Duis auctor
-              mauris in dolor accumsan elementum. Donec vehicula commodo urna
-              quis pretium. Nullam a dui sit amet nisi porta sollicitudin.
-            </Table.Cell>
-            <Table.Cell>
-              Nullam a dui sit amet nisi porta sollicitudin.
-            </Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Lorem</Table.Cell>
-            <Table.Cell>Ipsum</Table.Cell>
-            <Table.Cell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
-              pulvinar tincidunt lorem vel vulputate. Quisque vulputate sed
-              tortor a aliquet. Curabitur egestas sodales nunc, bibendum cursus
-              mi ultrices vitae.
-            </Table.Cell>
-            <Table.Cell>
-              Vestibulum nec dolor urna. In ullamcorper auctor dignissim.
-              Quisque faucibus, nisi in faucibus cursus, turpis mi ullamcorper
-              arcu, id tempor enim ipsum eu elit. Mauris gravida libero nisl, in
-              consequat justo accumsan quis. Phasellus finibus ultrices blandit.
-              Donec vehicula leo odio, in dapibus massa scelerisque ac. Aliquam
-              nec dui erat. Duis auctor mauris in dolor accumsan elementum.
-              Donec vehicula commodo urna quis pretium. Nullam a dui sit amet
-              nisi porta sollicitudin.
-            </Table.Cell>
-            <Table.Cell>
-              Vestibulum nec dolor urna. In ullamcorper auctor dignissim.
-              Quisque faucibus, nisi in faucibus cursus, turpis mi ullamcorper
-              arcu, id tempor enim ipsum eu elit. Mauris gravida libero nisl, in
-              consequat justo accumsan quis.
-            </Table.Cell>
-            <Table.Cell>
-              Phasellus finibus ultrices blandit. Donec vehicula leo odio, in
-              dapibus massa scelerisque ac. Aliquam nec dui erat. Duis auctor
-              mauris in dolor accumsan elementum. Donec vehicula commodo urna
-              quis pretium. Nullam a dui sit amet nisi porta sollicitudin.
-            </Table.Cell>
-            <Table.Cell>
-              Nullam a dui sit amet nisi porta sollicitudin.
-            </Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Public liability</Table.Cell>
-            <Table.Cell>£250</Table.Cell>
-            <Table.Cell>£2,500</Table.Cell>
-            <Table.Cell>£2,500</Table.Cell>
-            <Table.Cell>£2,500</Table.Cell>
-            <Table.Cell>£2,500</Table.Cell>
-            <Table.Cell>£2,500</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
-    )}
-  </Story>
-</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)

package/src/components/TextArea/TextArea.story.mdx

@@ -1,172 +0,0 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
-import { TextArea } from "./TextArea";
-import { excludeControls } from "../../utils/excludeControls";
-
-<Meta
-  title="Forms/TextArea"
-  component={TextArea}
-  argTypes={{
-    validationState: {
-      control: {
-        type: "radio",
-        options: {
-          valid: "valid",
-          invalid: "invalid",
-          neither: "",
-        },
-        defaultValue: {
-          neither: "",
-        },
-      },
-    },
-    ...excludeControls("className"),
-  }}
-/>
-
-# TextArea
-
-TextArea behaves exactly like TextField, except it renders a text area input.
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { TextArea } from "@simplybusiness/mobius";
-```
-
-Refer to [TextField docs](/story/core-docs-textfield--page) for usage and examples.
-
-## Examples
-
-### Normal
-
-<Canvas>
-  <Story
-    name="Normal"
-    args={{
-      label: "first name",
-      placeholder: "Placeholder",
-      defaultValue: "",
-      isDisabled: false,
-      errorMessage: "",
-      validationState: "",
-    }}
-  >
-    {args => <TextArea {...args} />}
-  </Story>
-</Canvas>
-
-### Controlled Value
-
-<Canvas>
-  <Story
-    name="Controlled Value"
-    args={{
-      label: "first name",
-      placeholder: "Placeholder",
-      defaultValue: "John Doe",
-      isDisabled: false,
-      errorMessage: "",
-      validationState: "",
-    }}
-  >
-    {args => <TextArea {...args} />}
-  </Story>
-</Canvas>
-
-### Disabled
-
-<Canvas>
-  <Story
-    name="Disabled"
-    args={{
-      label: "first name",
-      placeholder: "Placeholder",
-      defaultValue: "John Doe",
-      isDisabled: true,
-      errorMessage: "",
-      validationState: "",
-    }}
-  >
-    {args => <TextArea {...args} />}
-  </Story>
-</Canvas>
-
-### With Error
-
-<Canvas>
-  <Story
-    name="With Error"
-    args={{
-      label: "first name",
-      placeholder: "Placeholder",
-      defaultValue: "John Doe",
-      isDisabled: false,
-      errorMessage: "This is an error message",
-      validationState: "invalid",
-    }}
-  >
-    {args => <TextArea {...args} />}
-  </Story>
-</Canvas>
-
-### Valid
-
-<Canvas>
-  <Story
-    name="Valid"
-    args={{
-      label: "first name",
-      placeholder: "Placeholder",
-      defaultValue: "John Doe",
-      isDisabled: false,
-      errorMessage: "",
-      validationState: "valid",
-    }}
-  >
-    {args => <TextArea {...args} />}
-  </Story>
-</Canvas>
-
-### Invalid
-
-<Canvas>
-  <Story
-    name="Invalid"
-    args={{
-      label: "first name",
-      placeholder: "Placeholder",
-      defaultValue: "John Doe",
-      isDisabled: false,
-      errorMessage: "",
-      validationState: "invalid",
-    }}
-  >
-    {args => <TextArea {...args} />}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable of={TextArea} />
-
-## Component HTML Structure and Class names
-
-The following HTML is rendered for a TextArea:
-
-```html
-<div class="mobius/TextArea">
-  <label class="mobius/Label">{label}</label>
-  <textarea class="mobius/TextAreaInput">{text}</textarea>
-  <div class="mobius/ErrorMessage">{errors}</div>
-</div>
-```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/TextArea) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/TextField/TextField.story.mdx

@@ -1,232 +0,0 @@
-import { useState } from "react";
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
-import { TextField } from "./TextField";
-import { Label, Segment, SegmentGroup } from "..";
-import { excludeControls } from "../../utils/excludeControls";
-
-<Meta
-  title="Forms/TextField"
-  component={TextField}
-  argTypes={{
-    validationState: {
-      control: {
-        type: "radio",
-        options: {
-          valid: "valid",
-          invalid: "invalid",
-          neither: "",
-        },
-        defaultValue: {
-          neither: "",
-        },
-      },
-    },
-    type: {
-      control: "radio",
-      defaultValue: "text",
-      options: ["text", "password", "email", "tel", "url", "hidden"],
-    },
-    ...excludeControls("className"),
-  }}
-/>
-
-# TextField
-
-TextField allows a user to input some text.
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { TextField } from "@simplybusiness/mobius";
-```
-
-## Examples
-
-### Normal
-
-<Canvas>
-  <Story
-    name="Normal"
-    args={{
-      label: "First name",
-      placeholder: "",
-      type: "text",
-      isDisabled: false,
-      validationState: "",
-      errorMessage: "",
-    }}
-  >
-    {args => <TextField {...args}></TextField>}
-  </Story>
-</Canvas>
-
-### Placeholder
-
-<Canvas>
-  <Story
-    name="Placeholder"
-    args={{
-      label: "Email",
-      placeholder: "email@example.com",
-      type: "text",
-      isDisabled: false,
-      validationState: "",
-      errorMessage: "",
-    }}
-  >
-    {args => <TextField {...args}></TextField>}
-  </Story>
-</Canvas>
-
-### Controlled Value
-
-<Canvas>
-  <Story
-    name="Controlled Value"
-    args={{
-      label: "First name",
-      placeholder: "",
-      defaultValue: "john.doe@email.com",
-      type: "text",
-      isDisabled: false,
-      validationState: "",
-      errorMessage: "",
-    }}
-  >
-    {args => <TextField {...args}></TextField>}
-  </Story>
-</Canvas>
-
-### Disabled
-
-<Canvas>
-  <Story
-    name="Disabled"
-    args={{
-      label: "First name",
-      placeholder: "",
-      defaultValue: "john.doe@email.com",
-      type: "text",
-      isDisabled: true,
-      validationState: "",
-      errorMessage: "",
-    }}
-  >
-    {args => <TextField {...args}></TextField>}
-  </Story>
-</Canvas>
-
-### Valid
-
-<Canvas>
-  <Story
-    name="Valid"
-    args={{
-      label: "First name",
-      placeholder: "",
-      defaultValue: "john.doe@email.com",
-      type: "text",
-      isDisabled: false,
-      validationState: "valid",
-      errorMessage: "",
-    }}
-  >
-    {args => <TextField {...args}></TextField>}
-  </Story>
-</Canvas>
-
-### Hidden
-
-<Canvas>
-  <Story
-    name="Hidden"
-    args={{
-      label: "Secret",
-      placeholder: "",
-      defaultValue: "",
-      type: "hidden",
-      isDisabled: false,
-      validationState: "",
-      errorMessage: "",
-    }}
-  >
-    {args => <TextField {...args}></TextField>}
-  </Story>
-</Canvas>
-
-### Invalid
-
-<Canvas>
-  <Story
-    name="Invalid"
-    args={{
-      label: "First name",
-      placeholder: "",
-      defaultValue: "john.doe@email.com",
-      type: "text",
-      isDisabled: false,
-      validationState: "invalid",
-      errorMessage: "This is an error message",
-    }}
-  >
-    {args => <TextField {...args}></TextField>}
-  </Story>
-</Canvas>
-
-### TextField fills width of container by default
-
-<Canvas>
-  <SegmentGroup horizontal>
-    <Segment>
-      <TextField label="First name"></TextField>
-    </Segment>
-    <Segment>
-      <TextField label="Last name"></TextField>
-    </Segment>
-  </SegmentGroup>
-</Canvas>
-
-## Accessibility
-
-It's recommended to pass a `label` prop in order to show a visual label. When the `label` prop is not provided, make sure to provide the `aria-label` prop instead. If the text field 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 value of the input. See the prop table for the complete list of events supported.
-See the example of controlled component using the `onChange` prop.
-
-## Props
-
-<ArgsTable of={TextField} />
-
-## Component HTML Structure and Class names
-
-The following HTML is rendered for a TextField:
-
-```html
-<div class="mobius/TextField">
-  <label class="mobius/Label">{label}</label>
-  <input class="mobius/TextFieldInput" type="text" />
-  <div class="mobius/ErrorMessage">{errors}</div>
-</div>
-```
-
-Class names are augmented with the following flags if true:
-
-- --is-focused
-- --is-disabled
-- --is-hovered
-- --is-selected
-- --is-valid
-- --is-invalid
-- --is-optional
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/TextField) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)