@nypl/design-system-react-components 0.26.1 → 1.0.0

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

@@ -11,7 +11,7 @@ exports[`Accordion Renders the UI snapshot correctly 1`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-1v42wmb"
+      className="chakra-accordion__button css-1l67k39"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}
@@ -133,7 +133,7 @@ exports[`Accordion Renders the UI snapshot correctly 2`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-1v42wmb"
+      className="chakra-accordion__button css-1l67k39"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}
@@ -255,7 +255,7 @@ exports[`Accordion Renders the UI snapshot correctly 3`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-1v42wmb"
+      className="chakra-accordion__button css-1l67k39"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}
@@ -378,7 +378,7 @@ exports[`Accordion Renders the UI snapshot correctly 4`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-1v42wmb"
+      className="chakra-accordion__button css-1l67k39"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}
@@ -500,7 +500,7 @@ exports[`Accordion Renders the UI snapshot correctly 5`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-1m4sr3t"
+      className="chakra-accordion__button css-1uqlcgc"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}
@@ -622,7 +622,7 @@ exports[`Accordion Renders the UI snapshot correctly 6`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-x43iy9"
+      className="chakra-accordion__button css-1ld1swj"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}

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

@@ -36,7 +36,7 @@ typing "c" or "tr" in the following input.
 const renderSuggestion = (suggestion) => (
   <span>
     {suggestion}
-    <Icon name={IconNames.Check} />
+    <Icon name="check" />
   </span>
 );
 ```

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

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 
 import Autosuggest from "react-autosuggest";
 import Icon from "../Icons/Icon";
-import { IconNames } from "../Icons/IconTypes";
 import TextInput from "../TextInput/TextInput";
 
 /**
@@ -10,37 +9,41 @@ import TextInput from "../TextInput/TextInput";
  * Wrapper component just to give the Autosuggest examples more space for the
  * suggestions dropdown to display.
  */
-const StoryWrapper = ({ children }) => (
+const StoryWrapper = ({ children }: { children: JSX.Element }) => (
   <div style={{ padding: "5px", minHeight: "400px" }}>{children}</div>
 );
 
-const libraryRenderInputComponent = (
-  inputProps: React.HTMLProps<HTMLInputElement>
-) => {
+const libraryRenderInputComponent = (inputProps: any) => {
   return (
     <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'."
+      {...inputProps}
     />
   );
 };
 
+interface Library {
+  label: string;
+}
+
 /**
  * LibraryExample
  * An example component that internally uses the `react-autosuggest` library.
  * The list is made up of objects with `label` key. It adds a Label, Input, and
  * HelperErrorText as elements for the autosuggest component to render.
  */
-const LibraryExample = ({ renderInputComponent }) => {
+const LibraryExample = ({
+  renderInputComponent,
+}: {
+  renderInputComponent: JSX.Element;
+}) => {
   const [value, setValue] = useState("");
   const [suggestions, setSuggestions] = useState([]);
-  const libraryList = [
+  const libraryList: Library[] = [
     { label: "SimplyE" },
     { label: "53rd Street Branch" },
     { label: "Aguilar Branch" },
@@ -55,10 +58,11 @@ const LibraryExample = ({ renderInputComponent }) => {
     { label: "Soundview Branch" },
     { label: "St. George Library Center" },
   ];
-  const onChange = (_: any, { newValue }) => setValue(newValue);
+  const onChange = (_: any, { newValue }: { newValue: string }) =>
+    setValue(newValue);
   // Tell autosuggest to suggest by the first letter of the library. This can
   // be manipulated.
-  const getSuggestions = (value, list) => {
+  const getSuggestions = (value: string, list: Library[]) => {
     const inputValue = value.trim().toLowerCase();
     const inputLength = inputValue.length;
 
@@ -71,7 +75,7 @@ const LibraryExample = ({ renderInputComponent }) => {
 
   // Autosuggest will call this function every time suggestions need to be
   // updated. `getSuggestions` must be passed.
-  const onSuggestionsFetchRequested = ({ value }) =>
+  const onSuggestionsFetchRequested = ({ value }: { value: string }) =>
     setSuggestions(getSuggestions(value, libraryList));
   // Clear out any suggestions.
   const onSuggestionsClearRequested = () => setSuggestions([]);
@@ -104,7 +108,7 @@ const LibraryExample = ({ renderInputComponent }) => {
 
 export const AutosuggestLibrary = () => (
   <StoryWrapper>
-    <LibraryExample renderInputComponent={libraryRenderInputComponent} />
+    <LibraryExample renderInputComponent={libraryRenderInputComponent as any} />
   </StoryWrapper>
 );
 
@@ -133,12 +137,10 @@ const FishExample = () => {
   const renderInputComponent = (inputProps) => {
     return (
       <TextInput
-        attributes={{
-          ...inputProps,
-        }}
         id="library-fish-autosuggest"
         labelText="Fish in Animal Crossing"
         name="favoriteFish"
+        {...inputProps}
       />
     );
   };
@@ -147,7 +149,7 @@ const FishExample = () => {
   const renderSuggestion = (suggestion) => (
     <span>
       {suggestion}
-      <Icon name={IconNames.Check} />
+      <Icon name="check" size="medium" />
     </span>
   );
   const getSuggestionValue = (suggestion) => suggestion;
@@ -192,22 +194,18 @@ export const AutosuggestFish = () => (
   </StoryWrapper>
 );
 
-const searchBarRenderInputComponent = (
-  inputProps: React.HTMLProps<HTMLInputElement>
-) => {
+const searchBarRenderInputComponent = (inputProps: any) => {
   return (
     <TextInput
-      attributes={{
-        ...inputProps,
-      }}
       id="autosuggest-searchBar"
       isRequired
       labelText="home library"
       name="homeLibraryName"
+      {...inputProps}
     />
   );
 };
 
 export const SearchBarExample = () => (
-  <LibraryExample renderInputComponent={searchBarRenderInputComponent} />
+  <LibraryExample renderInputComponent={searchBarRenderInputComponent as any} />
 );

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

@@ -7,19 +7,11 @@ import {
 } from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
-import Breadcrumbs from "./Breadcrumbs";
-import { BreadcrumbsTypes } from "./BreadcrumbsTypes";
+import Breadcrumbs, { BreadcrumbsTypes } from "./Breadcrumbs";
 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(
-  BreadcrumbsTypes,
-  "BreadcrumbsTypes"
-);
 
 <Meta
   title={getCategory("Breadcrumbs")}
@@ -33,13 +25,11 @@ export const enumValues = getStorybookEnumValues(
     jest: ["Breadcrumbs.test.tsx"],
   }}
   argTypes={{
-    additionalStyles: { control: false },
     breadcrumbsData: { control: false },
-    className: { control: false },
     breadcrumbsType: {
-      control: { type: "select" },
-      options: enumValues.options,
+      table: { defaultValue: { summary: "whatsOn" } },
     },
+    className: { control: false },
     id: { control: false },
   }}
 />
@@ -49,7 +39,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.3`    |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -73,23 +63,17 @@ available in the breadcrumb hierarchy.
   <Story
     name="Breadcrumbs with Controls"
     args={{
-      additionalStyles: undefined,
       breadcrumbsData: [
         { url: "#", text: "Parent" },
         { url: "#", text: "Child" },
         { url: "#", text: "Grandchild" },
       ],
       className: undefined,
-      breadcrumbsType: undefined,
+      breadcrumbsType: "whatsOn",
       id: "breadcrumbs-id",
     }}
   >
