@nypl/design-system-react-components 0.25.2 → 0.25.6

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

@@ -6,14 +6,15 @@ import {
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
+import { ButtonGroup } from "@chakra-ui/react";
 
-import Button, { ButtonGroup } from "./Button";
+import Button from "./Button";
 import { ButtonTypes } from "./ButtonTypes";
 import Icon from "../Icons/Icon";
 import {
+  IconAlign,
   IconNames,
   IconRotationTypes,
-  IconAlign,
   IconSizes,
 } from "../Icons/IconTypes";
 import getCSSVariable from "../../helpers/getCSSVariable";
@@ -27,8 +28,7 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11477%3A2298",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11477%3A2298",
     },
     jest: ["Button.test.tsx"],
   }}
@@ -39,7 +39,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.0`   |
+| Latest            | `0.25.4`   |
 
 <Description of={Button} />
 
@@ -48,11 +48,15 @@ that can be rendered.
 
 - `ButtonTypes.Primary` is used for actions that move the user forward.
 - `ButtonTypes.Secondary` is used for actions that move the user back, such as cancellations.
+- `ButtonTypes.Callout` is used for call to action text such as "Donate".
 - `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.SearchBar` is a variant only used in the `SearchBar` component.
+- `ButtonTypes.NoBrand` is a variant used when there is no brand and will display
+  the background color as black.
 
-When one and only one `Icon` component is passed inside a `Button` component,
-it will automatically be configured to use the `"icon-only"` type.
+When one and only one `Icon` component is passed inside a `Button` component with
+no text, it will automatically be configured to use the `"iconOnly"` type.
 
 <Canvas withToolbar>
   <Story name="Basic">{(args) => <Button {...args}>Button Text</Button>}</Story>
@@ -227,17 +231,18 @@ The different `ButtonTypes` modified by the `buttonType` prop:
       <Button buttonType={ButtonTypes.Callout}>Callout</Button>
       <Button buttonType={ButtonTypes.Pill}>Pill</Button>
       <Button buttonType={ButtonTypes.Link}>Link</Button>
+      <Button buttonType={ButtonTypes.NoBrand}>NoBrand</Button>
     </ButtonGroup>
   </DSProvider>
 </Canvas>
 
-Modifying the `disabled` prop:
+Modifying the `isDisabled` prop:
 
 <Canvas>
   <DSProvider>
     <ButtonGroup>
-      <Button disabled={false}>Enabled</Button>
-      <Button disabled={true}>Disabled</Button>
+      <Button isDisabled={false}>Enabled</Button>
+      <Button isDisabled>isDisabled</Button>
     </ButtonGroup>
   </DSProvider>
 </Canvas>

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

@@ -23,7 +23,6 @@ describe("Button Accessibility", () => {
 
 describe("Button", () => {
   let onClick;
-  let container;
   let rerender;
 
   beforeEach(() => {
@@ -33,7 +32,6 @@ describe("Button", () => {
         Submit
       </Button>
     );
-    container = utils.container;
     rerender = utils.rerender;
   });
 
@@ -47,10 +45,6 @@ describe("Button", () => {
     expect(screen.getByText("Submit")).toBeInTheDocument();
   });
 
-  it("has 'button' class", () => {
-    expect(container.querySelector(".button")).toBeInTheDocument();
-  });
-
   it("optionally calls the onClick on mouseDown instead of on click", () => {
     expect(onClick).toHaveBeenCalledTimes(0);
     rerender(
@@ -100,7 +94,7 @@ describe("padding for icon only button", () => {
         />
       </Button>
     );
-    expect(container.querySelector(".button svg")).toBeInTheDocument();
+    expect(container.querySelector("button svg")).toBeInTheDocument();
   });
 });
 
@@ -113,6 +107,13 @@ describe("Button Snapshot", () => {
         </Button>
       )
       .toJSON();
+    const disabled = renderer
+      .create(
+        <Button id="button" onClick={jest.fn()} isDisabled>
+          Disabled
+        </Button>
+      )
+      .toJSON();
     const secondary = renderer
       .create(
         <Button
@@ -160,12 +161,25 @@ describe("Button Snapshot", () => {
         </Button>
       )
       .toJSON();
+    const noBrand = renderer
+      .create(
+        <Button
+          id="button"
+          onClick={jest.fn()}
+          buttonType={ButtonTypes.NoBrand}
+        >
+          NoBrand
+        </Button>
+      )
+      .toJSON();
 
     expect(primary).toMatchSnapshot();
+    expect(disabled).toMatchSnapshot();
     expect(secondary).toMatchSnapshot();
     expect(callout).toMatchSnapshot();
     expect(pill).toMatchSnapshot();
     expect(link).toMatchSnapshot();
     expect(searchBar).toMatchSnapshot();
+    expect(noBrand).toMatchSnapshot();
   });
 });

package/src/components/Button/Button.tsx

@@ -1,13 +1,10 @@
 import * as React from "react";
-import {
-  Button as ChakraButton,
-  ButtonGroup,
-  useStyleConfig,
-} from "@chakra-ui/react";
+import { Button as ChakraButton, useStyleConfig } from "@chakra-ui/react";
 
-import bem from "../../utils/bem";
 import { ButtonTypes } from "./ButtonTypes";
 import Icon from "../Icons/Icon";
+import { getVariant } from "../../utils/utils";
+import generateUUID from "../../helpers/generateUUID";
 
 type ButtonElementType = "submit" | "button" | "reset";
 
@@ -18,35 +15,24 @@ interface ButtonProps {
   attributes?: { [key: string]: any };
   /** 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/ */
+  /** Additional className to use. */
   className?: string;
-  /** Adds 'disabled' property to the button */
-  disabled?: boolean;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** Trigger the Button's action through the `mouseDown` event handler instead of `onClick`. `false` by default. */
+  /** Adds 'disabled' property to the button */
+  isDisabled?: boolean;
+  /** 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 */
+  /** The HTML button type attribute. */
   type?: ButtonElementType;
 }
 
-// Used to map between ButtonTypes enum values and Chakra variant options.
-const variantMap = {};
-for (const type in ButtonTypes) {
-  variantMap[ButtonTypes[type]] = ButtonTypes[type];
-}
-
 /**
- * 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.
+ * Renders a simple `button` element with custom variant styles.
  */
-const getVariant = (buttonType) =>
-  variantMap[buttonType] || ButtonTypes.Primary;
-
-/** Renders a simple `button` element with custom classes and modifiers. */
 function Button(props: React.PropsWithChildren<ButtonProps>) {
   const {
     additionalStyles = {},
@@ -54,18 +40,17 @@ function Button(props: React.PropsWithChildren<ButtonProps>) {
     buttonType,
     children,
     className = "",
-    disabled,
-    id,
+    isDisabled,
+    id = generateUUID(),
     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;
+  let styles = {};
 
   React.Children.map(children, (child: React.ReactElement) => {
     childCount++;
@@ -80,9 +65,9 @@ function Button(props: React.PropsWithChildren<ButtonProps>) {
   });
 
   if (childCount === 1 && hasIcon) {
-    variant = "icon-only";
+    variant = "iconOnly";
   } else {
-    variant = getVariant(buttonType);
+    variant = getVariant(buttonType, ButtonTypes, ButtonTypes.Primary);
   }
 
   styles = useStyleConfig("Button", { variant });
@@ -90,9 +75,10 @@ function Button(props: React.PropsWithChildren<ButtonProps>) {
   return (
     <ChakraButton
       id={id}
-      className={bem(baseClass, [], "", [className])}
+      data-testid="button"
+      className={className}
       type={type}
-      disabled={disabled}
+      isDisabled={isDisabled}
       __css={{ ...styles, ...additionalStyles }}
       {...attributes}
       {...btnCallback}
@@ -102,5 +88,4 @@ function Button(props: React.PropsWithChildren<ButtonProps>) {
   );
 }
 
-export { ButtonGroup };
 export default Button;

package/src/components/Button/ButtonTypes.tsx

@@ -5,4 +5,5 @@ export enum ButtonTypes {
   Pill = "pill",
   Link = "link",
   SearchBar = "searchBar",
+  NoBrand = "noBrand",
 }

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

@@ -2,7 +2,8 @@
 
 exports[`Button Snapshot Renders the UI snapshot correctly 1`] = `
 <button
