@nypl/design-system-react-components 1.6.0-vite-rc → 1.6.0-vite-rc-2

package/dist/src/components/TagSet/TagSetFilter.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconNames } from "../Icons/Icon";
 export interface TagSetFilterDataProps {
     /** The name of the SVG `Icon` to render before the tag label. */
@@ -22,5 +21,5 @@ export interface TagSetFilterProps {
  * The "filter" `TagSet` variant will display tags that can be removed when
  * `isDismissible` is true and they are clicked.
  */
-export declare const TagSetFilter: import("@chakra-ui/react").ChakraComponent<(props: TagSetFilterProps) => JSX.Element, {}>;
+export declare const TagSetFilter: import("@chakra-ui/react").ChakraComponent<(props: TagSetFilterProps) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
 export default TagSetFilter;

package/dist/src/components/TagSet/TooltipWrapper.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * This helper component wrapper renders a DS `Tooltip` component if the text is
+ * long or a React fragment. This assumes that the `label` prop is a rather
+ * simple single root JSX element, such as `<Link ...>....</Link>`.
+ */
+export declare const TooltipWrapper: ({ label, children, }: React.PropsWithChildren<{
+    label: any;
+}>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/src/components/Template/Template.d.ts

@@ -25,11 +25,11 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
     aboveHeader?: React.ReactElement;
     /** DOM that will be rendered in the `TemplateBreakout` component section. */
     breakout?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateContentBottom` component section. */
+    contentBottom?: React.ReactElement;
     /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
      * anchor for the application skip navigation. */
     contentId?: string;
-    /** DOM that will be rendered in the `TemplateContentBottom` component section. */
-    contentBottom?: React.ReactElement;
     /** DOM that will be rendered in the `TemplateContentPrimary` component section. */
     contentPrimary?: React.ReactElement;
     /** DOM that will be rendered in the `TemplateContentSidebar` component section. */
@@ -58,7 +58,7 @@ declare const Template: import("@chakra-ui/react").ChakraComponent<React.Forward
  * `role="complementary"` attribute. These elements should *not* be rendered
  * in the `header` HTML section since that's an accessibility violation.
  */
-declare const TemplateAboveHeader: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+declare const TemplateAboveHeader: (props: React.PropsWithChildren<TemplateProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * This optional component should be the first child of the `Template`
  * component. This is rendered as an HTML `<header>` element. If an HTML
@@ -66,14 +66,14 @@ declare const TemplateAboveHeader: (props: React.PropsWithChildren<TemplateProps
  * set `renderFooterElement` to `false`. Otherwise, the parent wrapper will
  * render an HTML `<header>` element.
  */
-declare const TemplateHeader: ({ children, renderHeaderElement, }: React.PropsWithChildren<TemplateHeaderProps>) => JSX.Element;
+declare const TemplateHeader: ({ children, renderHeaderElement, }: React.PropsWithChildren<TemplateHeaderProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * This component should be used inside the `Template` component to contain both
  * the `TemplateAboveHeader` and `TemplateHeader` components. This is meant to
  * render its children from edge to edge and is most useful for the headers,
  * `Breadcrumbs`, and `Hero` components or other banner-like components.
  */
-declare const TemplateBreakout: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+declare const TemplateBreakout: (props: React.PropsWithChildren<TemplateProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * This component is most useful to render content on the page. This renders an
  * HTML `<main>` element with an id of "mainContent". The "mainContent" id should
@@ -84,20 +84,20 @@ declare const TemplateBreakout: (props: React.PropsWithChildren<TemplateProps>)
  * and `TemplateContentSidebar` must be ordered correctly as children elements
  * for the appropriate styles to take effect.
  */
-declare const TemplateContent: (props: React.PropsWithChildren<TemplateContentProps>) => JSX.Element;
+declare const TemplateContent: (props: React.PropsWithChildren<TemplateContentProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * This optional component must be used inside the `TemplateContent` component.
  * This renders content in the main width of the container and will always render
  * above the primary component and the sidebar component (if any).
  */
-declare const TemplateContentTop: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+declare const TemplateContentTop: (props: React.PropsWithChildren<TemplateProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * This optional component must be used inside the `TemplateContent` component
  * and after the `TemplateContentPrimary` or `TemplateContentSidebar` component.
  * This renders content in the main width of the container and should always
  * render below the primary component and the sidebar component (if any).
  */
-declare const TemplateContentBottom: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+declare const TemplateContentBottom: (props: React.PropsWithChildren<TemplateProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * This component is used to render content in a column when there must be a
  * sidebar component on either its left or right side. It must go inside the
@@ -106,7 +106,7 @@ declare const TemplateContentBottom: (props: React.PropsWithChildren<TemplatePro
  * prop is used in the `TemplateContent` component, there is no need to pass
  * the `sidebar` prop to this component -- `TemplateContent` will handle it.
  */
-declare const TemplateContentPrimary: (props: React.PropsWithChildren<TemplateContentProps>) => JSX.Element;
+declare const TemplateContentPrimary: (props: React.PropsWithChildren<TemplateContentProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * This component is used to render content in a sidebar column. It must go
  * inside the `TemplateContent` component and must be paired with the
@@ -118,14 +118,14 @@ declare const TemplateContentPrimary: (props: React.PropsWithChildren<TemplateCo
  * component, there is no need to pass the `sidebar` prop to this component --
  * `TemplateContent` will handle it.
  */
-declare const TemplateContentSidebar: (props: React.PropsWithChildren<TemplateContentProps>) => JSX.Element;
+declare const TemplateContentSidebar: (props: React.PropsWithChildren<TemplateContentProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * This optional component should be the last child of the `Template`
  * component. This is rendered as an HTML `<footer>` element and spans the full
  * width of the page. If an HTML `<footer>` element is already passed in a
  * custom component, set `renderFooterElement` to `false`.
  */
-declare const TemplateFooter: ({ children, renderFooterElement, }: React.PropsWithChildren<TemplateFooterProps>) => JSX.Element;
+declare const TemplateFooter: ({ children, renderFooterElement, }: React.PropsWithChildren<TemplateFooterProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * This single component can be used instead of all the individual template
  * components. Instead of importing and rendering the needed "template"

package/dist/src/components/Text/Text.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-export type TextSizes = "caption" | "default" | "mini" | "tag";
+export declare const textSizesArray: readonly ["default", "caption", "tag", "mini"];
+export type TextSizes = typeof textSizesArray[number];
 export interface TextProps {
     /** Additional class name to render in the `Text` component. */
     className?: string;

package/dist/src/components/TextInput/TextInput.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-export type TextInputTypes = "email" | "hidden" | "number" | "password" | "text" | "textarea" | "tel" | "url";
+export declare const textInputTypesArray: readonly ["email", "hidden", "number", "password", "text", "textarea", "tel", "url"];
+export type TextInputTypes = typeof textInputTypesArray[number];
 export declare const TextInputFormats: {
     email: string;
     hidden: string;

package/dist/src/components/Toggle/Toggle.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-export type ToggleSizes = "default" | "small";
+export declare const toggleSizesArray: readonly ["default", "small"];
+export type ToggleSizes = typeof toggleSizesArray[number];
 export interface ToggleProps {
     /** Used for uncontrolled scenarios.  Sets the state of the Toggle when the page first loads.
      *   If true, the toggle will be initially set to the "on" position. */

package/dist/src/components/VideoPlayer/VideoPlayer.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-export type VideoPlayerTypes = "vimeo" | "youtube";
-export type VideoPlayerAspectRatios = "fourByThree" | "sixteenByNine" | "square";
+export declare const VideoPlayerAspectRatiosArray: readonly ["fourByThree", "sixteenByNine", "square"];
+export declare const VideoPlayerTypesArray: readonly ["vimeo", "youtube"];
+export type VideoPlayerAspectRatios = typeof VideoPlayerAspectRatiosArray[number];
+export type VideoPlayerTypes = typeof VideoPlayerTypesArray[number];
 export interface VideoPlayerProps {
     /** Optional aspect ratio prop to control the sizing of the video player; if
      * omitted, the video player defaults to `sixteen-by-nine` */

package/dist/src/helpers/types.d.ts

@@ -1 +1,2 @@
-export type LayoutTypes = "column" | "row";
+export declare const layoutTypesArray: readonly ["column", "row"];
+export type LayoutTypes = typeof layoutTypesArray[number];

package/dist/src/index.d.ts

@@ -17,6 +17,7 @@ export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export type { DatePickerTypes, FullDateType, } from "./components/DatePicker/DatePicker";
 export { default as DSProvider } from "./theme/provider";
 export { default as FeedbackBox, useFeedbackBox, } from "./components/FeedbackBox/FeedbackBox";
+export type { FeedbackBoxViewType } from "./components/FeedbackBox/FeedbackBox";
 export { default as Fieldset } from "./components/Fieldset/Fieldset";
 export { default as FilterBar } from "./components/FilterBar/FilterBar";
 export { default as Footer } from "./components/Footer/Footer";

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

@@ -36,15 +36,9 @@ declare const Breadcrumb: {
             };
             ".chakra-breadcrumb__link": {
                 _hover: {
-                    color: string;
                     cursor: string;
                     textDecoration: string;
                 };
-                _dark: {
-                    _hover: {
-                        color: string;
-                    };
-                };
             };
             ".icon": {
                 display: string;
@@ -99,13 +93,6 @@ declare const Breadcrumb: {
                     };
                 };
             };
-            "li:last-child": {
-                ".chakra-breadcrumb__link": {
-                    _hover: {
-                        color: string;
-                    };
-                };
-            };
             svg: {
                 fill: string;
             };

package/dist/src/theme/provider.d.ts

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

package/dist/src/utils/colorUtils.d.ts

@@ -0,0 +1,5 @@
+/** The checkContrast function returns the status of a contrast ratio based on
+ * the WCAG 2.1 standards.  WCAG Level AA requires a contrast ratio of at least
+ * 4.5:1 for normal text and 3:1 for large text. WCAG Level AAA requires a
+ * contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. */
+export declare const checkContrast: (ratio: any) => any[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "1.6.0-vite-rc",
+  "version": "1.6.0-vite-rc-2",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -18,7 +18,7 @@
       "import": "./dist/design-system-react-components.js",
       "require": "./dist/design-system-react-components.umd.cjs"
     },
-    "./dist/style.css": "./dist/style.css"
+    "./dist/styles.css": "./dist/styles.css"
   },
   "engines": {
     "node": ">=14 <=16"
@@ -37,13 +37,14 @@
     "test:ci": "jest --ci --config=jest.config.js --maxWorkers=2",
     "lint": "eslint src --ext=ts,tsx --cache",
     "prepare": "npm run build && husky install",
-    "storybook": "start-storybook -p 6006 -s ./.storybook/public",
-    "build-storybook:v1": "npm run prebuild:storybook && build-storybook -c .storybook -o ./reservoir/v1",
-    "prebuild:storybook": "npm run test:generate-output"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook:v1": "npm run prebuild:storybook && storybook build -c .storybook -o ./reservoir/v1",
+    "prebuild:storybook": "npm run test:generate-output",
+    "build-storybook": "storybook build"
   },
   "lint-staged": {
     "*.{jsx,ts,tsx}": "eslint src --ext=jsx,ts,tsx --cache --fix",
-    "*.{js,jsx,ts,tsx,css,md}": "prettier --write"
+    "*.{js,jsx,ts,tsx,css}": "prettier --write"
   },
   "prettier": {
     "printWidth": 80,
@@ -82,18 +83,18 @@
   },
   "devDependencies": {
     "@babel/core": "7.14.6",
-    "@chakra-ui/storybook-addon": "1.0.3",
     "@jest/core": "27.3.1",
     "@rollup/plugin-commonjs": "24.0.1",
     "@rollup/plugin-typescript": "11.0.0",
-    "@storybook/addon-a11y": "6.5.16",
-    "@storybook/addon-actions": "6.5.16",
-    "@storybook/addon-docs": "6.5.16",
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/addon-jest": "6.5.16",
-    "@storybook/addon-links": "6.5.16",
-    "@storybook/addons": "6.5.16",
-    "@storybook/react": "6.5.16",
+    "@storybook/addon-a11y": "7.0.4",
+    "@storybook/addon-essentials": "7.0.4",
+    "@storybook/addon-interactions": "7.0.4",
+    "@storybook/addon-jest": "7.0.4",
+    "@storybook/addon-links": "7.0.4",
+    "@storybook/blocks": "7.0.4",
+    "@storybook/react": "7.0.4",
+    "@storybook/react-vite": "7.0.4",
+    "@storybook/testing-library": "0.0.14-next.2",
     "@svgr/webpack": "5.5.0",
     "@testing-library/dom": "9.2.0",
     "@testing-library/jest-dom": "5.14.1",
@@ -104,7 +105,7 @@
     "@types/jest-axe": "3.5.3",
     "@types/node": "18.13.0",
     "@types/react": "16.9.41",
-    "@types/testing-library__jest-dom": "5.14.1",
+    "@types/testing-library__jest-dom": "^5.14.1",
     "@typescript-eslint/eslint-plugin": "5.57.0",
     "@typescript-eslint/parser": "5.57.0",
     "@vitejs/plugin-react": "3.1.0",
@@ -115,7 +116,6 @@
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.2.0",
-    "eslint-plugin-storybook": "0.5.12",
     "husky": "7.0.4",
     "jest": "29.4.3",
     "jest-axe": "5.0.1",
@@ -123,14 +123,17 @@
     "lint-staged": "10.5.4",
     "normalize.css": "8.0.1",
     "prettier": "2.4.1",
+    "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-autosuggest": "10.0.2",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
+    "remark-gfm": "3.0.1",
     "sass": "1.60.0",
     "sass-loader": "10.0.0",
-    "storybook-addon-designs": "6.2.1",
+    "storybook": "7.0.4",
+    "storybook-addon-designs": "7.0.0-beta.2",
     "style-loader": "2.0.0",
     "ts-jest": "29.0.5",
     "tslib": "2.3.0",

package/dist/src/components/Icons/IconColors.d.ts

@@ -1,3 +0,0 @@
-declare const iconColors: readonly ["ui.black", "ui.white", "brand.primary", "brand.secondary", "ui.error.primary", "ui.error.secondary", "ui.status.primary", "ui.status.secondary", "ui.success.primary", "ui.success.secondary", "ui.warning.primary", "ui.warning.secondary", "section.blogs.primary", "section.blogs.secondary", "section.books-and-more.primary", "section.books-and-more.secondary", "section.education.primary", "section.education.secondary", "section.locations.primary", "section.locations.secondary", "section.research.primary", "section.research.secondary", "section.research-library.lpa", "section.research-library.schomburg", "section.research-library.schwartzman", "section.whats-on.primary", "section.whats-on.secondary", "dark.ui.error.primary", "dark.ui.error.secondary", "dark.ui.status.primary", "dark.ui.status.secondary", "dark.ui.success.primary", "dark.ui.success.secondary", "dark.ui.warning.primary", "dark.ui.warning.secondary"];
-export declare const getIconColors: () => readonly ["ui.black", "ui.white", "brand.primary", "brand.secondary", "ui.error.primary", "ui.error.secondary", "ui.status.primary", "ui.status.secondary", "ui.success.primary", "ui.success.secondary", "ui.warning.primary", "ui.warning.secondary", "section.blogs.primary", "section.blogs.secondary", "section.books-and-more.primary", "section.books-and-more.secondary", "section.education.primary", "section.education.secondary", "section.locations.primary", "section.locations.secondary", "section.research.primary", "section.research.secondary", "section.research-library.lpa", "section.research-library.schomburg", "section.research-library.schwartzman", "section.whats-on.primary", "section.whats-on.secondary", "dark.ui.error.primary", "dark.ui.error.secondary", "dark.ui.status.primary", "dark.ui.status.secondary", "dark.ui.success.primary", "dark.ui.success.secondary", "dark.ui.warning.primary", "dark.ui.warning.secondary"];
-export default iconColors;

package/dist/src/components/Icons/IconNames.d.ts

@@ -1,3 +0,0 @@
-declare const iconNames: readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionLaunch", "actionPower", "actionRegistration", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "minus", "plus", "search", "socialFacebook", "socialInstagram", "socialTumblr", "socialTwitter", "socialYoutube", "speakerNotes", "utilityAccountFilled", "utilityAccountUnfilled", "utilityHamburger", "utilitySearch"];
-export declare const getIconNames: () => readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionLaunch", "actionPower", "actionRegistration", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "minus", "plus", "search", "socialFacebook", "socialInstagram", "socialTumblr", "socialTwitter", "socialYoutube", "speakerNotes", "utilityAccountFilled", "utilityAccountUnfilled", "utilityHamburger", "utilitySearch"];
-export default iconNames;