@simplybusiness/mobius 3.0.0

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

@@ -0,0 +1,148 @@
+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 backLink = "https://test.com";
+const backLabel = "Back";
+const nextLabel = "Next step";
+const nextLink = "https://test.com";
+const mockOnNextClick = jest.fn();
+const mockOnBackClick = jest.fn();
+
+describe("Actions", () => {
+  it("should render without errors", () => {
+    const component = render(<Actions />);
+    expect(component).toBeTruthy();
+  });
+
+  describe("uses correct class names", () => {
+    it("uses Chopin class", () => {
+      render(<Actions data-testid="test-id" />);
+      expect(screen.getByTestId("test-id")).toHaveClass("chopin");
+    });
+
+    it("uses chopin/Actions class", () => {
+      render(<Actions data-testid="test-id" />);
+      expect(screen.getByTestId("test-id")).toHaveClass(ACTION_CLASS_NAME);
+    });
+
+    it("includes custom class name", () => {
+      render(<Actions data-testid="test-id" className="my-class" />);
+      expect(screen.getByTestId("test-id")).toHaveClass("my-class");
+      expect(screen.getByTestId("test-id")).toHaveClass(ACTION_CLASS_NAME);
+    });
+
+    it("uses links class names", () => {
+      render(
+        <Actions
+          backLink={backLink}
+          backLabel={backLabel}
+          nextLink={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 nextLink={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}
+          backLink={backLink}
+          backElementType="button"
+          nextElementType="button"
+          nextLink={nextLink}
+          nextLabel={nextLabel}
+        />,
+      );
+      expect(
+        screen.queryByRole("link", {
+          name: /back/i,
+        }),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole("link", {
+          name: /next step/i,
+        }),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.getByRole("button", {
+          name: /back/i,
+        }),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", {
+          name: /next step/i,
+        }),
+      ).toBeInTheDocument();
+    });
+
+    it("fires onNextClick handler on click event", () => {
+      render(
+        <Actions
+          nextLink={nextLink}
+          nextLabel={nextLabel}
+          nextElementType="button"
+          onNextClick={mockOnNextClick}
+        />,
+      );
+      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
+          backLink={backLink}
+          backLabel={backLabel}
+          backElementType="button"
+          onBackClick={mockOnBackClick}
+        />,
+      );
+      const backActionBtn = screen.getByRole("button", {
+        name: /back/i,
+      });
+      fireEvent.click(backActionBtn);
+      expect(mockOnBackClick).toHaveBeenCalledTimes(1);
+    });
+  });
+});

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

@@ -0,0 +1,84 @@
+import { forwardRef, Ref } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import type { IconName } from "@simplybusiness/icons";
+import { Variant } from "../../Button";
+import { Flex } from "../../Flex";
+import { ForwardedRefComponent } from "../../../types/components";
+import { LinkButton } from "../../LinkButton";
+
+export type ActionsElementType = HTMLDivElement;
+
+export interface ActionsProps extends DOMProps {
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  backLabel?: string;
+  backLink?: string;
+  nextLabel?: string;
+  nextLink?: string;
+  backElementType?: React.ElementType;
+  nextElementType?: React.ElementType;
+  onNextClick?: () => void;
+  onBackClick?: () => void;
+}
+
+export type ActionsRef = Ref<ActionsElementType>;
+
+const Actions: ForwardedRefComponent<ActionsProps, ActionsElementType> =
+  forwardRef((props: ActionsProps, ref: ActionsRef) => {
+    const {
+      backLink = "",
+      nextLink = "",
+      backLabel,
+      nextLabel,
+      className,
+      onNextClick,
+      onBackClick,
+      backElementType,
+      nextElementType,
+      ...rest
+    } = props;
+
+    const classes = clsx("chopin", "chopin/Actions", className);
+    const nextButtonClasses = clsx("chopin/ActionsNext", {
+      "--single-action": !backLink,
+    });
+
+    const backButtonProps = {
+      className: "chopin/ActionsBack",
+      onClick: onBackClick,
+      variant: "basic" as Variant,
+      icon: "buttonArrowLeft" as IconName,
+      href: backLink,
+      to: backLink,
+      elementType: backElementType,
+    };
+
+    const nextButtonProps = {
+      className: nextButtonClasses,
+      onClick: onNextClick,
+      href: nextLink,
+      to: nextLink,
+      elementType: nextElementType,
+    };
+
+    return (
+      <Flex ref={ref} className={classes} justifyContent="center" {...rest}>
+        <Flex
+          className="chopin/ActionsContainer"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          {backLink && (
+            <LinkButton {...backButtonProps}>{backLabel}</LinkButton>
+          )}
+          {nextLink && (
+            <LinkButton {...nextButtonProps}>{nextLabel}</LinkButton>
+          )}
+        </Flex>
+      </Flex>
+    );
+  });
+
+Actions.displayName = "Actions";
+export { Actions };

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

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

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

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

