@simplybusiness/mobius 3.0.0

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,105 @@
+import {
+  Ref,
+  forwardRef,
+  RefAttributes,
+  ReactNode,
+  Children,
+  isValidElement,
+  cloneElement,
+  useState,
+  ReactElement,
+} from "react";
+import { DOMProps } from "@react-types/shared";
+import useDropdownMenu from "react-accessible-dropdown-menu-hook";
+import clsx from "clsx";
+
+import { Button } from "../Button";
+import { ForwardedRefComponent } from "../../types/components";
+
+export type DropdownMenuElementType = HTMLElement;
+
+export interface DropdownMenuProps
+  extends DOMProps,
+    RefAttributes<DropdownMenuElementType> {
+  children?: ReactNode;
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  elementType?: string | React.ElementType;
+  label?: string;
+  trigger?: ReactElement;
+}
+
+export type DropdownMenuRef = Ref<DropdownMenuElementType>;
+
+type ChildClickProps = {
+  onClick?: () => void;
+};
+
+const DropdownMenu: ForwardedRefComponent<
+  DropdownMenuProps,
+  DropdownMenuElementType
+> = forwardRef((props: DropdownMenuProps, ref: DropdownMenuRef) => {
+  const {
+    elementType: Element = "nav",
+    trigger,
+    label = "Menu",
+    children,
+    ...otherProps
+  } = props;
+  const [activeId, setActiveId] = useState<number | null>(null);
+  const numberOfItems = Children.count(children);
+  const {
+    buttonProps,
+    itemProps,
+    isOpen: open,
+    setIsOpen,
+  } = useDropdownMenu(numberOfItems);
+
+  const classes = clsx("mobius", "mobius/DropdownMenu", otherProps.className);
+  const triggerClasses = clsx("mobius", "mobius/DropdownMenuTrigger");
+  const listClasses = clsx("mobius", "mobius/DropdownMenuList", {
+    "--is-open": open,
+  });
+
+  const handleChildClick = ({ onClick }: ChildClickProps, index: number) => {
+    setActiveId(index);
+    setIsOpen(false);
+
+    if (onClick) {
+      onClick();
+    }
+  };
+
+  return (
+    <Element ref={ref} {...otherProps} className={classes}>
+      {trigger ? (
+        cloneElement(trigger, {
+          className: triggerClasses,
+          open,
+          label,
+          ...buttonProps,
+        })
+      ) : (
+        <Button className={triggerClasses} {...buttonProps}>
+          {label}
+        </Button>
+      )}
+      <ul className={listClasses} role="menu">
+        {Children.map(children, (child, index) => {
+          if (isValidElement(child)) {
+            return cloneElement(child, {
+              onClick: () => handleChildClick(child.props, index),
+              active: index === activeId,
+              ...itemProps[index],
+            } as any);
+          }
+
+          return child;
+        })}
+      </ul>
+    </Element>
+  );
+});
+
+DropdownMenu.displayName = "DropdownMenu";
+export { DropdownMenu };

package/src/components/DropdownMenu/Item.tsx

@@ -0,0 +1,46 @@
+import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+
+export type ItemElementType = HTMLLIElement;
+
+export interface ItemProps extends DOMProps, RefAttributes<ItemElementType> {
+  elementType?: string | React.ElementType;
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  active?: boolean;
+  children?: ReactNode;
+  onClick?: () => void;
+}
+
+export type ItemRef = Ref<ItemElementType>;
+
+const Item: ForwardedRefComponent<ItemProps, ItemElementType> = forwardRef(
+  (props: ItemProps, ref: ItemRef) => {
+    const {
+      elementType: Element = "li",
+      active,
+      onClick,
+      ...otherProps
+    } = props;
+    const classes = clsx(
+      "mobius",
+      "mobius/DropdownMenuItem",
+      { "--is-active": active },
+      otherProps.className,
+    );
+
+    return (
+      <Element
+        ref={ref}
+        className={classes}
+        onClick={onClick}
+        {...otherProps}
+      />
+    );
+  },
+);
+
+Item.displayName = "DropdownMenu.Item";
+export { Item };

package/src/components/DropdownMenu/index.tsx

