@simplybusiness/mobius 3.0.0

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,99 @@
+import {
+  DatePickerStateOptions,
+  useDatePickerState,
+} from "@react-stately/datepicker";
+import { AriaDatePickerProps, useDatePicker } from "@react-aria/datepicker";
+import { useRef } from "react";
+import { ModalProvider } from "@react-aria/overlays";
+import { DateValue } from "@internationalized/date";
+import { useHover } from "@react-aria/interactions";
+import { useFocusRing } from "@react-aria/focus";
+import clsx from "clsx";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+import { DateField } from "./DateField";
+import { Button } from "../Button";
+import { Popover } from "./Popover";
+import { Calendar } from "./Calendar";
+import { Label } from "../Label";
+
+export interface DatePickerProps
+  extends AriaDatePickerProps<DateValue>,
+    DatePickerStateOptions {
+  label: string;
+}
+
+export function DatePicker(props: DatePickerProps) {
+  const { label, isRequired } = props;
+  const state = useDatePickerState(props);
+  const ref = useRef<HTMLDivElement | null>(null);
+  const {
+    groupProps,
+    labelProps,
+    fieldProps,
+    buttonProps,
+    dialogProps,
+    calendarProps,
+  } = useDatePicker(props, state, ref);
+
+  const classes = clsx("mobius/DatePicker", {
+    "--is-valid": state.validationState === "valid",
+    "--is-invalid": state.validationState === "invalid",
+    "--is-required": typeof isRequired === "boolean" && isRequired,
+    "--is-optional": typeof isRequired === "boolean" && !isRequired,
+  });
+
+  const { hoverProps, isHovered } = useHover({
+    ...props,
+  });
+
+  const { focusProps, isFocusVisible } = useFocusRing(props);
+
+  const dateFieldGroupClasses = clsx("mobius/DateFieldGroup", {
+    "--is-hovered": isHovered,
+    "--is-focused": isFocusVisible,
+  });
+
+  const dateFieldClasses = clsx("mobius/DateField", {
+    "--is-hovered": isHovered,
+    "--is-focused": isFocusVisible,
+  });
+
+  const buttonClasses = clsx("mobius/DateFieldButton", {
+    "--is-hovered": isHovered,
+    "--is-focused": isFocusVisible,
+  });
+
+  return (
+    <ModalProvider>
+      <div className={classes} css={{ position: "relative" }}>
+        <Label {...labelProps}>{label}</Label>
+        <div
+          {...groupProps}
+          {...hoverProps}
+          {...focusProps}
+          ref={ref}
+          className={dateFieldGroupClasses}
+        >
+          <DateField {...fieldProps} className={dateFieldClasses} />
+          <Button
+            variant="secondary"
+            {...buttonProps}
+            className={buttonClasses}
+          >
+            <VisuallyHidden>Pick date</VisuallyHidden>
+          </Button>
+        </div>
+        {state.isOpen && (
+          /* @ts-expect-error */
+          <Popover
+            {...dialogProps}
+            isOpen={state.isOpen}
+            onClose={() => state.setOpen(false)}
+          >
+            <Calendar {...calendarProps} />
+          </Popover>
+        )}
+      </div>
+    </ModalProvider>
+  );
+}

package/src/components/DatePicker/DateSegment.tsx

@@ -0,0 +1,32 @@
+import { useDateSegment } from "@react-aria/datepicker";
+import { useFocusRing } from "@react-aria/focus";
+import {
+  DateFieldState,
+  DateSegment as DateSegmentType,
+} from "@react-stately/datepicker";
+import clsx from "clsx";
+import { useRef } from "react";
+
+export interface DateSegmentProps {
+  segment: DateSegmentType;
+  state: DateFieldState;
+}
+
+export function DateSegment({ segment, state }: DateSegmentProps) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+
+  const { focusProps, isFocusVisible } = useFocusRing();
+
+  const classes = clsx("mobius/DateSegment", {
+    "--is-literal": segment.type === "literal",
+    "--is-placeholder": segment.isPlaceholder,
+    "--is-focused": isFocusVisible,
+  });
+
+  return (
+    <div {...segmentProps} {...focusProps} ref={ref} className={classes}>
+      {segment.text}
+    </div>
+  );
+}

package/src/components/DatePicker/Popover.tsx

