@nypl/design-system-react-components 0.25.11 → 0.26.0

package/src/components/Button/Button.tsx

@@ -1,10 +1,13 @@
+import {
+  Button as ChakraButton,
+  chakra,
+  useStyleConfig,
+} from "@chakra-ui/react";
 import * as React from "react";
-import { Button as ChakraButton, useStyleConfig } from "@chakra-ui/react";
 
 import { ButtonTypes } from "./ButtonTypes";
 import Icon from "../Icons/Icon";
 import { getVariant } from "../../utils/utils";
-import generateUUID from "../../helpers/generateUUID";
 
 export type ButtonElementType = "submit" | "button" | "reset";
 
@@ -18,7 +21,7 @@ interface ButtonProps {
   /** Additional className to use. */
   className?: string;
   /** ID that other components can cross reference for accessibility purposes. */
-  id?: string;
+  id: string;
   /** Adds 'disabled' property to the button. */
   isDisabled?: boolean;
   /** Trigger the Button's action through the `mouseDown` event handler instead
@@ -33,18 +36,19 @@ interface ButtonProps {
 /**
  * Renders a simple `button` element with custom variant styles.
  */
-function Button(props: React.PropsWithChildren<ButtonProps>) {
+export const Button = chakra((props: React.PropsWithChildren<ButtonProps>) => {
   const {
     additionalStyles = {},
     attributes,
     buttonType,
     children,
     className = "",
-    id = generateUUID(),
+    id,
     isDisabled = false,
     mouseDown = false,
     onClick,
     type = "button",
+    ...rest
   } = props;
   const btnCallback = mouseDown ? { onMouseDown: onClick } : { onClick };
   let childCount = 0;
@@ -52,6 +56,12 @@ function Button(props: React.PropsWithChildren<ButtonProps>) {
   let variant;
   let styles = {};
 
+  if (!id) {
+    console.warn(
+      "NYPL Reservoir Button: This component's required `id` prop was not passed."
+    );
+  }
+
   React.Children.map(children, (child: React.ReactElement) => {
     childCount++;
     if (child !== undefined && child !== null) {
@@ -78,13 +88,14 @@ function Button(props: React.PropsWithChildren<ButtonProps>) {
       className={className}
       type={type}
       isDisabled={isDisabled}
-      __css={{ ...styles, ...additionalStyles }}
       {...attributes}
       {...btnCallback}
+      __css={{ ...styles, ...additionalStyles }}
+      {...rest}
     >
       {children}
     </ChakraButton>
   );
-}
+});
 
 export default Button;

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

@@ -2,7 +2,7 @@
 
 exports[`Button Snapshot Renders the UI snapshot correctly 1`] = `
 <button
-  className="chakra-button css-0"
+  className="chakra-button css-1xdhyk6"
   data-testid="button"
   id="button"
   onClick={[MockFunction]}
@@ -14,7 +14,7 @@ exports[`Button Snapshot Renders the UI snapshot correctly 1`] = `
 
 exports[`Button Snapshot Renders the UI snapshot correctly 2`] = `
 <button
-  className="chakra-button css-0"
+  className="chakra-button css-1xdhyk6"
   data-testid="button"
   disabled={true}
   id="button"
@@ -27,7 +27,7 @@ exports[`Button Snapshot Renders the UI snapshot correctly 2`] = `
 
 exports[`Button Snapshot Renders the UI snapshot correctly 3`] = `
 <button
-  className="chakra-button css-0"
+  className="chakra-button css-1xdhyk6"
   data-testid="button"
   id="button"
   onClick={[MockFunction]}
@@ -39,7 +39,7 @@ exports[`Button Snapshot Renders the UI snapshot correctly 3`] = `
 
 exports[`Button Snapshot Renders the UI snapshot correctly 4`] = `
 <button
-  className="chakra-button css-0"
+  className="chakra-button css-1xdhyk6"
   data-testid="button"
   id="button"
   onClick={[MockFunction]}
@@ -51,7 +51,7 @@ exports[`Button Snapshot Renders the UI snapshot correctly 4`] = `
 
 exports[`Button Snapshot Renders the UI snapshot correctly 5`] = `
 <button
-  className="chakra-button css-0"
+  className="chakra-button css-1xdhyk6"
   data-testid="button"
   id="button"
   onClick={[MockFunction]}
@@ -63,7 +63,7 @@ exports[`Button Snapshot Renders the UI snapshot correctly 5`] = `
 
 exports[`Button Snapshot Renders the UI snapshot correctly 6`] = `
 <button
-  className="chakra-button css-0"
+  className="chakra-button css-1xdhyk6"
   data-testid="button"
   id="button"
   onClick={[MockFunction]}
@@ -75,7 +75,7 @@ exports[`Button Snapshot Renders the UI snapshot correctly 6`] = `
 
 exports[`Button Snapshot Renders the UI snapshot correctly 7`] = `
 <button
-  className="chakra-button css-0"
+  className="chakra-button css-1xdhyk6"
   data-testid="button"
   id="button"
   onClick={[MockFunction]}
@@ -84,3 +84,23 @@ exports[`Button Snapshot Renders the UI snapshot correctly 7`] = `
   NoBrand
 </button>
 `;
+
+exports[`Button Snapshot Renders the UI snapshot correctly 8`] = `
+<button
+  className="chakra-button css-1t0bvx9"
+  data-testid="button"
+  id="button"
+  onClick={[MockFunction]}
+  type="button"
+/>
+`;
+
+exports[`Button Snapshot Renders the UI snapshot correctly 9`] = `
+<button
+  className="chakra-button css-1xdhyk6"
+  data-testid="testid"
+  id="button"
+  onClick={[MockFunction]}
+  type="button"
+/>
+`;