-    {(args) => (
-      <Breadcrumbs
-        {...args}
-        breadcrumbsType={enumValues.getValue(args.breadcrumbsType)}
-      />
-    )}
+    {(args) => <Breadcrumbs {...args} />}
   </Story>
 </Canvas>
 
@@ -131,20 +115,20 @@ denoted by an `aria-current` attribute value of "page".
 
 ## Color Variations
 
-The `Breadcrumbs` component background color can be set using the `breadcrumbsType`
-prop and the `BreadcrumbsTypes` enum. If the `breadcrumbsType` prop is omitted,
-the default background color is `black`.
+The `Breadcrumbs` component background color can be set to a value of the
+`breadcrumbsType` type. If the `breadcrumbsType` prop is omitted, the default
+background color is `"whatsOn"` (`ui.black`).
 
 <Canvas>
   <Story
     name="Color Variations"
     args={{
-      breadcrumbsType: BreadcrumbsTypes.Blogs,
+      breadcrumbsType: "blogs",
     }}
   >
     {(args) => (
       <>
-        <Heading level={HeadingLevels.Three}>Blogs</Heading>
+        <Heading level="three">Blogs</Heading>
         <Breadcrumbs
           breadcrumbsData={[
             { url: "#", text: "Parent" },
@@ -163,7 +147,7 @@ the default background color is `black`.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Three}>Books and More</Heading>
+    <Heading level="three">Books and More</Heading>
     <Breadcrumbs
       breadcrumbsData={[
         { url: "#", text: "Parent" },
@@ -173,14 +157,14 @@ the default background color is `black`.
           text: "Grandchild",
         },
       ]}
-      breadcrumbsType={BreadcrumbsTypes.BooksAndMore}
+      breadcrumbsType="booksAndMore"
     />
   </DSProvider>
 </Canvas>
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Three}>Education</Heading>
+    <Heading level="three">Education</Heading>
     <Breadcrumbs
       breadcrumbsData={[
         { url: "#", text: "Parent" },
@@ -190,14 +174,14 @@ the default background color is `black`.
           text: "Grandchild",
         },
       ]}
