@simplybusiness/mobius 3.8.0 → 3.9.0

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,149 @@
+import type { Meta } from "@storybook/react";
+import { Table, TableProps } from ".";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Components/Table",
+  component: Table,
+  argTypes: excludeControls("className"),
+};
+
+export const Normal: Meta<typeof Table> = {
+  render: (args: TableProps) => (
+    <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&lsquo; 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>
+  ),
+};
+
+export const Extended: Meta<typeof Table> = {
+  render: (args: TableProps) => (
+    <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>
+  ),
+};

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

@@ -1,13 +1,10 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { Text } from "./Text";
 import { Box } from "..";
 import { excludeControls } from "../../utils/excludeControls";
+import * as TextStories from "./Text.stories";
 
-<Meta
-  title="Components/Text"
-  component={Text}
-  argTypes={excludeControls("className", "style")}
-/>
+<Meta of={TextStories} />
 
 # Text
 
@@ -37,8 +34,10 @@ import { Text } from "@simplybusiness/mobius";
     <Text elementType="h6">Heading 6</Text>
     <Text>Paragraph</Text>
   </Box>
+
   <Box>
     <Text elementType="h1">First Heading</Text>
+
     <Text>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel lorem
       enim. Nam vitae enim mollis turpis scelerisque vulputate id sit amet nisl.
@@ -50,6 +49,7 @@ import { Text } from "@simplybusiness/mobius";
       feugiat libero id, tincidunt turpis. Nam ullamcorper enim in leo dapibus
       aliquam eu sit amet erat. Morbi iaculis magna ut tincidunt rhoncus.
     </Text>
+
     <Text>
       Mauris pharetra enim et turpis lacinia, quis porta velit commodo. Proin at
       vehicula ligula, ut semper sapien. Donec felis elit, pretium vitae viverra
@@ -59,7 +59,9 @@ import { Text } from "@simplybusiness/mobius";
       sed sapien gravida bibendum. Praesent a malesuada ipsum. Vivamus ac congue
       odio.
     </Text>
+
     <Text elementType="h2">Second Heading</Text>
+
     <Text>
       Ut vel lectus arcu. Etiam ut efficitur turpis, pretium pretium nunc. Ut
       dolor nibh, facilisis at tempus at, iaculis sed mi. Etiam sollicitudin,
@@ -72,27 +74,21 @@ import { Text } from "@simplybusiness/mobius";
       varius urna venenatis vel. Aenean mollis arcu purus, id pretium ligula
       facilisis et.
     </Text>
+
   </Box>
 </Canvas>
 
 ### Normal
 
 <Canvas>
-  <Story name="Normal" args={{ elementType: "h4", variant: "h4" }}>
-    {args => <Text {...args}>Sample Text</Text>}
-  </Story>
+  <Story of={TextStories.Normal} />
 </Canvas>
 
 ### Themed
 
-<Story
-  name="Themed"
-  args={{ elementType: "h4", variant: "h4", style: { color: "green" } }}
->
-  {args => <Text {...args}>Sample Text</Text>}
-</Story>
+<Story of={TextStories.Themed} />
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Text } from "@simplybusiness/mobius";
 import styled from "@emotion/styled";
@@ -129,35 +125,43 @@ Set the spacing to "loose" or "tight" to override the default line height for te
 <Canvas>
   <Box>
     <Text variant="h3">Tight Spacing</Text>
+
     <Text spacing="tight">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel lorem
       enim. Nam vitae enim mollis turpis scelerisque vulputate id sit amet nisl.
       Etiam et tortor a nunc hendrerit luctus sed at nunc.
     </Text>
+
     <Text spacing="tight">
       Mauris pharetra enim et turpis lacinia, quis porta velit commodo.
       Scelerisque vulputate id sit amet nisl. Etiam et tortor a nunc hendrerit
       luctus sed at nunc.
     </Text>
+
     <Text spacing="tight">
       Ut vel lectus arcu. Etiam ut efficitur turpis, pretium pretium nunc. Ut
       dolor nibh, facilisis at tempus at, iaculis sed mi.
     </Text>
+
     <Text variant="h3">Loose Spacing</Text>
+
     <Text>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel lorem
       enim. Nam vitae enim mollis turpis scelerisque vulputate id sit amet nisl.
       Etiam et tortor a nunc hendrerit luctus sed at nunc.
     </Text>
+
     <Text>
       Mauris pharetra enim et turpis lacinia, quis porta velit commodo.
       Scelerisque vulputate id sit amet nisl. Etiam et tortor a nunc hendrerit
       luctus sed at nunc.
     </Text>
+
     <Text>
       Ut vel lectus arcu. Etiam ut efficitur turpis, pretium pretium nunc. Ut
       dolor nibh, facilisis at tempus at, iaculis sed mi.
     </Text>
+
   </Box>
 </Canvas>
 

package/src/components/Text/Text.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta } from "@storybook/react";
+import { Text, TextProps } from "./Text";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Components/Text",
+  component: Text,
+  argTypes: excludeControls("className", "style"),
+};
+
+export const Normal: Meta<typeof Text> = {
+  render: (args: TextProps) => <Text {...args}>Sample Text</Text>,
+  args: {
+    elementType: "h4",
+    variant: "h4",
+  },
+};
+
+export const Themed: Meta<typeof Text> = {
+  render: (args: TextProps) => <Text {...args}>Sample Text</Text>,
+  args: {
+    elementType: "h4",
+    variant: "h4",
+    style: {
+      color: "green",
+    },
+  },
+};

