@nypl/design-system-react-components 3.4.0-rc5 → 3.4.1

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

@@ -4,7 +4,7 @@ import { ComponentImageProps } from "../Image/Image";
 export declare const heroTypesArray: readonly ["primary", "secondary", "secondaryBooksAndMore", "secondaryLocations", "secondaryResearch", "secondaryWhatsOn", "tertiary", "campaign", "fiftyFifty"];
 export type HeroTypes = typeof heroTypesArray[number];
 export declare const heroSecondaryTypes: string[];
-export interface HeroImageProps extends Pick<ComponentImageProps, "alt" | "fallbackSrc" | "id" | "src" | "onError"> {
+export interface HeroImageProps extends Pick<ComponentImageProps, "alt" | "fallbackSrc" | "id" | "src" | "onError" | "component"> {
 }
 export interface HeroProps {
     /**
@@ -31,13 +31,11 @@ export interface HeroProps {
     heroType?: HeroTypes;
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
-    /** Object used to create and render the `Image` component. Note that only
-     * `alt`, `component`, and `src` are the available attributes to pass. If
-     * `imageProps.alt` is left blank, a warning will be logged to the console and
+    /** Object used to create and render the `Image` component. You can pass `component`
+     * (with its own internal props, which will override) or `src`, `alt`, `id`, `fallBackSrc`, and `onError`.
+     * If `imageProps.alt` is left blank, a warning will be logged to the console and
      * will cause accessibility issues. For `imageProps.src`, it will only work for
-     * the "secondary", "fiftyFifty" and "campaign" `Hero` types; Note: `imageProps.src`
-     * can only be used in conjunction with `backgroundImageSrc` for the "campaign"
-     * `Hero` type. Note: not all `Hero` variations utilize this prop. */
+     * the "secondary", "fiftyFifty" and "campaign" `Hero` types. */
     imageProps?: HeroImageProps;
     /** Optional boolean used to toggle the default text color from light to dark.
      * Set isDarkText to `true` if the backgroundColor is set to a light color. */

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

@@ -29,6 +29,7 @@ declare const _default: {
     communicationCall: any;
     communicationChatBubble: any;
     communicationEmail: any;
+    decorativeBookBroken: any;
     decorativeEnvelope: any;
     decorativeLibraryCard: any;
     decorativeShoppingBag: any;

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

@@ -1,6 +1,6 @@
 export declare const iconAlignArray: readonly ["left", "right", "none"];
 export declare const iconColorsArray: readonly ["transparent", "ui.black", "ui.white", "ui.disabled.primary", "ui.disabled.secondary", "ui.error.primary", "ui.error.secondary", "ui.focus", "ui.link.primary", "ui.link.primary-05", "ui.link.primary-10", "ui.link.secondary", "ui.link.tertiary", "ui.status.primary", "ui.status.secondary", "ui.success.primary", "ui.success.secondary", "ui.test", "ui.warning.primary", "ui.warning.secondary", "ui.bg.default", "ui.bg.hover", "ui.bg.active", "ui.border.default", "ui.border.hover", "ui.typography.heading", "ui.typography.body", "ui.typography.inverse.heading", "ui.typography.inverse.body", "ui.gray.xxxx-dark", "ui.gray.xxx-dark", "ui.gray.xx-dark", "ui.gray.x-dark", "ui.gray.dark", "ui.gray.semi-dark", "ui.gray.medium", "ui.gray.semi-medium", "ui.gray.light-cool", "ui.gray.x-light-cool", "ui.gray.xx-light-cool", "ui.gray.light-warm", "ui.gray.x-light-warm", "brand.primary", "brand.secondary", "section.blogs.primary", "section.blogs.secondary", "section.books-and-more.primary", "section.books-and-more.secondary", "section.connect.primary", "section.connect.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.schwarzman", "section.whats-on.primary", "section.whats-on.secondary", "dark.brand.primary", "dark.brand.secondary", "dark.section.blogs.primary", "dark.section.blogs.secondary", "dark.section.books-and-more.primary", "dark.section.books-and-more.secondary", "dark.section.connect.primary", "dark.section.connect.secondary", "dark.section.education.primary", "dark.section.education.secondary", "dark.section.locations.primary", "dark.section.locations.secondary", "dark.section.research.primary", "dark.section.research.secondary", "dark.section.research-library.primary", "dark.section.research-library.secondary", "dark.section.whats-on.primary", "dark.section.whats-on.secondary", "dark.ui.disabled.primary", "dark.ui.disabled.secondary", "dark.ui.error.primary", "dark.ui.error.secondary", "dark.ui.focus", "dark.ui.link.primary", "dark.ui.link.primary-05", "dark.ui.link.primary-10", "dark.ui.link.secondary", "dark.ui.link.tertiary", "dark.ui.status.primary", "dark.ui.status.secondary", "dark.ui.success.primary", "dark.ui.success.secondary", "dark.ui.test", "dark.ui.warning.secondary", "dark.ui.warning.primary", "dark.ui.bg.page", "dark.ui.bg.default", "dark.ui.bg.hover", "dark.ui.bg.active", "dark.ui.border.default", "dark.ui.border.hover", "dark.ui.typography.heading", "dark.ui.typography.body", "dark.ui.typography.inverse.heading", "dark.ui.typography.inverse.body"];
-export declare const iconNamesArray: readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionDelete", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionHome", "actionIdentity", "actionIdentityFilled", "actionLaunch", "actionLightbulb", "actionLockClosed", "actionPayment", "actionPower", "actionRegistration", "actionSearch", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "communicationCall", "communicationChatBubble", "communicationEmail", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "editorMode", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "mapsPlace", "minus", "moonCrescent", "navigationMoreVert", "plus", "search", "socialFacebook", "socialInstagram", "socialPinterest", "socialSoundCloud", "socialSpotify", "socialTikTok", "socialTumblr", "socialTwitter", "socialVimeo", "socialYoutube", "speakerNotes", "sunFull", "utilityAccountFilled", "utilityAccountUnfilled", "utilityHamburger", "utilitySearch"];
+export declare const iconNamesArray: readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionDelete", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionHome", "actionIdentity", "actionIdentityFilled", "actionLaunch", "actionLightbulb", "actionLockClosed", "actionPayment", "actionPower", "actionRegistration", "actionSearch", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "communicationCall", "communicationChatBubble", "communicationEmail", "decorativeBookBroken", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "editorMode", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "mapsPlace", "minus", "moonCrescent", "navigationMoreVert", "plus", "search", "socialFacebook", "socialInstagram", "socialPinterest", "socialSoundCloud", "socialSpotify", "socialTikTok", "socialTumblr", "socialTwitter", "socialVimeo", "socialYoutube", "speakerNotes", "sunFull", "utilityAccountFilled", "utilityAccountUnfilled", "utilityHamburger", "utilitySearch"];
 export declare const iconRotationsArray: readonly ["rotate0", "rotate90", "rotate180", "rotate270"];
-export declare const iconSizesArray: readonly ["default", "xsmall", "small", "medium", "large", "xlarge", "xxlarge", "xxxlarge"];
+export declare const iconSizesArray: readonly ["default", "xsmall", "small", "medium", "large", "xlarge", "xxlarge", "xxxlarge", "xxxxlarge", "xxxxxlarge", "2xlarge", "3xlarge", "4xlarge", "5xlarge"];
 export declare const iconTypesArray: readonly ["default", "breadcrumbs"];

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

@@ -2,9 +2,11 @@ import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export declare const progressIndicatorSizesArray: readonly ["default", "small"];
 export declare const progressIndicatorTypesArray: readonly ["circular", "linear"];
+export declare const progressIndicatorLabelPlacementsArray: readonly ["bottom", "right", "top", "left"];
 export type ProgressIndicatorSizes = typeof progressIndicatorSizesArray[number];
 export type ProgressIndicatorTypes = typeof progressIndicatorTypesArray[number];
-export interface ProgressIndicatorProps {
+export type ProgressIndicatorLabelPlacements = typeof progressIndicatorLabelPlacementsArray[number];
+interface BaseProgressIndicatorProps {
     /** The darkMode prop is deprecated and should no longer be used. */
     darkMode?: boolean;
     /** ID that other components can cross reference for accessibility purposes. */
@@ -24,6 +26,16 @@ export interface ProgressIndicatorProps {
     /** A number between 0 to 100 that defines the progress' value. */
     value?: number;
 }
+interface LinearProgressIndicatorProps extends BaseProgressIndicatorProps {
+    indicatorType?: "linear";
+    labelPlacement?: never;
+}
+interface CircularProgressIndicatorProps extends BaseProgressIndicatorProps {
+    indicatorType?: "circular";
+    /** The placement of the label relative to a circular indicator. */
+    labelPlacement?: ProgressIndicatorLabelPlacements;
+}
+export type ProgressIndicatorProps = LinearProgressIndicatorProps | CircularProgressIndicatorProps;
 /**
  * A component that displays a progress status for any task that takes a long
  * time to complete or consists of multiple steps. Examples include downloading,

package/dist/src/index.d.ts

@@ -40,7 +40,7 @@ export type { HeadingLevels, HeadingProps, HeadingSizes, } from "./components/He
 export { default as HelperErrorText } from "./components/HelperErrorText/HelperErrorText";
 export type { HelperErrorTextProps } from "./components/HelperErrorText/HelperErrorText";
 export { default as Hero } from "./components/Hero/Hero";
-export type { HeroImageProps, HeroProps, HeroTypes, } from "./components/Hero/Hero";
+export type { HeroProps, HeroTypes } from "./components/Hero/Hero";
 export { default as HorizontalRule } from "./components/HorizontalRule/HorizontalRule";
 export type { HorizontalRuleProps } from "./components/HorizontalRule/HorizontalRule";
 export { default as Icon } from "./components/Icons/Icon";

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

@@ -1,11 +1,12 @@
-import { ProgressIndicatorSizes } from "../../components/ProgressIndicator/ProgressIndicator";
+import { ProgressIndicatorLabelPlacements, ProgressIndicatorSizes } from "../../components/ProgressIndicator/ProgressIndicator";
 import { StyleFunctionProps } from "@chakra-ui/system";
 interface ProgressIndicatorBaseStyle extends StyleFunctionProps {
     darkMode: boolean;
     size: ProgressIndicatorSizes;
+    labelPlacement: ProgressIndicatorLabelPlacements;
 }
 declare const ProgressIndicator: {
-    baseStyle?: ({ darkMode, size }: ProgressIndicatorBaseStyle) => {
+    baseStyle?: ({ darkMode, size, labelPlacement }: ProgressIndicatorBaseStyle) => {
         color: string;
         fontSize: string;
         _dark: {
@@ -35,9 +36,16 @@ declare const ProgressIndicator: {
         circularContainer: {
             alignItems: string;
             display: string;
-            flexDirection: string;
+            flexDirection: any;
             width: string;
         };
+        circularLabel: {
+            marginBottom: string | number;
+            marginLeft: string | number;
+            marginRight: string | number;
+            marginTop: string | number;
+            fontSize: string;
+        };
         linear: {
             "> div": {
                 bg: string;

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

@@ -63,10 +63,6 @@ declare const SearchBar: {
                 md: "255px";
             };
             textOverflow: string;
-            marginRight: {
-                base: any;
-                md: "-1px";
-            };
             _hover: {
                 zIndex: string;
                 "+ .chakra-select__icon-wrapper": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "3.4.0-rc5",
+  "version": "3.4.1",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -102,7 +102,6 @@
     "@typescript-eslint/eslint-plugin": "5.57.0",
     "@typescript-eslint/parser": "5.57.0",
     "@vitejs/plugin-react": "4.2.1",
-    "css-loader": "5.2.7",
     "eslint": "7.31.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-jsx-a11y": "6.7.1",
@@ -120,18 +119,15 @@
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-autosuggest": "10.0.2",
-    "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "18.2.0",
     "react-test-renderer": "18.2.0",
     "remark-gfm": "4.0.0",
     "sass": "1.60.0",
-    "sass-loader": "10.0.0",
     "storybook": "8.1.11",
-    "style-loader": "2.0.0",
     "ts-jest": "29.1.5",
     "tslib": "2.3.0",
     "typescript": "4.9.5",
-    "vite": "5.2.8",
+    "vite": "5.2.14",
     "vite-plugin-dts": "2.1.0",
     "vite-plugin-svgr": "4.2.0"
   }