@nypl/design-system-react-components 0.23.4 → 0.25.1

package/src/components/Button/Button.stories.mdx

@@ -3,18 +3,22 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
 
-import Button from "./Button";
+import Button, { ButtonGroup } from "./Button";
 import { ButtonTypes } from "./ButtonTypes";
 import Icon from "../Icons/Icon";
-import { IconNames, IconRotationTypes } from "../Icons/IconTypes";
-import { action } from "@storybook/addon-actions";
+import {
+  IconNames,
+  IconRotationTypes,
+  IconAlign,
+  IconSizes,
+} from "../Icons/IconTypes";
 import getCSSVariable from "../../helpers/getCSSVariable";
 import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 
 <Meta
   title={getCategory("Button")}
@@ -32,61 +36,51 @@ import { getCategory } from "../../utils/componentCategories";
 
 # Button
 
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.0.4`    |
+| Latest            | `0.25.0`   |
+
 <Description of={Button} />
 
 Update the `buttonType` in the Controls section to see the types of buttons
 that can be rendered.
 
 - `ButtonTypes.Primary` is used for actions that move the user forward.
-- `ButtonTypes.Secondary` is used for actions taht move the user back, such as cancellations
-- `ButtonTypes.Pill` is used for equally weighted actions within cards and always in a set
-- `ButtonTypes.Link` is used for equally weighted actions in a text based list
+- `ButtonTypes.Secondary` is used for actions that move the user back, such as cancellations.
+- `ButtonTypes.Pill` is used for equally weighted actions within cards and always in a set.
+- `ButtonTypes.Link` is used for equally weighted actions in a text based list.
+
+When one and only one `Icon` component is passed inside a `Button` component,
+it will automatically be configured to use the `"icon-only"` type.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story name="Basic">{(args) => <Button {...args}>Button Text</Button>}</Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="Basic" />
 
 ## Button Groups
 
-Primary and secondary buttons can be used in groups like so:
+Primary and secondary buttons should be grouped like in the following example.
+The `ButtonGroup` component, which is directly exported from Chakra UI, should
+be used to wrap the `Button` cmoponent.
 
 <Canvas>
   <Story name="Button Groups">
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "space-between",
-        width: "180px",
-      }}
-    >
+    <ButtonGroup>
       <Button buttonType={ButtonTypes.Secondary}>Button</Button>
       <Button buttonType={ButtonTypes.Primary}>Submit</Button>
-    </div>
-    <br />
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "space-between",
-        width: "280px",
-      }}
-    >
-      <Button buttonType={ButtonTypes.Secondary}>
-        <span style={{ width: "100px" }}>Button</span>
-      </Button>
-      <Button buttonType={ButtonTypes.Primary}>
-        <span style={{ width: "100px" }}>Submit</span>
-      </Button>
-    </div>
+    </ButtonGroup>
   </Story>
 </Canvas>
 
 ## With Icons
 
 The `Icon` component collaborates great with the `Button` component. Check out
-`src/components/Icons/IconTypes` to see the list of icon and logo names that
-can be rendered or check out the Controls section for this story.
+[`src/components/Icons/IconTypes`](https://github.com/NYPL/nypl-design-system/blob/development/src/components/Icons/IconTypes.tsx)
+to see the full list of icon and logo names that can be rendered. Use the
+Controls for this Story section to preview a `Button` with the selected icon.
 
 <Canvas>
   <Story
@@ -94,14 +88,14 @@ can be rendered or check out the Controls section for this story.
     args={{
       displayLeft: true,
       buttonText: "Button Text",
-      iconType: IconNames.search,
+      iconType: IconNames.Search,
     }}
     argTypes={{
       iconType: {
         control: {
           type: "select",
-          options: IconNames,
         },
+        options: Object.values(IconNames).map((value) => value),
       },
     }}
   >
@@ -110,16 +104,16 @@ can be rendered or check out the Controls section for this story.
         {args.displayLeft && (
           <Icon
             name={args.iconType}
-            decorative={true}
-            modifiers={["small", "icon-left"]}
+            align={IconAlign.Left}
+            size={IconSizes.Small}
           />
         )}
         {args.buttonText}
         {!args.displayLeft && (
           <Icon
             name={args.iconType}
-            decorative={true}
-            modifiers={["small", "icon-right"]}
+            align={IconAlign.Right}
+            size={IconSizes.Small}
           />
         )}
       </Button>
@@ -130,32 +124,28 @@ can be rendered or check out the Controls section for this story.
 The icon can be placed to the left or the right of the button text.
 
 <Canvas>
-  <div
-    style={{
-      display: "flex",
-      justifyContent: "space-between",
-      width: "220px",
-    }}
-  >
-    <Button buttonType={ButtonTypes.Secondary}>
-      <Icon
-        name={IconNames.arrow}
-        decorative={true}
-        iconRotation={IconRotationTypes.rotate90}
-        modifiers={["small", "icon-left"]}
-      />
-      Previous
-    </Button>
-    <Button buttonType={ButtonTypes.Secondary}>
-      Next
-      <Icon
-        name={IconNames.arrow}
-        decorative={true}
-        iconRotation={IconRotationTypes.rotate270}
-        modifiers={["small", "icon-right"]}
-      />
-    </Button>
-  </div>
+  <DSProvider>
+    <ButtonGroup>
+      <Button buttonType={ButtonTypes.Secondary}>
+        <Icon
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate90}
+          align={IconAlign.Left}
+          size={IconSizes.Small}
+        />
+        Previous
+      </Button>
+      <Button buttonType={ButtonTypes.Secondary}>
+        Next
+        <Icon
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate270}
+          align={IconAlign.Right}
+          size={IconSizes.Small}
+        />
+      </Button>
+    </ButtonGroup>
+  </DSProvider>
 </Canvas>
 
 Text in a button is optional if an icon is rendered, but make sure that there
@@ -163,94 +153,91 @@ is an `aria-label` passed to the `Button` component through the `attributes` pro
 `attributes={{ "aria-label": "Previous" }}`
 
 <Canvas>
-  <div
-    style={{
-      display: "flex",
-      justifyContent: "space-between",
-      width: "200px",
-    }}
-  >
-    <Button
-      buttonType={ButtonTypes.Secondary}
-      attributes={{
-        "aria-label": "Previous",
-      }}
-    >
-      <Icon
-        name={IconNames.arrow}
-        decorative={true}
-        iconRotation={IconRotationTypes.rotate90}
-        modifiers={["small"]}
-      />
-    </Button>
-    <Button
-      buttonType={ButtonTypes.Secondary}
-      attributes={{
-        "aria-label": "Next",
-      }}
-    >
-      <Icon
-        name={IconNames.arrow}
-        decorative={true}
-        iconRotation={IconRotationTypes.rotate270}
-        modifiers={["small"]}
-      />
-    </Button>
-    <Button
-      buttonType={ButtonTypes.Secondary}
-      attributes={{
-        "aria-label": "Close",
-      }}
-    >
-      <Icon name={IconNames.close} decorative={true} modifiers={["small"]} />
-    </Button>
-  </div>
+  <DSProvider>
+    <ButtonGroup>
+      <Button
+        buttonType={ButtonTypes.Secondary}
+        attributes={{
+          "aria-label": "Previous",
+        }}
+      >
+        <Icon
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate90}
+          size={IconSizes.Small}
+        />
+      </Button>
+      <Button
+        buttonType={ButtonTypes.Secondary}
+        attributes={{
+          "aria-label": "Next",
+        }}
+      >
+        <Icon
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate270}
+          size={IconSizes.Small}
+        />
+      </Button>
+      <Button
+        buttonType={ButtonTypes.Secondary}
+        attributes={{
+          "aria-label": "Close",
+        }}
+      >
+        <Icon name={IconNames.Close} size={IconSizes.Small} />
+      </Button>
+    </ButtonGroup>
+  </DSProvider>
 </Canvas>
 
 ## Patterns
 
-Buttons are blue by default but should be red when it is intended as a call out.
-The "Back to Top" button must be of `ButtonTypes` `Secondary` and must include an up arrow icon.
+Buttons are blue by default but should be red when it is intended to be used as
+a call out. The "Back to Top" button must be of `ButtonTypes` `Secondary` and
+must include an up arrow icon on the right side.
 
 <Canvas>
   <Story name="Patterns">
-    <Button
-      buttonType={ButtonTypes.Primary}
-      attributes={{
-        style: {
-          backgroundColor: getCSSVariable("--section-books-and-more-primary"),
-        },
-      }}
-    >
-      Donate to this library
-    </Button>
-    <br />
-    <Button buttonType={ButtonTypes.Secondary}>
-      Back to Top
-      <Icon
-        name={IconNames.arrow}
-        decorative={true}
-        iconRotation={IconRotationTypes.rotate180}
-        modifiers={["small", "icon-right"]}
-      />
-    </Button>
+    <ButtonGroup>
+      <Button buttonType={ButtonTypes.Callout}>Donate to this library</Button>
+      <Button buttonType={ButtonTypes.Secondary}>
+        Back to Top
+        <Icon
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate180}
+          size={IconSizes.Small}
+          className="right"
+          align={IconAlign.Right}
+        />
+      </Button>
+    </ButtonGroup>
   </Story>
 </Canvas>
 
 ## Other Examples
 
-Modifying the `buttonType` prop:
+The different `ButtonTypes` modified by the `buttonType` prop:
 
 <Canvas>
-  <Button buttonType={ButtonTypes.Primary}>Primary</Button>
-  <Button buttonType={ButtonTypes.Secondary}>Secondary</Button>
-  <Button buttonType={ButtonTypes.Pill}>Pill</Button>
-  <Button buttonType={ButtonTypes.Link}>Link</Button>
+  <DSProvider>
+    <ButtonGroup>
+      <Button buttonType={ButtonTypes.Primary}>Primary</Button>
+      <Button buttonType={ButtonTypes.Secondary}>Secondary</Button>
+      <Button buttonType={ButtonTypes.Callout}>Callout</Button>
+      <Button buttonType={ButtonTypes.Pill}>Pill</Button>
+      <Button buttonType={ButtonTypes.Link}>Link</Button>
+    </ButtonGroup>
+  </DSProvider>
 </Canvas>
 
 Modifying the `disabled` prop:
 
 <Canvas>
-  <Button disabled={false}>Enabled</Button>
-  <Button disabled={true}>Disabled</Button>
+  <DSProvider>
+    <ButtonGroup>
+      <Button disabled={false}>Enabled</Button>
+      <Button disabled={true}>Disabled</Button>
+    </ButtonGroup>
+  </DSProvider>
 </Canvas>

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

@@ -6,7 +6,8 @@ import renderer from "react-test-renderer";
 
 import Button from "./Button";
 import Icon from "../Icons/Icon";
-import { IconNames } from "../Icons/IconTypes";
+import { IconAlign, IconNames, IconSizes } from "../Icons/IconTypes";
+import { ButtonTypes } from "./ButtonTypes";
 
 describe("Button Accessibility", () => {
   it("passes axe accessibility test", async () => {
@@ -79,39 +80,92 @@ describe("rendering content from its children prop", () => {
   it("should render element children", () => {
     const { container } = render(
       <Button id="button3" onClick={onClick}>
-        <em>I'm a em element</em>
+        <em>I'm an em element</em>
       </Button>
     );
-    expect(screen.getByText(/a em element/i)).toBeInTheDocument();
+    expect(screen.getByText(/an em element/i)).toBeInTheDocument();
     expect(container.querySelector("em")).toBeInTheDocument();
   });
 });
 
 describe("padding for icon only button", () => {
-  it("button has proper padding for icon only button", () => {
+  it("button has proper child svg for the icon only button", () => {
     const onClick = jest.fn();
     const { container } = render(
       <Button id="button" onClick={onClick} type="button">
         <Icon
-          name={IconNames.check}
-          decorative={true}
-          modifiers={["small", "icon-left"]}
+          align={IconAlign.Left}
+          name={IconNames.Check}
+          size={IconSizes.Small}
         />
       </Button>
     );
-    expect(container.querySelector(".button--icon-only")).toBeInTheDocument();
+    expect(container.querySelector(".button svg")).toBeInTheDocument();
   });
 });
 
 describe("Button Snapshot", () => {
   it("Renders the UI snapshot correctly", () => {
-    const tree = renderer
+    const primary = renderer
       .create(
         <Button id="button" onClick={jest.fn()}>
-          Submit
+          Primary
         </Button>
       )
       .toJSON();
-    expect(tree).toMatchSnapshot();
+    const secondary = renderer
+      .create(
+        <Button
+          id="button"
+          onClick={jest.fn()}
+          buttonType={ButtonTypes.Secondary}
+        >
+          Seconday
+        </Button>
+      )
+      .toJSON();
+    const callout = renderer
+      .create(
+        <Button
+          id="button"
+          onClick={jest.fn()}
+          buttonType={ButtonTypes.Callout}
+        >
+          Callout
+        </Button>
+      )
+      .toJSON();
+    const pill = renderer
+      .create(
+        <Button id="button" onClick={jest.fn()} buttonType={ButtonTypes.Pill}>
+          Pill
+        </Button>
+      )
+      .toJSON();
+    const link = renderer
+      .create(
+        <Button id="button" onClick={jest.fn()} buttonType={ButtonTypes.Link}>
+          Link
+        </Button>
+      )
+      .toJSON();
+    const searchBar = renderer
+      .create(
+        <Button
+          id="button"
+          onClick={jest.fn()}
+          buttonType={ButtonTypes.SearchBar}
+        >
+          SearchBar
+        </Button>
+      )
+      .toJSON();
+
+    expect(primary).toMatchSnapshot();
+    expect(secondary).toMatchSnapshot();
+    expect(callout).toMatchSnapshot();
+    expect(pill).toMatchSnapshot();
+    expect(link).toMatchSnapshot();
+    expect(searchBar).toMatchSnapshot();
   });
 });

package/src/components/Button/Button.tsx

@@ -1,13 +1,19 @@
 import * as React from "react";
+import {
+  Button as ChakraButton,
+  ButtonGroup,
+  useStyleConfig,
+} from "@chakra-ui/react";
+
 import bem from "../../utils/bem";
 import { ButtonTypes } from "./ButtonTypes";
 import Icon from "../Icons/Icon";
 
+type ButtonElementType = "submit" | "button" | "reset";
+
 interface ButtonProps {
   /** Additional attributes passed to the button */
   attributes?: { [key: string]: any };
-  /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
   /** The kind of button assigned through the `ButtonTypes` enum  */
   buttonType?: ButtonTypes;
   /** Additional className for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
@@ -16,84 +22,82 @@ interface ButtonProps {
   disabled?: boolean;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
   /** Trigger the Button's action through the `mouseDown` event handler instead of `onClick`. `false` by default. */
   mouseDown?: boolean;
   /** The action to perform on the `<button>`'s onClick function */
   onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
   /** The html button attribute */
-  type?: "submit" | "button" | "reset";
+  type?: ButtonElementType;
 }
 
-/** Renders a simple `button` element with custom classes and modifiers. */
-export default class Button extends React.Component<ButtonProps, any> {
-  static defaultProps = {
-    mouseDown: false,
-  };
-
-  constructor(props: ButtonProps) {
-    super(props);
-  }
-
-  render(): JSX.Element {
-    const {
-      attributes,
-      blockName,
-      buttonType,
-      children,
-      className,
-      disabled,
-      id,
-      modifiers = [],
-      mouseDown,
-      onClick,
-      type = "submit",
-    } = this.props;
-
-    const buttonModifiers = modifiers ? modifiers : [];
-    if (!buttonModifiers.find((modifier) => modifier === buttonType)) {
-      buttonModifiers.push(buttonType);
-    }
-
-    const baseClass = "button";
+// Used to map between ButtonTypes enum values and Chakra variant options.
+const variantMap = {};
+for (const type in ButtonTypes) {
+  variantMap[ButtonTypes[type]] = ButtonTypes[type];
+}
 
-    const btnCallback = mouseDown
-      ? { onMouseDown: onClick }
-      : { onClick: onClick };
+/**
+ * Map the ButtonType to the Button Chakra theme variant object. If a wrong
+ * value is passed (typically in non-Typescript scenarios), then the default
+ * is the "primary" variant.
+ */
+const getVariant = (buttonType) =>
+  variantMap[buttonType] || ButtonTypes.Primary;
 
-    let childCount = 0;
-    let hasIcon = false;
+/** Renders a simple `button` element with custom classes and modifiers. */
+function Button(props: React.PropsWithChildren<ButtonProps>) {
+  const {
+    attributes,
+    buttonType,
+    children,
+    className = "",
+    disabled,
+    id,
+    mouseDown = false,
+    onClick,
+    type = "button",
+  } = props;
+  const baseClass = "button";
+  const btnCallback = mouseDown ? { onMouseDown: onClick } : { onClick };
+  let childCount = 0;
+  let hasIcon = false;
+  let variant;
+  let styles;
 
-    React.Children.map(children, (child: React.ReactElement) => {
-      childCount++;
-      if (child !== undefined && child !== null) {
-        if (
-          child.type === Icon ||
-          (child.props && child.props.mdxType === "Icon")
-        ) {
-          hasIcon = true;
-        }
+  React.Children.map(children, (child: React.ReactElement) => {
+    childCount++;
+    if (child !== undefined && child !== null) {
+      if (
+        child.type === Icon ||
+        (child.props && child.props.mdxType === "Icon")
+      ) {
+        hasIcon = true;
       }
-    });
-
-    if (childCount === 1 && hasIcon) {
-      buttonModifiers.push("icon-only");
     }
+  });
 
-    return (
-      <button
-        id={id}
-        className={`${baseClass} ${bem(baseClass, buttonModifiers, blockName, [
-          className,
-        ])}`}
-        type={type}
-        disabled={disabled}
-        {...attributes}
-        {...btnCallback}
-      >
-        {children}
-      </button>
-    );
+  if (childCount === 1 && hasIcon) {
+    variant = "icon-only";
+  } else {
+    variant = getVariant(buttonType);
   }
+
+  styles = useStyleConfig("Button", { variant });
+
+  return (
+    <ChakraButton
+      id={id}
+      className={bem(baseClass, [], "", [className])}
+      type={type}
+      disabled={disabled}
+      __css={styles}
+      {...attributes}
+      {...btnCallback}
+    >
+      {children}
+    </ChakraButton>
+  );
 }
+
+export { ButtonGroup };
+export default Button;

package/src/components/Button/ButtonTypes.tsx

@@ -1,6 +1,8 @@
 export enum ButtonTypes {
-  Primary = "filled",
-  Secondary = "outline",
+  Primary = "primary",
+  Secondary = "secondary",
+  Callout = "callout",
   Pill = "pill",
   Link = "link",
+  SearchBar = "searchBar",
 }