@simplybusiness/mobius 3.0.0

package/src/components/Chopin/Section/Section.story.mdx

@@ -0,0 +1,75 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Text } from "../../Text";
+import { Section, SectionProps } from "./Section";
+import { excludeControls } from "../../../utils/excludeControls";
+
+<Meta
+  title="Chopin/Section"
+  component={Section}
+  argTypes={excludeControls("className", "elementType")}
+/>
+
+# Section
+
+The `Section` component is used for grouping a set of related elements together. An example may be a `Section` for contact details as part of a long form.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Chopin } from "@simplybusiness/mobius";
+```
+
+## Normal
+
+<Story name="Normal" args={{ title: "Section title" }}>
+  {args => (
+    <Section {...args}>
+      <Text>
+        Vestibulum luctus diam a accumsan consequat. Fusce odio orci, iaculis
+        sed nibh id, pellentesque consequat mauris. Quisque eget erat eu quam
+        varius ullamcorper. Class aptent taciti sociosqu ad litora torquent per
+        conubia nostra, per inceptos himenaeos. Nam dignissim sapien massa,
+        vitae fringilla ligula volutpat at. Nulla facilisi. Quisque ultricies
+        iaculis est, in tempor ligula fermentum sed. Nullam dapibus et ligula
+        eget hendrerit. Integer porttitor vestibulum augue id ornare. Cras
+        pretium sapien interdum ornare aliquet.
+      </Text>
+    </Section>
+  )}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { Chopin, Text } from "@simplybusiness/mobius";
+
+<Chopin.Section title="Section title">
+  <Text>
+    Vestibulum luctus diam a accumsan consequat. Fusce odio orci, iaculis sed nibh id, pellentesque consequat mauris. Quisque eget erat eu quam varius ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam dignissim sapien massa, vitae fringilla ligula volutpat at. Nulla facilisi. Quisque ultricies iaculis est, in tempor ligula fermentum sed. Nullam dapibus et ligula eget hendrerit. Integer porttitor vestibulum augue id ornare. Cras pretium sapien interdum ornare aliquet.
+  </Text>
+</Chopin.Section>
+```
+
+## Props
+
+<ArgsTable of={Section} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Section:
+
+```html
+<div class="mobius mobius/Section">
+  <h2 class="mobius/SectionTitle">{title}</h2>
+  {children}
+</div>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Chopin/Section) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Chopin/Section/Section.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+import { Section } from ".";
+
+describe("Section", () => {
+  it("should render without errors", () => {
+    const title = "Sample title";
+    const content = "Sample text";
+
+    const { container } = render(<Section title={title}>{content}</Section>);
+
+    expect(screen.getByText(title)).toBeInTheDocument();
+    expect(container.getElementsByTagName("h2").length).toBe(1);
+    expect(screen.getByText(content)).toBeInTheDocument();
+  });
+
+  describe("given elementType", () => {
+    it("is not applied as element attribute", () => {
+      const { container } = render(
+        <Section elementType="ul">Sample text</Section>,
+      );
+      expect(container.firstChild).not.toHaveAttribute("elementtype", "ul");
+    });
+  });
+
+  describe("when title is not provided", () => {
+    it("should only render child elements", () => {
+      const content = "Sample text";
+
+      const { container } = render(<Section>{content}</Section>);
+
+      expect(container.getElementsByTagName("h2").length).toBe(0);
+      expect(screen.getByText(content)).toBeInTheDocument();
+    });
+  });
+
+  describe("when no content is provided", () => {
+    it("should only render the container", () => {
+      const { container } = render(<Section />);
+
+      expect(container.getElementsByTagName("h2").length).toBe(0);
+      expect(container.firstChild).toBeEmptyDOMElement();
+    });
+  });
+});

package/src/components/Chopin/Section/Section.tsx

@@ -0,0 +1,40 @@
+import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../../types/components";
+
+export type SectionElementType = HTMLDivElement;
+
+export interface SectionProps
+  extends DOMProps,
+    RefAttributes<SectionElementType> {
+  children?: ReactNode;
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  elementType?: string | React.ElementType;
+  title?: string;
+}
+
+export type SectionRef = Ref<SectionElementType>;
+
+const Section: ForwardedRefComponent<SectionProps, SectionElementType> =
+  forwardRef((props: SectionProps, ref: SectionRef) => {
+    const {
+      elementType: Element = "div",
+      title,
+      children,
+      ...otherProps
+    } = props;
+
+    const classes = clsx("chopin", "chopin/Section", otherProps.className);
+
+    return (
+      <Element ref={ref} {...otherProps} className={classes}>
+        {title && <h2 className="chopin/SectionTitle">{title}</h2>}
+        {children}
+      </Element>
+    );
+  });
+
+Section.displayName = "Section";
+export { Section };

package/src/components/Chopin/Section/index.tsx

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

package/src/components/Chopin/Steps/StepItem.tsx

@@ -0,0 +1,89 @@
+import {
+  Ref,
+  forwardRef,
+  RefAttributes,
+  ReactNode,
+  ComponentProps,
+} from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { tick } from "@simplybusiness/icons";
+import { Link } from "react-router-dom";
+import { ForwardedRefComponent } from "../../../types/components";
+import { Icon } from "../../Icon";
+
+export type StepItemElementType = HTMLLIElement;
+
+export interface StepItemProps
+  extends DOMProps,
+    RefAttributes<StepItemElementType> {
+  children?: ReactNode;
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  elementType?: React.ElementType;
+  linkElementType?: React.ElementType;
+  name: string;
+  index?: number;
+  active?: boolean;
+  url?: string;
+  completed?: boolean;
+  to?: ComponentProps<typeof Link>["to"];
+}
+
+export type StepItemRef = Ref<StepItemElementType>;
+
+const StepItem: ForwardedRefComponent<StepItemProps, StepItemElementType> =
+  forwardRef((props: StepItemProps, ref: StepItemRef) => {
+    const {
+      elementType: Element = "li",
+      linkElementType: LinkElement = "a",
+      completed,
+      url,
+      to,
+      name,
+      active,
+      index,
+      ...otherProps
+    } = props;
+
+    const classes = clsx(
+      "chopin",
+      "chopin/StepItem",
+      {
+        "--is-active": active,
+        "--is-completed": completed,
+        "--is-unstarted": !completed && !active,
+      },
+      otherProps.className,
+    );
+    const nameClasses = clsx("chopin", "chopin/StepName");
+    const linkClasses = clsx("chopin", "chopin/StepLink");
+    const iconClasses = clsx("chopin", "chopin/StepIcon");
+    const ariaLabel = `Step ${index}${name ? `, ${name}` : ""}${
+      completed ? ", Complete" : ""
+    }`;
+
+    return (
+      <Element
+        ref={ref}
+        aria-label={ariaLabel}
+        aria-current={active ? "step" : undefined}
+        {...otherProps}
+        className={classes}
+      >
+        {completed ? (
+          <LinkElement className={linkClasses} href={url} to={to}>
+            <span className={iconClasses}>
+              <Icon icon={tick} css={{ height: "100%" }} />
+            </span>
+            <span className={nameClasses}>{name}</span>
+          </LinkElement>
+        ) : (
+          <span className={nameClasses}>{name}</span>
+        )}
+      </Element>
+    );
+  });
+
+StepItem.displayName = "StepItem";
+export { StepItem };

package/src/components/Chopin/Steps/Steps.story.mdx

@@ -0,0 +1,95 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Steps, StepItem } from ".";
+import { excludeControls } from "../../../utils/excludeControls";
+
+<Meta
+  title="Chopin/Steps"
+  component={Steps}
+  argTypes={excludeControls("className", "elementType")}
+/>
+
+# Steps
+
+The `Steps` component is used to inform the user where they are on their journey. The component shows the total number of sections (steps), clearly identifying the completed sections, as well as the currently active section.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Chopin } from "@simplybusiness/mobius";
+```
+
+## Normal
+
+<Story name="Normal">
+  {args => (
+    <Steps {...args}>
+      <StepItem name="Your business" url="#link-placeholder-1" completed />
+      <StepItem name="Your employees" url="#link-placeholder-2" completed />
+      <StepItem name="Cover options" url="#link-placeholder-3" active />
+      <StepItem name="Business questions" url="#link-placeholder-4" />
+      <StepItem name="Agreements" url="#link-placeholder-5" />
+      <StepItem name="Your quotes" url="#link-placeholder-6" />
+    </Steps>
+  )}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { Chopin } from "@simplybusiness/mobius";
+
+<Chopin.Steps size="lg">
+  <Chopin.StepItem name="Your business" url="#link-placeholder-1" completed />
+  <Chopin.StepItem name="Your employees" url="#link-placeholder-2" completed />
+  <Chopin.StepItem name="Cover options" url="#link-placeholder-3" active />
+  <Chopin.StepItem name="Business questions" url="#link-placeholder-4" />
+  <Chopin.StepItem name="Agreements" url="#link-placeholder-5" />
+  <Chopin.StepItem name="Your quotes" url="#link-placeholder-6" />
+</Chopin.Steps>
+```
+
+## Props
+
+<ArgsTable of={Steps} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Steps:
+
+```html
+<ol class="mobius mobius/Steps --is-lg">
+  <li
+    aria-label="Step 1, Your business, Complete"
+    class="mobius mobius/StepItem --is-completed"
+  >
+    <a class="mobius mobius/StepLink" href="#link-placeholder-1">
+      <span class="mobius mobius/StepIcon">
+        <svg class="mobius mobius/Icon">...</svg>
+      </span>
+      <span class="mobius mobius/StepName">Your business</span>
+    </a>
+  </li>
+  <li
+    aria-label="Step 2, Your employees"
+    class="mobius mobius/StepItem --is-active"
+  >
+    <span class="mobius mobius/StepName">Your employees</span>
+  </li>
+  <li
+    aria-label="Step 3, Cover options"
+    aria-current="step"
+    class="mobius mobius/StepItem --is-unstarted"
+  >
+    <span class="mobius mobius/StepName">Cover options</span>
+  </li>
+</ol>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Steps) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Chopin/Steps/Steps.test.tsx

