@simplybusiness/mobius 3.0.0

package/src/components/Link/Link.tsx

@@ -0,0 +1,87 @@
+import React, {
+  forwardRef,
+  Ref,
+  RefAttributes,
+  useRef,
+  HTMLAttributeAnchorTarget,
+} from "react";
+import { DOMProps } from "@react-types/shared";
+import { useLink } from "@react-aria/link";
+import { AriaLinkProps } from "@react-types/link";
+import clsx from "clsx";
+import { useFocusRing } from "@react-aria/focus";
+import type { Link as RouterLink } from "react-router-dom";
+import { ForwardedRefComponent } from "../../types/components";
+
+export type LinkElementType = HTMLAnchorElement;
+
+export interface LinkProps
+  extends DOMProps,
+    AriaLinkProps,
+    RefAttributes<LinkElementType> {
+  children?: React.ReactNode;
+  /** Path to link resource or page */
+  href?: string;
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  title?: string;
+  style?: React.CSSProperties;
+  referrerPolicy?: ReferrerPolicy;
+  download?: boolean | string;
+  rel?: string;
+  target?: HTMLAttributeAnchorTarget;
+  isDisabled?: boolean;
+  onClick?: () => void;
+  to?: React.ComponentProps<typeof RouterLink>["to"];
+  elementType?: React.ElementType;
+}
+
+export type LinkRef = Ref<LinkElementType>;
+
+const Link: ForwardedRefComponent<LinkProps, LinkElementType> = forwardRef(
+  (props: LinkProps, ref: LinkRef) => {
+    const refObj = useRef(null);
+
+    const {
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      onPress,
+      onPressStart,
+      onPressEnd,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      elementType: Component = "a",
+      ...otherProps
+    } = props;
+
+    // Do not pass 'disabled' as attribute as it's not valid
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { isDisabled, ...restProps } = otherProps;
+
+    const { linkProps } = useLink(
+      // @ts-expect-error useLink only allows elementType of string, not React component
+      props,
+      refObj,
+    );
+
+    const { focusProps, isFocusVisible } = useFocusRing(props);
+
+    const classes = clsx("mobius", "mobius/Link", props.className, {
+      "--is-disabled": isDisabled,
+      "--is-focus-visible": isFocusVisible,
+    });
+
+    return (
+      <Component
+        ref={ref}
+        {...linkProps}
+        {...focusProps}
+        {...restProps}
+        className={classes}
+      >
+        {props.children}
+      </Component>
+    );
+  },
+);
+
+Link.displayName = "Link";
+export { Link };

package/src/components/Link/index.tsx

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

package/src/components/LinkButton/LinkButton.story.mdx

