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

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

@@ -5,6 +5,57 @@ declare const StructuredContent: {
         imageAspectRatio: any;
         imagePosition: any;
     }) => {
+        h1: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            marginBottom: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+        };
+        h2: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            marginBottom: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        h3: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            marginBottom: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        h4: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            marginBottom: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        fallback: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            marginBottom: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
         imageFigure: {
             marginBottom: string;
             maxWidth?: string;
@@ -28,6 +79,152 @@ declare const StructuredContent: {
             marginRight: string[];
             marginBottom: string;
         };
+        /** The following styles are meant to target HTML elements that are
+         * not rendered from the Reservoir DS. Typically, these HTML elements
+         * are added from an API response.
+         */
+        ".structuredcontent-body > div": {
+            marginTop: string;
+            marginInlineEnd: string;
+            marginBottom: string;
+            marginInlineStart: string;
+        };
+        a: {
+            color: string;
+            textDecoration: string;
+            _hover: {
+                color: string;
+            };
+        };
+        ul: {
+            listStyle: string;
+            li: {
+                _before: {
+                    color: string;
+                    content: string;
+                    display: string;
+                    fontWeight: string;
+                    fontSize: string;
+                    lineHeight: string;
+                    marginLeft: string;
+                    width: string;
+                };
+            };
+            margin: string;
+            marginBottom: string;
+            marginInlineStart: string;
+            paddingLeft: string;
+            padding: string;
+            display: string;
+        };
+        ol: {
+            margin: string;
+            marginBottom: string;
+            listStyle: string;
+            marginInlineStart: string;
+            paddingLeft: string;
+            padding: string;
+            display: string;
+            li: {
+                marginRight: string;
+                listStyleType: string;
+                _notFirst: {
+                    marginTop: string;
+                };
+            };
+        };
+        section: {
+            borderBottom: string;
+            borderColor: string;
+            paddingLeft: string;
+            h2: {
+                borderTop: string;
+                borderColor: string;
+                margin: string;
+                padding: string;
+            };
+        };
+        dl: {
+            display: string;
+            gridTemplateColumns: {
+                base: string;
+                md: string;
+            };
+            gridTemplateRows: string;
+            margin: string;
+        };
+        dt: {
+            borderTop: string;
+            borderColor: string;
+            fontWeight: string;
+            paddingBottom: {
+                base: string;
+                md: string;
+            };
+            paddingTop: string;
+            paddingRight: {
+                md: string;
+            };
+        };
+        dd: {
+            margin: string;
+            paddingBottom: string;
+            borderTop: {
+                base: string;
+                md: string;
+            };
+            borderColor: {
+                md: string;
+            };
+            paddingTop: {
+                md: string;
+            };
+        };
+        table: {
+            width: string;
+            th: {
+                border: string;
+                borderBottom: string;
+                color: string | true;
+                fontSize: string;
+                fontWeight: string;
+                letterSpacing: string;
+                paddingLeft: number;
+                paddingRight: string;
+                textTransform: string;
+                _first: {
+                    paddingLeft: string;
+                };
+                _last: {
+                    paddingRight: string;
+                };
+                textAlign: string;
+                paddingInlineStart: string;
+                paddingInlineEnd: string;
+                paddingTop: string;
+                paddingBottom: string;
+                lineHeight: string;
+            };
+            td: {
+                border: string;
+                borderBottom: string;
+                letterSpacing: string;
+                paddingLeft: number;
+                paddingRight: string;
+                _first: {
+                    paddingLeft: string;
+                };
+                _last: {
+                    paddingRight: string;
+                };
+                textAlign: string;
+                paddingInlineStart: string;
+                paddingInlineEnd: string;
+                paddingTop: string;
+                paddingBottom: string;
+                lineHeight: string;
+            };
+        };
     };
 };
 export default StructuredContent;

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