@@ -0,0 +1,38 @@
+import { ForwardedRefComponent } from "../../types/components";
+import {
+  DropdownMenu as DropdownMenuComponent,
+  DropdownMenuProps,
+  DropdownMenuRef,
+} from "./DropdownMenu";
+import { Item } from "./Item";
+
+import type { DropdownMenuElementType } from "./DropdownMenu";
+import type {
+  ItemProps as DropdownMenuItemProps,
+  ItemRef as DropdownMenuItemRef,
+  ItemElementType as DropdownMenuItemElementType,
+} from "./Item";
+
+export interface DropdownMenuCompound
+  extends ForwardedRefComponent<DropdownMenuProps, HTMLElement> {
+  Item: ForwardedRefComponent<DropdownMenuItemProps, HTMLLIElement>;
+}
+
+const DropdownMenu: DropdownMenuCompound = Object.assign(
+  DropdownMenuComponent,
+  {
+    Item,
+  },
+);
+
+export type {
+  DropdownMenuElementType,
+  DropdownMenuProps,
+  DropdownMenuRef,
+  DropdownMenuItemProps,
+  DropdownMenuItemRef,
+  DropdownMenuItemElementType,
+};
+
+DropdownMenu.displayName = "DropdownMenu";
+export { DropdownMenu };

package/src/components/ErrorMessage/ErrorMessage.story.mdx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { Meta, ArgsTable, Story, Canvas } from "@storybook/addon-docs";
+import { Box } from "../Box";
+import { Button } from "../Button";
+import { ErrorMessage } from ".";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Forms/ErrorMessage"
+  component={ErrorMessage}
+  argTypes={excludeControls("id")}
+/>
+
+# ErrorMessage
+
+The `ErrorMessage` component is used for displaying generic error information.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { ErrorMessage } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+### Normal
+
+<Canvas>
+  <Story
+    name="Normal"
+    args={{
+      errorMessage: "This is an error message",
+    }}
+  >
+    {args => <ErrorMessage {...args} />}
+  </Story>
+</Canvas>
+
+### Long message
+
+<Canvas>
+  <Story
+    name="Long Message"
+    args={{
+      errorMessage:
+        " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum, mauris ac egestas rutrum, dui urna imperdiet velit, ac malesuada velit augue eget orci. Duis id purus et elit tempus egestas ut eget tellus. Praesent tempus sit amet metus iaculis auctor. Morbi aliquet nibh sit amet neque congue dictum. Proin auctor pellentesque facilisis. Donec rutrum at ante a pulvinar. In hac habitasse platea dictumst. Mauris non blandit nulla. Duis facilisis fringilla cursus. Interdum et malesuada fames ac ante ipsum primis in faucibus.",
+    }}
+  >
+    {args => <ErrorMessage {...args} />}
+  </Story>
+</Canvas>

package/src/components/ErrorMessage/ErrorMessage.test.tsx

@@ -0,0 +1,37 @@
+import { render } from "@testing-library/react";
+import { ErrorMessage } from ".";
+
+const CLASS_NAME = "mobius/ErrorMessage";
+
+describe("Error message", () => {
+  it("should render without errors", () => {
+    render(<ErrorMessage />);
+  });
+
+  it("should not display when there is no message", () => {
+    const { container } = render(<ErrorMessage />);
+    expect(container.childNodes.length).toEqual(0);
+  });
+
+  it("should display when there is a message", () => {
+    const { getByText } = render(<ErrorMessage errorMessage="Oops" />);
+    expect(getByText("Oops")).toBeTruthy();
+  });
+
+  it("uses Mobius class", () => {
+    const { getByText } = render(<ErrorMessage errorMessage="Oops" />);
+    expect(getByText("Oops").closest("div")).toHaveClass("mobius");
+  });
+
+  it("uses base Mobius class", () => {
+    const { getByText } = render(<ErrorMessage errorMessage="Oops" />);
+    expect(getByText("Oops").closest("div")).toHaveClass(CLASS_NAME);
+  });
+
+  it("uses CSS classes", () => {
+    const { container } = render(
+      <ErrorMessage errorMessage="Oops" className="custom-class" />,
+    );
+    expect(container.firstChild).toHaveClass("custom-class");
+  });
+});

package/src/components/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,29 @@
+import clsx from "clsx";
+import { Text } from "../Text";
+
+export interface ErrorMessageProps {
+  errorMessage?: string;
+  id?: string;
+  className?: string;
+}
+
+export const ErrorMessage = ({
+  id,
+  errorMessage,
+  className,
+}: ErrorMessageProps) => {
+  const classes = clsx("mobius", "mobius/ErrorMessage", className);
+
+  if (!errorMessage) return null;
+
+  return (
+    <div id={id} className={classes} data-testid="ErrorMessage">
+      <span className="mobius/ErrorIcon" />
+      <Text elementType="span" className="mobius/ErrorText">
+        {errorMessage}
+      </Text>
+    </div>
+  );
+};
+
+ErrorMessage.displayName = "ErrorMessage";

package/src/components/ErrorMessage/index.tsx

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

package/src/components/Fieldset/Fieldset.story.mdx

