@simplybusiness/mobius 3.0.0

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

@@ -0,0 +1,213 @@
+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/Table/Table.test.tsx

@@ -0,0 +1,137 @@
+import { render, screen } from "@testing-library/react";
+import { Table } from ".";
+
+const TABLE_CLASS_NAME = "mobius/Table";
+
+describe("Test for Table", () => {
+  it("renders an empty table", () => {
+    const component = render(<Table />);
+    expect(component).toBeTruthy();
+  });
+
+  describe("uses correct class names", () => {
+    describe("uses the Mobius class name", () => {
+      beforeEach(() => {
+        render(
+          <Table data-testid="table">
+            <Table.Head data-testid="head">
+              <Table.Row data-testid="row">
+                <Table.HeaderCell data-testid="headerCell">
+                  Browser
+                </Table.HeaderCell>
+              </Table.Row>
+            </Table.Head>
+            <Table.Body data-testid="body">
+              <Table.Row>
+                <Table.Cell data-testid="cell">Cell</Table.Cell>
+              </Table.Row>
+            </Table.Body>
+            <Table.Foot data-testid="foot" />
+          </Table>,
+        );
+      });
+
+      it.each([
+        ["Table", "table"],
+        ["Table.Head", "head"],
+        ["Table.Body", "body"],
+        ["Table.Foot", "foot"],
+        ["Table.Row", "row"],
+        ["Table.HeaderCell", "headerCell"],
+        ["Table.Cell", "cell"],
+      ])("for the %s component", (_component, testId) => {
+        expect(screen.getByTestId(testId)).toHaveClass("mobius");
+      });
+    });
+
+    it("uses table component class names", () => {
+      render(
+        <Table data-testid="test">
+          <Table.Head>
+            <Table.Row>
+              <Table.HeaderCell>Browser</Table.HeaderCell>
+              <Table.HeaderCell>Number of unique visitors</Table.HeaderCell>
+              <Table.HeaderCell>Header</Table.HeaderCell>
+              <Table.HeaderCell>Header</Table.HeaderCell>
+              <Table.HeaderCell>Header</Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.HeaderCell>Cell</Table.HeaderCell>
+              <Table.Cell>Cell</Table.Cell>
+              <Table.Cell>Cell</Table.Cell>
+              <Table.Cell>Cell</Table.Cell>
+              <Table.Cell>Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+          <Table.Foot />
+        </Table>,
+      );
+      // Table and head
+      expect(screen.getByTestId("test")).toHaveClass(TABLE_CLASS_NAME);
+      const head = screen.getByTestId("test").firstChild;
+      expect(head).toHaveClass("mobius/TableHead");
+      expect(head?.firstChild).toHaveClass("mobius/TableRow");
+      expect(head?.firstChild?.firstChild).toHaveClass("mobius/TableHeadCell");
+      // Body
+      const body = screen.getByTestId("test").childNodes[1];
+      expect(body).toHaveClass("mobius/TableBody");
+      expect(body?.firstChild).toHaveClass("mobius/TableRow");
+      expect(body?.firstChild?.firstChild).toHaveClass("mobius/TableHeadCell");
+      // Foot
+      const foot = screen.getByTestId("test").childNodes[2];
+      expect(foot).toHaveClass("mobius/TableFoot");
+    });
+
+    it("includes custom class name", () => {
+      render(
+        <Table data-testid="test" className="my-table">
+          <Table.Head className="my-header">
+            <Table.Row className="my-header-row">
+              <Table.HeaderCell className="my-header-cell">
+                Browser
+              </Table.HeaderCell>
+              <Table.HeaderCell>Number of unique visitors</Table.HeaderCell>
+              <Table.HeaderCell>Header</Table.HeaderCell>
+              <Table.HeaderCell>Header</Table.HeaderCell>
+              <Table.HeaderCell>Header</Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body className="my-body">
+            <Table.Row className="my-body-row">
+              <Table.HeaderCell className="my-body-cell">Cell</Table.HeaderCell>
+              <Table.Cell>Cell</Table.Cell>
+              <Table.Cell>Cell</Table.Cell>
+              <Table.Cell>Cell</Table.Cell>
+              <Table.Cell>Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+          <Table.Foot className="my-footer" />
+        </Table>,
+      );
+      // Table and head
+      expect(screen.getByTestId("test")).toHaveClass(TABLE_CLASS_NAME);
+      expect(screen.getByTestId("test")).toHaveClass("my-table");
+      const head = screen.getByTestId("test").firstChild;
+      expect(head).toHaveClass("mobius/TableHead");
+      expect(head).toHaveClass("my-header");
+      expect(head?.firstChild).toHaveClass("mobius/TableRow");
+      expect(head?.firstChild).toHaveClass("my-header-row");
+      expect(head?.firstChild?.firstChild).toHaveClass("mobius/TableHeadCell");
+      expect(head?.firstChild?.firstChild).toHaveClass("my-header-cell");
+      // Body
+      const body = screen.getByTestId("test").childNodes[1];
+      expect(body).toHaveClass("mobius/TableBody");
+      expect(body).toHaveClass("my-body");
+      expect(body?.firstChild).toHaveClass("mobius/TableRow");
+      expect(body?.firstChild).toHaveClass("my-body-row");
+      expect(body?.firstChild?.firstChild).toHaveClass("mobius/TableHeadCell");
+      expect(body?.firstChild?.firstChild).toHaveClass("my-body-cell");
+      // Foot
+      const foot = screen.getByTestId("test").childNodes[2];
+      expect(foot).toHaveClass("mobius/TableFoot");
+      expect(foot).toHaveClass("my-footer");
+    });
+  });
+});

