@simplybusiness/mobius 3.10.0 → 3.11.1

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

@@ -1,217 +0,0 @@
-import type { Meta } from "@storybook/react";
-import { Footer, FooterProps } from ".";
-import { Breakpoint, ThemeContext } from "../../../contexts";
-import { excludeControls } from "../../../utils/excludeControls";
-
-export default {
-  title: "Chopin/Footer",
-  component: Footer,
-  argTypes: excludeControls(
-    "className",
-    "address",
-    "footerLinks",
-    "legalLinks",
-  ),
-};
-
-const breakpoints: Breakpoint[] = [
-  {
-    size: "xs",
-    value: 320,
-  },
-  {
-    size: "sm",
-    value: 540,
-  },
-  {
-    size: "md",
-    value: 720,
-  },
-  {
-    size: "lg",
-    value: 960,
-  },
-  {
-    size: "xl",
-    value: 1140,
-  },
-  {
-    size: "xxl",
-    value: 1320,
-  },
-];
-
-const setBreakpoints = () => {};
-
-export const Normal: Meta<typeof Footer> = {
-  render: (args: FooterProps) => (
-    <div>
-      <Footer {...args} />
-    </div>
-  ),
-  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,
-          setBreakpoints,
-        }}
-      >
-        <Story />
-      </ThemeContext.Provider>
-    ),
-  ],
-};
-
-export const ContainingTwoAddresses: Meta<typeof Footer> = {
-  render: (args: FooterProps) => (
-    <div>
-      <Footer {...args} />
-    </div>
-  ),
-  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,
-          setBreakpoints,
-        }}
-      >
-        <Story />
-      </ThemeContext.Provider>
-    ),
-  ],
-};
-
-export const WithFooterLogo: Meta<typeof Footer> = {
-  render: (args: FooterProps) => (
-    <div>
-      <Footer {...args} />
-    </div>
-  ),
-  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,
-          setBreakpoints,
-        }}
-      >
-        <Story />
-      </ThemeContext.Provider>
-    ),
-  ],
-};
-
-export const WithJustFooterText: Meta<typeof Footer> = {
-  render: (args: FooterProps) => (
-    <div>
-      <Footer {...args} />
-    </div>
-  ),
-  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,
-          setBreakpoints,
-        }}
-      >
-        <Story />
-      </ThemeContext.Provider>
-    ),
-  ],
-};

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

