@simplybusiness/mobius 3.0.0

package/package.json

@@ -0,0 +1,143 @@
+{
+  "name": "@simplybusiness/mobius",
+  "license": "UNLICENSED",
+  "version": "3.0.0",
+  "description": "Core library of Mobius react components",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/simplybusiness/mobius.git"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/mobius.d.ts",
+  "files": [
+    "src/**",
+    "dist/cjs/**/*",
+    "dist/esm/**/*",
+    "dist/**/*.map",
+    "dist/mobius.d.ts"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.js"
+    }
+  },
+  "scripts": {
+    "build:cjs": "tsc",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "build": "yarn clean-dist && yarn build:cjs && yarn build:esm && yarn extract-api",
+    "lint": "eslint --ext .tsx,.ts,.js,.jsx,.mjs .",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "test:coverage": "NODE_OPTIONS=--experimental-vm-modules jest --collect-coverage",
+    "check-types": "tsc --noEmit --incremental --emitDeclarationOnly false --pretty",
+    "extract-api": "api-extractor run",
+    "clean-dist": "rm -rf dist/",
+    "release:major": "../../bin/version.sh major",
+    "release:minor": "../../bin/version.sh minor",
+    "release:patch": "../../bin/version.sh patch",
+    "release:prerelease": "../../bin/version.sh prerel"
+  },
+  "sideEffects": false,
+  "devDependencies": {
+    "@emotion/jest": "^11.10.0",
+    "@microsoft/api-extractor": "^7.33.1",
+    "@react-types/breadcrumbs": "^3.4.4",
+    "@react-types/button": "^3.6.2",
+    "@react-types/checkbox": "^3.4.0",
+    "@react-types/link": "^3.3.4",
+    "@react-types/progress": "^3.2.4",
+    "@react-types/radio": "^3.3.0",
+    "@react-types/select": "^3.6.4",
+    "@react-types/shared": "^3.15.0",
+    "@react-types/slider": "^3.3.0",
+    "@storybook/addon-links": "^6.5.13",
+    "@swc/core": "^1.3.8",
+    "@swc/jest": "^0.2.23",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.1.2",
+    "@types/lodash.debounce": "^4.0.7",
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "@types/react-modal": "^3.13.1",
+    "@types/react-table": "^7.7.12",
+    "@typescript-eslint/eslint-plugin": "^5.40.0",
+    "@typescript-eslint/parser": "^5.40.0",
+    "color": "^4.2.3",
+    "eslint": "^8.25.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.5.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.6",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.2.0",
+    "jest-environment-jsdom": "^29.2.0",
+    "prettier": "^2.7.1",
+    "react-router-dom": "^6.4.2",
+    "ts-jest": "^29.0.3",
+    "tslib": "^2.4.0",
+    "typescript": "^4.8.4"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.1 || ^18.0.0",
+    "react-dom": "^16.13.1 || ^17.0.1 || ^18.0.0"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@internationalized/date": "^3.0.0",
+    "@react-aria/breadcrumbs": "^3.3.2",
+    "@react-aria/button": "^3.6.2",
+    "@react-aria/calendar": "^3.0.3",
+    "@react-aria/checkbox": "^3.6.0",
+    "@react-aria/combobox": "^3.4.2",
+    "@react-aria/datepicker": "^3.1.2",
+    "@react-aria/dialog": "^3.4.0",
+    "@react-aria/focus": "^3.9.0",
+    "@react-aria/i18n": "^3.6.1",
+    "@react-aria/interactions": "^3.12.0",
+    "@react-aria/label": "^3.4.2",
+    "@react-aria/link": "^3.3.4",
+    "@react-aria/listbox": "^3.7.0",
+    "@react-aria/numberfield": "^3.3.0",
+    "@react-aria/overlays": "^3.11.0",
+    "@react-aria/progress": "^3.3.2",
+    "@react-aria/radio": "^3.4.0",
+    "@react-aria/select": "^3.8.2",
+    "@react-aria/separator": "^3.2.4",
+    "@react-aria/slider": "^3.2.2",
+    "@react-aria/ssr": "^3.2.0",
+    "@react-aria/textfield": "^3.7.2",
+    "@react-aria/utils": "^3.14.0",
+    "@react-aria/visually-hidden": "^3.5.0",
+    "@react-stately/calendar": "^3.0.3",
+    "@react-stately/checkbox": "^3.3.0",
+    "@react-stately/collections": "^3.4.4",
+    "@react-stately/combobox": "^3.2.2",
+    "@react-stately/data": "^3.7.0",
+    "@react-stately/datepicker": "^3.1.0",
+    "@react-stately/numberfield": "^3.2.2",
+    "@react-stately/radio": "^3.6.0",
+    "@react-stately/select": "^3.3.2",
+    "@react-stately/slider": "^3.2.2",
+    "@react-stately/toggle": "^3.4.2",
+    "@simplybusiness/icons": "^2.9.0",
+    "clsx": "^1.2.1",
+    "deepmerge": "^4.2.2",
+    "lodash.debounce": "^4.0.8",
+    "react-accessible-dropdown-menu-hook": "^3.2.0",
+    "react-animate-height": "^3.0.4",
+    "react-modal": "^3.16.1",
+    "react-table": "^7.8.0"
+  },
+  "lint-staged": {
+    "*.{js,ts,jsx,tsx}": "eslint --ext .tsx,.ts,.js,.jsx,.mjs --fix"
+  }
+}

