@simplybusiness/mobius 3.10.0 → 3.11.0

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

@@ -1,81 +0,0 @@
-import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
-import { Steps, StepItem } from ".";
-import { excludeControls } from "../../../utils/excludeControls";
-import * as StepsStories from "./Steps.stories";
-
-<Meta of={StepsStories} />
-
-# 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 of={StepsStories.Normal} />
-
-{/* 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
-
-<ArgTypes 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.stories.tsx

@@ -1,22 +0,0 @@
-import type { Meta } from "@storybook/react";
-import { Steps, StepItem, StepsProps } from ".";
-import { excludeControls } from "../../../utils/excludeControls";
-
-export default {
-  title: "Chopin/Steps",
-  component: Steps,
-  argTypes: excludeControls("className", "elementType"),
-};
-
-export const Normal: Meta<typeof Steps> = {
-  render: (args: StepsProps) => (
-    <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>
-  ),
-};

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

@@ -1,173 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

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

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

@@ -1,46 +0,0 @@
-import { Meta, ArgTypes, Canvas } from "@storybook/blocks";
-import { Testimonial, TestimonialProps } from "./Testimonial";
-import * as TestimonialStories from "./Testimonial.stories";
-
-<Meta of={TestimonialStories} />
-
-# 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 of={TestimonialStories.Normal} />
-
-## Props
-
-<ArgTypes 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.stories.tsx

@@ -1,23 +0,0 @@
-import type { Meta } from "@storybook/react";
-import { Testimonial, TestimonialProps } from "./Testimonial";
-import { excludeControls } from "../../../utils/excludeControls";
-
-export default {
-  title: "Chopin/Testimonial",
-  component: Testimonial,
-  argTypes: {
-    ...excludeControls("className"),
-  },
-};
-
-export const Normal: Meta<typeof Testimonial> = {
-  render: (args: TestimonialProps) => (
-    <Testimonial {...args}>
-      &ldquo;What&ldquo; ain&lsquo;t no country I&lsquo;ve ever heard of. They
-      speak English in What?
-    </Testimonial>
-  ),
-  args: {
-    author: "Jules Winnfield",
-  },
-};

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

@@ -1,58 +0,0 @@
-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");
-    });
-  });
-});

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

@@ -1,38 +0,0 @@
-import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
-import { DOMProps } from "@react-types/shared";
-import clsx from "clsx";
-import { ForwardedRefComponent } from "../../../types/components";
-
-export type TestimonialElementType = HTMLElement;
-
-export interface TestimonialProps
-  extends DOMProps,
-    RefAttributes<TestimonialElementType> {
-  children: ReactNode;
-  /** Custom class name for setting specific CSS */
-  className?: string;
-  author: string;
-}
-
-export type TestimonialRef = Ref<TestimonialElementType>;
-
-const Testimonial: ForwardedRefComponent<
-  TestimonialProps,
-  TestimonialElementType
-> = forwardRef((props: TestimonialProps, ref: TestimonialRef) => {
-  const { author, className, children, ...otherProps } = props;
-
-  const classes = clsx("chopin", "chopin/Testimonial", className);
-
-  return (
-    <figure ref={ref} className={classes} {...otherProps}>
-      <blockquote className="chopin/TestimonialQuote">{children}</blockquote>
-      <figcaption>
-        <cite className="chopin/TestimonialAuthor">{author}</cite>
-      </figcaption>
-    </figure>
-  );
-});
-
-Testimonial.displayName = "Testimonial";
-export { Testimonial };

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

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

package/src/components/Chopin/TradeSelector/Header/Header.tsx

@@ -1,33 +0,0 @@
-import { FocusableElement } from "@react-types/shared";
-import { DOMAttributes } from "react";
-
-import { Label } from "../../../Label";
-import { Text } from "../../../Text";
-import type { LabelProps } from "../types";
-
-export type HeaderProps = {
-  isOpen: boolean;
-  labelProps:
-    | DOMAttributes<FocusableElement>
-    | React.LabelHTMLAttributes<HTMLLabelElement>;
-  labels: LabelProps;
-};
-
-export const Header = (props: HeaderProps) => {
-  const { isOpen, labelProps, labels } = props;
-
-  if (!isOpen) return null;
-
-  return (
-    <>
-      <Label {...labelProps} className="chopin/TradeSelectorLabel" aria-hidden>
-        {labels.input}
-      </Label>
-      {labels.description && (
-        <Text className="chopin/TradeSelectorDescription" variant="caption">
-          {labels.description}
-        </Text>
-      )}
-    </>
-  );
-};

package/src/components/Chopin/TradeSelector/Header/index.tsx

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

package/src/components/Chopin/TradeSelector/Listing/Listing.test.tsx

@@ -1,42 +0,0 @@
-import React, { useRef } from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { mockTrade } from "../mockApiResults";
-import { Listing } from "./Listing";
-
-jest.mock("react", () => ({
-  ...jest.requireActual<typeof React>("react"),
-  useRef: jest.fn(),
-}));
-
-describe("Listing", () => {
-  it("renders a list of trades", () => {
-    jest.spyOn(React, "useRef").mockReturnValue({
-      current: {},
-    });
-
-    const title = "Exact matches for your search";
-    const trades = [mockTrade];
-    const resultRefs = useRef([]);
-    const onClick = jest.fn();
-    const selectedId = 0;
-
-    render(
-      <Listing
-        title={title}
-        trades={trades}
-        resultRefs={resultRefs}
-        onClick={onClick}
-        selectedId={selectedId}
-      />,
-    );
-
-    const header = screen.getByText(title);
-    const trade = screen.getByText("Landlord");
-
-    expect(header).toBeInTheDocument();
-    expect(trade).toBeInTheDocument();
-
-    fireEvent.click(trade!);
-    expect(onClick).toHaveBeenCalled();
-  });
-});

package/src/components/Chopin/TradeSelector/Listing/Listing.tsx

@@ -1,51 +0,0 @@
-import clsx from "clsx";
-import { MutableRefObject } from "react";
-import { TradeProps } from "../types";
-import { ListingItem } from "./ListingItem";
-
-export type ListingProps = {
-  title: string;
-  trades: TradeProps[];
-  resultRefs?: MutableRefObject<HTMLButtonElement[]>;
-  refCountStart?: number;
-  className?: string;
-  onClick: (trade: TradeProps) => void;
-  selectedId: number;
-};
-
-export const Listing = (props: ListingProps) => {
-  const {
-    title,
-    trades,
-    resultRefs,
-    refCountStart = 0,
-    selectedId,
-    className,
-    onClick,
-  } = props;
-  const listClasses = clsx("chopin/TradeSelectorList", className);
-
-  return (
-    <nav aria-label={title}>
-      <header className="chopin/TradeSelectorListTitle">{title}</header>
-      <ul className={listClasses}>
-        {trades.map((trade, i) => {
-          const id = refCountStart + i;
-          const selected = selectedId === id;
-          return (
-            <ListingItem
-              key={trade.value}
-              trade={trade}
-              ref={el => {
-                if (!el || !resultRefs) return;
-                resultRefs.current[id] = el;
-              }}
-              onClick={onClick}
-              selected={selected}
-            />
-          );
-        })}
-      </ul>
-    </nav>
-  );
-};