-      breadcrumbsType={BreadcrumbsTypes.Education}
+      breadcrumbsType="education"
     />
   </DSProvider>
 </Canvas>
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Three}>Locations</Heading>
+    <Heading level="three">Locations</Heading>
     <Breadcrumbs
       breadcrumbsData={[
         { url: "#", text: "Parent" },
@@ -207,14 +191,14 @@ the default background color is `black`.
           text: "Grandchild",
         },
       ]}
-      breadcrumbsType={BreadcrumbsTypes.Locations}
+      breadcrumbsType="locations"
     />
   </DSProvider>
 </Canvas>
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Three}>Research</Heading>
+    <Heading level="three">Research</Heading>
     <Breadcrumbs
       breadcrumbsData={[
         { url: "#", text: "Parent" },
@@ -224,14 +208,14 @@ the default background color is `black`.
           text: "Grandchild",
         },
       ]}
-      breadcrumbsType={BreadcrumbsTypes.Research}
+      breadcrumbsType="research"
     />
   </DSProvider>
 </Canvas>
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Three}>What's On</Heading>
+    <Heading level="three">What's On</Heading>
     <Breadcrumbs
       breadcrumbsData={[
         { url: "#", text: "Parent" },
@@ -241,7 +225,7 @@ the default background color is `black`.
           text: "Grandchild",
         },
       ]}
-      breadcrumbsType={BreadcrumbsTypes.WhatsOn}
+      breadcrumbsType="whatsOn"
     />
   </DSProvider>
 </Canvas>

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -4,7 +4,6 @@ import renderer from "react-test-renderer";
 import { axe } from "jest-axe";
 
 import Breadcrumbs from "./Breadcrumbs";