@@ -1,123 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { Footer } from ".";
-
-const FOOTER_CLASS_NAME = "chopin/Footer";
-const HEADING_CLASS_NAME = "chopin/FooterHeader";
-const CONTENT_CLASS_NAME = "chopin/FooterContent";
-const ONE_REGION_CLASS_NAME = "--one-region";
-const MANY_REGION_CLASS_NAME = "--many-regions";
-const FOOTER_LINK_CLASS_NAME = "chopin/FooterLegalLink";
-
-const props = {
-  text: "footer test text",
-};
-const singleAddress = [["test_1", "test_2"]];
-const multiAddress = [
-  ["test_1", "test_2"],
-  ["test_3", "test_4"],
-];
-const legalLinks = [{ href: "test_1", text: "test_1" }];
-
-describe("Footer", () => {
-  it("should render without errors", () => {
-    const component = render(<Footer {...props} />);
-    expect(component).toBeTruthy();
-  });
-
-  describe("uses correct class names", () => {
-    it("uses Chopin class", () => {
-      render(<Footer {...props} data-testid="test-id" />);
-      expect(screen.getByTestId("test-id")).toHaveClass("chopin");
-    });
-
-    it("uses chopin/Footer class", () => {
-      render(<Footer {...props} data-testid="test-id" />);
-      expect(screen.getByTestId("test-id")).toHaveClass(FOOTER_CLASS_NAME);
-    });
-
-    it("includes custom class name", () => {
-      render(<Footer {...props} data-testid="test-id" className="my-class" />);
-      expect(screen.getByTestId("test-id")).toHaveClass("my-class");
-      expect(screen.getByTestId("test-id")).toHaveClass(FOOTER_CLASS_NAME);
-    });
-
-    it("uses content class name", () => {
-      render(<Footer {...props} />);
-      expect(screen.getByTestId("FooterContent")).toHaveClass(
-        CONTENT_CLASS_NAME,
-      );
-    });
-
-    it("uses heading class name", () => {
-      render(
-        <Footer {...props} address={singleAddress} legalLinks={legalLinks} />,
-      );
-      expect(
-        screen.getByRole("heading", {
-          name: /address/i,
-        }),
-      ).toHaveClass(HEADING_CLASS_NAME);
-      expect(
-        screen.getByRole("heading", {
-          name: /legal/i,
-        }),
-      ).toHaveClass(HEADING_CLASS_NAME);
-    });
-
-    it("uses --one-region class name with single address", () => {
-      render(<Footer {...props} address={singleAddress} />);
-      expect(screen.getByTestId("FooterContent")).toHaveClass(
-        ONE_REGION_CLASS_NAME,
-      );
-    });
-
-    it("uses --many-region class name with several addresses", () => {
-      render(<Footer {...props} address={multiAddress} />);
-      expect(screen.getByTestId("FooterContent")).toHaveClass(
-        MANY_REGION_CLASS_NAME,
-      );
-    });
-
-    it("uses footer link class name", () => {
-      render(
-        <Footer {...props} address={singleAddress} legalLinks={legalLinks} />,
-      );
-      const footerLink = screen.getByRole("link", {
-        name: /test_1/i,
-      });
-      expect(footerLink).toHaveClass(FOOTER_LINK_CLASS_NAME);
-    });
-  });
-
-  describe("renders correct elements based on passed props", () => {
-    it("renders link block if address and legalLinks props are provided", () => {
-      render(
-        <Footer {...props} address={singleAddress} legalLinks={legalLinks} />,
-      );
-      expect(
-        screen.queryByRole("link", {
-          name: /test_1/i,
-        }),
-      ).toBeInTheDocument();
-    });
-
-    it("doesn't render link block if address and legalLinks props are not provided", () => {
-      render(<Footer {...props} />);
-      expect(
-        screen.queryByRole("link", {
-          name: /test_1/i,
-        }),
-      ).not.toBeInTheDocument();
-    });
-
-    it("renders footer text", () => {
-      render(<Footer {...props} />);
-      expect(screen.getByText(props.text)).toBeInTheDocument();
-    });
-
-    it("renders footer logo if withLogo prop is true", () => {
-      render(<Footer {...props} withLogo />);
-      expect(screen.getByRole("img", { hidden: true })).toBeInTheDocument();
-    });
-  });
-});

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

@@ -1,55 +0,0 @@
-import { FC } from "react";
-import { DOMProps } from "@react-types/shared";
-import clsx from "clsx";
-import { Address } from "./Address";
-import { Grid } from "../../Grid";
-import { Legal } from "./Legal";
-import { Copyright } from "./Copyright";
-import { Container } from "../../Container";
-import { LinkType } from "./types";
-
-export interface FooterProps extends DOMProps {
-  /** Custom class name for setting specific CSS */
-  className?: string;
-  address?: Array<string[]>;
-  legalLinks?: LinkType[];
-  withLogo?: boolean;
-  text: string;
-}
-
-const Footer: FC<FooterProps> = ({
-  className,
-  address = [],
-  legalLinks = [],
-  withLogo = false,
-  text,
-  ...otherProps
-}) => {
-  const classes = clsx("chopin", "chopin/Footer", className);
-  const isMultiRegional = address.length > 1;
-  const contentClasses = clsx("chopin/FooterContent", {
-    "--many-regions": isMultiRegional,
-    "--one-region": !isMultiRegional,
-  });
-
-  return (
-    <footer className={classes} {...otherProps}>
-      <Container className={contentClasses} data-testid="FooterContent">
-        {!!address.length && !!legalLinks.length && (
-          <Grid columnGap="size-30">
-            <Grid.Item xs={12} md={6} lg={isMultiRegional ? 6 : 3}>
-              <Address address={address} />
-            </Grid.Item>
-            <Grid.Item xs={12} md={6} lg={3}>
-              <Legal legalLinks={legalLinks} />
-            </Grid.Item>
-          </Grid>
-        )}
-        <Copyright text={text} withLogo={withLogo} />
-      </Container>
-    </footer>
-  );
-};
-
-Footer.displayName = "Footer";
-export { Footer };

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

