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

package/dist/theme/components/toggle.d.ts

@@ -0,0 +1,71 @@
+declare const _default: {
+    Toggle: {
+        parts: string[];
+        baseStyle: {
+            label: {
+                display: string;
+                alignItems: string;
+                width: string;
+            };
+            helper: {
+                marginLeft: string;
+                marginTop: string;
+                marginBottom: string;
+            };
+        };
+        defaultProps: {
+            size: string;
+        };
+    };
+    Switch: {
+        baseStyle: {
+            opacity: number;
+            track: {
+                border: string;
+                borderColor: string;
+                p: string;
+                _checked: {
+                    bg: string;
+                    borderColor: string;
+                    opacity: number;
+                };
+                _invalid: {
+                    bg: string;
+                    borderColor: string;
+                    "> span": {
+                        bg: string;
+                    };
+                };
+                _disabled: {
+                    bg: string;
+                    borderColor: string;
+                    _checked: {
+                        opacity: number;
+                    };
+                };
+                _focus: {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                    zIndex: string;
+                };
+            };
+            label: {
+                fontSize: string;
+                marginLeft: string;
+                _disabled: {
+                    fontStyle: string;
+                };
+            };
+            thumb: {
+                _disabled: {
+                    bg: string;
+                };
+            };
+        };
+        defaultProps: {
+            colorScheme: string;
+        };
+    };
+};
+export default _default;

package/dist/theme/foundations/spacing.d.ts

@@ -22,6 +22,7 @@
  *
  * Chakra Number Value | Chakra Name value | DS Variable
  * ------------------- | ----------------- | -----------------
+ *        0.5            |         xxxs       |   --nypl-space-xxxs
  *        1            |         xxs       |   --nypl-space-xxs
  *        2            |         xs        |   --nypl-space-xs
  *        4            |         s         |   --nypl-space-s
@@ -34,6 +35,7 @@
 export declare const spacing: {
     px: string;
     0: string;
+    xxxs: string;
     0.5: string;
     xxs: string;
     1: string;

package/dist/utils/utils.d.ts

@@ -10,3 +10,13 @@ export declare const range: (start: number, stop: number, step?: number) => numb
  * value, if provided, will be used.
  */
 export declare const getVariant: (variant: any, collection: any, fallback?: any) => any;
+/**
+ * Given an enum object and its name, this will return (1) an array `options`
+ * of all values with the enum name as the prefix, and (2) a function that
+ * returns the correct enum value given a string from the `options` array.
+ * @NOTE this is only used for Storybook documentation.
+ */
+export declare const getStorybookEnumValues: (enumObject: any, name: any) => {
+    options: string[];
+    getValue: (key: any) => any;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.25.5",
+  "version": "0.25.9",
   "description": "Design System React Components",
   "repository": {
     "type": "git",
@@ -14,7 +14,7 @@
     "src"
   ],
   "engines": {
-    "node": ">10 <=12.22"
+    "node": ">10"
   },
   "author": "NYPL",
   "license": "Apache-2.0",
@@ -116,7 +116,6 @@
     "jest": "27.3.1",
     "jest-axe": "5.0.1",
     "jsdom": "15.2.1",
-    "node-sass": "4.14.1",
     "node-sass-glob-importer": "5.3.2",
     "normalize.css": "8.0.1",
     "postcss": "8.3.6",

package/src/__tests__/utils/utils.test.ts

@@ -1,4 +1,5 @@
-import { range } from "../../utils/utils";
+import { getStorybookEnumValues, range } from "../../utils/utils";
+import { ButtonTypes } from "../../components/Button/ButtonTypes";
 
 describe("range", () => {
   it("returns an array of values not including the stop argument", () => {
@@ -16,3 +17,24 @@ describe("range", () => {
     expect(range(2, 20, 5)).toEqual([2, 7, 12, 17]);
   });
 });
+
+describe("getStorybookEnumValues", () => {
+  const enumValues = getStorybookEnumValues(ButtonTypes, "ButtonTypes");
+
+  it("returns an array of values from the enum passed", () => {
+    expect(enumValues.options).toEqual([
+      "ButtonTypes.Primary",
+      "ButtonTypes.Secondary",
+      "ButtonTypes.Callout",
+      "ButtonTypes.Pill",
+      "ButtonTypes.Link",
+      "ButtonTypes.NoBrand",
+    ]);
+  });
+
+  it("returns a function with the value of the argument passed", () => {
+    expect(enumValues.getValue("ButtonTypes.Primary")).toEqual("primary");
+    expect(enumValues.getValue("ButtonTypes.Callout")).toEqual("callout");
+    expect(enumValues.getValue("ButtonTypes.NoBrand")).toEqual("noBrand");
+  });
+});

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
@@ -22,14 +22,14 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=10734%3A2520",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=10734%3A2520",
     },
     jest: ["Accordion.test.tsx"],
   }}
   argTypes={{
-    contentData: { table: { disable: true } },
-    id: { table: { disable: true } },
+    contentData: { control: false },
+    id: { control: false },
+    isDefaultOpen: { table: { defaultValue: { summary: false } } },
   }}
 />
 
@@ -57,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",
@@ -83,6 +82,8 @@ necessary icon, Chakra components, and styles.
           ),
         },
       ],