@@ -0,0 +1,85 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Fieldset } from "./Fieldset";
+import { TextField } from "../TextField";
+import { StyledLegend } from "./stories/StyledLegend";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Forms/Fieldset"
+  component={Fieldset}
+  argTypes={excludeControls("className", "legendComponent")}
+/>
+
+# Fieldset
+
+Fieldset can be used to group form fields together.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Fieldset } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+## Normal
+
+<Canvas>
+  <Story name="Normal" args={{ legend: "" }}>
+    {args => (
+      <Fieldset {...args}>
+        <TextField label="Full name" />
+        <TextField label="Street" />
+        <TextField label="Number" />
+        <TextField label="City" />
+        <TextField label="Postcode" />
+      </Fieldset>
+    )}
+  </Story>
+</Canvas>
+
+## With Legend
+
+<Canvas>
+  <Story name="With Legend" args={{ legend: "Contact Details" }}>
+    {args => (
+      <Fieldset {...args}>
+        <TextField label="Full name" />
+        <TextField label="Street" />
+        <TextField label="Number" />
+        <TextField label="City" />
+        <TextField label="Postcode" />
+      </Fieldset>
+    )}
+  </Story>
+</Canvas>
+
+## Accessibility
+
+A `legend` can provided to help screen readers spell out the fieldset name when interacting with the fields that are contained in it.
+
+## Props
+
+<ArgsTable of={Fieldset} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Fieldset:
+
+```html
+<div class="mobius/Flex mobius/Fieldset">
+  <legend class="mobius/Legend">Legend text</legend>
+
+  (collection of <input />...)
+</div>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Fieldset) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Fieldset/Fieldset.test.tsx

@@ -0,0 +1,13 @@
+import { render } from "@testing-library/react";
+import { Fieldset } from ".";
+import { TextField } from "../TextField";
+
+describe("Fieldset", () => {
+  it("should render without errors", () => {
+    render(
+      <Fieldset legend="Shipping address">
+        <TextField aria-label="name" />
+      </Fieldset>,
+    );
+  });
+});

package/src/components/Fieldset/Fieldset.tsx

@@ -0,0 +1,90 @@
+import {
+  Ref,
+  forwardRef,
+  ReactNode,
+  ReactElement,
+  cloneElement,
+  RefAttributes,
+} from "react";
+import { DOMProps } from "@react-types/shared";
+import { useId } from "@react-aria/utils";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+import { Flex } from "../Flex";
+
+export type LegendProps = {
+  id?: string;
+  className?: string;
+};
+
+type ContainerProps = {
+  "aria-labelledby"?: string;
+  role: string;
+};
+
+const useFieldset = (
+  props: FieldsetProps,
+): { legendProps: LegendProps; containerProps: ContainerProps } => {
+  const { legend } = props;
+
+  let legendProps: LegendProps = {};
+  let containerProps: ContainerProps = {
+    role: "group",
+  };
+
+  const legendId = useId();
+  if (legend) {
+    legendProps = {
+      ...legendProps,
+      id: legendId,
+    };
+    containerProps = {
+      ...containerProps,
+      "aria-labelledby": legendId,
+    };
+  }
+
+  return {
+    legendProps,
+    containerProps,
+  };
+};
+
+export type FieldsetElementType = HTMLDivElement;
+export interface FieldsetProps
+  extends DOMProps,
+    RefAttributes<FieldsetElementType> {
+  legend?: string;
+  children: ReactNode;
+  className?: string;
+  legendComponent?: ReactElement<any>;
+}
+
+export type FieldsetRef = Ref<FieldsetElementType>;
+
+const Fieldset: ForwardedRefComponent<FieldsetProps, FieldsetElementType> =
+  forwardRef((props: FieldsetProps, _ref: FieldsetRef) => {
+    const {
+      children,
+      legend,
+      legendComponent = <legend />,
+      ...otherProps
+    } = props;
+
+    const { legendProps, containerProps } = useFieldset(props);
+
+    const classes = clsx("mobius", "mobius/Fieldset", props.className);
+
+    // Set class on legend
+    legendProps.className = "mobius/Legend";
+
+    return (
+      <Flex {...containerProps} {...otherProps} className={classes}>
+        {legend && cloneElement(legendComponent, { ...legendProps }, [legend])}
+        {children}
+      </Flex>
+    );
+  });
+
+Fieldset.displayName = "Fieldset";
+export { Fieldset };

package/src/components/Fieldset/index.tsx

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

package/src/components/Fieldset/stories/StyledLegend.tsx

@@ -0,0 +1,12 @@
+import { LegendProps } from "../Fieldset";
+
+export const StyledLegend = (props: LegendProps) => (
+  <legend
+    css={{
+      marginBottom: "size-20",
+      paddingLeft: 0,
+      color: "primary",
+    }}
+    {...props}
+  />
+);