@@ -0,0 +1,173 @@
+import { render, screen } from "@testing-library/react";
+import { Steps, StepItem } from ".";
+
+const STEPS_CLASS_NAME = "chopin/Steps";
+const STEP_ITEM_CLASS_NAME = "chopin/StepItem";
+const STEP_ITEM_ACTIVE_CLASS_NAME = "--is-active";
+const STEP_ITEM_COMPLETED_CLASS_NAME = "--is-completed";
+const STEP_ITEM_UNSTARTED_CLASS_NAME = "--is-unstarted";
+const STEP_NAME_CLASS_NAME = "chopin/StepName";
+const STEP_LINK_CLASS_NAME = "chopin/StepLink";
+const STEP_ICON_CLASS_NAME = "chopin/StepIcon";
+
+describe("Steps", () => {
+  it("should render without errors", () => {
+    const title = "Introduction";
+
+    const { container } = render(
+      <Steps>
+        <StepItem name={title} />
+      </Steps>,
+    );
+
+    expect(screen.getByText(title)).toBeInTheDocument();
+    expect(container.getElementsByTagName("ol").length).toBe(1);
+  });
+
+  it("should render with default class names", () => {
+    const { container } = render(<Steps />);
+
+    expect(container.firstChild).toHaveClass(STEPS_CLASS_NAME);
+  });
+
+  it("should render with custom class name", () => {
+    const CUSTOM_CLASS_NAME = "my-test-steps";
+    const { container } = render(<Steps className={CUSTOM_CLASS_NAME} />);
+
+    expect(container.firstChild).toHaveClass(STEPS_CLASS_NAME);
+    expect(container.firstChild).toHaveClass(CUSTOM_CLASS_NAME);
+  });
+
+  describe("given elementType", () => {
+    it("is not applied as element attribute", () => {
+      const { container } = render(
+        <Steps elementType="ul">
+          <StepItem name="Your business" url="#test" elementType="li" />
+        </Steps>,
+      );
+      const listItem = screen.getByLabelText("Step 1, Your business");
+      expect(container.firstChild).not.toHaveAttribute("elementtype", "ul");
+      expect(listItem).not.toHaveAttribute("elementtype", "li");
+    });
+  });
+
+  describe("given a list of completed, active and unstarted steps", () => {
+    it("renders them with appropriate HTML elements", () => {
+      render(
+        <Steps>
+          <StepItem name="Your business" url="#first" completed />
+          <StepItem name="Your employees" url="#second" completed />
+          <StepItem name="Cover options" url="#third" completed />
+          <StepItem name="Business questions" url="#fourth" active />
+          <StepItem name="Agreements" url="#fifth" />
+          <StepItem name="Your quotes" url="#sixth" />
+        </Steps>,
+      );
+
+      const listItems = screen.queryAllByRole("listitem");
+      const links = screen.queryAllByRole("link");
+
+      expect(listItems.length).toBe(6);
+      expect(links.length).toBe(3);
+    });
+
+    it("renders them with appropriate class names", () => {
+      const EXPECTED_LIST_ITEMS = 6;
+      const EXPECTED_ACTIVE_ITEMS = 1;
+      const EXPECTED_COMPLETED_ITEMS = 3;
+      const EXPECTED_UNSTARTED_ITEMS = 2;
+      const EXPECTED_TITLES = 6;
+      const EXPECTED_LINKS = 3;
+      const EXPECTED_ICONS = 3;
+
+      const { container } = render(
+        <Steps>
+          <StepItem name="Your business" url="#first" completed />
+          <StepItem name="Your employees" url="#second" completed />
+          <StepItem name="Cover options" url="#third" completed />
+          <StepItem name="Business questions" url="#fourth" active />
+          <StepItem name="Agreements" url="#fifth" />
+          <StepItem name="Your quotes" url="#sixth" />
+        </Steps>,
+      );
+
+      const listItemClasses =
+        container.getElementsByClassName(STEP_ITEM_CLASS_NAME);
+      const activeItemClasses = container.getElementsByClassName(
+        STEP_ITEM_ACTIVE_CLASS_NAME,
+      );
+      const completedItemClasses = container.getElementsByClassName(
+        STEP_ITEM_COMPLETED_CLASS_NAME,
+      );
+      const unstartedItemClasses = container.getElementsByClassName(
+        STEP_ITEM_UNSTARTED_CLASS_NAME,
+      );
+      const nameClasses =
+        container.getElementsByClassName(STEP_NAME_CLASS_NAME);
+      const linkClasses =
+        container.getElementsByClassName(STEP_LINK_CLASS_NAME);
+      const iconClasses =
+        container.getElementsByClassName(STEP_ICON_CLASS_NAME);
+
+      expect(listItemClasses.length).toBe(EXPECTED_LIST_ITEMS);
+      expect(activeItemClasses.length).toBe(EXPECTED_ACTIVE_ITEMS);
+      expect(completedItemClasses.length).toBe(EXPECTED_COMPLETED_ITEMS);
+      expect(unstartedItemClasses.length).toBe(EXPECTED_UNSTARTED_ITEMS);
+      expect(nameClasses.length).toBe(EXPECTED_TITLES);
+      expect(linkClasses.length).toBe(EXPECTED_LINKS);
+      expect(iconClasses.length).toBe(EXPECTED_ICONS);
+    });
+
+    it("renders them with appropriate labels and attributes", () => {
+      const yourBusinessText = "Your business";
+      const businessQuestionsText = "Business questions";
+      const coverOptionsText = "CoverOptions";
+      const coverOptionsLink = "#third";
+
+      render(
+        <Steps>
+          <StepItem name={yourBusinessText} url="#first" completed />
+          <StepItem name="Your employees" url="#second" completed />
+          <StepItem name={coverOptionsText} url={coverOptionsLink} completed />
+          <StepItem name={businessQuestionsText} url="#fourth" active />
+          <StepItem name="Agreements" url="#fifth" />
+          <StepItem name="Your quotes" url="#sixth" />
+        </Steps>,
+      );
+
+      const activeItem = screen.getByText(businessQuestionsText).closest("li");
+      const completedItem = screen.getByText(coverOptionsText).closest("a");
+      const completedAriaLabel = screen.getByLabelText(
+        `Step 1, ${yourBusinessText}, Complete`,
+      );
+      const activeAriaLabel = screen.getByLabelText(
+        `Step 4, ${businessQuestionsText}`,
+      );
+
+      expect(completedAriaLabel).toBeInTheDocument();
+      expect(activeAriaLabel).toBeInTheDocument();
+      expect(activeItem).toHaveAttribute("aria-current", "step");
+      expect(completedItem).toHaveAttribute("href", coverOptionsLink);
+    });
+
+    it("renders with the correct linkElementType component", () => {
+      const CustomComponent = () => (
+        // eslint-disable-next-line jsx-a11y/anchor-is-valid
+        <a data-testid="custom-link" href="#">
+          Dummy
+        </a>
+      );
+      render(
+        <Steps>
+          <StepItem
+            name="Your business"
+            url="#first"
+            completed
+            linkElementType={CustomComponent}
+          />
+        </Steps>,
+      );
+      expect(screen.getByTestId("custom-link")).toBeInTheDocument();
+    });
+  });
+});

