@simplybusiness/mobius 3.9.4 → 3.11.0

package/src/components/Chopin/Actions/Actions.stories.tsx

@@ -1,81 +0,0 @@
-import type { Meta } from "@storybook/react";
-import { Actions, ActionsProps } from ".";
-import { excludeControls } from "../../../utils/excludeControls";
-
-export default {
-  title: "Chopin/Actions",
-  component: Actions,
-  argTypes: excludeControls("className", "backButton", "nextButton"),
-};
-
-export const Normal: Meta<typeof Actions> = {
-  render: (args: ActionsProps) => (
-    <div>
-      <Actions {...args} />
-    </div>
-  ),
-  args: {
-    backLabel: "Back",
-    nextLabel: "Next Step",
-  },
-};
-
-export const WithLinks: Meta<typeof Actions> = {
-  render: (args: ActionsProps) => (
-    <div>
-      <Actions {...args} />
-    </div>
-  ),
-  args: {
-    backLabel: "Back",
-    backButton: {
-      href: "https://www.example.com",
-    },
-    nextLabel: "Next Step",
-    nextButton: {
-      href: "https://www.google.com",
-    },
-  },
-};
-
-export const OneAction: Meta<typeof Actions> = {
-  render: (args: ActionsProps) => (
-    <div>
-      <Actions {...args} />
-    </div>
-  ),
-  args: {
-    nextLabel: "Next Step",
-  },
-  argTypes: excludeControls("backLabel", "backLink"),
-};
-
-export const OneBackAction: Meta<typeof Actions> = {
-  render: (args: ActionsProps) => (
-    <div>
-      <Actions {...args} />
-    </div>
-  ),
-  args: {
-    backLabel: "Back",
-  },
-  argTypes: excludeControls("nextLabel", "nextLink"),
-};
-
-export const DisabledActions: Meta<typeof Actions> = {
-  render: (args: ActionsProps) => (
-    <div>
-      <Actions {...args} />
-    </div>
-  ),
-  args: {
-    backLabel: "Back",
-    backButton: {
-      isDisabled: true,
-    },
-    nextLabel: "Next Step",
-    nextButton: {
-      isDisabled: true,
-    },
-  },
-};

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