@@ -0,0 +1,96 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { LinkButton } from "./LinkButton";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Components/LinkButton"
+  component={LinkButton}
+  argTypes={{
+    target: {
+      options: ["_self", "_blank", "_parent", "_top"],
+      control: "select",
+    },
+    to: {
+      control: "text",
+    },
+    title: {
+      control: "text",
+    },
+    download: {
+      control: "boolean",
+    },
+    rel: {
+      options: ["noopener noreferrer", "canonical", "nofollow"],
+      control: "select",
+    },
+    icon: {
+      options: ["menu", "rightArrow", "leftArrow", "dropdown", "home"],
+      control: "radio",
+    },
+    iconPosition: {
+      if: {
+        arg: "icon",
+      },
+    },
+    ...excludeControls(
+      "children",
+      "className",
+      "elementType",
+      "style",
+      "onClick",
+    ),
+  }}
+/>
+
+# LinkButton
+
+LinkButton component is a link element styled like a button. It takes all The
+props that `Button` takes.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { LinkButton } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+<Canvas>
+  <Story
+    name="Normal"
+    args={{
+      href: "https://www.google.com",
+      to: "",
+      title: "",
+      size: "medium",
+      download: false,
+      isDisabled: false,
+      isSuccess: false,
+      isLoading: false,
+    }}
+  >
+    {args => <LinkButton {...args}>LinkButton text</LinkButton>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={LinkButton} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a LinkButton:
+
+```html
+<a class="mobius/LinkButton mobius/Button" href="path/to/page">{link text}</a>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/LinkButton) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/LinkButton/LinkButton.test.tsx

@@ -0,0 +1,102 @@
+import { Component } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { LinkButton } from ".";
+
+interface ErrorBoundaryProps {
+  children?: React.ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+
+    this.state = {
+      hasError: false,
+      error: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  render() {
+    const { hasError, error } = this.state;
+    const { children } = this.props;
+
+    if (hasError && error) {
+      // You can render any custom fallback UI
+      return <div data-testid="error">{error.message}</div>;
+    }
+
+    return children;
+  }
+}
+
+describe("Test for LinkButton", () => {
+  it("renders without error", () => {
+    const component = render(
+      <LinkButton href="http://www.example.com/">Link</LinkButton>,
+    );
+    expect(component).toBeTruthy();
+  });
+
+  it("should call the onClick", async () => {
+    const onClick = jest.fn();
+    const { getByText } = render(
+      <LinkButton href="#" onClick={onClick}>
+        Link
+      </LinkButton>,
+    );
+    await userEvent.click(getByText("Link"));
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it("throws when href is missing", () => {
+    const spy = jest.spyOn(console, "error");
+    spy.mockImplementation(() => {});
+
+    render(
+      <ErrorBoundary>
+        {/* @ts-expect-error */}
+        <LinkButton>Link</LinkButton>
+      </ErrorBoundary>,
+    );
+    expect(screen.getByTestId("error")).toHaveTextContent(
+      "LinkButton requires a href prop",
+    );
+
+    spy.mockRestore();
+  });
+
+  it("uses the elementType prop", () => {
+    function CustomComponent(props: any) {
+      // eslint-disable-next-line jsx-a11y/anchor-has-content
+      return <a data-testid="custom-component" {...props} />;
+    }
+    render(
+      // eslint-disable-next-line react/jsx-no-bind
+      <LinkButton href="#test" elementType={CustomComponent}>
+        Test
+      </LinkButton>,
+    );
+    expect(screen.getByTestId("custom-component")).toBeInTheDocument();
+  });
+
+  describe("given elementType", () => {
+    it("is not applied as element attribute", () => {
+      const { container } = render(
+        <LinkButton href="#test" elementType="ul">
+          Test
+        </LinkButton>,
+      );
+      expect(container.firstChild).not.toHaveAttribute("elementtype", "ul");
+    });
+  });
+});

package/src/components/LinkButton/LinkButton.tsx

@@ -0,0 +1,38 @@
+import { HTMLAttributeAnchorTarget } from "react";
+import clsx from "clsx";
+import type { Link } from "react-router-dom";
+import { Button, ButtonProps } from "../Button";
+
+export interface LinkButtonProps extends Omit<ButtonProps, "elementType"> {
+  href: string;
+  title?: string;
+  style?: React.CSSProperties;
+  referrerPolicy?: ReferrerPolicy;
+  download?: boolean | string;
+  rel?: string;
+  target?: HTMLAttributeAnchorTarget;
+  onClick?: () => void;
+  to?: React.ComponentProps<typeof Link>["to"];
+  elementType?: React.ElementType;
+}
+
+export function LinkButton({
+  href,
+  children,
+  className,
+  elementType = "a",
+  ...rest
+}: LinkButtonProps) {
+  if (!href) {
+    throw new Error("LinkButton requires a href prop");
+  }
+
+  const classes = clsx("mobius", "mobius/LinkButton", className);
+
+  return (
+    // @ts-expect-error Button only allows elementType of string, not React component
+    <Button elementType={elementType} href={href} className={classes} {...rest}>
+      {children}
+    </Button>
+  );
+}

package/src/components/LinkButton/index.tsx

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

package/src/components/List/List.story.mdx

@@ -0,0 +1,245 @@
+import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
+import { Icon, Text } from "../index";
+import { List, ListItem } from ".";
+import { excludeControls } from "../../utils/excludeControls";
+
+<Meta
+  title="Components/List"
+  component={List}
+  argTypes={{
+    liststyletype: {
+      control: "radio",
+      if: {
+        arg: "isOrdered",
+        truthy: false,
+      },
+    },
+    isReversed: {
+      if: {
+        arg: "isOrdered",
+      },
+    },
+    start: {
+      if: {
+        arg: "isOrdered",
+      },
+    },
+    ...excludeControls("className", "icon"),
+  }}
+/>
+
+# List
+
+List is a a general purpose list that can receive any styling props.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { List, ListItem } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+### Unordered
+
+<Story
+  name="Unordered"
+  args={{ isOrdered: false, isReversed: false, liststyletype: "disc" }}
+>
+  {args => (
+    <List {...args}>
+      <ListItem>Foo</ListItem>
+      <ListItem>Bar</ListItem>
+      <ListItem>Baz</ListItem>
+    </List>
+  )}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { List, ListItem } from "@simplybusiness/mobius";
+
+<List>
+  <ListItem>Foo</ListItem>
+  <ListItem>Bar</ListItem>
+  <ListItem>Baz</ListItem>
+</List>
+```
+
+### Ordered
+
+<Story name="Ordered" args={{ isOrdered: true, isReversed: false, start: 1 }}>
+  {args => (
+    <List {...args}>
+      <ListItem>Foo</ListItem>
+      <ListItem>Bar</ListItem>
+      <ListItem>Baz</ListItem>
+    </List>
+  )}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { List, ListItem } from "@simplybusiness/mobius";
+
+<List isOrdered={true}>
+  <ListItem>Foo</ListItem>
+  <ListItem>Bar</ListItem>
+  <ListItem>Baz</ListItem>
+</List>
+```
+
+#### Starting from a specific number
+
+<Story
+  name="Starting from a specific number"
+  args={{ isOrdered: true, start: 12, isReversed: false }}
+  parameters={{ controls: { exclude: ["liststyletype"] } }}
+>
+  {args => (
+    <List {...args}>
+      <ListItem>Foo</ListItem>
+      <ListItem>Bar</ListItem>
+      <ListItem>Baz</ListItem>
+    </List>
+  )}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { List, ListItem } from "@simplybusiness/mobius";
+
+<List isOrdered={true} start={12}>
+  <ListItem>Foo</ListItem>
+  <ListItem>Bar</ListItem>
+  <ListItem>Baz</ListItem>
+</List>
+```
+
+#### Reverse order
+
+<Story
+  name="Reversed"
+  args={{ isOrdered: true, isReversed: true, start: 3 }}
+  parameters={{ controls: { exclude: ["liststyletype"] } }}
+>
+  {args => (
+    <List {...args}>
+      <ListItem>Foo</ListItem>
+      <ListItem>Bar</ListItem>
+      <ListItem>Baz</ListItem>
+    </List>
+  )}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { List, ListItem } from "@simplybusiness/mobius";
+
+<List isOrdered={true} isReversed={true}>
+  <ListItem>Foo</ListItem>
+  <ListItem>Bar</ListItem>
+  <ListItem>Baz</ListItem>
+</List>
+```
+
+### With Custom Icons
+
+<Story
+  name="With Custom Icons"
+  args={{ icon: <Icon name="tick" color="green" /> }}
+  parameters={{ controls: { exclude: ["isOrdered", "liststyletype"] } }}
+>
+  {args => (
+    <List {...args}>
+      <ListItem>
+        <Text variant="body" spacing="tight">
+          Morbi eget sapien nulla. Mauris sodales est vel ullamcorper efficitur.
+          Nam lobortis metus et ultricies imperdiet. Phasellus at sapien
+          pharetra, commodo lorem eu, malesuada dui. Curabitur vulputate massa
+          nec massa blandit, auctor elementum dolor ultricies.
+        </Text>
+      </ListItem>
+      <ListItem icon={<Icon name="cross" color="red" />}>
+        Etiam feugiat neque vel nulla semper ultrices. Phasellus lobortis nisl
+        id mollis malesuada. Suspendisse ut porttitor purus. Praesent ornare
+        felis a mattis pharetra. Pellentesque habitant morbi tristique senectus
+        et netus et malesuada fames ac turpis egestas. Donec venenatis tristique
+        condimentum.
+      </ListItem>
+      <ListItem>
+        Nunc at turpis iaculis, finibus tellus eget, tempus mi. Vestibulum eget
+        egestas mauris, non porttitor nisl. Nam a facilisis sem. Interdum et
+        malesuada fames ac ante ipsum primis in faucibus. Suspendisse sit amet
+        neque tempor, vestibulum eros ut, vulputate quam.
+      </ListItem>
+    </List>
+  )}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { List, ListItem, Text, Icon } from "@simplybusiness/mobius";
+
+<List icon={<Icon name="tick" color="green" />}>
+  <ListItem>
+    <Text variant="body" spacing="tight">
+      Morbi eget sapien nulla. Mauris sodales est vel ullamcorper
+      efficitur. Nam lobortis metus et ultricies imperdiet. Phasellus at
+      sapien pharetra, commodo lorem eu, malesuada dui. Curabitur
+      vulputate massa nec massa blandit, auctor elementum dolor ultricies.
+    </Text>
+  </ListItem>
+  <ListItem icon={<Icon name="cross" color="red" />}>
+    Etiam feugiat neque vel nulla semper ultrices. Phasellus lobortis nisl
+    id mollis malesuada. Suspendisse ut porttitor purus. Praesent ornare
+    felis a mattis pharetra. Pellentesque habitant morbi tristique
+    senectus et netus et malesuada fames ac turpis egestas. Donec
+    venenatis tristique condimentum.
+  </ListItem>
+  <ListItem>
+    Nunc at turpis iaculis, finibus tellus eget, tempus mi. Vestibulum
+    eget egestas mauris, non porttitor nisl. Nam a facilisis sem. Interdum
+    et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sit
+    amet neque tempor, vestibulum eros ut, vulputate quam.
+  </ListItem>
+</List>
+```
+
+## Props
+
+### List
+
+<ArgsTable components={{ List: List, ListItem: ListItem }} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for an unordered List:
+
+```html
+<ul class="mobius/List">
+  <li class="mobius/ListItem">...</li>
+
+  (more ListItems...)
+</ul>
+```
+
+And an ordered List:
+
+```html
+<ol class="mobius/List">
+  <li class="mobius/ListItem">...</li>
+
+  (more ListItems...)
+</ol>
+```
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/List) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)