@@ -1,10 +1,6 @@
 declare const TextInput: {
     parts: string[];
     baseStyle: {
-        helper: {
-            marginTop: string;
-            marginBottom: string;
-        };
         input: {
             bgColor: string;
             border: string;
@@ -17,23 +13,29 @@ declare const TextInput: {
                 borderColor: string;
             };
             _disabled: {
-                bgColor: string;
+                _placeholder: {
+                    color: string;
+                };
+                bg: string;
+                borderColor: string;
                 color: string;
                 opacity: string;
             };
             _active: {
-                border: string;
                 borderColor: string;
-                zIndex: string;
+                boxShadow: string;
                 outline: string;
+                outlineOffset: string;
                 outlineColor: string;
+                zIndex: string;
             };
             _focus: {
-                border: string;
                 borderColor: string;
-                zIndex: string;
+                boxShadow: string;
                 outline: string;
+                outlineOffset: string;
                 outlineColor: string;
+                zIndex: string;
             };
             _placeholder: {
                 color: string;
@@ -60,23 +62,29 @@ declare const TextInput: {
                 borderColor: string;
             };
             _disabled: {
-                bgColor: string;
+                _placeholder: {
+                    color: string;
+                };
+                bg: string;
+                borderColor: string;
                 color: string;
                 opacity: string;
             };
             _active: {
-                border: string;
                 borderColor: string;
-                zIndex: string;
+                boxShadow: string;
                 outline: string;
+                outlineOffset: string;
                 outlineColor: string;
+                zIndex: string;
             };
             _focus: {
-                border: string;
                 borderColor: string;
-                zIndex: string;
+                boxShadow: string;
                 outline: string;
+                outlineOffset: string;
                 outlineColor: string;
+                zIndex: string;
             };
             _placeholder: {
                 color: string;

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

@@ -1,16 +1,18 @@
 declare const _default: {
     Toggle: {
         parts: string[];
-        baseStyle: {
+        baseStyle: ({ isDisabled, size }: {
+            isDisabled: any;
+            size: any;
+        }) => {
             label: {
-                display: string;
                 alignItems: string;
+                display: string;
                 width: string;
             };
-            helper: {
+            helperErrorText: {
                 marginLeft: string;
-                marginTop: string;
-                marginBottom: string;
+                fontStyle: string;
             };
         };
         defaultProps: {
@@ -18,7 +20,10 @@ declare const _default: {
         };
     };
     Switch: {
-        baseStyle: {
+        baseStyle: ({ size }: {
+            size: string;
+        }) => {
+            alignItems: string;
             opacity: number;
             track: {
                 border: string;
@@ -53,7 +58,9 @@ declare const _default: {
             label: {
                 fontSize: string;
                 marginLeft: string;
+                marginTop: string;
                 _disabled: {
+                    color: string;
                     fontStyle: string;
                 };
             };
@@ -63,6 +70,18 @@ declare const _default: {
                 };
             };
         };
+        sizes: {
+            sm: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+            lg: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+        };
         defaultProps: {
             colorScheme: string;
         };

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

@@ -1,8 +1,6 @@
 /**
  * These rules affect all the global elements on the `body` element of the
- * page when the `DSProvider` component is used. This means that even if the
- * `nypl-ds` CSS class name is not used in a consuming application, these
- * rules will still take effect.
+ * page when the `DSProvider` component is used.
  */
 declare const global: {
     body: {
@@ -21,8 +19,40 @@ declare const global: {
     svg: {
         display: string;
     };
+    "button, select, input, textarea": {
+        "&:not([disabled])": {
+            _focus: {
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+                outlineColor: string;
+                zIndex: string;
+            };
+        };
+    };
+    "iframe, [href], [tabindex], [contentEditable='true']": {
+        _focus: {
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+            outlineColor: string;
+            zIndex: string;
+        };
+    };
     p: {
         margin: string;
+        marginBottom: string;
+    };
+    ul: {
+        margin: string;
+        marginBottom: string;
+    };
+    ol: {
+        margin: string;
+        marginBottom: string;
+    };
+    "*, *::before, &::after": {
+        boxSizing: string;
     };
 };
 export default global;

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

@@ -1,4 +1,5 @@
 declare const radii: {
+    checkbox: string;
     pill: string;
     round: string;
 };

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

@@ -1,67 +1,70 @@
-/**
- * This is based on:
- *   root size of 16px or 1rem
- *   1 spacing unit is 4px or 0.25rem
- *
- * Chakra's mental model: If you need a spacing of 40px, divide it by 4.
- * That'll give you 10. Then use it in your component.
- *
- * The DS uses eight CSS variables/values found in "src/styles/03-space/_space.css":
- *   --nypl-space-xxs = 4px or 0.25rem
- *   --nypl-space-xs = 8px or 0.5rem
- *   --nypl-space-s = 16px or 1rem
- *   --nypl-space-m = 24px or 1.5rem
- *   --nypl-space-l = 32px or 2rem
- *   --nypl-space-xl = 48px or 3rem
- *   --nypl-space-xxl = 64px or 4rem
- *   --nypl-space-xxxl = 96px or 6rem
- *
- * @note Even though all the following values are available through Chakra,
- * we recommend to only use the spacing values that map to the DS values
- * declared above.
- *
- * 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
- *        6            |         m         |   --nypl-space-m
- *        8            |         l         |   --nypl-space-l
- *        12           |         xl        |   --nypl-space-xl
- *        16           |         xxl       |   --nypl-space-xxl
- *        24           |         xxxl      |   --nypl-space-xxxl
- */
 export declare const spacing: {
+    xxxs: string;
+    xxs: string;
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+    input: {
+        group: {
+            button: {
+                hstack: string;
+                vstack: string;
+            };
+            default: {
+                hstack: string;
+                vstack: string;
+            };
+        };
+    };
+    inset: {
+        default: string;
+        extranarrow: string;
+        extrawide: string;
+        narrow: string;
+        wide: string;
+    };
+    grid: {
+        default: string;
+        xxs: string;
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        xxl: string;
+    };
+    page: {
+        hstack: string;
+        vstack: string;
+    };
+    table: {
+        column: string;
+        row: string;
+    };
     px: string;
     0: string;
-    xxxs: string;
     0.5: string;
-    xxs: string;
     1: string;
     1.5: string;
-    xs: string;
     2: string;
     2.5: string;
     3: string;
     3.5: string;
-    s: string;
     4: string;
     5: string;
-    m: string;
     6: string;
     7: string;
-    l: string;
     8: string;
     9: string;
     10: string;
-    xl: string;
     12: string;
     14: string;
-    xxl: string;
     16: string;
     20: string;
-    xxxl: string;
     24: string;
     28: string;
     32: string;

package/dist/utils/utils.d.ts

@@ -20,3 +20,13 @@ 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) => {
+    computedCurrentPage: number;
+    getPageHref: (selectedPage: any) => string;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.25.11",
-  "description": "Design System React Components",
+  "version": "0.26.0",
+  "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
     "url": "https://github.com/NYPL/nypl-design-system/"
@@ -32,8 +32,8 @@
     "size": "size-limit",
     "analyze": "size-limit --why",
     "generate-sass-resources": "gulp",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "npm run prebuild:storybook && build-storybook -c .storybook -o ./storybook-static",
+    "storybook": "start-storybook -p 6006 -s ./.storybook/public",
+    "build-storybook:v0_26": "npm run prebuild:storybook && build-storybook -c .storybook -o ./reservoir/v0_26",
     "prebuild:storybook": "npm run test:generate-output"
   },
   "lint-staged": {
@@ -65,8 +65,7 @@
     "he": "1.2.0",
     "react-datepicker": "4.1.1",
     "system-font-css": "2.0.2",
-    "typescript": "4.3.5",
-    "uuid": "8.3.2"
+    "typescript": "4.3.5"
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=1.7.1",

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

@@ -0,0 +1,34 @@
+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 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.
+
+## Resources
+
+- [WebAim Skip Navigation Link](https://webaim.org/techniques/skipnav/)
+- [A11ymatters Skip Navigation Link](https://www.a11ymatters.com/pattern/skip-link/)