@@ -1,146 +0,0 @@
-import { render, screen, fireEvent } from "@testing-library/react";
-import { Actions } from ".";
-
-const ACTION_CLASS_NAME = "chopin/Actions";
-const BACK_ACTION_CLASS_NAME = "chopin/ActionsBack";
-const NEXT_ACTION_CLASS_NAME = "chopin/ActionsNext";
-const NEXT_SINGLE_ACTION_CLASS_NAME = "--single-action";
-
-const backLabel = "Back";
-const mockOnBackClick = jest.fn();
-const BackLink = {
-  href: "https://test.com",
-};
-const mockOnNextClick = jest.fn();
-const nextLabel = "Next step";
-const NextLink = {
-  href: "https://test.com",
-};
-
-describe("Actions", () => {
-  describe("uses correct class names", () => {
-    it("includes custom class name", () => {
-      render(
-        <Actions
-          data-testid="test-id"
-          className="my-class"
-          nextButton={{ ...NextLink }}
-          nextLabel={nextLabel}
-          backButton={{ ...BackLink }}
-          backLabel={backLabel}
-        />,
-      );
-      expect(screen.getByTestId("test-id")).toHaveClass("chopin");
-      expect(screen.getByTestId("test-id")).toHaveClass("my-class");
-      expect(screen.getByTestId("test-id")).toHaveClass(ACTION_CLASS_NAME);
-    });
-
-    it("uses links class names", () => {
-      render(
-        <Actions
-          backButton={{ ...BackLink }}
-          backLabel={backLabel}
-          nextButton={{ ...NextLink }}
-          nextLabel={nextLabel}
-        />,
-      );
-      const nextLinkEl = screen.getByRole("link", { name: /next step/i });
-      expect(screen.getByRole("link", { name: /back/i })).toHaveClass(
-        BACK_ACTION_CLASS_NAME,
-      );
-      expect(nextLinkEl).toHaveClass(NEXT_ACTION_CLASS_NAME);
-      expect(nextLinkEl).not.toHaveClass(NEXT_SINGLE_ACTION_CLASS_NAME);
-    });
-
-    it("uses --single-action class name with one action btn", () => {
-      render(<Actions nextButton={{ ...NextLink }} nextLabel={nextLabel} />);
-      expect(screen.getByRole("link", { name: /next step/i })).toHaveClass(
-        NEXT_SINGLE_ACTION_CLASS_NAME,
-      );
-    });
-  });
-
-  describe("renders correct elements based on passed props", () => {
-    it("doesn't render Back action if backLink is not provided", () => {
-      render(<Actions backLabel={backLabel} />);
-      expect(
-        screen.queryByRole("link", {
-          name: /back/i,
-        }),
-      ).not.toBeInTheDocument();
-    });
-
-    it("doesn't render Next step action if nextLink is not provided", () => {
-      render(<Actions nextLabel={nextLabel} />);
-      expect(
-        screen.queryByRole("link", {
-          name: /next step/i,
-        }),
-      ).not.toBeInTheDocument();
-    });
-
-    it("renders button elements if elementType is button", () => {
-      render(<Actions backLabel={backLabel} nextLabel={nextLabel} />);
-      const backComponent = screen.queryByRole("button", {
-        name: /back/i,
-      });
-      const nextComponent = screen.getByRole("button", {
-        name: /next step/i,
-      });
-      const links = screen.queryByRole("link");
-
-      expect(links).toBeNull();
-      expect(backComponent).toBeInTheDocument();
-      expect(nextComponent).toBeInTheDocument();
-    });
-
-    it("fires onNextClick handler on click event", () => {
-      render(
-        <Actions
-          backLabel={backLabel}
-          nextButton={{
-            onClick: mockOnNextClick,
-          }}
-          nextLabel={nextLabel}
-        />,
-      );
-      const nextActionBtn = screen.getByRole("button", {
-        name: /Next step/i,
-      });
-      fireEvent.click(nextActionBtn);
-      expect(mockOnNextClick).toHaveBeenCalledTimes(1);
-    });
-
-    it("fires onBackClick handler on click event", () => {
-      render(
-        <Actions
-          backButton={{
-            onClick: mockOnBackClick,
-          }}
-          backLabel={backLabel}
-          nextLabel={nextLabel}
-        />,
-      );
-      const backActionBtn = screen.getByRole("button", {
-        name: /Back/i,
-      });
-      fireEvent.click(backActionBtn);
-      expect(mockOnBackClick).toHaveBeenCalledTimes(1);
-    });
-
-    it("allows buttons to be disabled", () => {
-      render(
-        <Actions
-          nextButton={{
-            isDisabled: true,
-          }}
-          nextLabel={nextLabel}
-        />,
-      );
-      const nextActionBtn = screen.getByRole("button", {
-        name: /Next step/i,
-      });
-      expect(nextActionBtn).toHaveClass("--is-disabled");
-    });
-  });
-});

package/src/components/Chopin/Actions/Actions.tsx

@@ -1,67 +0,0 @@
-import { forwardRef, Ref } from "react";
-import { DOMProps } from "@react-types/shared";
-import clsx from "clsx";
-import type { IconName } from "@simplybusiness/icons";
-import { ButtonProps, Size, Variant } from "../../Button";
-import { Flex } from "../../Flex";
-import { ForwardedRefComponent } from "../../../types/components";
-import { type LinkButtonProps } from "../../LinkButton";
-import { LinkOrButton } from "./LinkOrButton";
-
-export type ActionsElementType = HTMLDivElement;
-
-export interface ActionsProps extends DOMProps {
-  /** Custom class name for setting specific CSS */
-  className?: string;
-  backButton?: LinkButtonProps | ButtonProps;
-  nextButton?: LinkButtonProps | ButtonProps;
-  backLabel?: string;
-  nextLabel?: string;
-}
-
-export type ActionsRef = Ref<ActionsElementType>;
-
-const Actions: ForwardedRefComponent<ActionsProps, ActionsElementType> =
-  forwardRef((props: ActionsProps, ref: ActionsRef) => {
-    const { className, backButton, nextButton, backLabel, nextLabel, ...rest } =
-      props;
-
-    const classes = clsx("chopin", "chopin/Actions", className);
-    const nextButtonClasses = clsx("chopin/ActionsNext", {
-      "--single-action": !backLabel,
-    });
-
-    const backButtonProps = {
-      ...backButton,
-      className: "chopin/ActionsBack",
-      variant: "ghost" as Variant,
-      icon: "leftArrow" as IconName,
-      size: "large" as Size,
-    };
-
-    const nextButtonProps = {
-      ...nextButton,
-      className: nextButtonClasses,
-      size: "large" as Size,
-    };
-
-    return (
-      <Flex ref={ref} className={classes} justifyContent="center" {...rest}>
-        <Flex
-          className="chopin/ActionsContainer"
-          justifyContent="space-between"
-          alignItems="center"
-        >
-          <LinkOrButton href={backButton?.href} {...backButtonProps}>
-            {backLabel}
-          </LinkOrButton>
-          <LinkOrButton href={nextButton?.href} {...nextButtonProps}>
-            {nextLabel}
-          </LinkOrButton>
-        </Flex>
-      </Flex>
-    );
-  });
-
-Actions.displayName = "Actions";
-export { Actions };

