@simplybusiness/mobius 3.10.0 → 3.11.1

package/src/components/DataTable/DataTable.mdx

@@ -1,357 +0,0 @@
-import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
-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";
-import * as DataTableStories from "./DataTable.stories";
-
-<Meta of={DataTableStories} />
-
-# 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 of={DataTableStories.TableLayout} />
-
-## 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 of={DataTableStories.DivLayout} />
-
-## Sorting
-
-Sort tabular data by clicking on header cells.
-
-<Canvas of={DataTableStories.Sorting} />
-
-## 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 of={DataTableStories.Collapsing} />
-
-```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 of={DataTableStories.ColumnSpanning} />
-
-## Row Spanning (for Table layout)
-
-<Canvas of={DataTableStories.RowSpanning} />
-
-## Render Cells with custom Elements
-
-<Story of={DataTableStories.RenderCellsWithCustomElements} />
-
-```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
-
-<ArgTypes 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)

package/src/components/DataTable/DataTable.stories.tsx

@@ -1,228 +0,0 @@
-import type { Meta } from "@storybook/react";
-import * as baseIcons from "@simplybusiness/icons";
-import { DataTable, DataTableProps } from ".";
-import { data, columns } from "./mockTableData";
-import { BreakpointsType, ThemeContext } from "../../contexts";
-import { Button } from "../Button";
-import { Flex } from "../Flex";
-import { excludeControls } from "../../utils/excludeControls";
-
-const 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,
-  },
-] as BreakpointsType;
-
-const setBreakpoints = () => {};
-
-export default {
-  title: "Components/DataTable",
-  component: DataTable,
-  argTypes: excludeControls("className", "caption", "spanData", "collapseData"),
-};
-
-export const TableLayout: Meta<typeof DataTable> = {
-  render: (args: DataTableProps) => (
-    <div>
-      <DataTable {...args} />
-    </div>
-  ),
-  args: {
-    data,
-    columns,
-    layout: "table",
-    isSortable: false,
-  },
-};
-
-export const DivLayout: Meta<typeof DataTable> = {
-  render: (args: DataTableProps) => (
-    <div>
-      <DataTable {...args} />
-    </div>
-  ),
-  args: {
-    data,
-    columns,
-    layout: "flex",
-    isSortable: false,
-  },
-};
-
-export const Sorting: Meta<typeof DataTable> = {
-  render: (args: DataTableProps) => (
-    <div>
-      <DataTable {...args} />
-    </div>
-  ),
-  args: {
-    data,
-    columns,
-    layout: "table",
-    isSortable: true,
-  },
-};
-
-export const Collapsing: Meta<typeof DataTable> = {
-  render: (args: DataTableProps) => (
-    <div>
-      <DataTable {...args} />
-    </div>
-  ),
-  args: {
-    data,
-    columns,
-
-    collapseData: {
-      collapseOnSize: "md",
-      collapseColumns: ["lowest_excess"],
-    },
-    layout: "table",
-    isSortable: false,
-  },
-  decorators: [
-    Story => (
-      <ThemeContext.Provider
-        value={{
-          breakpoints,
-          setBreakpoints,
-          icons: baseIcons,
-        }}
-      >
-        <Story />
-      </ThemeContext.Provider>
-    ),
-  ],
-};
-
-export const ColumnSpanning: Meta<typeof DataTable> = {
-  render: (args: DataTableProps) => (
-    <div>
-      <DataTable {...args} />
-    </div>
-  ),
-  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,
-  },
-};
-
-export const RowSpanning: Meta<typeof DataTable> = {
-  render: (args: DataTableProps) => (
-    <div>
-      <DataTable {...args} />
-    </div>
-  ),
-  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,
-  },
-};
-
-export const RenderCellsWithCustomElements: Meta<typeof DataTable> = {
-  render: (args: DataTableProps) => (
-    <div>
-      <DataTable {...args} />
-    </div>
-  ),
-  args: {
-    data,
-    columns: [
-      {
-        Header: "Insurance cover",
-        accessor: "insurance_cover",
-      },
-      {
-        Header: "Lowest excess",
-        accessor: "lowest_excess",
-      },
-      {
-        Header: "Highest excess",
-        accessor: "highest_excess",
-        Cell: ({ value }) => (
-          <Flex>
-            {/* eslint-disable-next-line no-console */}
-            <Button onClick={() => console.log(value)}>Buy</Button>
-            {/* eslint-disable-next-line no-console */}
-            <Button variant="basic" onClick={() => console.log(value)}>
-              Details
-            </Button>
-          </Flex>
-        ),
-      },
-    ],
-    layout: "table",
-    isSortable: false,
-  },
-};