-  className="chakra-button button  css-0"
+  className="chakra-button css-0"
+  data-testid="button"
   id="button"
   onClick={[MockFunction]}
   type="button"
@@ -13,51 +14,69 @@ exports[`Button Snapshot Renders the UI snapshot correctly 1`] = `
 
 exports[`Button Snapshot Renders the UI snapshot correctly 2`] = `
 <button
-  className="chakra-button button  css-0"
+  className="chakra-button css-0"
+  data-testid="button"
+  disabled={true}
   id="button"
   onClick={[MockFunction]}
   type="button"
 >
-  Seconday
+  Disabled
 </button>
 `;
 
 exports[`Button Snapshot Renders the UI snapshot correctly 3`] = `
 <button
-  className="chakra-button button  css-0"
+  className="chakra-button css-0"
+  data-testid="button"
   id="button"
   onClick={[MockFunction]}
   type="button"
 >
-  Callout
+  Seconday
 </button>
 `;
 
 exports[`Button Snapshot Renders the UI snapshot correctly 4`] = `
 <button
-  className="chakra-button button  css-0"
+  className="chakra-button css-0"
+  data-testid="button"
   id="button"
   onClick={[MockFunction]}
   type="button"
 >
-  Pill
+  Callout
 </button>
 `;
 
 exports[`Button Snapshot Renders the UI snapshot correctly 5`] = `
 <button
-  className="chakra-button button  css-0"
+  className="chakra-button css-0"
+  data-testid="button"
   id="button"
   onClick={[MockFunction]}
   type="button"
 >
-  Link
+  Pill
 </button>
 `;
 
 exports[`Button Snapshot Renders the UI snapshot correctly 6`] = `
 <button
-  className="chakra-button button  css-0"
+  className="chakra-button css-0"
+  data-testid="button"
+  id="button"
+  onClick={[MockFunction]}
+  type="button"
+>
+  Link
+</button>
+`;
+
+exports[`Button Snapshot Renders the UI snapshot correctly 7`] = `
+<button
+  className="chakra-button css-0"
+  data-testid="button"
   id="button"
   onClick={[MockFunction]}
   type="button"
@@ -65,3 +84,15 @@ exports[`Button Snapshot Renders the UI snapshot correctly 6`] = `
   SearchBar
 </button>
 `;
+
+exports[`Button Snapshot Renders the UI snapshot correctly 8`] = `
+<button
+  className="chakra-button css-0"
+  data-testid="button"
+  id="button"
+  onClick={[MockFunction]}
+  type="button"
+>
+  NoBrand
+</button>
+`;