package/src/components/Chopin/Steps/Steps.tsx

@@ -0,0 +1,48 @@
+import {
+  Children,
+  isValidElement,
+  cloneElement,
+  Ref,
+  forwardRef,
+  RefAttributes,
+  ReactNode,
+} from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../../types/components";
+
+export type StepsElementType = HTMLOListElement;
+
+export interface StepsProps extends DOMProps, RefAttributes<StepsElementType> {
+  children?: ReactNode;
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  elementType?: React.ElementType;
+}
+
+export type StepsRef = Ref<StepsElementType>;
+
+const Steps: ForwardedRefComponent<StepsProps, StepsElementType> = forwardRef(
+  (props: StepsProps, ref: StepsRef) => {
+    const { elementType: Element = "ol", children, ...otherProps } = props;
+
+    const classes = clsx("chopin", "chopin/Steps", otherProps.className);
+
+    return (
+      <Element ref={ref} {...otherProps} className={classes}>
+        {Children.map(children, (child, index) => {
+          if (isValidElement(child)) {
+            return cloneElement(child, {
+              index: index + 1,
+            } as any);
+          }
+
+          return child;
+        })}
+      </Element>
+    );
+  },
+);
+
+Steps.displayName = "Steps";
+export { Steps };

package/src/components/Chopin/Steps/index.tsx