package/src/components/Accordion/Accordion.story.mdx

@@ -0,0 +1,210 @@
+import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
+import { Accordion, Divider, Segment, SegmentGroup } from "..";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Components/Accordion"
+  component={Accordion}
+  argTypes={excludeControls("onClick", "className")}
+/>
+
+# Accordion
+
+Accordion selectively shows or hides content when clicked by a user. It can contain practically any content. The header (link) can be placed above or below content; in the latter case it will move as the content expands.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Accordion } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+### Normal
+
+<Story
+  name="Normal"
+  args={{
+    showText: "See more",
+    hideText: "See less",
+    headerPosition: "bottom",
+    startOpen: false,
+  }}
+>
+  {args => (
+    <Accordion {...args}>
+      <p>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
+        repellendus deleniti architecto
+      </p>
+      <p>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
+        repellendus deleniti architecto
+      </p>
+    </Accordion>
+  )}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { Accordion } from "@simplybusiness/mobius";
+
+<Accordion showText="See more" hideText="See less">
+  <p>
+    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus
+    deleniti architecto
+  </p>
+  <p>
+    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus
+    deleniti architecto
+  </p>
+</Accordion>
+```
+
+### Start expanded
+
+<Story
+  name="Start expanded"
+  args={{
+    showText: "See more",
+    hideText: "See less",
+    headerPosition: "bottom",
+    startOpen: true,
+  }}
+>
+  {args => (
+    <Accordion {...args}>
+      <p>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
+        repellendus deleniti architecto
+      </p>
+    </Accordion>
+  )}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { Accordion } from "@simplybusiness/mobius";
+
+<Accordion
+  showText="See more"
+  hideText="See less"
+  headerPosition="bottom"
+  startOpen={true}
+>
+  <p>
+    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus
+    deleniti architecto
+  </p>
+</Accordion>
+```
+
+### Top Header
+
+<Story
+  name="Top Header"
+  args={{
+    showText: "See more",
+    hideText: "See less",
+    headerPosition: "top",
+    startOpen: false,
+  }}
+>
+  {args => (
+    <Accordion {...args}>
+      <p>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
+        repellendus deleniti architecto
+      </p>
+    </Accordion>
+  )}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { Accordion } from "@simplybusiness/mobius";
+
+<Accordion showText="See more" hideText="See less" headerPosition="top">
+  <p>
+    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus
+    deleniti architecto
+  </p>
+</Accordion>
+```
+
+### Complex Content
+
+<Story
+  name="Complex Content"
+  args={{
+    showText: "See more",
+    hideText: "See less",
+    headerPosition: "bottom",
+    startOpen: false,
+  }}
+>
+  {args => (
+    <Accordion {...args}>
+      <SegmentGroup>
+        <Segment>
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
+          repellendus deleniti architecto
+        </Segment>
+        <Segment>
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
+          repellendus deleniti architecto
+        </Segment>
+      </SegmentGroup>
+    </Accordion>
+  )}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { Accordion, SegmentGroup, Segment } from "@simplybusiness/mobius";
+
+<Accordion showText="See more" hideText="See less">
+  <SegmentGroup>
+    <Segment>
+      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
+      repellendus deleniti architecto
+    </Segment>
+    <Segment>
+      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
+      repellendus deleniti architecto
+    </Segment>
+  </SegmentGroup>
+</Accordion>
+```
+
+## Props
+
+<ArgsTable of={Accordion} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for an Accordion:
+
+```html
+<div class="mobius/Accordion">
+  <div class="mobius/AccordionLink show" role="button">
+    <svg class="mobius/Icon">{icon}</svg>
+    <span class="mobius/AccordionLinkText">See more</span>
+  </div>
+  <div class="mobius/AccordionContent">{children}</div>
+  <div class="mobius/AccordionLink hide" role="button">
+    <svg class="mobius/Icon">{icon}</svg>
+    <span class="mobius/AccordionLinkText">See more</span>
+  </div>
+</div>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Box) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Accordion/Accordion.test.tsx

@@ -0,0 +1,98 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Accordion } from ".";
+
+const CLASS_NAME = "mobius/Accordion";
+
+describe("Accordion", () => {
+  it("should render without errors", () => {
+    const component = render(<Accordion>test</Accordion>);
+    expect(component).toBeTruthy();
+  });
+
+  it("should open when clicked", () => {
+    const { container } = render(<Accordion>test content</Accordion>);
+    const header = container.getElementsByClassName("mobius/AccordionLink")[0];
+    const content = container.getElementsByClassName(
+      "mobius/AccordionContent",
+    )[0];
+    expect(content.parentElement?.parentElement).toHaveClass(
+      `rah-static--height-zero`,
+    );
+    expect(screen.getByText("See more")).toBeInTheDocument();
+
+    fireEvent.click(header);
+    expect(content.parentElement?.parentElement).toHaveClass(
+      `rah-animating--to-height-auto`,
+    );
+    expect(screen.getByText("See less")).toBeInTheDocument();
+
+    fireEvent.click(header);
+    expect(content.parentElement?.parentElement).toHaveClass(
+      `rah-animating--to-height-zero`,
+    );
+    expect(screen.getByText("See more")).toBeInTheDocument();
+  });
+
+  it("renders header in correct place relative to content", () => {
+    const { container } = render(
+      <Accordion headerPosition="top">test content</Accordion>,
+    );
+    const accordion = container.getElementsByClassName("mobius/Accordion")[0];
+    expect(accordion.firstChild).toHaveClass(`mobius/AccordionLink show`);
+    expect(accordion.lastChild).toHaveClass(`rah-static`);
+
+    const bottomAccordion = render(
+      <Accordion headerPosition="bottom">test content</Accordion>,
+    );
+    const accordion2 =
+      bottomAccordion.container.getElementsByClassName("mobius/Accordion")[0];
+    expect(accordion2.firstChild).toHaveClass(`rah-static`);
+    expect(accordion2.lastChild).toHaveClass(`mobius/AccordionLink show`);
+  });
+
+  it("respects startOpen prop and is expanded", () => {
+    render(<Accordion startOpen>test content</Accordion>);
+    expect(screen.getByText("See less")).toBeInTheDocument();
+  });
+
+  describe("uses correct class names", () => {
+    it("uses mobius class", () => {
+      const { container } = render(<Accordion>test content</Accordion>);
+      expect(container.firstChild).toHaveClass("mobius");
+    });
+
+    it("uses base Mobius class", () => {
+      render(<Accordion data-testid="test">Sample text</Accordion>);
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+
+    it("includes custom class name", () => {
+      render(
+        <Accordion className="my-class" data-testid="test">
+          Sample Text
+        </Accordion>,
+      );
+      expect(screen.getByTestId("test")).toHaveClass("my-class");
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+  });
+
+  describe("respects onClick prop", () => {
+    const handleOnClick = jest.fn();
+    const { container } = render(
+      <Accordion onClick={handleOnClick}>Sample Text</Accordion>,
+    );
+    const header = container.getElementsByClassName("mobius/AccordionLink")[0];
+    const content = container.getElementsByClassName(
+      "mobius/AccordionContent",
+    )[0];
+    expect(content.parentElement?.parentElement).toHaveClass(
+      `rah-static--height-zero`,
+    );
+    fireEvent.click(header);
+    expect(content.parentElement?.parentElement).toHaveClass(
+      `rah-animating--to-height-auto`,
+    );
+    expect(handleOnClick).toHaveBeenCalled();
+  });
+});

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,106 @@
+import { forwardRef, Ref, RefAttributes, ReactNode, useState } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import AnimateHeight from "react-animate-height";
+import { chevronDown } from "@simplybusiness/icons";
+import { ForwardedRefComponent } from "../../types/components";
+import { Icon } from "../Icon";
+
+export interface AccordionLinkProps extends DOMProps {
+  type: string;
+  /** Link text to show accordion content */
+  text?: string;
+  onClick?: (event: React.SyntheticEvent) => void;
+  toggle: () => void;
+}
+
+const AccordionLink = ({ text, type, toggle, onClick }: AccordionLinkProps) => {
+  const linkClasses = clsx("mobius/AccordionLink", type);
+  const handleOnClick = (event: React.SyntheticEvent) => {
+    if (onClick) {
+      onClick(event);
+    }
+    toggle();
+  };
+  return (
+    <div
+      className={linkClasses}
+      onClick={handleOnClick}
+      onKeyDown={toggle}
+      role="button"
+      tabIndex={0}
+    >
+      <Icon icon={chevronDown} />
+      <span className="mobius/AccordionLinkText">{text}</span>
+    </div>
+  );
+};
+
+export type AccordionElementType = HTMLDivElement;
+export type AccordionRef = Ref<AccordionElementType>;
+
+export interface AccordionProps
+  extends DOMProps,
+    RefAttributes<AccordionElementType> {
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  /** Link text to show accordion content */
+  showText?: string;
+  /** Link text to hide accordion content */
+  hideText?: string;
+  /** Whether header is above or below content */
+  headerPosition?: "top" | "bottom";
+  /** Whether to expand the accordion initially */
+  startOpen?: boolean;
+  children?: ReactNode;
+  onClick?: (event: React.SyntheticEvent) => void;
+}
+
+const Accordion: ForwardedRefComponent<AccordionProps, AccordionElementType> =
+  forwardRef((props: AccordionProps, ref: AccordionRef) => {
+    const {
+      showText = "See more",
+      hideText = "See less",
+      headerPosition = "bottom",
+      startOpen = false,
+      onClick = () => {},
+      ...rest
+    } = props;
+    const [open, setOpen] = useState(startOpen);
+    const contentHeight = open ? "auto" : 0;
+
+    const classes = clsx("mobius", "mobius/Accordion", props.className);
+    const linkText = open ? hideText : showText;
+    const linkType = open ? "hide" : "show";
+
+    const toggle = () => setOpen(!open);
+
+    return (
+      <div ref={ref} {...rest} className={classes}>
+        {headerPosition === "top" && (
+          <AccordionLink
+            text={linkText}
+            toggle={toggle}
+            type={linkType}
+            onClick={onClick}
+            aria-expanded={open}
+          />
+        )}
+        <AnimateHeight duration={500} height={contentHeight}>
+          <div className="mobius/AccordionContent">{props.children}</div>
+        </AnimateHeight>
+        {headerPosition === "bottom" && (
+          <AccordionLink
+            text={linkText}
+            toggle={toggle}
+            type={linkType}
+            onClick={onClick}
+            aria-expanded={open}
+          />
+        )}
+      </div>
+    );
+  });
+
+Accordion.displayName = "Accordion";
+export { Accordion };

package/src/components/Accordion/index.tsx

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

package/src/components/Alert/Alert.story.mdx

@@ -0,0 +1,82 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Alert, AlertProps } from "./Alert";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Components/Alert"
+  component={Alert}
+  argTypes={{
+    variant: {
+      control: "radio",
+      options: ["info", "success", "warning", "error"],
+    },
+    ...excludeControls("elementType", "className"),
+  }}
+/>
+
+# Alert
+
+The `Alert` component is used for displaying information about recent user
+actions. The component displays by default, using `variant="info"`. `Alert` may
+be dismissed through conditional rendering or with `show={false}` prop.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Alert } from "@simplybusiness/mobius";
+```
+
+## Normal
+
+<Canvas>
+  <Story name="Normal" args={{ variant: "info", show: true, header: "" }}>
+    {args => (
+      <Alert {...args}>
+        Today is{" "}
+        {new Intl.DateTimeFormat("en-GB", { dateStyle: "long" }).format(
+          new Date(),
+        )}
+      </Alert>
+    )}
+  </Story>
+</Canvas>
+
+## With Header
+
+<Canvas>
+  <Story
+    name="With Header"
+    args={{ variant: "info", show: true, header: "Information" }}
+  >
+    {args => (
+      <Alert {...args}>
+        Today is{" "}
+        {new Intl.DateTimeFormat("en-GB", { dateStyle: "long" }).format(
+          new Date(),
+        )}
+      </Alert>
+    )}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Alert} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Alert:
+
+```html
+<div class="mobius mobius/Alert">{children}</div>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Alert) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)