package/src/components/Chopin/Actions/LinkOrButton.test.tsx

@@ -1,51 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { LinkOrButton } from "./LinkOrButton";
-
-describe("LinkOrButton", () => {
-  describe("given no children are provided", () => {
-    it("renders nothing", () => {
-      const { container } = render(<LinkOrButton />);
-
-      expect(container).toBeEmptyDOMElement();
-    });
-  });
-
-  describe("given href is provided", () => {
-    it("renders anchor tag", () => {
-      const url = "http://www.example.com";
-
-      render(
-        <LinkOrButton className="green" href={url}>
-          I am a link
-        </LinkOrButton>,
-      );
-
-      const link = screen.getByRole("link");
-
-      expect(link).toBeInTheDocument();
-      expect(link).toHaveClass("green");
-      expect(link).toHaveAttribute("href", url);
-    });
-  });
-
-  describe("given href is not provided", () => {
-    it("renders button", () => {
-      const clickHandler = jest.fn();
-
-      render(
-        <LinkOrButton data-id="test" onClick={clickHandler}>
-          I am a button
-        </LinkOrButton>,
-      );
-
-      const button = screen.getByRole("button");
-
-      expect(button).toBeInTheDocument();
-      expect(button).toHaveAttribute("data-id", "test");
-
-      fireEvent.click(button);
-
-      expect(clickHandler).toHaveBeenCalled();
-    });
-  });
-});

package/src/components/Chopin/Actions/LinkOrButton.tsx

@@ -1,20 +0,0 @@
-import { Button, ButtonProps } from "../../Button";
-import { LinkButton, LinkButtonProps } from "../../LinkButton";
-
-export const LinkOrButton = ({
-  href,
-  children,
-  ...rest
-}: LinkButtonProps | ButtonProps) => {
-  if (!children) return null;
-
-  if (href) {
-    return (
-      <LinkButton {...(rest as LinkButtonProps)} href={href!}>
-        {children}
-      </LinkButton>
-    );
-  }
-
-  return <Button {...(rest as ButtonProps)}>{children}</Button>;
-};

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

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

package/src/components/Chopin/Footer/Address.tsx

@@ -1,34 +0,0 @@
-import { FC } from "react";
-import { Container } from "../../Container";
-import { Flex } from "../../Flex";
-import { Grid } from "../../Grid";
-import { Text } from "../../Text";
-
-export interface AddressProps {
-  address: Array<string[]>;
-}
-
-const Address: FC<AddressProps> = ({ address }) => (
-  <Container className="chopin/FooterAddressContainer">
-    <Text elementType="h3" variant="h5" className="chopin/FooterHeader">
-      Address
-    </Text>
-    <Grid columns={address.length}>
-      {address.map(addressUnit => (
-        <Flex flexDirection="column" key={addressUnit[0]}>
-          {addressUnit.map(item => (
-            <Text
-              elementType="span"
-              className="chopin/FooterAddressItem"
-              key={item}
-            >
-              {item}
-            </Text>
-          ))}
-        </Flex>
-      ))}
-    </Grid>
-  </Container>
-);
-
-export { Address };

package/src/components/Chopin/Footer/Copyright.tsx

@@ -1,23 +0,0 @@
-import { FC } from "react";
-import { sb } from "@simplybusiness/icons";
-import { Flex } from "../../Flex";
-import { Icon } from "../../Icon";
-
-export interface CopyrightProps {
-  text: string;
-  withLogo: boolean;
-}
-
-const Copyright: FC<CopyrightProps> = ({ text, withLogo }) => (
-  <Flex flexWrap="wrap" className="chopin/FooterTextContainer">
-    {withLogo && <Icon icon={sb} className="chopin/FooterLogo" />}
-    <p
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{
-        __html: text,
-      }}
-    />
-  </Flex>
-);
-
-export { Copyright };