+      id: "accordion-id",
+      isDefaultOpen: false,
     }}
   >
     {(args) => <Accordion {...args} />}
@@ -119,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 },
   }}
 />
 
@@ -38,7 +49,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.3`    |
-| Latest            | `0.25.4`   |
+| Latest            | `0.25.8`   |
 
 <Description of={Breadcrumbs} />
 
@@ -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
 
@@ -91,12 +110,12 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
   <Story
     name="Color Variations"
     args={{
-      colorVariant: ColorVariants.BooksAndMore,
+      colorVariant: ColorVariants.Blogs,
     }}
   >
     {(args) => (
       <>
-        <Heading level={HeadingLevels.Three}>Books and More</Heading>
+        <Heading level={HeadingLevels.Three}>Blogs</Heading>
         <Breadcrumbs
           breadcrumbsData={[
             { url: "#", text: "Parent" },
@@ -113,6 +132,23 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
   </Story>
 </Canvas>
 
+<Canvas>
+  <DSProvider>
+    <Heading level={HeadingLevels.Three}>Books and More</Heading>
+    <Breadcrumbs
+      breadcrumbsData={[
+        { url: "#", text: "Parent" },
+        { url: "#", text: "Child" },
+        {
+          url: "#",
+          text: "Grandchild",
+        },
+      ]}
+      colorVariant={ColorVariants.BooksAndMore}
+    />
+  </DSProvider>
+</Canvas>
+
 <Canvas>
   <DSProvider>
     <Heading level={HeadingLevels.Three}>Locations</Heading>

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

@@ -41,6 +41,24 @@ describe("Breadcrumbs Snapshot", () => {
         />
       )
       .toJSON();
+    const breadcrumbsBlogsVariant = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          colorVariant={ColorVariants.Blogs}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
+    const breadcrumbsLocationsVariant = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          colorVariant={ColorVariants.Blogs}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
     const breadcrumbsAdditionalStyles = renderer
       .create(
         <Breadcrumbs
@@ -55,6 +73,8 @@ describe("Breadcrumbs Snapshot", () => {
 
     expect(breadcrumbsSnapshot).toMatchSnapshot();
     expect(breadcrumbsVariantColor).toMatchSnapshot();
+    expect(breadcrumbsBlogsVariant).toMatchSnapshot();
+    expect(breadcrumbsLocationsVariant).toMatchSnapshot();
     expect(breadcrumbsAdditionalStyles).toMatchSnapshot();
   });
 });

package/src/components/Breadcrumbs/BreadcrumbsTypes.tsx

@@ -1,4 +1,5 @@
 export enum ColorVariants {
+  Blogs = "blogs",
   BooksAndMore = "booksAndMore",
   Locations = "locations",
   Research = "research",