@@ -1,32 +0,0 @@
-import { FC } from "react";
-import { Container } from "../../Container";
-import { Flex } from "../../Flex";
-import { Link } from "../../Link";
-import { Text } from "../../Text";
-import { LinkType } from "./types";
-
-export interface LegalProps {
-  legalLinks: LinkType[];
-}
-
-const Legal: FC<LegalProps> = ({ legalLinks }) => (
-  <Container className="chopin/FooterLegalContainer">
-    <Text elementType="h3" variant="h5" className="chopin/FooterHeader">
-      Legal
-    </Text>
-    <Flex flexDirection="column">
-      {legalLinks.map(({ href, text }) => (
-        <Link
-          key={href}
-          href={href}
-          target="_blank"
-          className="chopin/FooterLegalLink"
-        >
-          {text}
-        </Link>
-      ))}
-    </Flex>
-  </Container>
-);
-
-export { Legal };

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

@@ -1,2 +0,0 @@
-export * from "./Footer";
-export * from "./types";

package/src/components/Chopin/Footer/types.ts

@@ -1,4 +0,0 @@
-export type LinkType = {
-  href: string;
-  text: string;
-};

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

@@ -1,78 +0,0 @@
-import { FC } from "react";
-import { telephone } from "@simplybusiness/icons";
-import { Box } from "../../Box";
-import { Flex } from "../../Flex";
-import { Icon } from "../../Icon";
-import { Link } from "../../Link";
-import { DropdownMenu } from "../../DropdownMenu";
-import { Button } from "../../Button";
-import { OpeningHoursType } from "./mockOpeningHoursData";
-
-export interface ContactDetailsProps {
-  phone: string;
-  whiteLabel: boolean;
-  openingHours: OpeningHoursType;
-}
-
-const OPENING_HOURS_LABEL = "See our opening hours";
-
-const ContactDetails: FC<ContactDetailsProps> = ({
-  phone,
-  whiteLabel,
-  openingHours,
-}) => {
-  const renderPhoneIcon = () => (
-    <Icon className="chopin/HeaderPhoneIcon" icon={telephone} />
-  );
-
-  return (
-    <Flex alignItems="center">
-      {whiteLabel && <Box className="chopin/HeaderPoweredByIcon" />}
-      <Flex
-        flexDirection="column"
-        alignItems="end"
-        className="chopin/HeaderContact --desktop"
-      >
-        <Box>
-          {renderPhoneIcon()}
-          <strong className="chopin/HeaderPhoneNumber">{phone}</strong>
-        </Box>
-        {!whiteLabel ? (
-          <Link
-            className="chopin/HeaderContactLink"
-            href="https://www.simplybusiness.co.uk/support/"
-          >
-            {OPENING_HOURS_LABEL}
-          </Link>
-        ) : (
-          <DropdownMenu
-            trigger={<Button variant="basic">{OPENING_HOURS_LABEL}</Button>}
-            className="chopin/HeaderDropdown"
-          >
-            {Object.keys(openingHours).map(day => (
-              <DropdownMenu.Item key={day}>
-                <span
-                  // eslint-disable-next-line react/no-danger
-                  dangerouslySetInnerHTML={{
-                    __html: `${day} ${openingHours[day]}`,
-                  }}
-                />
-              </DropdownMenu.Item>
-            ))}
-          </DropdownMenu>
-        )}
-      </Flex>
-      <Flex
-        alignItems="center"
-        justifyContent="center"
-        className="chopin/HeaderContact --mobile"
-      >
-        <Link aria-label="Phone Us" href={`tel:${phone}`}>
-          {renderPhoneIcon()}
-        </Link>
-      </Flex>
-    </Flex>
-  );
-};
-
-export { ContactDetails };

package/src/components/Chopin/Header/Header.mdx