package/src/components/Chopin/Footer/Footer.mdx

@@ -1,163 +0,0 @@
-import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
-import { Footer } from ".";
-import { ThemeContext } from "../../../contexts";
-import { excludeControls } from "../../../utils/excludeControls";
-import * as FooterStories from "./Footer.stories";
-
-<Meta of={FooterStories} />
-
-# Footer
-
-The `Footer` is component which can be reused in White-label sites.
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { Chopin } from "@simplybusiness/mobius";
-```
-
-## With single Address
-
-<Story of={FooterStories.Normal} />
-
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
- <Chopin.Footer
-  address={[["6th Floor", "99 Gresham Street", "London", "EC2V 7NG"]]}
-  legalLinks={[
-    {
-      href: "https://www.simplybusiness.co.uk/terms-conditions/",
-      text: "Terms & conditions",
-    },
-    ...
-  ]}
-  text="© Copyright 2022 Simply Business. ..."
-/>
-```
-
-## With several Addresses
-
-<Story of={FooterStories.ContainingTwoAddresses} />
-
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.Footer
-  address={[
-    ["6th Floor", "99 Gresham Street", "London", "EC2V 7NG"],
-    ["Sol House", "29 St Katherine's Street", "Northampton", "NN1 2QZ"],
-  ]}
-  legalLinks={[
-    {
-      href: "https://www.simplybusiness.co.uk/terms-conditions/",
-      text: "Terms & conditions",
-    },
-    ...
-  ]}
-  text="© Copyright 2022 Simply Business. ..."
-/>
-```
-
-## With Footer Logo
-
-<Story of={FooterStories.WithFooterLogo} />
-
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.Footer
-  address={[
-    ["6th Floor", "99 Gresham Street", "London", "EC2V 7NG"],
-    ["Sol House", "29 St Katherine's Street", "Northampton", "NN1 2QZ"],
-  ]}
-  legalLinks={[
-    {
-      href: "https://www.simplybusiness.co.uk/terms-conditions/",
-      text: "Terms & conditions",
-    },
-    ...
-  ]}
-  text="© Copyright 2022 Simply Business. ..."
-  withLogo
-/>
-```
-
-## With only Footer text
-
-<Story of={FooterStories.WithJustFooterText} />
-
-{/* prettier-ignore */}
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.Footer
-  text="<p>... For more information, please refer to our <a href='https://www.simplybusiness.com/privacy-policy/' 
-    target='_blank'>Privacy Policy</a> and <a href='https://www.simplybusiness.com/terms-conditions/' 
-    target='_blank'>Terms &amp; Conditions.</a></p>"
-/>
-```
-
-## Props
-
-<ArgTypes of={Footer} />
-
-## Component HTML Structure and Class names
-
-The following HTML is rendered for a `Footer`:
-
-```html
-<footer class="chopin chopin/Footer">
-  <div class="mobius mobius/Container chopin/FooterContent --many-regions">
-    <div>
-      <div>
-        <div class="mobius mobius/Container chopin/FooterAddressContainer">
-          <h3 class="mobius mobius/Text h5 chopin/FooterHeader">Address</h3>
-          <div>
-            <div class="mobius mobius/Flex">
-              <span class="mobius mobius/Text span chopin/FooterAddressItem"
-                >6th Floor</span
-              >
-              ...
-            </div>
-            <div class="mobius mobius/Flex">
-              <span class="mobius mobius/Text span chopin/FooterAddressItem"
-                >Sol House</span
-              >
-              ...
-            </div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div class="mobius mobius/Container chopin/FooterLegalContainer">
-          <h3 class="mobius mobius/Text h5 chopin/FooterHeader">Legal</h3>
-          <div class="mobius mobius/Flex">
-            <a
-              href="https://www.simplybusiness.co.uk/terms-conditions/"
-              target="_blank"
-              class="mobius mobius/Link chopin/FooterLegalLink"
-              >Terms &amp; conditions</a
-            >
-            ...
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="mobius mobius/Flex chopin/FooterTextContainer">
-      <svg class="mobius mobius/Icon chopin/FooterLogo">...</svg>
-      <p>© Copyright 2022 Simply Business. ...</p>
-    </div>
-  </div>
-</footer>
-```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Chopin/Footer) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)