@@ -0,0 +1,59 @@
+import { FocusScope } from "@react-aria/focus";
+import { useDialog } from "@react-aria/dialog";
+import {
+  useOverlay,
+  useModal,
+  DismissButton,
+  AriaOverlayProps,
+} from "@react-aria/overlays";
+import { AriaDialogProps } from "@react-types/dialog";
+import { mergeProps } from "@react-aria/utils";
+import { ReactNode, Ref, useRef } from "react";
+
+export interface PopoverProps extends AriaDialogProps, AriaOverlayProps {
+  popoverRef: Ref<HTMLElement>;
+  children: ReactNode;
+}
+
+export function Popover(props: PopoverProps) {
+  const ref = useRef();
+  const { popoverRef = ref, isOpen, onClose, children, ...otherProps } = props;
+
+  // Handle events that should cause the popup to close,
+  // e.g. blur, clicking outside, or pressing the escape key.
+  const { overlayProps } = useOverlay(
+    {
+      isOpen,
+      onClose,
+      shouldCloseOnBlur: true,
+      isDismissable: true,
+    },
+    /* @ts-expect-error */
+    popoverRef,
+  );
+
+  const { modalProps } = useModal();
+  /* @ts-expect-error */
+  const { dialogProps } = useDialog(otherProps, popoverRef);
+
+  // Add a hidden <DismissButton> component at the end of the popover
+  // to allow screen reader users to dismiss the popup easily.
+  return (
+    <FocusScope contain restoreFocus>
+      <div
+        className="mobius/DatePickerPopover"
+        {...mergeProps(overlayProps, modalProps, dialogProps)}
+        /* @ts-expect-error */
+        ref={popoverRef}
+        css={{
+          position: "absolute",
+          marginTop: 4,
+          zIndex: 1,
+        }}
+      >
+        {children}
+        <DismissButton onDismiss={onClose} />
+      </div>
+    </FocusScope>
+  );
+}

package/src/components/DatePicker/index.tsx

@@ -0,0 +1,2 @@
+export * from "./DatePicker";
+export { parseDate } from "@internationalized/date";

package/src/components/Divider/Divider.story.mdx

