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

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

@@ -1,5 +1,11 @@
+interface TextBaseStyle {
+    isBold: boolean;
+    isItalic: boolean;
+    noSpace: boolean;
+    variant: string;
+}
 declare const Text: {
-    baseStyle: (props: any) => {
+    baseStyle: ({ isBold, isItalic, noSpace, variant }: TextBaseStyle) => {
         fontStyle: string;
         fontWeight: string;
         marginBottom: string;

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

@@ -1,10 +1,12 @@
+import { ToggleSizes } from "../../components/Toggle/Toggle";
+interface ToggleBaseStyle {
+    isDisabled: boolean;
+    size: ToggleSizes;
+}
 declare const _default: {
     Toggle: {
         parts: string[];
-        baseStyle: ({ isDisabled, size }: {
-            isDisabled: any;
-            size: any;
-        }) => {
+        baseStyle: ({ isDisabled, size }: ToggleBaseStyle) => {
             label: {
                 alignItems: string;
                 display: string;

package/dist/theme/provider.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-declare const DSProvider: ({ children }: {
-    children: any;
-}) => JSX.Element;
+import React from "react";
+declare const DSProvider: ({ children }: React.PropsWithChildren<{}>) => JSX.Element;
 export default DSProvider;

package/dist/utils/componentCategories.d.ts

@@ -1 +1 @@
-export declare const getCategory: (component: any) => any;
+export declare const getCategory: (component: string) => string;

package/dist/utils/interfaces.d.ts

@@ -0,0 +1,5 @@
+export interface AriaAttributes {
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+    "aria-labelledby"?: string;
+}

package/dist/utils/utils.d.ts

@@ -4,29 +4,13 @@
  * `step` between values.
  */
 export declare const range: (start: number, stop: number, step?: number) => number[];
-/**
- * Map an enum value to a component's Chakra theme variant object. If a wrong
- * value is passed (typically in non-Typescript scenarios), then the "fallback"
- * 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;
-};
 /**
  * Given a pagination's pageCount, this will return (1) a page number,
  * derived from the current URL, and (2) a function that, when passed to
  * Pagination component, makes the URL change and refreshes the page.
  * @NOTE this is only used for Storybook documentation.
  */
-export declare const getStorybookHrefProps: (pageCount: any) => {
+export declare const getStorybookHrefProps: (pageCount: number) => {
     computedCurrentPage: number;
-    getPageHref: (selectedPage: any) => string;
+    getPageHref: (selectedPage: number) => string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "analyze": "size-limit --why",
     "generate-sass-resources": "gulp",
     "storybook": "start-storybook -p 6006 -s ./.storybook/public",
-    "build-storybook:v0_26": "npm run prebuild:storybook && build-storybook -c .storybook -o ./reservoir/v0_26",
+    "build-storybook:v0": "npm run prebuild:storybook && build-storybook -c .storybook -o ./reservoir/v0",
     "prebuild:storybook": "npm run test:generate-output"
   },
   "lint-staged": {
@@ -57,27 +57,28 @@
     }
   ],
   "dependencies": {
-    "@chakra-ui/react": ">=1.7.1",
-    "@chakra-ui/system": ">=1.8.1",
-    "@emotion/react": "11.4.1",
-    "@emotion/styled": "11.3.0",
-    "framer-motion": "4.1.17",
+    "@chakra-ui/react": ">=1.8.5",
+    "@chakra-ui/system": ">=1.11.0",
+    "@emotion/react": ">=11.4.1",
+    "@emotion/styled": ">=11.3.0",
+    "framer-motion": "^4.1.17",
     "he": "1.2.0",
     "react-datepicker": "4.1.1",
     "system-font-css": "2.0.2",
     "typescript": "4.3.5"
   },
   "peerDependencies": {
-    "@chakra-ui/react": ">=1.7.1",
-    "@chakra-ui/system": ">=1.8.1",
+    "@chakra-ui/react": ">=1.8.0",
+    "@chakra-ui/system": ">=1.10.0",
     "@emotion/react": ">=11.4.1",
     "@emotion/styled": ">=11.3.0",
-    "framer-motion": ">=4.1.17",
+    "framer-motion": "^4.1.17",
     "react": ">=16.13.0",
     "react-dom": ">=16.13.0"
   },
   "devDependencies": {
     "@babel/core": "7.14.6",
+    "@chakra-ui/storybook-addon": "1.0.3",
     "@mdx-js/react": "1.6.22",
     "@size-limit/preset-small-lib": "5.0.1",
     "@storybook/addon-a11y": "6.4.19",
@@ -86,7 +87,6 @@
     "@storybook/addon-essentials": "6.4.19",
     "@storybook/addon-jest": "6.4.19",
     "@storybook/addon-links": "6.4.19",
-    "@storybook/addon-queryparams": "6.2.9",
     "@storybook/addons": "6.4.19",
     "@storybook/react": "6.4.19",
     "@svgr/rollup": "5.5.0",
@@ -124,12 +124,11 @@
     "node-sass-glob-importer": "5.3.2",
     "normalize.css": "8.0.1",
     "prettier": "2.4.1",
-    "react": "16.14.0",
+    "react": "17.0.2",
     "react-autosuggest": "10.0.2",
-    "react-docgen-typescript-loader": "3.1.0",
-    "react-dom": "16.14.0",
-    "react-router-dom": "5.2.0",
-    "react-test-renderer": "16.14.0",
+    "react-docgen-typescript-loader": "3.7.2",
+    "react-dom": "17.0.2",
+    "react-test-renderer": "17.0.2",
     "rollup-plugin-postcss": "4.0.0",
     "rollup-plugin-svg": "2.0.0",
     "sass": "1.35.1",

package/src/__tests__/setup.ts

@@ -14,10 +14,10 @@ const exposedProperties = ["window", "navigator", "document"];
 
 (global as any).window = window;
 (global as any).document = window.document;
-Object.keys(document.defaultView).forEach((property) => {
-  if (typeof global[property] === "undefined") {
+Object.keys((document as Document).defaultView).forEach((property) => {
+  if (typeof (global as any)[property] === "undefined") {
     exposedProperties.push(property);
-    global[property] = document.defaultView[property];
+    (global as any)[property] = (document as any).defaultView[property];
   }
 });
 

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

@@ -1,5 +1,4 @@
-import { getStorybookEnumValues, range } from "../../utils/utils";
-import { ButtonTypes } from "../../components/Button/ButtonTypes";
+import { range } from "../../utils/utils";
 
 describe("range", () => {
   it("returns an array of values not including the stop argument", () => {
@@ -17,24 +16,3 @@ 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/AccessibilityGuide/SkipNavigation.stories.mdx

@@ -13,20 +13,28 @@ import { getCategory } from "../../utils/componentCategories";
 
 ## General Information
 
-An application's "skip navigation link" is used to skip to the primary or main
-content of a page. This link is located at the top of the page and is usually
-visually hidden until a user focuses on the link. For most applications at
-NYPL, the [NYPL Header](https://github.com/NYPL/dgx-header-component) is used
-and this component already renders a skip navigation link.
-
-The link must target an existing anchor on the page and is typically the `id`
-`"#mainContent"` set on the `main` HTML element on the page. While the DS does not
-currently, as of `v0.25.13`, provide a skip navigation link, it does provide the
-anchor element for the link through the `TemplateAppContainer` component.
-
-The `TemplateAppContainer` component renders as a `main` HTML element with a
-default `id` of `"mainContent"`. This should be used as the anchor element that
-the skip navigation link points to.
+An application's "skip navigation" is used to skip to the primary or main
+content of a page. This component usually contains one link that is located at
+the top of the page and is visually hidden until a user focuses on the link.
+In the case of NYPL applications, the skip navigation contains two links; the
+first link points to the main content of the page and the second link points to
+accessibility information on [NYPL.org/accessibility](https://nypl.org/accessibility).
+For most digitial applications on the NYPL.org platform, the [NYPL Header](https://github.com/NYPL/dgx-header-component)
+is used and this component already renders a skip navigation area with links.
+
+In the Reservoir Design System (DS), the `SkipNavigation` component renders two
+links.
+
+The first link points to the `"#mainContent"` anchor which an NYPL page
+is expected to have. The `TemplateAppContainer` component renders as a `main`
+HTML element with a default `id` of `"mainContent"`. While it's possible to
+update the target of the skip link and the id of the `<main>` element, this is
+not recommended. When using the DS' `SkipNavigation` and `TemplateAppContainer`
+components, this accessibility combination is automatically handled. When not
+using the `TemplateAppContainer` component, make sure to render a `main` HTML
+element with an `id` of `"mainContent"`.
+
+The second link points to additional accessibility information on [NYPL.org/accessibility](https://nypl.org/accessibility).
 
 ## Resources
 

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

@@ -9,11 +9,7 @@ import ReactDOMServer from "react-dom/server";
 import { withDesign } from "storybook-addon-designs";
 
 import Accordion from "./Accordion";
-import { AccordionTypes } from "./AccordionTypes";
 import Card, { CardHeading, CardContent } from "../Card/Card";
-import { HeadingLevels } from "../Heading/HeadingTypes";
-import { ImageRatios } from "../Image/ImageTypes";
-import { LayoutTypes } from "../../helpers/enums";
 import { getCategory } from "../../utils/componentCategories";
 
 <Meta
@@ -39,7 +35,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.1.0`    |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -66,22 +62,25 @@ Note that you can pass in a string or DOM elements into the `panel` property in
 object. This approach is needed because, internally, we deal with the logic to render
 the necessary icon, Chakra components, and styles. Additionally, the `accordionType`
 prop can be used to change the accordion button's background color. It takes a value
-from the AccordionTypes enum: AccordionTypes.Default is `ui.white`, AccordionTypes.Warning
-is `ui.status.primary`, and AccordionTypes.Error is `ui.status.secondary`.
+of `"default"` for `"ui.white"`, `"warning"` for `"ui.status.primary"`, and
+`"error"` for `"ui.status.secondary"`.
 
 ```jsx
 const accordionData = [
   {
+    accordionType: "default",
     label: "Tom Nook",
     panel: (
       <Card
-        layout={CardLayouts.Row}
+        layout="row"
         center
-        imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
+        imageProps={{
+          alt: "Alt text",
+          aspectRatio: "twoByOne",
+          src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
+        }}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level="four" id="heading1">
           Tom Nook
         </CardHeading>
         <CardContent>
@@ -107,19 +106,19 @@ const accordionData = [
     args={{
       accordionData: [
         {
-          accordionType: AccordionTypes.Default,
+          accordionType: "default",
           label: "Tom Nook",
           panel: (
             <Card
               imageProps={{
                 alt: "Alt text",
-                aspectRatio: ImageRatios.TwoByOne,
+                aspectRatio: "twoByOne",
                 src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
               }}
               isCentered
-              layout={LayoutTypes.Row}
+              layout="row"
             >
-              <CardHeading level={HeadingLevels.Four} id="heading1">
+              <CardHeading level="four" id="heading1">
                 Tom Nook
               </CardHeading>
               <CardContent>
@@ -144,19 +143,19 @@ const accordionData = [
 ```jsx
 const accordionData = [
   {
-    accordionType: AccordionTypes.Default,
+    accordionType: "default",
     label: "Tom Nook",
     panel: (
       <Card
         imageProps={{
           alt: "Alt text",
-          aspectRatio: ImageRatios.TwoByOne,
+          aspectRatio: "twoByOne",
           src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
         }}
         isCentered
-        layout={LayoutTypes.Row}
+        layout="row"
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level="four" id="heading1">
           Tom Nook
         </CardHeading>
         <CardContent>
@@ -192,19 +191,19 @@ Resources:
 
 export const faqContent = [
   {
-    accordionType: AccordionTypes.Default,
+    accordionType: "default",
     label: "Tom Nook",
     panel: (
       <Card
         imageProps={{
           alt: "Alt text",
-          aspectRatio: ImageRatios.TwoByOne,
+          aspectRatio: "twoByOne",
           src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
         }}
         isCentered
-        layout={LayoutTypes.Row}
+        layout="row"
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1-tom">
+        <CardHeading level="four" id="heading1-tom">
           Tom Nook
         </CardHeading>
         <CardContent>
@@ -215,19 +214,19 @@ export const faqContent = [
     ),
   },
   {
-    accordionType: AccordionTypes.Warning,
+    accordionType: "warning",
     label: "Isabelle",
     panel: (
       <Card
         imageProps={{
           alt: "Alt text",
-          aspectRatio: ImageRatios.TwoByOne,
+          aspectRatio: "twoByOne",
           src: "https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
         }}
         isCentered
-        layout={LayoutTypes.Row}
+        layout="row"
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1-isabelle">
+        <CardHeading level="four" id="heading1-isabelle">
           Isabelle
         </CardHeading>
         <CardContent>
@@ -240,19 +239,19 @@ export const faqContent = [
     ),
   },
   {
-    accordionType: AccordionTypes.Error,
+    accordionType: "error",
     label: "K.K. Slider",
     panel: (
       <Card
         imageProps={{
           alt: "Alt text",
-          aspectRatio: ImageRatios.TwoByOne,
+          aspectRatio: "twoByOne",
           src: "https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
         }}
         isCentered
-        layout={LayoutTypes.Row}
+        layout="row"
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1-kkslider">
+        <CardHeading level="four" id="heading1-kkslider">
           K.K. Slider
         </CardHeading>
         <CardContent>
@@ -280,19 +279,19 @@ one object in the array passed into the `accordionData` prop.
 ```jsx
 export const faqContent = [
   {
-    accordionType: AccordionTypes.Default,
+    accordionType: "default",
     label: "Tom Nook",
     panel: (
       <Card
         imageProps={{
           alt: "Alt text",
-          aspectRatio: ImageRatios.TwoByOne,
+          aspectRatio: "twoByOne",
           src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
         }}
         isCentered
-        layout={LayoutTypes.Row}
+        layout="row"
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1-tom">
+        <CardHeading level="four" id="heading1-tom">
           Tom Nook
         </CardHeading>
         <CardContent>
@@ -303,19 +302,19 @@ export const faqContent = [
     ),
   },
   {
-    accordionType: AccordionTypes.Warning,
+    accordionType: "warning",
     label: "Isabelle",
     panel: (
       <Card
         imageProps={{
           alt: "Alt text",
-          aspectRatio: ImageRatios.TwoByOne,
+          aspectRatio: "twoByOne",
           src: "https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
         }}
         isCentered
-        layout={LayoutTypes.Row}
+        layout="row"
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1-isabelle">
+        <CardHeading level="four" id="heading1-isabelle">
           Isabelle
         </CardHeading>
         <CardContent>
@@ -328,19 +327,19 @@ export const faqContent = [
     ),
   },
   {
-    accordionType: AccordionTypes.Error,
+    accordionType: "error",
     label: "K.K. Slider",
     panel: (
       <Card
         imageProps={{
           alt: "Alt text",
-          aspectRatio: ImageRatios.TwoByOne,
+          aspectRatio: "twoByOne",
           src: "https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
         }}
         isCentered
-        layout={LayoutTypes.Row}
+        layout="row"
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1-kkslider">
+        <CardHeading level="four" id="heading1-kkslider">
           K.K. Slider
         </CardHeading>
         <CardContent>

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

@@ -5,11 +5,7 @@ import renderer from "react-test-renderer";
 import userEvent from "@testing-library/user-event";
 
 import Accordion from "./Accordion";
-import { AccordionTypes } from "./AccordionTypes";
 import Card, { CardContent, CardHeading } from "../Card/Card";
-import { HeadingLevels } from "../Heading/HeadingTypes";
-import { ImageRatios } from "../Image/ImageTypes";
-import { LayoutTypes } from "../../helpers/enums";
 
 describe("Accordion Accessibility", () => {
   it("passes axe accessibility test for one item", async () => {
@@ -166,13 +162,13 @@ describe("Accordion", () => {
             id="card"
             imageProps={{
               alt: "Alt text",
-              aspectRatio: ImageRatios.TwoByOne,
+              aspectRatio: "twoByOne",
               src: "https://cdn.onebauer.media/one/media/6176/76fd/405b/ab5f/f20f/2d52/gerri-1500-1.jpg?format=jpg&quality=80&width=850&ratio=1-1&resize=aspectfit",
             }}
             isCentered
-            layout={LayoutTypes.Row}
+            layout="row"
           >
-            <CardHeading id="heading1" level={HeadingLevels.Four}>
+            <CardHeading id="heading1" level="four">
               Gerry Kellman
             </CardHeading>
             <CardContent>
@@ -196,9 +192,7 @@ describe("Accordion", () => {
     const withError = renderer
       .create(
         <Accordion
-          accordionData={[
-            { ...accordionData[0], accordionType: AccordionTypes.Error },
-          ]}
+          accordionData={[{ ...accordionData[0], accordionType: "error" }]}
           id="accordian"
           isDefaultOpen
         />
@@ -207,9 +201,7 @@ describe("Accordion", () => {
     const withWarning = renderer
       .create(
         <Accordion
-          accordionData={[
-            { ...accordionData[0], accordionType: AccordionTypes.Warning },
-          ]}
+          accordionData={[{ ...accordionData[0], accordionType: "warning" }]}
           id="accordian"
           isDefaultOpen
         />

package/src/components/Accordion/Accordion.tsx

@@ -1,22 +1,21 @@
 import {
   Accordion as ChakraAccordion,
-  AccordionItem,
   AccordionButton,
+  AccordionItem,
   AccordionPanel,
   Box,
   chakra,
 } from "@chakra-ui/react";
 import * as React from "react";
 
-import { AccordionTypes } from "./AccordionTypes";
 import Icon from "../Icons/Icon";
-import { IconNames, IconSizes } from "../Icons/IconTypes";
+
+export type AccordionTypes = "default" | "warning" | "error";
 export interface AccordionDataProps {
   accordionType?: AccordionTypes;
   label: string;
   panel: string | React.ReactNode;
 }
-
 export interface AccordionProps {
   /** Array of data to display, and an optional accordionType */
   accordionData: AccordionDataProps[];
@@ -30,14 +29,10 @@ export interface AccordionProps {
  * Get the minus or plus icon depending on whether the accordion
  * is open or closed.
  */
-const getIcon = (isExpanded = false, index, id) => {
-  const iconName = isExpanded ? IconNames.Minus : IconNames.Plus;
+const getIcon = (isExpanded = false, index: number, id: string) => {
+  const iconName = isExpanded ? "minus" : "plus";
   return (
-    <Icon
-      id={`accordion-${id}-icon-${index}`}
-      name={iconName}
-      size={IconSizes.Small}
-    />
+    <Icon id={`accordion-${id}-icon-${index}`} name={iconName} size="small" />
   );
 };
 
@@ -46,15 +41,15 @@ const getIcon = (isExpanded = false, index, id) => {
  * array. This automatically creates the `AccordionButton` and `AccordionPanel`
  * combination that is required for the Chakra `Accordion` component.
  */
-const getElementsFromData = (data = [], id) => {
+const getElementsFromData = (data: AccordionDataProps[] = [], id: string) => {
   const colorMap = {
-    [AccordionTypes.Default]: "ui.white",
-    [AccordionTypes.Warning]: "ui.status.primary",
-    [AccordionTypes.Error]: "ui.status.secondary",
+    default: "ui.white",
+    warning: "ui.status.primary",
+    error: "ui.status.secondary",
   };
   // For FAQ-style multiple accordions, the button should be bigger.
   // Otherwise, use the default.
-  const multiplePadding = data?.length > 1 ? 4 : null;
+  const multiplePadding = data?.length > 1 ? "4" : "initial";
 
   return data.map((content, index) => {
     // This is done to support both string and DOM element input.
@@ -124,11 +119,12 @@ export const Accordion = chakra((props: AccordionProps) => {
   const { accordionData, id, isDefaultOpen = false, ...rest } = props;
 
   // Pass `0` to open the first accordion in the 0-index based array.
-  const openFirstAccordion = isDefaultOpen ? 0 : undefined;
+  const openFirstAccordion = isDefaultOpen ? [0] : undefined;
+
   return (
     <ChakraAccordion
       id={id}
-      defaultIndex={[openFirstAccordion]}
+      defaultIndex={openFirstAccordion}
       allowMultiple
       {...rest}
     >