@nypl/design-system-react-components 0.25.0 → 0.25.4

package/src/components/Button/Button.tsx

@@ -1,68 +1,56 @@
 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";
 
 interface ButtonProps {
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
   /** Additional attributes passed to the button */
   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 = {},
     attributes,
     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++;
@@ -77,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 });
@@ -87,10 +75,11 @@ function Button(props: React.PropsWithChildren<ButtonProps>) {
   return (
     <ChakraButton
       id={id}
-      className={bem(baseClass, [], "", [className])}
+      data-testid="button"
+      className={className}
       type={type}
-      disabled={disabled}
-      __css={styles}
+      isDisabled={isDisabled}
+      __css={{ ...styles, ...additionalStyles }}
       {...attributes}
       {...btnCallback}
     >
@@ -99,5 +88,4 @@ function Button(props: React.PropsWithChildren<ButtonProps>) {
   );
 }
 
-export { ButtonGroup };
 export default Button;

package/src/components/Button/ButtonTypes.tsx

@@ -4,4 +4,6 @@ export enum ButtonTypes {
   Callout = "callout",
   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,40 +14,57 @@ 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"
+>
+  Pill
+</button>
+`;
+
+exports[`Button Snapshot Renders the UI snapshot correctly 6`] = `
+<button
+  className="chakra-button css-0"
+  data-testid="button"
   id="button"
   onClick={[MockFunction]}
   type="button"
@@ -54,3 +72,27 @@ exports[`Button Snapshot Renders the UI snapshot correctly 5`] = `
   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"
+>
+  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>
+`;