@@ -0,0 +1,54 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Divider } from "./Divider";
+import { Text, Flex } from "..";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Components/Divider"
+  component={Divider}
+  argTypes={excludeControls("className")}
+/>
+
+# Divider
+
+A Divider is a horizontal line used to separate content blocks. It is normally horizontally centred to - and occupies the full width of - its container.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Divider } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+### Normal
+
+<Canvas>
+  <Story name="Normal" args={{}}>
+    {args => <Divider {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Divider} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Divider:
+
+```html
+<div class="mobius/Divider">
+  <div class="mobius/DividerInner" />
+</div>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Label) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,23 @@
+import { DOMProps } from "@react-types/shared";
+import { useSeparator, SeparatorProps } from "@react-aria/separator";
+import clsx from "clsx";
+
+export interface DividerProps extends SeparatorProps, DOMProps {
+  className?: string;
+}
+
+const Divider = (props: DividerProps) => {
+  const { className, ...rest } = props;
+  const { separatorProps } = useSeparator(props);
+
+  const classes = clsx("mobius", "mobius/Divider", className);
+
+  return (
+    <div className={classes} {...separatorProps} {...rest}>
+      <div className="mobius/DividerInner" />
+    </div>
+  );
+};
+
+Divider.displayName = "Divider";
+export { Divider };

package/src/components/Divider/index.tsx

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

package/src/components/DropdownMenu/DropdownMenu.story.mdx

@@ -0,0 +1,161 @@
+import { forwardRef } from "react";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { DropdownMenu } from ".";
+import { Icon } from "../Icon";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Components/DropdownMenu"
+  component={DropdownMenu}
+  argTypes={excludeControls("className", "elementType", "trigger", "style")}
+/>
+
+# DropdownMenu
+
+The `DropdownMenu` component is used for displaying contextual information in a
+conditionally opened overlay.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { DropdownMenu } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+### Basic DropdownMenu
+
+DropdownMenu consists of menu items. Each item should be wrapped with
+`DropdownMenu.Item` component. This ensures that appropriate CSS class names and
+behaviours are handled correctly.
+
+## Normal
+
+<Canvas>
+  <Story name="Normal" args={{ label: "Menu" }}>
+    {args => (
+      <div style={{ height: 300 }}>
+        <DropdownMenu {...args}>
+          <DropdownMenu.Item>Home</DropdownMenu.Item>
+          <DropdownMenu.Item>My details</DropdownMenu.Item>
+          <DropdownMenu.Item>Sign out</DropdownMenu.Item>
+        </DropdownMenu>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## With Customisations
+
+### Customisations
+
+A custom trigger may be provided as a React component:
+
+`<DropdownMenu trigger={<CustomTrigger />} />`
+
+The trigger will receive:
+
+- `className` - contains styles; apply on the trigger component
+- `open` - informs about the open state (`true`/`false`) of the menu
+- `label` - contains label text
+- `...otherProps` - contains accessibility props; apply on the trigger component
+
+The trigger will need to be wrapped with `forwardRef` as per the example below:
+
+```jsx
+const CustomTrigger = forwardRef((props, ref) => {
+  const { className, open, label, ...otherProps } = props;
+  return (
+    <button className={className} {...otherProps}>
+      {label} {open ? "⨯" : "↓"}
+    </button>
+  );
+});
+```
+
+If you would like to use a an `onClick` handler on each of the DropdownMenu items,
+you may write it as follows:
+
+```jsx
+<DropdownMenu>
+  <DropdownMenu.Item onClick={() => alert("Clicked Home")}>
+    Home
+  </DropdownMenu.Item>
+</DropdownMenu>
+```
+
+export const CustomTrigger = forwardRef((props, ref) => {
+  const { className, open, ...otherProps } = props;
+  return (
+    <button className={className} {...otherProps}>
+      {open ? "Close" : "Open"}{" "}
+      <Icon
+        name="chevronDown"
+        style={{
+          transform: open ? "rotate(180deg)" : "rotate(0deg)",
+          transition: "transform 150ms ease-in-out 0s",
+        }}
+      />
+    </button>
+  );
+});
+
+<Canvas>
+  <Story
+    name="With Custom Trigger"
+    args={{
+      trigger: <CustomTrigger />,
+      style: {
+        textAlign: "right",
+      },
+    }}
+    parameters={{ controls: { exclude: ["label"] } }}
+  >
+    {args => (
+      <div style={{ height: 300 }}>
+        <DropdownMenu {...args}>
+          <DropdownMenu.Item onClick={() => alert("Clicked Home")}>
+            Home
+          </DropdownMenu.Item>
+          <DropdownMenu.Item>My details</DropdownMenu.Item>
+          <DropdownMenu.Item>Sign out</DropdownMenu.Item>
+        </DropdownMenu>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={DropdownMenu} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a DropdownMenu:
+
+```html
+<nav class="mobius mobius/DropdownMenu">
+  <button
+    class="mobius mobius/DropdownMenuTrigger {className}"
+    aria-expanded="{open}"
+    {...otherProps}
+  >
+    {label}
+  </button>
+  <ul class="mobius mobius/DropdownMenuList">
+    <li class="mobius mobius/DropdownMenuItem">{child}</li>
+
+    (more li items...)
+  </ul>
+</nav>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/DropdownMenu) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/DropdownMenu/DropdownMenu.test.tsx