-import { BreadcrumbsTypes } from "./BreadcrumbsTypes";
 
 describe("Breadcrumbs Accessibility", () => {
   const breadcrumbsData = [
@@ -82,7 +81,7 @@ describe("Breadcrumbs Snapshot", () => {
       .create(
         <Breadcrumbs
           breadcrumbsData={breadcrumbsData}
-          breadcrumbsType={BreadcrumbsTypes.BooksAndMore}
+          breadcrumbsType="booksAndMore"
           id="breadcrumbs-test"
         />
       )
@@ -91,7 +90,7 @@ describe("Breadcrumbs Snapshot", () => {
       .create(
         <Breadcrumbs
           breadcrumbsData={breadcrumbsData}
-          breadcrumbsType={BreadcrumbsTypes.Blogs}
+          breadcrumbsType="blogs"
           id="breadcrumbs-test"
         />
       )
@@ -100,7 +99,7 @@ describe("Breadcrumbs Snapshot", () => {
       .create(
         <Breadcrumbs
           breadcrumbsData={breadcrumbsData}
-          breadcrumbsType={BreadcrumbsTypes.Blogs}
+          breadcrumbsType="blogs"
           id="breadcrumbs-test"
         />
       )
@@ -109,18 +108,7 @@ describe("Breadcrumbs Snapshot", () => {
       .create(
         <Breadcrumbs
           breadcrumbsData={breadcrumbsData}
-          breadcrumbsType={BreadcrumbsTypes.Education}
-          id="breadcrumbs-test"
-        />
-      )
-      .toJSON();
-    const breadcrumbsAdditionalStyles = renderer
-      .create(
-        <Breadcrumbs
-          additionalStyles={{
-            bg: "var(--nypl-colors-ui-error-primary)",
-          }}
-          breadcrumbsData={breadcrumbsData}
+          breadcrumbsType="education"
           id="breadcrumbs-test"
         />
       )
@@ -150,7 +138,6 @@ describe("Breadcrumbs Snapshot", () => {
     expect(breadcrumbsBlogsVariant).toMatchSnapshot();
     expect(breadcrumbsLocationsVariant).toMatchSnapshot();
     expect(breadcrumbsEducationVariant).toMatchSnapshot();
-    expect(breadcrumbsAdditionalStyles).toMatchSnapshot();
     expect(withChakraProps).toMatchSnapshot();
     expect(withOtherProps).toMatchSnapshot();
   });

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -8,23 +8,20 @@ import {
 import * as React from "react";
 
 import Icon from "../Icons/Icon";
-import {
-  IconNames,
-  IconRotationTypes,
-  IconSizes,
-  IconTypes,
-} from "../Icons/IconTypes";
-import { BreadcrumbsTypes } from "./BreadcrumbsTypes";
-import { getVariant } from "../../utils/utils";
 
+export type BreadcrumbsTypes =
+  | "blogs"
+  | "booksAndMore"
+  | "education"
+  | "locations"
+  | "research"
+  | "whatsOn";
 export interface BreadcrumbsDataProps {
   url: string;
   text: string | React.ReactNode;
 }
 
 export interface BreadcrumbProps {
-  /** Optionally pass in additional Chakra-based styles. */
-  additionalStyles?: { [key: string]: any };
   /** Breadcrumb links as an array */
   breadcrumbsData: BreadcrumbsDataProps[];
   /** Used to control how the `Hero` component will be rendered. */
@@ -35,7 +32,10 @@ export interface BreadcrumbProps {
   id?: string;
 }
 
-const getElementsFromData = (data, breadcrumbsID) => {
+const getElementsFromData = (
+  data: BreadcrumbsDataProps[],
+  breadcrumbsID?: string
+) => {
   if (!data?.length) {
     return {};
   }
@@ -48,12 +48,12 @@ const getElementsFromData = (data, breadcrumbsID) => {
       <BreadcrumbLink href={breadcrumbData.url}>
         {index === data.length - 2 && (
           <Icon
-            name={IconNames.Arrow}
-            size={IconSizes.Small}
-            iconRotation={IconRotationTypes.Rotate90}
+            name="arrow"
+            size="small"
+            iconRotation="rotate90"
             id={`${breadcrumbsID}__backarrow`}
             className="breadcrumbs-icon"
-            type={IconTypes.Breadcrumbs}
+            type="breadcrumbs"
           />
         )}
         <span className="breadcrumb-label">{breadcrumbData.text}</span>
@@ -66,14 +66,12 @@ const getElementsFromData = (data, breadcrumbsID) => {
 
 export const Breadcrumbs = chakra((props: BreadcrumbProps) => {
   const {
-    additionalStyles = {},
     breadcrumbsData,
-    breadcrumbsType,
+    breadcrumbsType = "whatsOn",
     className,
     id,
     ...rest
   } = props;
-  const variant = getVariant(breadcrumbsType, BreadcrumbsTypes);
 
   if (!breadcrumbsData || breadcrumbsData.length === 0) {
     throw new Error(
@@ -81,8 +79,7 @@ export const Breadcrumbs = chakra((props: BreadcrumbProps) => {
     );
   }
 
-  const styles = useStyleConfig("Breadcrumb", { variant });
-  const finalStyles = { ...styles, ...additionalStyles };
+  const styles = useStyleConfig("Breadcrumb", { variant: breadcrumbsType });
   const breadcrumbItems = getElementsFromData(breadcrumbsData, id);
 
   return (
@@ -90,7 +87,7 @@ export const Breadcrumbs = chakra((props: BreadcrumbProps) => {
       aria-label="Breadcrumb"
       className={className}
       id={id}
-      __css={finalStyles}
+      __css={styles}
       {...rest}
     >
       {breadcrumbItems}

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

@@ -496,105 +496,6 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 5`] = `
 `;
 
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 6`] = `
-<nav
-  aria-label="Breadcrumb"
-  className="chakra-breadcrumb css-ruvqk2"
-  id="breadcrumbs-test"
->
-  <ol
-    className="chakra-breadcrumb__list css-0"
-  >
-    <li
-      className="chakra-breadcrumb__list-item css-18biwo"
-    >
-      <a
-        className="chakra-breadcrumb__link css-0"
-        href="#string1"
-      >
-        <span
-          className="breadcrumb-label"
-        >
-          string1
-        </span>
-      </a>
-      <span
-        className="css-t4q1nq"
-        role="presentation"
-      >
-        /
-      </span>
-    </li>
-    <li
-      className="chakra-breadcrumb__list-item css-18biwo"
-    >
-      <a
-        className="chakra-breadcrumb__link css-0"
-        href="#string2"
-      >
-        <svg
-          aria-hidden={true}
-          className="chakra-icon breadcrumbs-icon css-1grhd2q"
-          focusable={false}
-          id="breadcrumbs-test__backarrow"
-          role="img"
-          title="arrow icon"
-          viewBox="0 0 24 24"
-        >
-          <g
-            stroke="currentColor"
-            strokeWidth="1.5"
-          >
-            <path
-              d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-              fill="none"
-              strokeLinecap="round"
-            />
-            <path
-              d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-              fill="currentColor"
-              strokeLinecap="round"
-            />
-            <circle
-              cx="12"
-              cy="12"
-              fill="none"
-              r="11.25"
-              strokeMiterlimit="10"
-            />
-          </g>
-        </svg>
-        <span
-          className="breadcrumb-label"
-        >
-          string2
-        </span>
-      </a>
-      <span
-        className="css-t4q1nq"
-        role="presentation"
-      >
-        /
-      </span>
-    </li>
-    <li
-      className="chakra-breadcrumb__list-item css-18biwo"
-    >
-      <span
-        aria-current="page"
-        className="chakra-breadcrumb__link css-0"
-      >
-        <span
-          className="breadcrumb-label"
-        >
-          string3
-        </span>
-      </span>
-    </li>
-  </ol>
-</nav>
-`;
-
-exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 7`] = `
 <nav
   aria-label="Breadcrumb"
   className="chakra-breadcrumb css-1t0bvx9"
@@ -693,7 +594,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 7`] = `
 </nav>
 `;
 
-exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 8`] = `
+exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 7`] = `
 <nav
   aria-label="Breadcrumb"
   className="chakra-breadcrumb css-1xdhyk6"