@@ -1,130 +0,0 @@
-import { Meta, ArgTypes, Canvas, Story } from "@storybook/blocks";
-import { Header } from ".";
-import { excludeControls } from "../../../utils/excludeControls";
-import * as HeaderStories from "./Header.stories";
-
-<Meta of={HeaderStories} />
-
-# Header
-
-The `Header` is a structural part of the page. The component is widely reused in White-label sites. It has two markup types based on the `whiteLabel` property.
-
-## Install
-
-```bash
-yarn add @simplybusiness/mobius
-```
-
-## Usage
-
-```js
-import { Chopin } from "@simplybusiness/mobius";
-```
-
-## Normal
-
-<Story of={HeaderStories.Normal} />
-
-{/* prettier-ignore */}
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.Header phone="0333 014 6683" />
-```
-
-## WhiteLabel
-
-<Story of={HeaderStories.WhiteLabel} />
-
-{/* prettier-ignore */}
-```jsx
-import { Chopin } from "@simplybusiness/mobius";
-
-<Chopin.Header phone="(855) 737-0087" whiteLabel={true} />
-```
-
-## Props
-
-<ArgTypes of={Header} />
-
-## Component HTML Structure and Class names
-
-The following HTML is rendered for a `Header`:
-
-```html
-<header class="chopin chopin/Header">
-  <div class="mobius mobius/Flex chopin/HeaderContent">
-    <a
-      href="https://www.simplybusiness.co.uk/"
-      class="mobius mobius/Link chopin/HeaderLogo"
-    >
-      Simply Business - Insurance for your business
-    </a>
-    <div class="mobius mobius/Flex">
-      <div class="mobius mobius/Flex chopin/HeaderContact--desktop">
-        <div class="mobius mobius/Box">
-          <svg class="mobius mobius/Icon chopin/HeaderPhoneIcon">...</svg>
-          <strong class="chopin/HeaderPhoneNumber">0333 014 6683</strong>
-        </div>
-        <a
-          class="mobius mobius/Link chopin/HeaderContactLink"
-          href="https://www.simplybusiness.co.uk/support/"
-        >
-          See our opening hours
-        </a>
-      </div>
-      <div class="mobius mobius/Flex chopin/HeaderContact--mobile">
-        <a
-          aria-label="Phone Us"
-          href="tel:0333 014 6683"
-          class="mobius mobius/Link"
-        >
-          <svg class="mobius mobius/Icon chopin/HeaderPhoneIcon">...</svg>
-        </a>
-      </div>
-    </div>
-  </div>
-</header>
-```
-
-For `whiteLabel`:
-
-```html
-<header class="chopin chopin/Header">
-  <div class="mobius mobius/Flex chopin/HeaderContent">
-    <div class="mobius mobius/Box chopin/HeaderLogo"></div>
-    <div class="mobius mobius/Flex">
-      <div class="mobius mobius/Box chopin/HeaderPoweredByIcon"></div>
-      <div class="mobius mobius/Flex chopin/HeaderContact--desktop">
-        <div class="mobius mobius/Box">
-          <svg class="mobius mobius/Icon chopin/HeaderPhoneIcon">...</svg>
-          <strong class="chopin/HeaderPhoneNumber">(855) 737-0087</strong>
-        </div>
-        <nav class="mobius mobius/DropdownMenu chopin/HeaderDropdown">
-          <button
-            class="mobius mobius/Button mobius mobius/DropdownMenuTrigger"
-          >
-            <span class="">See our opening hours</span>
-          </button>
-          <ul class="mobius mobius/DropdownMenuList" role="menu">
-            <li class="mobius mobius/DropdownMenuItem">Mon 8am-8pm</li>
-            ...
-          </ul>
-        </nav>
-      </div>
-      <div class="mobius mobius/Flex chopin/HeaderContact--mobile">
-        <a
-          aria-label="Phone Us"
-          href="tel:(855) 737-0087"
-          class="mobius mobius/Link"
-          ><svg class="mobius mobius/Icon chopin/HeaderPhoneIcon">...</svg>
-        </a>
-      </div>
-    </div>
-  </div>
-</header>
-```
-
----
-
-[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Chopin/Header) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

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

@@ -1,50 +0,0 @@
-import type { Meta } from "@storybook/react";
-import { Header, HeaderProps } from ".";
-import { excludeControls } from "../../../utils/excludeControls";
-
-export default {
-  title: "Chopin/Header",
-  component: Header,
-  argTypes: excludeControls("className", "openingHours"),
-  args: {
-    openingHours: {
-      Mon: "8am-8pm",
-      Tue: "8am-8pm",
-      Wed: "8am-8pm",
-      Thu: "8am-8pm",
-      Fri: "8am-8pm",
-      "<strong>Sat</strong>": "<strong>Closed</strong>",
-      "<strong>Sun</strong>": "<strong>Closed</strong>",
-    },
-  },
-};
-
-export const Normal: Meta<typeof Header> = {
-  render: (args: HeaderProps) => (
-    <div>
-      <Header {...args} />
-    </div>
-  ),
-  args: {
-    phone: "0333 014 6683",
-    whiteLabel: false,
-    url: "https://www.example.com/",
-  },
-};
-
-export const WhiteLabel: Meta<typeof Header> = {
-  render: (args: HeaderProps) => (
-    <div
-      style={{
-        height: 300,
-      }}
-    >
-      <Header {...args} />
-    </div>
-  ),
-  args: {
-    phone: "(855) 737-0087",
-    whiteLabel: true,
-    url: "https://www.example.com/",
-  },
-};