@simplybusiness/mobius 3.0.0

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,170 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Header } from ".";
+import { excludeControls } from "../../../utils/excludeControls";
+
+<Meta
+  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>",
+    },
+  }}
+/>
+
+# 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
+  name="Normal"
+  args={{
+    phone: "0333 014 6683",
+    whiteLabel: false,
+    url: "https://www.example.com/",
+  }}
+>
+  {args => (
+    <div>
+      <Header {...args} />
+    </div>
+  )}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { Chopin } from "@simplybusiness/mobius";
+
+<Chopin.Header phone="0333 014 6683" />
+```
+
+## WhiteLabel
+
+<Story
+  name="WhiteLabel"
+  args={{
+    phone: "(855) 737-0087",
+    whiteLabel: true,
+    url: "https://www.example.com/",
+  }}
+>
+  {args => (
+    <div style={{ height: 300 }}>
+      <Header {...args} />
+    </div>
+  )}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { Chopin } from "@simplybusiness/mobius";
+
+<Chopin.Header phone="(855) 737-0087" whiteLabel={true} />
+```
+
+## Props
+
+<ArgsTable 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.test.tsx

@@ -0,0 +1,107 @@
+import { render, screen } from "@testing-library/react";
+import { Header, LOGO_LINK } from ".";
+
+const HEADER_CLASS_NAME = "chopin/Header";
+const LOGO_CLASS_NAME = "chopin/HeaderLogo";
+const CONTACT_CLASS_NAME = "chopin/HeaderContactLink";
+const PHONE_NUMBER_CLASS_NAME = "chopin/HeaderPhoneNumber";
+
+const props = {
+  phone: "0333 014 6683",
+};
+
+describe("Header", () => {
+  it("should render without errors", () => {
+    const component = render(<Header {...props} />);
+    expect(component).toBeTruthy();
+  });
+
+  describe("uses correct class names", () => {
+    it("uses Chopin class", () => {
+      render(<Header {...props} data-testid="test-id" />);
+      expect(screen.getByTestId("test-id")).toHaveClass("chopin");
+    });
+
+    it("uses chopin/Header class", () => {
+      render(<Header {...props} data-testid="test-id" />);
+      expect(screen.getByTestId("test-id")).toHaveClass(HEADER_CLASS_NAME);
+    });
+
+    it("includes custom class name", () => {
+      render(<Header {...props} data-testid="test-id" className="my-class" />);
+      expect(screen.getByTestId("test-id")).toHaveClass("my-class");
+      expect(screen.getByTestId("test-id")).toHaveClass(HEADER_CLASS_NAME);
+    });
+
+    it("uses logo class name", () => {
+      render(<Header {...props} />);
+      const link = screen.getByRole("link", {
+        name: /simply business - insurance for your business/i,
+      });
+      expect(link).toHaveClass(LOGO_CLASS_NAME);
+    });
+
+    it("uses contact link class name", () => {
+      render(<Header {...props} />);
+      const link = screen.getByRole("link", {
+        name: /see our opening hours/i,
+      });
+      expect(link).toHaveClass(CONTACT_CLASS_NAME);
+    });
+
+    it("uses phone number class name", () => {
+      render(<Header {...props} />);
+      const phoneNumberEl = screen.getByText(props.phone);
+      expect(phoneNumberEl).toHaveClass(PHONE_NUMBER_CLASS_NAME);
+    });
+  });
+
+  describe("renders correct elements based on passed props", () => {
+    it("renders passed Phone prop", () => {
+      render(<Header {...props} />);
+      expect(screen.getByText(props.phone)).toBeInTheDocument();
+    });
+
+    it("renders Logo element as Link by default", () => {
+      render(<Header {...props} />);
+      const link = screen.getByRole("link", {
+        name: /simply business - insurance for your business/i,
+      });
+      expect(link).toHaveAttribute("href", LOGO_LINK);
+    });
+
+    it("doesn't render Logo as Link when whiteLabel prop is true", () => {
+      render(<Header {...props} whiteLabel />);
+      expect(
+        screen.queryByRole("link", {
+          name: /simply business - insurance for your business/i,
+        }),
+      ).not.toBeInTheDocument();
+    });
+
+    it("renders Opening Hours element as Link by default", () => {
+      render(<Header {...props} />);
+      const link = screen.getByRole("link", {
+        name: /see our opening hours/i,
+      });
+      expect(link).toHaveAttribute(
+        "href",
+        "https://www.simplybusiness.co.uk/support/",
+      );
+    });
+
+    it("renders Opening Hours element as Button when whiteLabel prop is true", () => {
+      render(<Header {...props} whiteLabel />);
+      expect(
+        screen.queryByRole("link", {
+          name: /see our opening hours/i,
+        }),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.getByRole("button", {
+          name: /see our opening hours/i,
+        }),
+      ).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,49 @@
+import { FC } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { Logo } from "./Logo";
+import { ContactDetails } from "./ContactDetails";
+import { Flex } from "../../Flex";
+import { OpeningHoursType, OPENING_HOURS } from "./mockOpeningHoursData";
+
+export interface HeaderProps extends DOMProps {
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  whiteLabel?: boolean;
+  url?: string;
+  phone: string;
+  openingHours?: OpeningHoursType;
+}
+
+export const LOGO_LINK = "https://www.simplybusiness.co.uk/";
+
+const Header: FC<HeaderProps> = ({
+  className,
+  whiteLabel = false,
+  url = LOGO_LINK,
+  phone,
+  openingHours = OPENING_HOURS,
+  ...otherProps
+}) => {
+  const classes = clsx("chopin", "chopin/Header", className);
+
+  return (
+    <header className={classes} {...otherProps}>
+      <Flex
+        alignItems="center"
+        justifyContent="space-between"
+        className="chopin/HeaderContent"
+      >
+        <Logo url={url} whiteLabel={whiteLabel} />
+        <ContactDetails
+          phone={phone}
+          whiteLabel={whiteLabel}
+          openingHours={openingHours}
+        />
+      </Flex>
+    </header>
+  );
+};
+
+Header.displayName = "Header";
+export { Header };

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

@@ -0,0 +1,25 @@
+import { FC } from "react";
+import { Box } from "../../Box";
+import { Link } from "../../Link";
+import { VisuallyHidden } from "../../VisuallyHidden";
+
+export interface LogoProps {
+  whiteLabel: boolean;
+  url?: string;
+}
+
+const Logo: FC<LogoProps> = ({ whiteLabel, url }) => {
+  if (!whiteLabel) {
+    return (
+      <Link href={url} className="chopin/HeaderLogo">
+        <VisuallyHidden>
+          Simply Business - Insurance for your business
+        </VisuallyHidden>
+      </Link>
+    );
+  }
+
+  return <Box className="chopin/HeaderLogo" />;
+};
+
+export { Logo };

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

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

package/src/components/Chopin/Header/mockOpeningHoursData.ts

@@ -0,0 +1,13 @@
+export type OpeningHoursType = {
+  [key: string]: string;
+};
+
+export const OPENING_HOURS: OpeningHoursType = {
+  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>",
+};