@@ -0,0 +1,23 @@
+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.story.mdx

@@ -0,0 +1,368 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Footer } from ".";
+import { ThemeContext } from "../../../contexts";
+import { excludeControls } from "../../../utils/excludeControls";
+
+<Meta
+  title="Chopin/Footer"
+  component={Footer}
+  argTypes={excludeControls(
+    "className",
+    "address",
+    "footerLinks",
+    "legalLinks",
+  )}
+/>
+
+# 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
+  name="Normal"
+  args={{
+    address: [["6th Floor", "99 Gresham Street", "London", "EC2V 7NG"]],
+    legalLinks: [
+      {
+        href: "https://www.simplybusiness.co.uk/terms-conditions/",
+        text: "Terms & conditions",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/privacy-policy/",
+        text: "Privacy policy",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/legal/cookies/",
+        text: "Cookie policy",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/support/accessibility/",
+        text: "Accessibility",
+      },
+    ],
+    text: "© Copyright 2022 Simply Business. All Rights Reserved. Simply Business is a trading name of Xbridge Limited which is authorised and regulated by the Financial Conduct Authority (Financial Services Registration No: 313348). Xbridge Limited (No: 3967717) has its registered office at 6th Floor, 99 Gresham Street, London EC2V 7NG.",
+    withLogo: true,
+  }}
+  decorators={[
+    Story => (
+      <ThemeContext.Provider
+        value={{
+          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 },
+          ],
+        }}
+      >
+        <Story />
+      </ThemeContext.Provider>
+    ),
+  ]}
+>
+  {args => (
+    <div>
+      <Footer {...args} />
+    </div>
+  )}
+</Story>
+
+```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
+  name="Containing two Addresses"
+  args={{
+    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",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/privacy-policy/",
+        text: "Privacy policy",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/legal/cookies/",
+        text: "Cookie policy",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/support/accessibility/",
+        text: "Accessibility",
+      },
+    ],
+    text: "© Copyright 2022 Simply Business. All Rights Reserved. Simply Business is a trading name of Xbridge Limited which is authorised and regulated by the Financial Conduct Authority (Financial Services Registration No: 313348). Xbridge Limited (No: 3967717) has its registered office at 6th Floor, 99 Gresham Street, London EC2V 7NG.",
+    withLogo: true,
+  }}
+  decorators={[
+    Story => (
+      <ThemeContext.Provider
+        value={{
+          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 },
+          ],
+        }}
+      >
+        <Story />
+      </ThemeContext.Provider>
+    ),
+  ]}
+>
+  {args => (
+    <div>
+      <Footer {...args} />
+    </div>
+  )}
+</Story>
+
+```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
+  name="With Footer Logo"
+  args={{
+    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",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/privacy-policy/",
+        text: "Privacy policy",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/legal/cookies/",
+        text: "Cookie policy",
+      },
+      {
+        href: "https://www.simplybusiness.co.uk/support/accessibility/",
+        text: "Accessibility",
+      },
+    ],
+    text: "© Copyright 2022 Simply Business. All Rights Reserved. Simply Business is a trading name of Xbridge Limited which is authorised and regulated by the Financial Conduct Authority (Financial Services Registration No: 313348). Xbridge Limited (No: 3967717) has its registered office at 6th Floor, 99 Gresham Street, London EC2V 7NG.",
+    withLogo: true,
+  }}
+  decorators={[
+    Story => (
+      <ThemeContext.Provider
+        value={{
+          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 },
+          ],
+        }}
+      >
+        <Story />
+      </ThemeContext.Provider>
+    ),
+  ]}
+>
+  {args => (
+    <div>
+      <Footer {...args} />
+    </div>
+  )}
+</Story>
+
+```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
+  name="With just Footer Text"
+  args={{
+    text: `
+      <p>© Copyright 2022 Simply Business. All Rights Reserved.
+      Simply Business, LLC is a licensed insurance producer in all U.S.
+      States and the District of Columbia.
+      Please be advised that insurance coverage cannot be added, deleted or otherwise changed until it is confirmed in writing by Simply Business or your insurance carrier.
+      Simply Business has its registered office at Simply Business, 1 Beacon Street, 15th Floor, Boston, MA 02108, (844) 654-7272.
+      In the state of California, we operate under the name Simply Business Insurance Agency, Inc., License #0M20593.
+      In the state of New York we operate under the name Simply Business Insurance Agency.
+      In the state of Texas we operate under the name, U.S. Simply Business, Inc.
+      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>
+    `,
+    withLogo: true,
+  }}
+  decorators={[
+    Story => (
+      <ThemeContext.Provider
+        value={{
+          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 },
+          ],
+        }}
+      >
+        <Story />
+      </ThemeContext.Provider>
+    ),
+  ]}
+>
+  {args => (
+    <div>
+      <Footer {...args} />
+    </div>
+  )}
+</Story>
+
+<!-- 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
+
+<ArgsTable 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)