@nypl/design-system-react-components 0.25.8 → 0.25.9

package/src/components/Accordion/Accordion.stories.mdx

@@ -1,18 +1,18 @@
 import {
-  Meta,
-  Story,
   ArgsTable,
   Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
-import Accordion from "./Accordion";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
+import ReactDOMServer from "react-dom/server";
 import { withDesign } from "storybook-addon-designs";
+
+import Accordion from "./Accordion";
 import Card, { CardHeading, CardContent } from "../Card/Card";
 import { CardLayouts } from "../Card/CardTypes";
-import { ImageRatios } from "../Image/ImageTypes";
 import { HeadingLevels } from "../Heading/HeadingTypes";
-import { Source } from "@storybook/addon-docs/blocks";
-import ReactDOMServer from "react-dom/server";
+import { ImageRatios } from "../Image/ImageTypes";
 import { getCategory } from "../../utils/componentCategories";
 
 <Meta
@@ -27,8 +27,9 @@ import { getCategory } from "../../utils/componentCategories";
     jest: ["Accordion.test.tsx"],
   }}
   argTypes={{
-    contentData: { table: { disable: true } },
-    id: { table: { disable: true } },
+    contentData: { control: false },
+    id: { control: false },
+    isDefaultOpen: { table: { defaultValue: { summary: false } } },
   }}
 />
 
@@ -56,9 +57,8 @@ necessary icon, Chakra components, and styles.
 
 <Canvas withToolbar>
   <Story
-    name="Basic"
+    name="Accordion with Controls"
     args={{
-      isDefaultOpen: false,
       contentData: [
         {
           label: "Tom Nook",
@@ -82,6 +82,8 @@ necessary icon, Chakra components, and styles.
           ),
         },
       ],
+      id: "accordion-id",
+      isDefaultOpen: false,
     }}
   >
     {(args) => <Accordion {...args} />}