package/src/components/Table/Table.tsx

@@ -0,0 +1,24 @@
+import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+
+export type TableElementType = HTMLTableElement;
+
+export interface TableProps extends DOMProps, RefAttributes<TableElementType> {
+  children?: ReactNode;
+  className?: string;
+}
+
+export type TableRef = Ref<TableElementType>;
+
+const Table: ForwardedRefComponent<TableProps, TableElementType> = forwardRef(
+  (props: TableProps, ref: TableRef) => {
+    const classes = clsx("mobius", "mobius/Table", props.className);
+
+    return <table ref={ref} {...props} className={classes} />;
+  },
+);
+
+Table.displayName = "Table";
+export { Table };

package/src/components/Table/index.tsx

@@ -0,0 +1,71 @@
+import { ForwardedRefComponent } from "../../types/components";
+import { Table as TableComponent, TableProps, TableRef } from "./Table";
+import { Head } from "./Head";
+import { Body } from "./Body";
+import { Foot } from "./Foot";
+import { Row } from "./Row";
+import { HeaderCell } from "./HeaderCell";
+import { Cell } from "./Cell";
+
+import type { TableElementType } from "./Table";
+import type {
+  HeadProps as TableHeadProps,
+  HeadRef as TableHeadRef,
+} from "./Head";
+import type {
+  BodyProps as TableBodyProps,
+  BodyRef as TableBodyRef,
+} from "./Body";
+import type {
+  FootProps as TableFootProps,
+  FootRef as TableFootRef,
+} from "./Foot";
+import type { RowProps as TableRowProps, RowRef as TableRowRef } from "./Row";
+import type {
+  HeaderCellProps as TableHeaderCellProps,
+  HeaderCellRef as TableHeaderCellRef,
+} from "./HeaderCell";
+import type {
+  CellProps as TableCellProps,
+  CellRef as TableCellRef,
+} from "./Cell";
+
+export interface TableCompound
+  extends ForwardedRefComponent<TableProps, HTMLTableElement> {
+  Head: ForwardedRefComponent<TableHeadProps, HTMLTableSectionElement>;
+  Body: ForwardedRefComponent<TableBodyProps, HTMLTableSectionElement>;
+  Foot: ForwardedRefComponent<TableFootProps, HTMLTableSectionElement>;
+  Row: ForwardedRefComponent<TableRowProps, HTMLTableRowElement>;
+  HeaderCell: ForwardedRefComponent<TableHeaderCellProps, HTMLTableCellElement>;
+  Cell: ForwardedRefComponent<TableCellProps, HTMLTableCellElement>;
+}
+
+const Table: TableCompound = Object.assign(TableComponent, {
+  Head,
+  Body,
+  Foot,
+  Row,
+  HeaderCell,
+  Cell,
+});
+
+export type {
+  TableElementType,
+  TableProps,
+  TableRef,
+  TableHeadProps,
+  TableHeadRef,
+  TableBodyProps,
+  TableBodyRef,
+  TableFootProps,
+  TableFootRef,
+  TableRowProps,
+  TableRowRef,
+  TableHeaderCellProps,
+  TableHeaderCellRef,
+  TableCellProps,
+  TableCellRef,
+};
+
+Table.displayName = "Table";
+export { Table };

package/src/components/Text/Text.story.mdx

