@nypl/design-system-react-components 3.1.0-rc → 3.1.0

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

@@ -0,0 +1,43 @@
+import { ChakraComponent } from "@chakra-ui/react";
+import React from "react";
+export declare const bannerTypesArray: readonly ["informative", "negative", "neutral", "positive", "recommendation", "warning"];
+export type BannerTypes = typeof bannerTypesArray[number];
+export declare const bannerBgColorsArray: readonly ["brand.primary-05", "section.blogs.primary-05", "section.books-and-more.primary-05", "section.connect.primary-05", "section.education.primary-05", "section.locations.primary-05", "section.research.primary-05", "section.research-library.lpa-05", "section.research-library.schomburg-05", "section.research-library.schwarzman-05", "section.whats-on.primary-05", "dark.brand.primary-05", "dark.section.blogs.primary-05", "dark.section.books-and-more.primary-05", "dark.section.connect.primary-05", "dark.section.education.primary-05", "dark.section.locations.primary-05", "dark.section.research.secondary-05", "dark.section.research-library.lpa-05", "dark.section.research-library.schomburg-05", "dark.section.research-library.schwarzman-05", "dark.section.whats-on.primary-05"];
+export type BannerBgColors = typeof bannerBgColorsArray[number];
+export declare const bannerHighlightColorsArray: readonly ["brand.primary", "section.blogs.primary", "section.books-and-more.primary", "section.connect.primary", "section.education.primary", "section.locations.primary", "section.research.primary", "section.research-library-lpa.primary", "section.research-library-schomburg.primary", "section.research-library-schwarzman.primary", "section.whats-on.primary", "dark.brand.primary", "dark.section.blogs.primary", "dark.section.books-and-more.primary", "dark.section.connect.primary", "dark.section.education.primary", "dark.section.locations.primary", "dark.section.research.secondary", "dark.section.research-library-lpa.primary", "dark.section.research-library-schomburg.primary", "dark.section.research-library-schwarzman.primary", "dark.section.whats-on.primary"];
+export type BannerHighlightColors = typeof bannerHighlightColorsArray[number];
+interface BannerProps {
+    /** Label used to describe the `Banner`'s aside HTML element. */
+    ariaLabel?: string;
+    /** Used to set the color of the background for the full component.
+     * Refer to how color values are defined and typed in the DS Icon component. */
+    backgroundColor?: BannerBgColors;
+    /** Additional `className` to add. */
+    className?: string;
+    /** Used to populate the body content of the component. */
+    content: string | JSX.Element;
+    /** Used to populate the heading element within the component.  A string
+     * value can be passed to set the text for a default DS Heading component,
+     * or an actual DS Heading component can be passed in. */
+    heading?: string | JSX.Element;
+    /** Used to set the color for the left border and icon.  Refer to how color
+     * values are defined and typed in the DS Icon component. */
+    highlightColor?: BannerHighlightColors;
+    /** Optional custom `Icon` that will override the default `Icon`. */
+    icon?: JSX.Element;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Optional prop to control whether a `Banner` can be dismissed
+     * (closed) by a user. */
+    isDismissible?: boolean;
+    /** Used to control the component's semantic coloring and iconography. */
+    type?: BannerTypes;
+}
+/**
+ * The `Banner` component is a non-modal semantic dialog used to communicate a
+ * general status event or to promote a feature, providing contextual feedback
+ * messages for typical user actions. They are displayed contextually within a
+ * page flow and they will often prompt a user to take action.
+ */
+export declare const Banner: ChakraComponent<React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>, BannerProps>;
+export default Banner;

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

@@ -0,0 +1,32 @@
+import { ChakraComponent } from "@chakra-ui/react";
+import React from "react";
+import { LayoutTypes } from "../../helpers/types";
+import { MultiSelectWidths } from "../MultiSelect/MultiSelect";
+export interface MultiSelectGroupProps {
+    /** Additional className to use. */
+    className?: string;
+    /** The id of the MultiSelectGroup. */
+    id: string;
+    /** The label text rendered within the MultiSelectGroup. */
+    labelText: string;
+    /** Renders the layout of `MultiSelect` components in a row or column. */
+    layout?: LayoutTypes;
+    /** Width will be passed on each `MultiSelect` component. */
+    multiSelectWidth?: MultiSelectWidths;
+    /** Render prop function used to render MultiSelect with updated props. */
+    renderMultiSelect: ({ isBlockElement, multiSelectWidth, }: {
+        isBlockElement?: boolean;
+        multiSelectWidth?: MultiSelectWidths;
+    }) => React.ReactNode;
+    /** Is set to `true` by default and determines if the `labelText` is visible on the site. */
+    showLabel?: boolean;
+}
+/**
+ * `MultiSelectGroup` is a wrapper for Reservoir `MultiSelect` components.
+ * It specifies display styles (e.g. whether `MultiSelect`s are rendered in a
+ * column or row) and any associated text (e.g. the group's label). Note,
+ * the `MultiSelectGroup` will not work with non-Reservoir `MultiSelect`s
+ * components or other HTML elements.
+ */
+export declare const MultiSelectGroup: ChakraComponent<React.ForwardRefExoticComponent<MultiSelectGroupProps & React.RefAttributes<HTMLDivElement>>, MultiSelectGroupProps>;
+export default MultiSelectGroup;

package/dist/src/index.d.ts

@@ -4,6 +4,8 @@ export type { AccordionTypes } from "./components/Accordion/Accordion";
 export { default as AlphabetFilter } from "./components/AlphabetFilter/AlphabetFilter";
 export { default as AudioPlayer } from "./components/AudioPlayer/AudioPlayer";
 export type { AudioType } from "./components/AudioPlayer/AudioPlayer";
+export { default as Banner } from "./components/Banner/Banner";
+export type { BannerTypes } from "./components/Banner/Banner";
 export { default as Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs";
 export type { BreadcrumbsTypes } from "./components/Breadcrumbs/Breadcrumbs";
 export { default as Button } from "./components/Button/Button";
@@ -46,10 +48,8 @@ export type { ListItemsData, ActionItem, GroupItem, DividerItem, } from "./compo
 export { ModalTrigger, useModal } from "./components/Modal/Modal";
 export { default as MultiSelect } from "./components/MultiSelect/MultiSelect";
 export type { MultiSelectItem, SelectedItems, } from "./components/MultiSelect/MultiSelect";
-/** The code associated with the MultiSelectGroup component will not be exported
- * until the refactor of the v2 version of the MultiSelectGroup component has
- * been completed.
- * */
+export { default as MultiSelectGroup } from "./components/MultiSelectGroup/MultiSelectGroup";
+export type { MultiSelectGroupProps } from "./components/MultiSelectGroup/MultiSelectGroup";
 /** The code associated with the NewsletterSignup component and the
  * NewsletterSignupViewType type will not be exported until the refactor of the
  * component has been completed.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "3.1.0-rc",
+  "version": "3.1.0",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",