package/src/components/TextArea/TextArea.mdx

@@ -0,0 +1,82 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { TextArea } from "./TextArea";
+import { excludeControls } from "../../utils/excludeControls";
+import * as TextAreaStories from "./TextArea.stories";
+
+<Meta of={TextAreaStories} />
+
+# 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 of={TextAreaStories.Normal} />
+</Canvas>
+
+### Controlled Value
+
+<Canvas>
+  <Story of={TextAreaStories.ControlledValue} />
+</Canvas>
+
+### Disabled
+
+<Canvas>
+  <Story of={TextAreaStories.Disabled} />
+</Canvas>
+
+### With Error
+
+<Canvas>
+  <Story of={TextAreaStories.WithError} />
+</Canvas>
+
+### Valid
+
+<Canvas>
+  <Story of={TextAreaStories.Valid} />
+</Canvas>
+
+### Invalid
+
+<Canvas>
+  <Story of={TextAreaStories.Invalid} />
+</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/TextArea/TextArea.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta } from "@storybook/react";
+import { TextArea, TextAreaProps } from "./TextArea";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Forms/TextArea",
+  component: TextArea,
+  argTypes: {
+    validationState: {
+      options: ["valid", "invalid", "neither"],
+      control: { type: "radio" },
+      mapping: {
+        valid: "valid",
+        invalid: "invalid",
+        neither: "",
+      },
+    },
+    ...excludeControls("className"),
+  },
+};
+
+export const Normal: Meta<typeof TextArea> = {
+  render: (args: TextAreaProps) => <TextArea {...args} />,
+  args: {
+    label: "first name",
+    placeholder: "Placeholder",
+    defaultValue: "",
+    isDisabled: false,
+    errorMessage: "",
+  },
+};
+
+export const ControlledValue: Meta<typeof TextArea> = {
+  render: (args: TextAreaProps) => <TextArea {...args} />,
+  args: {
+    label: "first name",
+    placeholder: "Placeholder",
+    defaultValue: "John Doe",
+    isDisabled: false,
+    errorMessage: "",
+  },
+};
+
+export const Disabled: Meta<typeof TextArea> = {
+  render: (args: TextAreaProps) => <TextArea {...args} />,
+  args: {
+    label: "first name",
+    placeholder: "Placeholder",
+    defaultValue: "John Doe",
+    isDisabled: true,
+    errorMessage: "",
+  },
+};
+
+export const WithError: Meta<typeof TextArea> = {
+  render: (args: TextAreaProps) => <TextArea {...args} />,
+  args: {
+    label: "first name",
+    placeholder: "Placeholder",
+    defaultValue: "John Doe",
+    isDisabled: false,
+    errorMessage: "This is an error message",
+    validationState: "invalid",
+  },
+};
+
+export const Valid: Meta<typeof TextArea> = {
+  render: (args: TextAreaProps) => <TextArea {...args} />,
+  args: {
+    label: "first name",
+    placeholder: "Placeholder",
+    defaultValue: "John Doe",
+    isDisabled: false,
+    errorMessage: "",
+    validationState: "valid",
+  },
+};
+
+export const Invalid: Meta<typeof TextArea> = {
+  render: (args: TextAreaProps) => <TextArea {...args} />,
+  args: {
+    label: "first name",
+    placeholder: "Placeholder",
+    defaultValue: "John Doe",
+    isDisabled: false,
+    errorMessage: "",
+    validationState: "invalid",
+  },
+};

package/src/components/TextField/TextField.mdx

@@ -0,0 +1,122 @@
+import { useState } from "react";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
+import { TextField } from "./TextField";
+import { Label, Segment, SegmentGroup } from "..";
+import { excludeControls } from "../../utils/excludeControls";
+import * as TextFieldStories from "./TextField.stories";
+
+<Meta of={TextFieldStories} />
+
+# 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 of={TextFieldStories.Normal} />
+</Canvas>
+
+### Placeholder
+
+<Canvas>
+  <Story of={TextFieldStories.Placeholder} />
+</Canvas>
+
+### Controlled Value
+
+<Canvas>
+  <Story of={TextFieldStories.ControlledValue} />
+</Canvas>
+
+### Disabled
+
+<Canvas>
+  <Story of={TextFieldStories.Disabled} />
+</Canvas>
+
+### Valid
+
+<Canvas>
+  <Story of={TextFieldStories.Valid} />
+</Canvas>
+
+### Hidden
+
+<Canvas>
+  <Story of={TextFieldStories.Hidden} />
+</Canvas>
+
+### Invalid
+
+<Canvas>
+  <Story of={TextFieldStories.Invalid} />
+</Canvas>
+
+### TextField fills width of container by default
+
+<Canvas>
+  <SegmentGroup horizontal>
+    <Segment>
+      <TextField label="First name" />
+    </Segment>
+
+    <Segment>
+      <TextField label="Last name" />
+    </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)