@@ -0,0 +1,180 @@
+import styled from "@emotion/styled";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Text } from "./Text";
+import { Box } from "..";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Components/Text"
+  component={Text}
+  argTypes={excludeControls("className", "style")}
+/>
+
+# Text
+
+Text is a typographic component that styles its content according to the theme. It can be used to render different HTML text tags.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Text } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+<Canvas>
+  <Box>
+    <Text elementType="h1">Heading 1</Text>
+    <Text elementType="h2">Heading 2</Text>
+    <Text elementType="h3">Heading 3</Text>
+    <Text elementType="h4">Heading 4</Text>
+    <Text elementType="h5">Heading 5</Text>
+    <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.
+      Etiam et tortor a nunc hendrerit luctus sed at nunc. Lorem ipsum dolor sit
+      amet, consectetur adipiscing elit. Nullam id turpis nisl. In hac habitasse
+      platea dictumst. Morbi blandit sodales nibh, auctor dapibus orci
+      pellentesque sit amet. Etiam posuere massa vel imperdiet dapibus. Morbi
+      sed tempor neque, sit amet viverra magna. Etiam efficitur augue accumsan,
+      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
+      eget, venenatis id elit. Lorem ipsum dolor sit amet, consectetur
+      adipiscing elit. Quisque blandit et erat nec placerat. Vestibulum vitae
+      risus pellentesque, semper odio eget, elementum orci. Nam pulvinar metus
+      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,
+      elit eu dapibus pharetra, purus turpis egestas enim, vel pulvinar leo
+      libero ac ante. Sed posuere, mi a commodo bibendum, dui lacus ullamcorper
+      dolor, ut dapibus nunc libero vel felis. Morbi quis porttitor nisi. Aenean
+      ac elit ipsum. Curabitur nunc nibh, tristique non purus vel, efficitur
+      vulputate massa. Donec eget risus venenatis turpis tempor venenatis. Nam
+      aliquet ipsum non faucibus tempus. Vestibulum efficitur ex erat, eget
+      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>
+</Canvas>
+
+### Themed
+
+export const StyledText = styled(Text)`
+  color: green;
+`;
+
+<Story name="Themed" args={{ elementType: "h4", variant: "h4" }}>
+  {args => <StyledText {...args}>Sample Text</StyledText>}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { Text } from "@simplybusiness/mobius";
+import styled from "@emotion/styled";
+
+const StyledText = styled(Text)`
+  color: green;
+`;
+
+<StyledText>Sample Text</StyledText>
+```
+
+### Variant
+
+Override text presentation with a named variant.
+
+<Canvas>
+  <div style={{ display: "flex", flexDirection: "column" }}>
+    <Text variant="h1">variant h1</Text>
+    <Text variant="h2">variant h2</Text>
+    <Text variant="h3">variant h3</Text>
+    <Text variant="h4">variant h4</Text>
+    <Text variant="h5">variant h5</Text>
+    <Text variant="lead">variant lead</Text>
+    <Text variant="body">variant body</Text>
+    <Text variant="caption">variant caption</Text>
+    <Text variant="legal">variant legal</Text>
+  </div>
+</Canvas>
+
+### Spacing
+
+Set the spacing to "loose" or "tight" to override the default line height for text. This applies to any element type or variant.
+
+<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>
+
+## Props
+
+<ArgsTable of={Text} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for Text. The element type is added as a class.
+
+```html
+<h4 class="mobius/Text h4">{text}</h4>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Text) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Text/Text.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/react";
+import { Text } from ".";
+
+const CLASS_NAME = "mobius/Text";
+
+describe("Text", () => {
+  it("should render without errors", () => {
+    render(<Text elementType="h1">Sample text</Text>);
+  });
+
+  describe("given elementType", () => {
+    it("is not applied as element attribute", () => {
+      const { container } = render(<Text elementType="h6">Sample text</Text>);
+      expect(container.firstChild).not.toHaveAttribute("elementtype", "h6");
+    });
+  });
+
+  describe("uses correct class names", () => {
+    it("uses Mobius class", () => {
+      render(
+        <Text elementType="h1" data-testid="test">
+          Sample text
+        </Text>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass("mobius");
+    });
+
+    it("uses base Mobius class", () => {
+      render(
+        <Text elementType="h1" data-testid="test">
+          Sample text
+        </Text>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+
+    it("includes custom class name", () => {
+      render(
+        <Text elementType="h1" className="my-class" data-testid="test">
+          Sample text
+        </Text>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass("my-class");
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+  });
+});