@nypl/design-system-react-components 0.25.3 → 0.25.7

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

@@ -73,6 +73,15 @@ declare const Breadcrumb: {
         };
     };
     variants: {
+        blogs: {
+            bg: string;
+            color: string;
+            a: {
+                _hover: {
+                    color: string;
+                };
+            };
+        };
         booksAndMore: {
             bg: string;
         };

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

@@ -105,6 +105,16 @@ declare const Button: {
             height: string;
             fontSize: string;
         };
+        noBrand: {
+            bg: string;
+            color: string;
+            _hover: {
+                bg: string;
+            };
+            minWidth: string;
+            height: string;
+            fontSize: string;
+        };
     };
     defaultProps: {
         variant: string;

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

@@ -0,0 +1,50 @@
+declare const ProgressIndicator: {
+    parts: string[];
+    baseStyle: ({ darkMode, size }: {
+        darkMode: any;
+        size: any;
+    }) => {
+        color: string;
+        circular: {
+            svg: {
+                height: string;
+                width: string;
+                display: string;
+                circle: {
+                    _first: {
+                        stroke: string;
+                    };
+                    _last: {
+                        stroke: string;
+                    };
+                };
+            };
+        };
+        circularContainer: {
+            alignItems: string;
+            display: string;
+            flexDirection: string;
+            width: string;
+        };
+        linear: {
+            "> div": {
+                bg: string;
+            };
+            flex: number;
+            bg: string;
+            height: {
+                base: string;
+                md: string;
+            };
+        };
+        linearContainer: {
+            display: string;
+            alignItems: string;
+        };
+        linearPercentage: {
+            padding: string;
+            flex: number;
+        };
+    };
+};
+export default ProgressIndicator;

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

@@ -0,0 +1,51 @@
+declare const CustomSlider: {
+    parts: string[];
+    baseStyle: ({ isDisabled, isInvalid, isRangeSlider, showBoxes }: {
+        isDisabled: any;
+        isInvalid: any;
+        isRangeSlider: any;
+        showBoxes: any;
+    }) => {
+        container: {
+            display: string;
+            alignItems: string;
+        };
+        helper: {
+            marginTop: string;
+        };
+        leftValue: {
+            marginLeft: string;
+            marginTop: string;
+            marginBottom: string;
+            marginRight: string;
+        };
+        rightValue: {
+            marginRight: string;
+            marginTop: string;
+            marginBottom: string;
+            marginLeft: string;
+        };
+        textInput: {
+            minWidth: string;
+            color: string;
+        };
+        filledTrack: {
+            bgColor: string;
+        };
+        track: {
+            bgColor: string;
+            _disabled: {
+                bgColor: string;
+            };
+        };
+        thumb: {
+            border: string;
+            borderColor: string;
+            boxShadow: string;
+            _active: {
+                transform: string;
+            };
+        };
+    };
+};
+export default CustomSlider;

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

@@ -6,16 +6,16 @@ declare const _default: import("@chakra-ui/theme-tools").Breakpoints<{
     "2xl": string;
 }>;
 /**
- * Breakpoints from "src/styles/base/_02-breakpoints.scss"
+ * Breakpoints from "src/styles/base/_01-breakpoints.scss"
  * How to use Chakra responsive styles: https://chakra-ui.com/docs/features/responsive-styles
  *
- * Chakra Value |     DS Variable      | EM/PX value
- * --------------------------------------------------
- *      sm      | --breakpoint-small   | 20em/320px
- *      md      | --breakpoint-medium  | 38em/600px
- *      lg      | --breakpoint-large   | 60em/960px
- *      xl      | --breakpoint-xl      | 80em/1280px
- *     2xl      |        N/A           | 96em/1536px
+ * Chakra Value |     DS Variable           | EM/PX value
+ * ------------------------------------------------------
+ *      sm      | --nypl-breakpoint-small   | 20em/320px
+ *      md      | --nypl-breakpoint-medium  | 38em/600px
+ *      lg      | --nypl-breakpoint-large   | 60em/960px
+ *      xl      | --nypl-breakpoint-xl      | 80em/1280px
+ *     2xl      |        N/A                | 96em/1536px
  *
  * @Note Chakra provides a 2xl option while the DS does not. We don't
  * recommend using this value until further notice.

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

@@ -6,12 +6,14 @@
  */
 declare const global: {
     body: {
+        boxSizing: string;
         bg: string;
         color: string;
         fontFamily: string;
-        fontSize: number;
+        fontSize: string;
         fontWeight: string;
         lineHeight: string;
+        overflowX: string;
     };
     a: {
         color: string;
@@ -19,5 +21,8 @@ declare const global: {
     svg: {
         display: string;
     };
+    p: {
+        margin: string;
+    };
 };
 export default global;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.25.3",
+  "version": "0.25.7",
   "description": "Design System React Components",
   "repository": {
     "type": "git",
@@ -34,23 +34,19 @@
     "generate-sass-resources": "gulp",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "npm run prebuild:storybook && build-storybook -c .storybook -o ./storybook-static",
-    "prebuild:storybook": "npm run test:generate-output",
-    "stylelint": "stylelint \"**/*.scss\""
+    "prebuild:storybook": "npm run test:generate-output"
   },
   "dependencies": {
-    "@chakra-ui/react": "1.6.8",
-    "@chakra-ui/system": "1.7.3",
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.3.0",
-    "@mdx-js/react": "^1.6.22",
-    "cpy-cli": "^3.1.1",
-    "framer-motion": "^4.1.17",
-    "he": "^1.2.0",
+    "@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",
+    "he": "1.2.0",
     "react-datepicker": "4.1.1",
-    "react-uid": "^2.3.0",
-    "system-font-css": "^2.0.2",
-    "typescript": "^4.3.5",
-    "uuid": "^8.3.2"
+    "system-font-css": "2.0.2",
+    "typescript": "4.3.5",
+    "uuid": "8.3.2"
   },
   "peerDependencies": {
     "react": ">=16.13.0",
@@ -78,78 +74,70 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@size-limit/preset-small-lib": "^5.0.1",
-    "@storybook/addon-a11y": "^6.2.9",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-docs": "^6.2.9",
-    "@storybook/addon-essentials": "^6.3.2",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-jest": "^6.3.6",
-    "@storybook/addon-knobs": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
+    "@babel/core": "7.14.6",
+    "@mdx-js/react": "1.6.22",
+    "@size-limit/preset-small-lib": "5.0.1",
+    "@storybook/addon-a11y": "6.4.8",
+    "@storybook/addon-actions": "6.4.8",
+    "@storybook/addon-docs": "6.4.8",
+    "@storybook/addon-essentials": "6.4.8",
+    "@storybook/addon-jest": "6.4.8",
+    "@storybook/addon-links": "6.4.8",
     "@storybook/addon-queryparams": "6.2.9",
-    "@storybook/addons": "^6.3.2",
-    "@storybook/react": "^6.3.2",
-    "@svgr/rollup": "^5.5.0",
-    "@svgr/webpack": "^5.5.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/user-event": "^13.2.1",
+    "@storybook/addons": "6.4.8",
+    "@storybook/react": "6.4.8",
+    "@svgr/rollup": "5.5.0",
+    "@svgr/webpack": "5.5.0",
+    "@testing-library/jest-dom": "5.14.1",
+    "@testing-library/react": "12.0.0",
+    "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/user-event": "13.2.1",
     "@types/jest": "26.0.20",
-    "@types/jest-axe": "3.5.1",
-    "@types/jsdom": "^12.2.4",
-    "@types/node": "^12.7.12",
-    "@types/react": "^16.9.5",
-    "@types/testing-library__jest-dom": "^5.14.1",
-    "@typescript-eslint/eslint-plugin": "^4.12.0",
-    "@typescript-eslint/parser": "^4.12.0",
-    "autoprefixer": "^9.8.6",
-    "babel-loader": "^8.2.2",
-    "breakpoint-sass": "^2.7.1",
-    "css-loader": "^5.2.7",
-    "cssnano": "^5.0.7",
-    "eslint": "^7.31.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.8.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "gulp": "^4.0.2",
-    "gulp-scss-combine": "^1.0.0",
-    "husky": "^4.2.5",
-    "import-glob-loader": "^1.1.0",
-    "jest": "^27.0.6",
-    "jest-axe": "4.1.0",
-    "jsdom": "^15.2.1",
-    "node-sass": "^4.14.1",
-    "node-sass-glob-importer": "^5.3.2",
-    "normalize.css": "^8.0.1",
+    "@types/jest-axe": "3.5.3",
+    "@types/jsdom": "12.2.4",
+    "@types/node": "12.7.12",
+    "@types/react": "16.14.21",
+    "@types/testing-library__jest-dom": "5.14.1",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
+    "autoprefixer": "9.8.6",
+    "babel-loader": "8.2.2",
+    "breakpoint-sass": "2.7.1",
+    "css-loader": "5.2.7",
+    "cssnano": "5.0.7",
+    "eslint": "7.31.0",
+    "eslint-config-react-app": "6.0.0",
+    "eslint-plugin-flowtype": "5.8.2",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "gulp": "4.0.2",
+    "gulp-scss-combine": "1.0.0",
+    "husky": "4.2.5",
+    "import-glob-loader": "1.1.0",
+    "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",
-    "prettier": "2.1.1",
-    "pretty-quick": "^3.1.1",
+    "prettier": "2.4.1",
+    "pretty-quick": "3.1.1",
     "react": "16.14.0",
-    "react-autosuggest": "^10.0.2",
-    "react-docgen-typescript-loader": "^3.1.0",
+    "react-autosuggest": "10.0.2",
+    "react-docgen-typescript-loader": "3.1.0",
     "react-dom": "16.14.0",
-    "react-is": "^16.13.1",
-    "react-router-dom": "^5.2.0",
-    "react-test-renderer": "^16.14.0",
-    "rollup-plugin-postcss": "^4.0.0",
-    "rollup-plugin-svg": "^2.0.0",
-    "sass": "^1.35.1",
-    "sass-loader": "^8.0.2",
-    "semantic-release-slack-bot": "^2.1.0",
-    "size-limit": "^5.0.1",
-    "storybook-addon-designs": "^5.4.2",
-    "style-loader": "^2.0.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-recommended": "^3.0.0",
-    "stylelint-order": "^4.1.0",
-    "stylelint-prettier": "^1.1.2",
-    "stylelint-scss": "^3.18.0",
-    "ts-jest": "^27.0.4",
-    "ts-loader": "^6.2.0",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.3.0"
+    "react-router-dom": "5.2.0",
+    "react-test-renderer": "16.14.0",
+    "rollup-plugin-postcss": "4.0.0",
+    "rollup-plugin-svg": "2.0.0",
+    "sass": "1.35.1",
+    "sass-loader": "10.0.0",
+    "semantic-release-slack-bot": "2.1.0",
+    "size-limit": "5.0.1",
+    "storybook-addon-designs": "6.2.0",
+    "style-loader": "2.0.0",
+    "ts-jest": "27.0.4",
+    "tsdx": "0.14.1",
+    "tslib": "2.3.0"
   }
 }

package/src/__tests__/setup.ts

@@ -12,8 +12,8 @@ const jsdom = new JSDOM("<!doctype html><html><body></body></html>", {
 const { window } = jsdom;
 const exposedProperties = ["window", "navigator", "document"];
 
-global.window = window;
-global.document = window.document;
+(global as any).window = window;
+(global as any).document = window.document;
 Object.keys(document.defaultView).forEach((property) => {
   if (typeof global[property] === "undefined") {
     exposedProperties.push(property);

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

@@ -60,36 +60,32 @@ necessary icon, Chakra components, and styles.
     name="Basic"
     args={{
       isDefaultOpen: false,
+      contentData: [
+        {
+          label: "Tom Nook",
+          panel: (
+            <Card
+              layout={CardLayouts.Row}
+              center
+              imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+              imageAlt="Alt text"
+              imageAspectRatio={ImageRatios.TwoByOne}
+            >
+              <CardHeading level={HeadingLevels.Four} id="heading1">
+                Tom Nook
+              </CardHeading>
+              <CardContent>
+                Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional
+                character in the Animal Crossing series who operates the village
+                store.
+              </CardContent>
+            </Card>
+          ),
+        },
+      ],
     }}
   >
-    {(args) => (
-      <Accordion
-        {...args}
-        contentData={[
-          {
-            label: "Tom Nook",
-            panel: (
-              <Card
-                layout={CardLayouts.Row}
-                center
-                imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
-                imageAlt="Alt text"
-                imageAspectRatio={ImageRatios.TwoByOne}
-              >
-                <CardHeading level={HeadingLevels.Four} id="heading1">
-                  Tom Nook
-                </CardHeading>
-                <CardContent>
-                  Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional
-                  character in the Animal Crossing series who operates the
-                  village store.
-                </CardContent>
-              </Card>
-            ),
-          },
-        ]}
-      />
-    )}
+    {(args) => <Accordion {...args} />}
   </Story>
 </Canvas>
 
@@ -138,7 +134,7 @@ export const faqContent = [
         imageAlt="Alt text"
         imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-tom">
           Tom Nook
         </CardHeading>
         <CardContent>
@@ -158,7 +154,7 @@ export const faqContent = [
         imageAlt="Alt text"
         imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-isabelle">
           Isabelle
         </CardHeading>
         <CardContent>
@@ -180,7 +176,7 @@ export const faqContent = [
         imageAlt="Alt text"
         imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-kkslider">
           K.K. Slider
         </CardHeading>
         <CardContent>
@@ -217,7 +213,7 @@ export const faqContent = [
         imageAlt="Alt text"
         imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-tom">
           Tom Nook
         </CardHeading>
         <CardContent>
@@ -237,7 +233,7 @@ export const faqContent = [
         imageAlt="Alt text"
         imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-isabelle">
           Isabelle
         </CardHeading>
         <CardContent>
@@ -259,7 +255,7 @@ export const faqContent = [
         imageAlt="Alt text"
         imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-kkslider">
           K.K. Slider
         </CardHeading>
         <CardContent>

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

@@ -1,4 +1,4 @@
-import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
 import Autosuggest from "react-autosuggest";
 import * as stories from "./Autosuggest.stories.tsx";
 import { getCategory } from "../../utils/componentCategories";
@@ -19,9 +19,9 @@ every input element. Since the suggestion dropdown will appear on top of page co
 we've added a min-height to make it easier to see the dropdown. This is for demonstration
 purposes only and you will not need to do this in your application.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story name="Basic" story={stories.AutosuggestLibrary} />
-</Preview>
+</Canvas>
 
 ## With custom icons
 

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

@@ -99,6 +99,7 @@ const LibraryExample = ({ renderInputComponent }) => {
   const renderSuggestion = (suggestion) => <span>{suggestion.label}</span>;
   // Autosuggest will pass through all these props to the Input component.
   const inputProps = {
+    "aria-label": "Home Library",
     placeholder: "Type a library name",
     value,
     onChange,

package/src/components/Autosuggest/_Autosuggest.scss

@@ -25,11 +25,11 @@
 }
 
 .react-autosuggest__suggestions-container--open {
-  background-color: var(--ui-white);
+  background-color: var(--nypl-colors-ui-white);
   display: block;
   font-weight: 300;
   margin-top: -6px; // accounts for the focus ring on the input
-  outline: 1px solid var(--ui-gray-light-cool);
+  outline: 1px solid var(--nypl-colors-ui-gray-light-cool);
   position: absolute;
   width: 100%;
   z-index: 2;
@@ -43,13 +43,13 @@
 
 .react-autosuggest__suggestion {
   cursor: pointer;
-  padding: var(--space-xs);
+  padding: var(--nypl-space-xs);
 }
 
 .react-autosuggest__suggestion--highlighted {
-  background-color: var(--ui-gray-light-cool);
+  background-color: var(--nypl-colors-ui-gray-light-cool);
 }
 
 .auto-suggest-bottom {
-  padding: var(--space-xs);
+  padding: var(--nypl-space-xs);
 }

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

@@ -22,14 +22,14 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10766%3A1031",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10766%3A1031",
     },
     jest: ["Breadcrumbs.test.tsx"],
   }}
   argTypes={{
-    id: { table: { disable: true } },
+    additionalStyles: { control: false },
     className: { table: { disable: true } },
+    id: { table: { disable: true } },
   }}
 />
 
@@ -38,7 +38,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.3`    |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.6`   |
 
 <Description of={Breadcrumbs} />
 
@@ -76,8 +76,7 @@ The `Breadcrumbs` component is a navigation element that provides a breadcrumb p
         },
         {
           url: "#",
-          text:
-            "Great-Grandchild with the Longest Name That Will Wrap onto the Second Line of the Breadcrumb Component Under the Right Circumstances",
+          text: "Great-Grandchild with the Longest Name That Will Wrap onto the Second Line of the Breadcrumb Component Under the Right Circumstances",
         },
       ]}
     />
@@ -92,12 +91,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" },
@@ -114,6 +113,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>