@nypl/design-system-react-components 1.0.2 → 1.0.4

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

@@ -104,6 +104,7 @@ declare const CustomImage: {
     baseStyle: ({ size }: CustomImageBaseStyle) => {
         figure: {
             img: {
+                backgroundColor: string;
                 marginBottom: string;
             };
             maxWidth: string;
@@ -111,6 +112,7 @@ declare const CustomImage: {
             width: string;
         } | {
             img: {
+                backgroundColor: string;
                 marginBottom: string;
             };
             maxWidth: string;
@@ -120,6 +122,7 @@ declare const CustomImage: {
             width: string;
         } | {
             img: {
+                backgroundColor: string;
                 marginBottom: string;
             };
             maxWidth: string;
@@ -129,6 +132,7 @@ declare const CustomImage: {
             width: string;
         } | {
             img: {
+                backgroundColor: string;
                 marginBottom: string;
             };
             maxWidth: string;
@@ -138,6 +142,7 @@ declare const CustomImage: {
             width: string;
         } | {
             img: {
+                backgroundColor: string;
                 marginBottom: string;
             };
             maxWidth: string;
@@ -147,6 +152,7 @@ declare const CustomImage: {
             width: string;
         } | {
             img: {
+                backgroundColor: string;
                 marginBottom: string;
             };
             maxWidth: string;
@@ -162,6 +168,7 @@ declare const CustomImage: {
         img: {
             maxWidth: string;
             display: string;
+            backgroundColor: string;
             boxSizing: string;
             objectFit: string;
             position: string;
@@ -171,6 +178,7 @@ declare const CustomImage: {
             marginLeft: string;
             marginRight: string;
             display: string;
+            backgroundColor: string;
             boxSizing: string;
             objectFit: string;
             position: string;
@@ -180,6 +188,7 @@ declare const CustomImage: {
             marginLeft: string;
             marginRight: string;
             display: string;
+            backgroundColor: string;
             boxSizing: string;
             objectFit: string;
             position: string;
@@ -189,6 +198,7 @@ declare const CustomImage: {
             marginLeft: string;
             marginRight: string;
             display: string;
+            backgroundColor: string;
             boxSizing: string;
             objectFit: string;
             position: string;
@@ -198,6 +208,7 @@ declare const CustomImage: {
             marginLeft: string;
             marginRight: string;
             display: string;
+            backgroundColor: string;
             boxSizing: string;
             objectFit: string;
             position: string;
@@ -207,6 +218,7 @@ declare const CustomImage: {
             marginLeft: string;
             marginRight: string;
             display: string;
+            backgroundColor: string;
             boxSizing: string;
             objectFit: string;
             position: string;
@@ -269,6 +281,7 @@ declare const CustomImageWrapper: {
             overflow: string;
         };
         img: {
+            backgroundColor: string;
             height: string;
             left: string;
             maxWidth: string;
@@ -330,6 +343,7 @@ declare const CustomImageWrapper: {
             overflow: string;
         };
         img: {
+            backgroundColor: string;
             height: string;
             left: string;
             maxWidth: string;
@@ -391,6 +405,7 @@ declare const CustomImageWrapper: {
             overflow: string;
         };
         img: {
+            backgroundColor: string;
             height: string;
             left: string;
             maxWidth: string;
@@ -452,6 +467,7 @@ declare const CustomImageWrapper: {
             overflow: string;
         };
         img: {
+            backgroundColor: string;
             height: string;
             left: string;
             maxWidth: string;
@@ -513,6 +529,7 @@ declare const CustomImageWrapper: {
             overflow: string;
         };
         img: {
+            backgroundColor: string;
             height: string;
             left: string;
             maxWidth: string;
@@ -574,6 +591,7 @@ declare const CustomImageWrapper: {
             overflow: string;
         };
         img: {
+            backgroundColor: string;
             height: string;
             left: string;
             maxWidth: string;

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

@@ -8,6 +8,7 @@ declare const Radio: {
             border: string;
             borderRadius: string;
             borderColor: string;
+            backgroundColor: string;
             color: string;
             outline: string;
             _checked: {
@@ -80,6 +81,14 @@ declare const Radio: {
                 fontStyle: string;
             };
         };
+        hiddenLabel: {
+            clip: string;
+            height: string;
+            overflow: string;
+            position: string;
+            width: string;
+            wordWrap: string;
+        };
     };
     sizes: {
         md: {

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

@@ -11,7 +11,13 @@ declare const SearchBar: {
             md: string;
         };
         select: {
+            flexShrink: string;
             marginBottom: string;
+            maxWidth: {
+                base: any;
+                md: string;
+            };
+            textOverflow: string;
         };
     };
 };

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

@@ -26,6 +26,10 @@ declare const Select: {
             borderRadius: string;
             borderColor: string;
             fontSize: string;
+            minHeight: {
+                base: string;
+                md: string;
+            };
             paddingTop: string;
             paddingRight: string;
             paddingBottom: string;
@@ -72,11 +76,6 @@ declare const Select: {
                 borderRightRadius: {
                     md: string;
                 };
-                _hover: {
-                    borderRightColor: {
-                        md: string;
-                    };
-                };
             };
         };
     };

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

@@ -179,46 +179,146 @@ declare const StructuredContent: {
         table: {
             width: string;
             th: {
-                border: string;
-                borderBottom: string;
                 color: string;
-                fontSize: string;
                 fontWeight: string;
-                letterSpacing: string;
-                paddingLeft: number;
-                paddingRight: string;
                 textTransform: string;
                 _first: {
-                    paddingLeft: string;
+                    paddingLeft: {
+                        base: string;
+                        md: string;
+                    };
+                };
+                border: string;
+                borderBottom: string;
+                borderColor: {
+                    base: string;
+                    md: string;
+                };
+                display: {
+                    base: string;
+                    md: string;
+                };
+                fontSize: {
+                    base: string;
+                    lg: string;
+                };
+                gap: string;
+                letterSpacing: string;
+                lineHeight: number;
+                paddingBottom: {
+                    base: string;
+                    md: string;
+                };
+                paddingLeft: number;
+                paddingRight: {
+                    base: string;
+                    md: string;
+                };
+                paddingTop: {
+                    base: string;
+                    md: string;
                 };
                 _last: {
+                    paddingRight: {
+                        base: string;
+                        md: string;
+                    };
+                    borderBottom: string;
+                    borderColor: {
+                        base: string;
+                        md: string;
+                    };
+                };
+                "> span": {
+                    flexBasis: string;
+                    paddingBottom: {
+                        base: string;
+                        md: string;
+                    };
                     paddingRight: string;
+                    paddingTop: {
+                        base: string;
+                        md: string;
+                    };
+                    _first: {
+                        bg: string;
+                        color: string;
+                        fontWeight: string;
+                        paddingLeft: string;
+                    };
                 };
                 textAlign: string;
                 paddingInlineStart: string;
                 paddingInlineEnd: string;
-                paddingTop: string;
-                paddingBottom: string;
-                lineHeight: string;
             };
             td: {
+                _first: {
+                    paddingLeft: {
+                        base: string;
+                        md: string;
+                    };
+                };
+                _last: {
+                    borderBottom: {
+                        base: number;
+                        md: string;
+                    };
+                    borderColor: {
+                        base: string;
+                        md: string;
+                    };
+                };
                 border: string;
                 borderBottom: string;
+                borderColor: {
+                    base: string;
+                    md: string;
+                };
+                display: {
+                    base: string;
+                    md: string;
+                };
+                fontSize: {
+                    base: string;
+                    lg: string;
+                };
+                gap: string;
                 letterSpacing: string;
+                lineHeight: number;
+                paddingBottom: {
+                    base: string;
+                    md: string;
+                };
                 paddingLeft: number;
-                paddingRight: string;
-                _first: {
-                    paddingLeft: string;
+                paddingRight: {
+                    base: string;
+                    md: string;
                 };
-                _last: {
+                paddingTop: {
+                    base: string;
+                    md: string;
+                };
+                "> span": {
+                    flexBasis: string;
+                    paddingBottom: {
+                        base: string;
+                        md: string;
+                    };
                     paddingRight: string;
+                    paddingTop: {
+                        base: string;
+                        md: string;
+                    };
+                    _first: {
+                        bg: string;
+                        color: string;
+                        fontWeight: string;
+                        paddingLeft: string;
+                    };
                 };
                 textAlign: string;
                 paddingInlineStart: string;
                 paddingInlineEnd: string;
-                paddingTop: string;
-                paddingBottom: string;
-                lineHeight: string;
             };
         };
     };

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

@@ -80,7 +80,10 @@ declare const _default: {
     };
     TemplateContentSidebar: {
         baseStyle: {
-            flex: string;
+            flex: {
+                base: string;
+                md: string;
+            };
             order: {
                 md: string;
             };

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

@@ -1,13 +1,17 @@
 interface TextBaseStyle {
     isBold: boolean;
     isItalic: boolean;
+    isCapitalized: boolean;
+    isUppercase: boolean;
+    isLowercase: boolean;
     noSpace: boolean;
     variant: string;
 }
 declare const Text: {
-    baseStyle: ({ isBold, isItalic, noSpace, variant }: TextBaseStyle) => {
+    baseStyle: ({ isBold, isItalic, isCapitalized, isUppercase, isLowercase, noSpace, variant, }: TextBaseStyle) => {
         fontStyle: string;
         fontWeight: string;
+        textTransform: string;
         marginBottom: string;
     };
     variants: {

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

@@ -7,6 +7,10 @@ declare const TextInput: {
             borderColor: string;
             borderRadius: string;
             fontSize: string;
+            minHeight: {
+                base: string;
+                md: string;
+            };
             py: string;
             px: string;
             _hover: {

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

@@ -28,6 +28,7 @@ declare const _default: {
             alignItems: string;
             opacity: number;
             track: {
+                backgroundColor: string;
                 border: string;
                 borderColor: string;
                 p: string;

package/dist/theme/provider.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
-declare const DSProvider: ({ children }: React.PropsWithChildren<{}>) => JSX.Element;
+import { ChakraProviderProps } from "@chakra-ui/react";
+declare const DSProvider: ({ children, colorModeManager, }: React.PropsWithChildren<ChakraProviderProps>) => JSX.Element;
 export default DSProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -10,8 +10,7 @@
   "types": "dist/index.d.ts",
   "module": "dist/design-system-react-components.esm.js",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "engines": {
     "node": ">10"
@@ -59,13 +58,14 @@
   "dependencies": {
     "@chakra-ui/react": ">=1.8.5 <=1.8.8",
     "@chakra-ui/system": ">=1.11.0 <=1.12.1",
+    "@charlietango/use-native-lazy-loading": "1.10.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",
+    "react-intersection-observer": "9.2.2",
     "system-font-css": "2.0.2",
-    "typescript": "4.3.5"
+    "typescript": "*"
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=1.8.5 <=1.8.8",
@@ -74,21 +74,22 @@
     "@emotion/styled": ">=11.3.0",
     "framer-motion": "^4.1.17",
     "react": ">=16.13.0",
-    "react-dom": ">=16.13.0"
+    "react-dom": ">=16.13.0",
+    "typescript": "*"
   },
   "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",
-    "@storybook/addon-actions": "6.4.19",
-    "@storybook/addon-docs": "6.4.19",
-    "@storybook/addon-essentials": "6.4.19",
-    "@storybook/addon-jest": "6.4.19",
-    "@storybook/addon-links": "6.4.19",
-    "@storybook/addons": "6.4.19",
-    "@storybook/react": "6.4.19",
+    "@storybook/addon-a11y": "6.5.7",
+    "@storybook/addon-actions": "6.5.7",
+    "@storybook/addon-docs": "6.5.7",
+    "@storybook/addon-essentials": "6.5.7",
+    "@storybook/addon-jest": "6.5.7",
+    "@storybook/addon-links": "6.5.7",
+    "@storybook/addons": "6.5.7",
+    "@storybook/react": "6.5.7",
     "@svgr/rollup": "5.5.0",
     "@svgr/webpack": "5.5.0",
     "@testing-library/jest-dom": "5.14.1",
@@ -112,7 +113,7 @@
     "eslint-config-react-app": "6.0.0",
     "eslint-plugin-flowtype": "5.8.2",
     "eslint-plugin-react-hooks": "4.2.0",
-    "eslint-plugin-storybook": "^0.5.6",
+    "eslint-plugin-storybook": "0.5.12",
     "gulp": "4.0.2",
     "gulp-concat": "^2.6.1",
     "husky": "^7.0.4",
@@ -133,7 +134,6 @@
     "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.1",
     "style-loader": "2.0.0",

package/src/__tests__/fileMock.ts

@@ -1,6 +0,0 @@
-/**
- * This file is use to mock asset imports in TSX files, mostly
- * used in our case to mock SVG files.
- */
-
-module.exports = "div";

package/src/__tests__/setup.ts

@@ -1,27 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-import "@testing-library/jest-dom";
-// Import this to be able to call this jest-axe assertion for all test files:
-// expect(...).toHaveNoViolations();
-import "jest-axe/extend-expect";
-
-const { JSDOM } = require("jsdom");
-
-const jsdom = new JSDOM("<!doctype html><html><body></body></html>", {
-  url: "http://localhost",
-});
-const { window } = jsdom;
-const exposedProperties = ["window", "navigator", "document"];
-
-(global as any).window = window;
-(global as any).document = window.document;
-Object.keys((document as Document).defaultView).forEach((property) => {
-  if (typeof (global as any)[property] === "undefined") {
-    exposedProperties.push(property);
-    (global as any)[property] = (document as any).defaultView[property];
-  }
-});
-
-// We expect an error to be thrown and we do catch, but it still gets
-// logged and we don't want to see expected errors while we test.
-jest.spyOn(global.console, "error").mockImplementation(() => jest.fn());
-jest.spyOn(global.console, "warn").mockImplementation(() => jest.fn());

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

@@ -1,18 +0,0 @@
-import { range } from "../../utils/utils";
-
-describe("range", () => {
-  it("returns an array of values not including the stop argument", () => {
-    expect(range(1, 2)).toEqual([1]);
-    expect(range(4, 7)).toEqual([4, 5, 6]);
-    expect(range(2, 9)).toEqual([2, 3, 4, 5, 6, 7, 8]);
-  });
-
-  it("returns an array of values skipping by the step argument", () => {
-    expect(range(1, 10, 2)).toEqual([1, 3, 5, 7, 9]);
-    expect(range(4, 8, 3)).toEqual([4, 7]);
-    expect(range(2, 20, 2)).toEqual([2, 4, 6, 8, 10, 12, 14, 16, 18]);
-    expect(range(2, 20, 4)).toEqual([2, 6, 10, 14, 18]);
-    expect(range(2, 6, 2)).toEqual([2, 4]);
-    expect(range(2, 20, 5)).toEqual([2, 7, 12, 17]);
-  });
-});

package/src/components/AccessibilityGuide/SkipNavigation.stories.mdx

@@ -1,42 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-
-import { getCategory } from "../../utils/componentCategories";
-
-<Meta title={getCategory("Skip Navigation")} />
-
-# Skip Navigation
-
-| Table of Contents                              |
-| ---------------------------------------------- |
-| 1. [General Information](#general-information) |
-| 2. [Resources](#resources)                     |
-
-## General Information
-
-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
-
-- [WebAim Skip Navigation Link](https://webaim.org/techniques/skipnav/)
-- [A11ymatters Skip Navigation Link](https://www.a11ymatters.com/pattern/skip-link/)