@@ -118,7 +120,7 @@ const contentData = [
 <Accordion contentData={contentData} />
 ```
 
-<ArgsTable story="Basic" />
+<ArgsTable story="Accordion with Controls" />
 
 ## FAQ example
 

package/src/components/Autosuggest/Autosuggest.stories.mdx

@@ -1,5 +1,6 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
 import Autosuggest from "react-autosuggest";
+
 import * as stories from "./Autosuggest.stories.tsx";
 import { getCategory } from "../../utils/componentCategories";
 

package/src/components/Autosuggest/Autosuggest.stories.tsx

@@ -3,10 +3,7 @@ import React, { useState } from "react";
 import Autosuggest from "react-autosuggest";
 import Icon from "../Icons/Icon";
 import { IconNames } from "../Icons/IconTypes";
-import Label from "../Label/Label";
-import Input from "../Input/Input";
-import { InputTypes } from "../Input/InputTypes";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
+import TextInput from "../TextInput/TextInput";
 
 /**
  * StoryWrapper
@@ -21,29 +18,16 @@ const libraryRenderInputComponent = (
   inputProps: React.HTMLProps<HTMLInputElement>
 ) => {
   return (
-    <>
-      <Label
-        htmlFor="library-autosuggest"
-        id="library-autosuggest-label"
-        optReqFlag={"Required"}
-      >
-        Home Library
-      </Label>
-      <HelperErrorText id="id-helperText" isInvalid={false}>
-        Select your home library. Start by typing the name of the library. Try{" "}
-        {'"'}ba{'"'}.
-      </HelperErrorText>
-      <Input
-        type={InputTypes.text}
-        id="library-autosuggest"
-        aria-required={true}
-        aria-labelledby="library-autosuggest-label id-helperText"
-        attributes={{
-          name: "homeLibraryName",
-          ...inputProps,
-        }}
-      />
-    </>
+    <TextInput
+      attributes={{
+        ...inputProps,
+      }}
+      id="library-autosuggest"
+      isRequired
+      labelText="Home Library"
+      name="homeLibraryName"
+      helperText="Select your home library. Start by typing the name of the library. Try 'ba'."
+    />
   );
 };
 
@@ -148,20 +132,14 @@ const FishExample = () => {
   ];
   const renderInputComponent = (inputProps) => {
     return (
-      <>
-        <Label htmlFor="input-fish-autosuggest" id="fish-autosuggest-label">
-          Fish in Animal Crossing
-        </Label>
-        <Input
-          type={InputTypes.text}
-          id="input-fish-autosuggest"
-          aria-required={false}
-          attributes={{
-            name: "favoriteFish",
-            ...inputProps,
-          }}
-        />
-      </>
+      <TextInput
+        attributes={{
+          ...inputProps,
+        }}
+        id="library-fish-autosuggest"
+        labelText="Fish in Animal Crossing"
+        name="favoriteFish"
+      />
     );
   };
   const onChange = (_: any, { newValue }) => setValue(newValue);
@@ -218,16 +196,14 @@ const searchBarRenderInputComponent = (
   inputProps: React.HTMLProps<HTMLInputElement>
 ) => {
   return (
-    <Input
-      type={InputTypes.text}
-      id="autosuggest-searchBar"
-      aria-required={true}
-      ariaLabelledBy="autosuggest-button"
+    <TextInput
       attributes={{
-        name: "homeLibraryName",
-        "aria-describedby": "autosuggest-helperText",
         ...inputProps,
       }}
+      id="autosuggest-searchBar"
+      isRequired
+      labelText="home library"
+      name="homeLibraryName"
     />
   );
 };

package/src/components/Autosuggest/_Autosuggest.scss

@@ -5,10 +5,6 @@
   width: 100%;
 }
 
-.react-autosuggest__input {
-  @extend .input;
-}
-
 .react-autosuggest__input--focused {
   outline: none;
 }
@@ -28,9 +24,9 @@
   background-color: var(--nypl-colors-ui-white);
   display: block;
   font-weight: 300;
-  margin-top: -6px; // accounts for the focus ring on the input
+  margin-top: 1px; // accounts for the focus ring on the input
   outline: 1px solid var(--nypl-colors-ui-gray-light-cool);
-  position: absolute;
+  position: relative;
   width: 100%;
   z-index: 2;
 }

package/src/components/Breadcrumbs/Breadcrumbs.stories.mdx

@@ -1,19 +1,25 @@
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
 import Breadcrumbs from "./Breadcrumbs";
 import { ColorVariants } from "./BreadcrumbsTypes";
-import DSProvider from "../../theme/provider";
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import Link from "../Link/Link";
 import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const enumValues = getStorybookEnumValues(
+  ColorVariants,
+  "ColorVariants"
+);
 
 <Meta
   title={getCategory("Breadcrumbs")}
@@ -28,8 +34,13 @@ import { getCategory } from "../../utils/componentCategories";
   }}
   argTypes={{
     additionalStyles: { control: false },
-    className: { table: { disable: true } },
-    id: { table: { disable: true } },
+    breadcrumbsData: { control: false },
+    className: { control: false },
+    colorVariant: {
+      control: { type: "select" },
+      options: enumValues.options,
+    },
+    id: { control: false },
   }}
 />
 
@@ -46,21 +57,29 @@ The `Breadcrumbs` component is a navigation element that provides a breadcrumb p
 
 <Canvas withToolbar>
   <Story
-    name="Breadcrumbs Props"
+    name="Breadcrumbs with Controls"
     args={{
+      additionalStyles: undefined,
       breadcrumbsData: [
         { url: "#", text: "Parent" },
         { url: "#", text: "Child" },
         { url: "#", text: "Grandchild" },
       ],
-      id: "init-breadcrumbs",
+      className: undefined,
+      colorVariant: undefined,
+      id: "breadcrumbs-id",
     }}
   >
-    {(args) => <Breadcrumbs {...args} />}
+    {(args) => (
+      <Breadcrumbs
+        {...args}
+        colorVariant={enumValues.getValue(args.colorVariant)}
+      />
+    )}
   </Story>
 </Canvas>
 
-<ArgsTable story="Breadcrumbs Props" />
+<ArgsTable story="Breadcrumbs with Controls" />
 
 ### Long Titles
 

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

@@ -1,14 +1,14 @@
+import { ButtonGroup, VStack } from "@chakra-ui/react";
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
-import { ButtonGroup } from "@chakra-ui/react";
 
-import Button from "./Button";
+import Button, { ButtonElementType } from "./Button";
 import { ButtonTypes } from "./ButtonTypes";
 import Icon from "../Icons/Icon";
 import {
@@ -17,9 +17,11 @@ import {
   IconRotationTypes,
   IconSizes,
 } from "../Icons/IconTypes";
-import getCSSVariable from "../../helpers/getCSSVariable";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const enumValues = getStorybookEnumValues(ButtonTypes, "ButtonTypes");
 
 <Meta
   title={getCategory("Button")}
@@ -32,6 +34,30 @@ import DSProvider from "../../theme/provider";
     },
     jest: ["Button.test.tsx"],
   }}
+  argTypes={{
+    additionalStyles: { control: false },
+    attributes: { control: false },
+    buttonText: { description: "Only used for Storybook" },
+    buttonType: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "ButtonType.Primary" } },
+      options: enumValues.options,
+    },
+    className: { control: false },
+    displayIcon: { description: "Only used for Storybook." },
+    displayIconLeft: {
+      description: "Move the icon left or right. Only used for Storybook.",
+    },
+    iconType: {
+      control: { type: "select" },
+      options: Object.values(IconNames).map((value) => value),
+      description: "Select the icon. Only used for Storybook.",
+    },
+    id: { control: false },
+    isDisabled: { table: { defaultValue: { summary: false } } },
+    mouseDown: { table: { defaultValue: { summary: false } } },
+    onClick: { control: false },
+  }}
 />
 
 # Button
@@ -39,7 +65,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.4`   |
+| Latest            | `0.25.9`   |
 
 <Description of={Button} />
 
@@ -51,7 +77,6 @@ that can be rendered.
 - `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.
 
@@ -59,16 +84,53 @@ When one and only one `Icon` component is passed inside a `Button` component wit
 no text, it will automatically be configured to use the `"iconOnly"` type.
 
 <Canvas withToolbar>
-  <Story name="Basic">{(args) => <Button {...args}>Button Text</Button>}</Story>
+  <Story
+    name="Button with Controls"
+    args={{
+      additionalStyles: undefined,
+      attributes: undefined,
+      buttonText: "Button Text",
+      buttonType: "ButtonTypes.Primary",
+      className: undefined,
+      displayIcon: false,
+      displayIconLeft: true,
+      iconType: IconNames.Search,
+      id: "button-id",
+      isDisabled: false,
+      mouseDown: undefined,
+      onClick: undefined,
+      type: "button",
+    }}
+  >
+    {(args) => (
+      <Button {...args} buttonType={enumValues.getValue(args.buttonType)}>
+        {args.displayIcon && args.displayIconLeft && (
+          <Icon
+            name={args.iconType}
+            align={IconAlign.Left}
+            size={IconSizes.Small}
+          />
+        )}
+        {args.buttonText}
+        {args.displayIcon && !args.displayIconLeft && (
+          <Icon
+            name={args.iconType}
+            align={IconAlign.Right}
+            size={IconSizes.Small}
+          />
+        )}
+      </Button>
+    )}
+  </Story>
 </Canvas>
 
-<ArgsTable story="Basic" />
+<ArgsTable story="Button with Controls" />
 
 ## Button Groups
 
 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.
+be used to wrap the `Button` component.
 
 <Canvas>
   <Story name="Button Groups">
@@ -83,45 +145,28 @@ be used to wrap the `Button` cmoponent.
 
 The `Icon` component collaborates great with the `Button` component. Check out
 [`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.
+to see the full list of icon and logo names that can be rendered.
 
 <Canvas>
-  <Story
-    name="With Icon"
-    args={{
-      displayLeft: true,
-      buttonText: "Button Text",
-      iconType: IconNames.Search,
-    }}
-    argTypes={{
-      iconType: {
-        control: {
-          type: "select",
-        },
-        options: Object.values(IconNames).map((value) => value),
-      },
-    }}
-  >
-    {(args) => (
-      <Button {...args}>
-        {args.displayLeft && (
-          <Icon
-            name={args.iconType}
-            align={IconAlign.Left}
-            size={IconSizes.Small}
-          />
-        )}
-        {args.buttonText}
-        {!args.displayLeft && (
-          <Icon
-            name={args.iconType}
-            align={IconAlign.Right}
-            size={IconSizes.Small}
-          />
-        )}
+  <Story name="With Icon">
+    <VStack align="left" width="150px">
+      <Button>
+        <Icon
+          name={IconNames.Search}
+          align={IconAlign.Left}
+          size={IconSizes.Small}
+        />
+        Button Text
       </Button>
-    )}
+      <Button>
+        Button Text
+        <Icon
+          name={IconNames.Search}
+          align={IconAlign.Right}
+          size={IconSizes.Small}
+        />
+      </Button>
+    </VStack>
   </Story>
 </Canvas>
 

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

@@ -150,17 +150,6 @@ describe("Button Snapshot", () => {
         </Button>
       )
       .toJSON();
-    const searchBar = renderer
-      .create(
-        <Button
-          id="button"
-          onClick={jest.fn()}
-          buttonType={ButtonTypes.SearchBar}
-        >
-          SearchBar
-        </Button>
-      )
-      .toJSON();
     const noBrand = renderer
       .create(
         <Button
@@ -179,7 +168,6 @@ describe("Button Snapshot", () => {
     expect(callout).toMatchSnapshot();
     expect(pill).toMatchSnapshot();
     expect(link).toMatchSnapshot();
-    expect(searchBar).toMatchSnapshot();
     expect(noBrand).toMatchSnapshot();
   });
 });

package/src/components/Button/Button.tsx

@@ -6,25 +6,25 @@ import Icon from "../Icons/Icon";
 import { getVariant } from "../../utils/utils";
 import generateUUID from "../../helpers/generateUUID";
 
-type ButtonElementType = "submit" | "button" | "reset";
+export type ButtonElementType = "submit" | "button" | "reset";
 
 interface ButtonProps {
   /** Optionally pass in additional Chakra-based styles. */
   additionalStyles?: { [key: string]: any };
-  /** Additional attributes passed to the button */
+  /** Additional attributes passed to the button. */
   attributes?: { [key: string]: any };
-  /** The kind of button assigned through the `ButtonTypes` enum  */
+  /** The kind of button assigned through the `ButtonTypes` enum. */
   buttonType?: ButtonTypes;
   /** Additional className to use. */
   className?: string;
-  /** ID that other components can cross reference for accessibility purposes */
+  /** ID that other components can cross reference for accessibility purposes. */
   id?: string;
-  /** Adds 'disabled' property to the button */
+  /** 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 */
+  /** The action to perform on the `<button>`'s onClick function. */
   onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
   /** The HTML button type attribute. */
   type?: ButtonElementType;
@@ -40,8 +40,8 @@ function Button(props: React.PropsWithChildren<ButtonProps>) {
     buttonType,
     children,
     className = "",
-    isDisabled,
     id = generateUUID(),
+    isDisabled = false,
     mouseDown = false,
     onClick,
     type = "button",

package/src/components/Button/ButtonTypes.tsx

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

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

@@ -74,18 +74,6 @@ exports[`Button Snapshot Renders the UI snapshot correctly 6`] = `
 `;
 
 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"