@simplybusiness/mobius 3.0.0

package/src/components/Button/Button.story.mdx

@@ -0,0 +1,405 @@
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { Meta, ArgsTable, Canvas, Source, Story } from "@storybook/addon-docs";
+import { Button } from "./Button";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Components/Button"
+  component={Button}
+  argTypes={{
+    icon: {
+      options: ["", "menu", "rightArrow", "leftArrow", "dropdown", "home"],
+      control: "select",
+    },
+    iconPosition: {
+      if: {
+        arg: "icon",
+      },
+    },
+    isLoading: {
+      if: {
+        arg: "isSuccess",
+        truthy: false,
+      },
+    },
+    isSuccess: {
+      if: {
+        arg: "isLoading",
+        truthy: false,
+      },
+    },
+    ...excludeControls("className", "onClick", "elementType"),
+  }}
+/>
+
+# Button
+
+Buttons allow users to perform actions like submitting form or move forward in a flow.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { Button } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+## Normal
+
+<Canvas>
+  <Story
+    name="Normal"
+    args={{
+      children: "Confirm",
+      variant: "primary",
+      size: "medium",
+      icon: "",
+      isDisabled: false,
+      isLoading: false,
+      isSuccess: false,
+    }}
+  >
+    {args => <Button {...args} />}
+  </Story>
+</Canvas>
+
+## Secondary
+
+<Canvas>
+  <Story
+    name="Secondary"
+    args={{
+      variant: "secondary",
+      size: "medium",
+      children: "Secondary Button",
+      icon: "",
+      isDisabled: false,
+      isLoading: false,
+      isSuccess: false,
+    }}
+  >
+    {args => <Button {...args} />}
+  </Story>
+</Canvas>
+
+## Ghost
+
+<Canvas>
+  <Story
+    name="Ghost"
+    args={{
+      variant: "ghost",
+      size: "medium",
+      children: "Ghost Button",
+      icon: "",
+      isDisabled: false,
+      isLoading: false,
+      isSuccess: false,
+    }}
+  >
+    {args => <Button {...args} />}
+  </Story>
+</Canvas>
+
+## Basic
+
+<Canvas>
+  <Story
+    name="Basic"
+    args={{
+      variant: "basic",
+      size: "medium",
+      children: "Basic Button",
+      icon: "",
+      isDisabled: false,
+      isLoading: false,
+      isSuccess: false,
+    }}
+  >
+    {args => <Button {...args} />}
+  </Story>
+</Canvas>
+
+## Large
+
+<Canvas>
+  <Story
+    name="Large"
+    args={{
+      children: "Large Button",
+      variant: "primary",
+      size: "large",
+      icon: "",
+      isDisabled: false,
+      isLoading: false,
+      isSuccess: false,
+    }}
+  >
+    {args => <Button {...args} />}
+  </Story>
+</Canvas>
+
+## Link
+
+<Canvas>
+  <Story
+    name="Link"
+    args={{
+      children: "Link Button",
+      elementType: "a",
+      variant: "primary",
+      size: "medium",
+      icon: "",
+      isDisabled: false,
+      isLoading: false,
+      isSuccess: false,
+    }}
+  >
+    {args => <Button {...args} />}
+  </Story>
+</Canvas>
+
+## Loading
+
+<Canvas>
+  <Story
+    name="Loading"
+    args={{
+      children: "Loading",
+      variant: "primary",
+      size: "medium",
+      icon: "",
+      isDisabled: false,
+      isLoading: true,
+      isSuccess: false,
+    }}
+    parameters={{ controls: { exclude: ["icon", "iconPosition"] } }}
+  >
+    {args => <Button {...args} />}
+  </Story>
+</Canvas>
+
+## Success
+
+<Canvas>
+  <Story
+    name="Success"
+    args={{
+      children: "Success",
+      variant: "primary",
+      size: "medium",
+      icon: "",
+      isDisabled: false,
+      isLoading: false,
+      isSuccess: true,
+    }}
+    parameters={{ controls: { exclude: ["icon", "iconPosition"] } }}
+  >
+    {args => <Button {...args} />}
+  </Story>
+</Canvas>
+
+## Disabled
+
+<Canvas>
+  <Story
+    name="Disabled"
+    args={{
+      children: "Disabled",
+      variant: "primary",
+      size: "medium",
+      icon: "",
+      isDisabled: true,
+      isLoading: false,
+      isSuccess: false,
+    }}
+  >
+    {args => <Button {...args} />}
+  </Story>
+</Canvas>
+
+## With Icon
+
+<Canvas>
+  <Story
+    name="With Icon"
+    args={{
+      children: "Menu",
+      variant: "primary",
+      size: "medium",
+      icon: "menu",
+      iconPosition: "right",
+      isDisabled: false,
+      isLoading: false,
+      isSuccess: false,
+    }}
+  >
+    {args => <Button {...args} />}
+  </Story>
+</Canvas>
+
+## Themed
+
+export const StyledButton = styled(Button)`
+  background-color: red;
+`;
+
+<Story
+  name="Themed"
+  args={{
+    children: "Confirm",
+    variant: "primary",
+    size: "medium",
+    icon: "",
+    isDisabled: false,
+    isLoading: false,
+    isSuccess: false,
+  }}
+>
+  {args => <StyledButton {...args} />}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { Button } from "@simplybusiness/mobius";
+import styled from "@emotion/styled";
+
+const StyledButton = styled(Button)`
+  background-color: red;
+`;
+
+<StyledButton>Sample Text</StyledButton>
+```
+
+## Accessibility
+
+When the button contains no text content (eg. when it only shows an icon), a value must be provided to the `aria-label` prop.
+
+## Events
+
+Button can be interacted with via keyboard, mouse and touch gestures. All these interactions are handled by the `onPress` prop.
+
+export const Counter = () => {
+  let [count, setCount] = useState(0);
+  return (
+    <Button onPress={() => setCount(c => c + 1)}>Pressed {count} times</Button>
+  );
+};
+
+```tsx
+const Counter = () => {
+  let [count, setCount] = useState(0);
+  return (
+    <Button onPress={() => setCount(c => c + 1)}>Pressed {count} times</Button>
+  );
+};
+```
+
+<Canvas withSource="none">
+  <Counter />
+</Canvas>
+
+export const PressButton = () => {
+  let [pressLogs, setPressLogs] = useState([]);
+  const log = e => {
+    setPressLogs(pressLogs => [...pressLogs.slice(-5), e]);
+  };
+  return (
+    <div>
+      <Button
+        onPressUp={() => log("onPressUp")}
+        onPressEnd={() => log("onPressEnd")}
+        onPress={() => log("onPress")}
+        onPressStart={() => log("onPressStart")}
+      >
+        Press me
+      </Button>
+      <ul>
+        {pressLogs.map((pressLog, i) => (
+          <li key={i}>{pressLog}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+```tsx
+const PressButton = () => {
+  let [pressLogs, setPressLogs] = useState([]);
+  const log = e => {
+    setPressLogs(pressLogs => [...pressLogs.slice(-5), e]);
+  };
+  return (
+    <div>
+      <Button
+        onPressUp={() => log("onPressUp")}
+        onPressEnd={() => log("onPressEnd")}
+        onPress={() => log("onPress")}
+        onPressStart={() => log("onPressStart")}
+      >
+        Press me
+      </Button>
+      <ul>
+        {pressLogs.map((pressLog, i) => (
+          <li key={i}>{pressLog}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+```
+
+<Canvas withSource="none">
+  <PressButton />
+</Canvas>
+
+## Props
+
+<ArgsTable of={Button} />
+
+## Component HTML Structure and Class names
+
+The following example HTML is rendered for a Text Button:
+
+```html
+<button class="mobius/Button --variant-primary --size-medium">Text</button>
+```
+
+And this for an Icon Button:
+
+```html
+<button class="mobius/Button --variant-primary --size-medium">
+  <div class="mobius/ButtonIconWrapper">
+    <svg class="mobius/Icon" role="img" focusable="false">(icon)</svg>
+  </div>
+</button>
+```
+
+Class names are augmented with the following flags if true:
+
+- --has-icon
+- --is-disabled
+- --is-hovered
+- --is-loading
+- --is-success
+- --is-focus-visible
+- --size-small
+- --size-medium
+- --size-large
+- --variant-primary
+- --variant-secondary
+- --variant-ghost
+- --variant-inverse
+- --variant-inverse-ghost
+- --variant-basic
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/Button) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,105 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Button } from ".";
+
+const CLASS_NAME = "mobius/Button";
+
+describe("Button", () => {
+  it("should render without errors", () => {
+    const error = jest.spyOn(global.console, "error");
+    const onPress = jest.fn();
+    render(<Button onPress={onPress}>Sample text</Button>);
+    expect(error).not.toHaveBeenCalled();
+  });
+
+  it("should call the onPress", async () => {
+    const onPress = jest.fn();
+    const { getByText } = render(<Button onPress={onPress}>Press</Button>);
+    await userEvent.click(getByText("Press"));
+    expect(onPress).toHaveBeenCalled();
+  });
+
+  it("should call the onClick", async () => {
+    const onClick = jest.fn();
+    const { getByText } = render(<Button onClick={onClick}>Click</Button>);
+    await userEvent.click(getByText("Click"));
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  describe("given icon is provided", () => {
+    it("renders the icon on the left by default", () => {
+      render(<Button icon="chevronDown">Icon on the left</Button>);
+      expect(screen.getByRole("button").firstElementChild?.tagName).toBe("svg");
+    });
+
+    it("renders the icon after text when position is set to 'right'", () => {
+      render(
+        <Button icon="chevronDown" iconPosition="right">
+          Icon on the right
+        </Button>,
+      );
+      expect(screen.getByRole("button").children[1].tagName).toBe("svg");
+    });
+  });
+
+  describe("given the button is set to 'loading'", () => {
+    it("should only render the loading icon", () => {
+      render(
+        <Button isLoading icon="chevronDown" iconPosition="right">
+          Click me
+        </Button>,
+      );
+
+      expect(screen.getByRole("button").firstElementChild).toHaveClass(
+        "mobius/ButtonIconWrapper",
+      );
+      expect(screen.getByRole("button").children[1]).toHaveClass(
+        "hide-children",
+      );
+    });
+  });
+
+  describe("given the button is set to 'loading' and 'success'", () => {
+    it("renders 'loading' state", () => {
+      render(<Button isLoading isSuccess />);
+      expect(screen.getByRole("button")).toHaveClass("--is-loading");
+      expect(screen.getByRole("button")).not.toHaveClass("--is-success");
+    });
+  });
+
+  describe("uses correct class names", () => {
+    it("uses Mobius class", () => {
+      render(<Button />);
+      expect(screen.getByRole("button")).toHaveClass("mobius");
+    });
+
+    it("uses base Mobius class", () => {
+      render(<Button />);
+      expect(screen.getByRole("button")).toHaveClass(CLASS_NAME);
+    });
+
+    it("includes disabled class name", () => {
+      render(<Button isDisabled />);
+      expect(screen.getByRole("button")).toHaveClass("--is-disabled");
+    });
+
+    it("includes custom class name", () => {
+      render(<Button className="my-class" />);
+      expect(screen.getByRole("button")).toHaveClass(CLASS_NAME);
+      expect(screen.getByRole("button")).toHaveClass("my-class");
+    });
+
+    it("includes the focus-visible class name", async () => {
+      render(<Button />);
+      await userEvent.tab();
+      expect(screen.getByRole("button")).toHaveClass("--is-focus-visible");
+    });
+
+    describe("given icon is provided", () => {
+      it("includes icon class name", () => {
+        render(<Button icon="chevronDown" />);
+        expect(screen.getByRole("button")).toHaveClass("--has-icon");
+      });
+    });
+  });
+});

package/src/components/Button/Button.tsx

@@ -0,0 +1,133 @@
+import { Ref, forwardRef, RefAttributes, useRef, ReactNode } from "react";
+import { useButton } from "@react-aria/button";
+import { useHover } from "@react-aria/interactions";
+import type { AriaButtonProps } from "@react-types/button";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { useFocusRing } from "@react-aria/focus";
+import type { IconName } from "@simplybusiness/icons";
+import { ForwardedRefComponent } from "../../types/components";
+import { Loading } from "./Loading";
+import { Icon } from "../Icon";
+
+export type ButtonElementType = HTMLButtonElement;
+
+export type Variant =
+  | "primary"
+  | "secondary"
+  | "ghost"
+  | "inverse"
+  | "inverse-ghost"
+  | "basic";
+
+export type Size = "small" | "medium" | "large";
+
+export interface ButtonProps
+  extends Omit<
+      AriaButtonProps<"button" | "a" | "span">,
+      "aria-haspopup" | "aria-expanded"
+    >,
+    DOMProps,
+    RefAttributes<ButtonElementType> {
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  /** Shortlist of styles */
+  variant?: Variant;
+  size?: Size;
+  /** Display loading spinner */
+  isLoading?: boolean;
+  /** Display success style */
+  isSuccess?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  icon?: IconName;
+  iconPosition?: "left" | "right";
+  children?: ReactNode;
+}
+
+export type ButtonRef = Ref<ButtonElementType>;
+
+const Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =
+  forwardRef((props: ButtonProps, ref: ButtonRef) => {
+    const {
+      children,
+      elementType: Component = "button",
+      isDisabled,
+      isLoading,
+      isSuccess,
+      variant = "primary",
+      size = "medium",
+      icon,
+      iconPosition = "left",
+      onPress,
+      onPressChange,
+      onPressEnd,
+      onPressStart,
+      onPressUp,
+      onClick,
+      ...otherProps
+    } = props;
+    const refObj = useRef(null);
+    const { hoverProps, isHovered } = useHover({
+      ...props,
+      isDisabled,
+    });
+    const { buttonProps } = useButton(
+      {
+        onPress,
+        onPressChange,
+        onPressEnd,
+        onPressStart,
+        onPressUp,
+        isDisabled,
+      },
+      refObj,
+    );
+    const mergedButtonProps = {
+      ...buttonProps,
+      onClick: (event: React.MouseEvent<HTMLButtonElement>) =>
+        onClick?.(event) || buttonProps.onClick?.(event),
+    };
+
+    const { focusProps, isFocusVisible } = useFocusRing(props);
+
+    // Reshape class name and apply to outer element
+    const classes = clsx(
+      "mobius",
+      "mobius/Button",
+      `--variant-${variant}`,
+      `--size-${size}`,
+      {
+        "--is-disabled": isDisabled,
+        "--is-hovered": isHovered,
+        "--is-loading": isLoading,
+        "--is-success": isSuccess && !isLoading,
+        "--is-focus-visible": isFocusVisible,
+        "--has-icon": icon,
+      },
+      otherProps.className,
+    );
+    otherProps.className = classes;
+
+    const spanClasses = clsx({
+      "hide-children": isLoading || isSuccess,
+    });
+    const hasIcon = icon && !isLoading && !isSuccess;
+
+    return (
+      <Component
+        ref={ref}
+        {...mergedButtonProps}
+        {...hoverProps}
+        {...focusProps}
+        {...otherProps}
+      >
+        {isLoading && <Loading />}
+        {hasIcon && iconPosition === "left" && <Icon name={icon} />}
+        {children && <span className={spanClasses}>{children}</span>}
+        {hasIcon && iconPosition === "right" && <Icon name={icon} />}
+      </Component>
+    );
+  });
+
+Button.displayName = "Button";
+export { Button };

package/src/components/Button/Loading.tsx

@@ -0,0 +1,10 @@
+import { loading } from "@simplybusiness/icons";
+import { Icon } from "../Icon";
+
+const Loading = () => (
+  <div className="mobius/ButtonIconWrapper">
+    <Icon icon={loading} spin />
+  </div>
+);
+
+export { Loading };

package/src/components/Button/index.tsx

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