@simplybusiness/mobius 3.0.0

package/src/components/Container/Container.story.mdx

@@ -0,0 +1,60 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Container } from "./Container";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Layout/Container"
+  component={Container}
+  argTypes={excludeControls("className", "elementType", "id")}
+/>
+
+# Container
+
+Container is a a general purpose wrapper that can receive any styling prop.
+
+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 { Container } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+### Normal
+
+<Canvas>
+  <Story name="Normal" args={{}}>
+    {args => (
+      <Container {...args}>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
+        repellendus deleniti architecto, expedita ex maxime eum. Reiciendis,
+        natus? Voluptatibus error beatae praesentium molestias saepe dolorem
+        molestiae rem. Rem, eveniet beatae.
+      </Container>
+    )}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Container} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Container:
+
+```html
+<div class="mobius/Container">{children}</div>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Box) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Container/Container.test.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Container } from ".";
+
+const CLASS_NAME = "mobius/Container";
+
+describe("Container", () => {
+  it("should render without errors", () => {
+    const component = render(<Container>test</Container>);
+    expect(component).toBeTruthy();
+  });
+
+  it("should use the provided elementType", () => {
+    const component = render(<Container elementType="span">test</Container>);
+    expect(component.container.firstElementChild?.tagName).toBe("SPAN");
+  });
+
+  describe("given elementType", () => {
+    it("is not applied as element attribute", () => {
+      const { container } = render(<Container elementType="span" />);
+      expect(container.firstChild).not.toHaveAttribute("elementtype", "span");
+    });
+  });
+
+  describe("uses correct class names", () => {
+    it("uses Mobius class", () => {
+      render(<Container data-testid="test">Sample text</Container>);
+      expect(screen.getByTestId("test")).toHaveClass("mobius");
+    });
+
+    it("uses base Mobius class", () => {
+      render(<Container data-testid="test">Sample text</Container>);
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+
+    it("includes custom class name", () => {
+      render(
+        <Container className="my-class" data-testid="test">
+          Sample Text
+        </Container>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass("my-class");
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+  });
+});

package/src/components/Container/Container.tsx

@@ -0,0 +1,30 @@
+import { forwardRef, Ref, RefAttributes, ReactNode } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+
+export type ContainerElementType = HTMLDivElement;
+export type ContainerRef = Ref<ContainerElementType>;
+
+export interface ContainerProps
+  extends DOMProps,
+    RefAttributes<ContainerElementType> {
+  id?: string;
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  /** HTML element for the Box */
+  elementType?: "div" | "span";
+  children?: ReactNode;
+}
+
+const Container: ForwardedRefComponent<ContainerProps, ContainerElementType> =
+  forwardRef((props: ContainerProps, ref: ContainerRef) => {
+    const { elementType: Element = "div", ...otherProps } = props;
+
+    const classes = clsx("mobius", "mobius/Container", otherProps.className);
+
+    return <Element ref={ref} {...otherProps} className={classes} />;
+  });
+
+Container.displayName = "Container";
+export { Container };

package/src/components/Container/index.tsx

@@ -0,0 +1 @@
+export * from "./Container";

package/src/components/DataTable/DataTable.story.mdx

@@ -0,0 +1,560 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import * as baseIcons from "@simplybusiness/icons";
+import { DataTable } from ".";
+import { data, columns } from "./mockTableData";
+import { ThemeContext } from "../../contexts";
+import { Button } from "../Button";
+import { Flex } from "../Flex";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Components/DataTable"
+  component={DataTable}
+  argTypes={excludeControls("className", "caption", "spanData", "collapseData")}
+/>
+
+# DataTable
+
+The `DataTable` is a component for displaying tabular data enhanced with various features: sorting, collapsing, column and row spanning, etc.
+It can use a `table` or `div` (flex based) layout.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { DataTable } from "@simplybusiness/mobius";
+```
+
+`<DataTable />` has two critical props - `columns` and `data`.
+
+### `columns` prop
+
+To create a table with 3 columns - `First name`, `Last name` and `Email address` the following data shape needs to be used:
+
+```jsx
+columns={[
+  {
+    Header: 'First name',
+    accessor: 'first_name'
+  },
+  {
+    Header: 'Last name',
+    accessor: 'last_name'
+  },
+  {
+    Header: 'Email address',
+    accessor: 'email_address'
+  }
+]}
+```
+
+Each column is an object with `Header` and `accessor` as keys. `Header` is the label that appears in the header cell. `accessor` is an internally used unique identifier, which will be used in `data` prop as key to map data to a column.
+
+You can find the full list of column options [here](https://react-table-v7.tanstack.com/docs/api/useTable#column-options).
+
+### `data` prop
+
+To populate a table with 3 columns created earlier (see above) the following data shape needs to be used:
+
+```jsx
+data={[
+  {
+    first_name: "Bradley",
+    last_name: "Connolly",
+    email_address: "bradley.connolly@example.com",
+  },
+  {
+    first_name: "Kai",
+    last_name: "Richardson",
+    email_address: "kai.richardson@example.com",
+  },
+  {
+    first_name: "Riley",
+    last_name: "Short",
+    email_address: "riley.short@example.com",
+  },
+]}
+```
+
+Each row is an object with `accessor` (see `columns` prop above) as key and unique data as value.
+
+### Final result: `columns` and `data` props together in `<DataTable />`
+
+<DataTable
+  columns={[
+    {
+      Header: "First name",
+      accessor: "first_name",
+    },
+    {
+      Header: "Last name",
+      accessor: "last_name",
+    },
+    {
+      Header: "Email address",
+      accessor: "email_address",
+    },
+  ]}
+  data={[
+    {
+      first_name: "Bradley",
+      last_name: "Connolly",
+      email_address: "bradley.connolly@example.com",
+    },
+    {
+      first_name: "Kai",
+      last_name: "Richardson",
+      email_address: "kai.richardson@example.com",
+    },
+    {
+      first_name: "Riley",
+      last_name: "Short",
+      email_address: "riley.short@example.com",
+    },
+  ]}
+/>
+
+## Table Layout
+
+<Canvas>
+  <Story
+    name="Table Layout"
+    args={{
+      data,
+      columns,
+      layout: "table",
+      isSortable: false,
+    }}
+  >
+    {args => (
+      <div>
+        <DataTable {...args} />
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Flex based layout
+
+Traditional `table` based layouts are great for displaying basic tabular data. The Flex-based layout renders tables as `inline-block` `div`s.
+It becomes useful when implementing resizable tables that must also be able to stretch to fill all available space.
+
+<Canvas>
+  <Story
+    name="Div Layout"
+    args={{
+      data,
+      columns,
+      layout: "flex",
+      isSortable: false,
+    }}
+  >
+    {args => (
+      <div>
+        <DataTable {...args} />
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Sorting
+
+Sort tabular data by clicking on header cells.
+
+<Canvas>
+  <Story
+    name="Sorting"
+    args={{
+      data,
+      columns,
+      layout: "table",
+      isSortable: true,
+    }}
+  >
+    {args => (
+      <div>
+        <DataTable {...args} />
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Collapsing
+
+The columns can be collapsed based on the `collapseData` provided. It includes: `collapseOnSize` - t-shirt size value of the user's viewport width ranged from `xs` to `xxl`; and
+`collapseColumns` - the columns to hide.
+
+To collapse the `highest_excess` and `lowest_excess` table columns on "md" viewport width, use `collapseData` as follows:
+
+```jsx
+  <DataTable
+    data: [{...}],
+    columns: [{...}],
+    collapseData: {
+      collapseOnSize: "md",
+      collapseColumns: ["highest_excess", "lowest_excess"],
+    },
+  />
+```
+
+<Story
+  name="Collapsing"
+  args={{
+    data,
+    columns,
+    collapseData: {
+      collapseOnSize: "md",
+      collapseColumns: ["lowest_excess"],
+    },
+    layout: "table",
+    isSortable: false,
+  }}
+  decorators={[
+    Story => (
+      <ThemeContext.Provider
+        value={{
+          breakpoints: [
+            { size: "xs", value: 320 },
+            { size: "sm", value: 540 },
+            { size: "md", value: 720 },
+            { size: "lg", value: 960 },
+            { size: "xl", value: 1140 },
+            { size: "xxl", value: 1320 },
+          ],
+          icons: baseIcons,
+        }}
+      >
+        <Story />
+      </ThemeContext.Provider>
+    ),
+  ]}
+>
+  {args => (
+    <div>
+      <DataTable {...args} />
+    </div>
+  )}
+</Story>
+
+```jsx
+import { DataTable } from "@simplybusiness/mobius";
+
+  <DataTable
+    data: [{...}],
+    columns: [{...}],
+    collapseData: {
+      collapseOnSize: "md",
+      collapseColumns: ["lowest_excess"],
+    },
+  />
+```
+
+## Column Spanning (for Table layout)
+
+The `spanData` prop enables the addition of `collspan` and `rowspan` to specific cells.
+
+To span two adjacent table cells together use `spanData` prop as follows:
+
+```jsx
+<DataTable
+  data: [{...}],
+  columns: [{...}],
+  spanData: {
+    lowest_excess: {
+      colspan: 2,
+      targetValue: "£350",
+      substValue: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
+      spanClass: "customSpanClass",
+    },
+  },
+/>
+```
+
+- `[lowest_excess]` - the key name of a table column where the cell with `colspan` will be located;
+- `colspan` - the number of columns to span;
+- `targetValue` - the target cell's value;
+- `substValue` - the value which the original cell value can be replaced with (optional);
+- `spanClass` - the class name value, which can be added to the cell (optional);
+
+<Canvas>
+  <Story
+    name="Column Spanning"
+    args={{
+      data: [
+        {
+          insurance_cover: "Employers' liability",
+          lowest_excess: "£250",
+          highest_excess: "£2,500",
+        },
+        {
+          insurance_cover: "Public liability",
+          lowest_excess: "£350",
+        },
+        {
+          insurance_cover: "Stock",
+          lowest_excess: "£100",
+          highest_excess: "£500",
+        },
+      ],
+      columns,
+      spanData: {
+        lowest_excess: {
+          colspan: 2,
+          targetValue: "£350",
+          substValue:
+            "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
+          spanClass: "customSpanClass",
+        },
+      },
+      layout: "table",
+      isSortable: false,
+    }}
+  >
+    {args => (
+      <div>
+        <DataTable {...args} />
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Row Spanning (for Table layout)
+
+<Canvas>
+  <Story
+    name="Row Spanning"
+    args={{
+      data: [
+        {
+          insurance_cover: "Employers' liability",
+          lowest_excess: "£250",
+          highest_excess: "£2,500",
+        },
+        {
+          insurance_cover: "Public liability",
+          lowest_excess: "£350",
+          highest_excess: "£500",
+        },
+        {
+          lowest_excess: "£100",
+          highest_excess: "£500",
+        },
+      ],
+      columns,
+      spanData: {
+        insurance_cover: {
+          rowspan: 2,
+          targetValue: "Public liability",
+          spanClass: "customSpanClass",
+        },
+      },
+      layout: "table",
+      isSortable: false,
+    }}
+  >
+    {args => (
+      <div>
+        <DataTable {...args} />
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Render Cells with custom Elements
+
+<Story
+  name="Render Cells with custom Elements"
+  args={{
+    data,
+    columns: [
+      {
+        Header: "Insurance cover",
+        accessor: "insurance_cover",
+      },
+      {
+        Header: "Lowest excess",
+        accessor: "lowest_excess",
+      },
+      {
+        Header: "Highest excess",
+        accessor: "highest_excess",
+        Cell: props => {
+          return (
+            <Flex>
+              <Button onClick={() => console.log(props.value)}>Buy</Button>
+              <Button variant="basic" onClick={() => console.log(props.value)}>
+                Details
+              </Button>
+            </Flex>
+          );
+        },
+      },
+    ],
+    layout: "table",
+    isSortable: false,
+  }}
+>
+  {args => (
+    <div>
+      <DataTable {...args} />
+    </div>
+  )}
+</Story>
+
+```jsx
+<DataTable
+  data={data}
+  columns={[
+    {
+      Header: "Insurance cover",
+      accessor: "insurance_cover",
+    },
+    {
+      Header: "Lowest excess",
+      accessor: "lowest_excess",
+    },
+    {
+      Header: "Highest excess",
+      accessor: "highest_excess",
+      Cell: props => {
+        return (
+          <Flex>
+            <Button onClick={() => console.log(props.value)}>Buy</Button>
+            <Button variant="basic" onClick={() => console.log(props.value)}>
+              Details
+            </Button>
+          </Flex>
+        );
+      },
+    },
+  ]}
+  layout="table"
+  isSortable={false}
+/>
+```
+
+## Props
+
+<ArgsTable of={DataTable} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a `DataTable`.
+`Table` layout:
+
+```html
+<table class="mobius mobius/Table" role="table">
+  <thead class="mobius mobius/TableHead">
+    <tr role="row" aria-rowindex="1" class="mobius mobius/TableRow">
+      <th
+        colspan="1"
+        role="columnheader"
+        aria-colindex="1"
+        class="mobius mobius/TableHeadCell"
+      >
+        <span class="">Insurance cover</span>
+      </th>
+      ...
+    </tr>
+  </thead>
+  <tbody role="rowgroup" class="mobius mobius/TableBody">
+    <tr role="row" aria-rowindex="1" class="mobius mobius/TableRow">
+      <td role="cell" aria-colindex="1" class="mobius mobius/TableBodyCell">
+        <span>Employers' liability</span>
+      </td>
+      <td role="cell" aria-colindex="2" class="mobius mobius/TableBodyCell">
+        <span>£250</span>
+      </td>
+      ...
+    </tr>
+    ...
+  </tbody>
+</table>
+```
+
+`Flex based layout` layout:
+
+```html
+<div class="mobius mobius/Table" role="table">
+  <div class="mobius mobius/TableHead">
+    <div role="row" class="mobius mobius/TableRow" aria-rowindex="1">
+      <div
+        colspan="1"
+        role="columnheader"
+        class="mobius mobius/TableHeadCell"
+        aria-colindex="1"
+      >
+        <span class="">Insurance cover</span>
+      </div>
+      ...
+    </div>
+  </div>
+  <div class="mobius mobius/TableBody">
+    <div
+      role="row"
+      class="mobius mobius/TableRow"
+      tabindex="1"
+      aria-rowindex="1"
+    >
+      <div role="cell" class="mobius mobius/TableBodyCell" aria-colindex="1">
+        <span>Employers' liability</span>
+      </div>
+      ...
+    </div>
+    ...
+  </div>
+</div>
+```
+
+When the `isSortable` prop is used, the table header cell receives `sortedAsc` and `sortedDesc` class names:
+
+```html
+<table class="mobius mobius/Table" role="table">
+  <thead class="mobius mobius/TableHead">
+    <tr role="row" aria-rowindex="1" class="mobius mobius/TableRow">
+      <th
+        colspan="1"
+        role="columnheader"
+        title="Toggle SortBy"
+        aria-colindex="1"
+        class="mobius mobius/TableHeadCell sortedAsc"
+        style="cursor: pointer"
+      >
+        <span>Insurance cover</span>
+      </th>
+      ...
+    </tr>
+  </thead>
+  ...
+</table>
+```
+
+```html
+<table class="mobius mobius/Table" role="table">
+  <thead class="mobius mobius/TableHead">
+    <tr role="row" aria-rowindex="1" class="mobius mobius/TableRow">
+      <th
+        colspan="1"
+        role="columnheader"
+        title="Toggle SortBy"
+        aria-colindex="1"
+        class="mobius mobius/TableHeadCell sortedDesc"
+        style="cursor: pointer"
+      >
+        <span>Insurance cover</span>
+      </th>
+      ...
+    </tr>
+  </thead>
+  ...
+</table>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/DataTable) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)