@@ -0,0 +1,188 @@
+import React, { forwardRef } from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { DropdownMenu } from ".";
+
+const CLASS_NAME = "mobius/DropdownMenu";
+const TRIGGER_CLASS_NAME = "mobius/DropdownMenuTrigger";
+const LIST_CLASS_NAME = "mobius/DropdownMenuList";
+const ITEM_CLASS_NAME = "mobius/DropdownMenuItem";
+const ACTIVE_ITEM_CLASS_NAME = "--is-active";
+
+describe("DropdownMenu", () => {
+  it("should render without errors", () => {
+    const component = render(
+      <DropdownMenu>
+        <DropdownMenu.Item>Home</DropdownMenu.Item>
+      </DropdownMenu>,
+    );
+    expect(component).toBeTruthy();
+  });
+
+  it("should use the provided elementType", () => {
+    const { container } = render(
+      <DropdownMenu elementType="span">
+        <DropdownMenu.Item>Home</DropdownMenu.Item>
+      </DropdownMenu>,
+    );
+    expect(container.firstElementChild?.tagName).toBe("SPAN");
+  });
+
+  describe("given elementType", () => {
+    it("is not applied as element attribute", () => {
+      const { container } = render(
+        <DropdownMenu elementType="ul">
+          <DropdownMenu.Item elementType="li">Home</DropdownMenu.Item>
+        </DropdownMenu>,
+      );
+      expect(container.firstChild).not.toHaveAttribute("elementtype", "ul");
+      expect(screen.queryByRole("menuitem")).not.toHaveAttribute(
+        "elementtype",
+        "li",
+      );
+    });
+  });
+
+  it("should use the provided label", () => {
+    const label = "Menu";
+
+    render(
+      <DropdownMenu label={label}>
+        <DropdownMenu.Item>Home</DropdownMenu.Item>
+      </DropdownMenu>,
+    );
+    expect(screen.getByText(label)).toBeInTheDocument();
+  });
+
+  it("should use the provided trigger", () => {
+    const triggerText = "My custom trigger";
+    const Trigger = forwardRef(() => <span>{triggerText}</span>);
+
+    render(
+      <DropdownMenu trigger={<Trigger />}>
+        <DropdownMenu.Item>Home</DropdownMenu.Item>
+      </DropdownMenu>,
+    );
+
+    expect(screen.getByText(triggerText)).toBeInTheDocument();
+  });
+
+  it("should use the onClick handler on menu item", () => {
+    const customHandler = jest.fn();
+
+    render(
+      <DropdownMenu>
+        <DropdownMenu.Item onClick={customHandler}>Home</DropdownMenu.Item>
+      </DropdownMenu>,
+    );
+
+    const trigger = screen.getByRole("button");
+
+    fireEvent.click(trigger);
+
+    const item = screen.getByRole("menuitem");
+
+    fireEvent.click(item);
+
+    expect(customHandler).toHaveBeenCalled();
+  });
+
+  it("should close menu upon item selection", () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenu.Item>Home</DropdownMenu.Item>
+      </DropdownMenu>,
+    );
+
+    const trigger = screen.getByRole("button");
+
+    fireEvent.click(trigger);
+
+    const item = screen.getByRole("menuitem");
+
+    fireEvent.click(item);
+
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  describe("uses correct class names", () => {
+    it("uses Mobius class", () => {
+      const { container } = render(
+        <DropdownMenu>
+          <DropdownMenu.Item>Home</DropdownMenu.Item>
+        </DropdownMenu>,
+      );
+      expect(container.firstChild).toHaveClass("mobius");
+    });
+
+    it("uses base Mobius class", () => {
+      const { container } = render(
+        <DropdownMenu>
+          <DropdownMenu.Item>Home</DropdownMenu.Item>
+        </DropdownMenu>,
+      );
+      expect(container.firstChild).toHaveClass(CLASS_NAME);
+    });
+
+    it("includes custom class name", () => {
+      const { container } = render(
+        <DropdownMenu className="my-class">
+          <DropdownMenu.Item>Home</DropdownMenu.Item>
+        </DropdownMenu>,
+      );
+      expect(container.firstChild).toHaveClass("my-class");
+      expect(container.firstChild).toHaveClass(CLASS_NAME);
+    });
+
+    it("uses trigger class name", () => {
+      render(
+        <DropdownMenu className="my-class">
+          <DropdownMenu.Item>Home</DropdownMenu.Item>
+        </DropdownMenu>,
+      );
+      expect(screen.getByRole("button")).toHaveClass(TRIGGER_CLASS_NAME);
+    });
+
+    it("uses list class name", () => {
+      render(
+        <DropdownMenu className="my-class">
+          <DropdownMenu.Item>Home</DropdownMenu.Item>
+        </DropdownMenu>,
+      );
+      const trigger = screen.getByRole("button");
+
+      fireEvent.click(trigger);
+
+      expect(screen.getByRole("menu")).toHaveClass(LIST_CLASS_NAME);
+    });
+
+    it("uses list item class name", () => {
+      render(
+        <DropdownMenu className="my-class">
+          <DropdownMenu.Item>Home</DropdownMenu.Item>
+        </DropdownMenu>,
+      );
+      const trigger = screen.getByRole("button");
+
+      fireEvent.click(trigger);
+
+      expect(screen.getByRole("menuitem")).toHaveClass(ITEM_CLASS_NAME);
+    });
+
+    it("uses list item active class name", () => {
+      render(
+        <DropdownMenu className="my-class">
+          <DropdownMenu.Item>Home</DropdownMenu.Item>
+        </DropdownMenu>,
+      );
+      const trigger = screen.getByRole("button");
+
+      fireEvent.click(trigger);
+
+      const item = screen.getByRole("menuitem");
+
+      fireEvent.click(item);
+
+      expect(item).toHaveClass(ACTIVE_ITEM_CLASS_NAME);
+    });
+  });
+});