@@ -0,0 +1,2 @@
+export * from "./Steps";
+export * from "./StepItem";

package/src/components/Chopin/Testimonial/Testimonial.story.mdx

@@ -0,0 +1,58 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Testimonial, TestimonialProps } from "./Testimonial";
+
+<Meta title="Chopin/Testimonial" component={Testimonial} />
+
+# Testimonial
+
+The `Testimonial` component is used for providing testimonials from customers.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Testimonial } from "@simplybusiness/mobius";
+```
+
+## Normal
+
+<Canvas>
+  <Story
+    name="Normal"
+    args={{
+      author: "Jules Winnfield",
+    }}
+  >
+    {args => (
+      <Testimonial {...args}>
+        "What" ain't no country I've ever heard of. They speak English in What?
+      </Testimonial>
+    )}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Testimonial} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Testimonial:
+
+```html
+<figure class="chopin chopin/Testimonial">
+  <blockquote class="chopin/TestimonialQuote">Quote</blockquote>
+  <figcaption>
+    <cite class="chopin/TestimonialAuthor">Author</cite>
+  </figcaption>
+</figure>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Chopin/Testimonial) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Chopin/Testimonial/Testimonial.test.tsx

@@ -0,0 +1,58 @@
+import { render } from "@testing-library/react";
+import { Testimonial } from ".";
+
+describe("Testimonial", () => {
+  it("should render without errors", () => {
+    render(<Testimonial author="Jane Doe">Sample text</Testimonial>);
+  });
+
+  it("should render with children", () => {
+    const { container } = render(
+      <Testimonial author="Jane Doe">Quote</Testimonial>,
+    );
+    expect(container.firstChild).toHaveTextContent("Quote");
+  });
+
+  describe("class names", () => {
+    it("should have chopin class", () => {
+      const { container } = render(
+        <Testimonial author="Jane Doe">Quote</Testimonial>,
+      );
+      expect(container.firstChild).toHaveClass("chopin");
+    });
+
+    it("should have chopin/Testimonial class", () => {
+      const { container } = render(
+        <Testimonial author="Jane Doe">Quote</Testimonial>,
+      );
+      expect(container.firstChild).toHaveClass("chopin/Testimonial");
+    });
+
+    it("should have chopin/TestimonialAuthor class", () => {
+      const { container } = render(
+        <Testimonial author="Jane Doe">Quote</Testimonial>,
+      );
+      expect(container.querySelector("cite")).toHaveClass(
+        "chopin/TestimonialAuthor",
+      );
+    });
+
+    it("should have chopin/TestimonialQuote class", () => {
+      const { container } = render(
+        <Testimonial author="Jane Doe">Quote</Testimonial>,
+      );
+      expect(container.querySelector("blockquote")).toHaveClass(
+        "chopin/TestimonialQuote",
+      );
+    });
+
+    it("should have custom class", () => {
+      const { container } = render(
+        <Testimonial author="Jane Doe" className="custom">
+          Quote
+        </Testimonial>,
+      );
+      expect(container.firstChild).toHaveClass("custom");
+    });
+  });
+});