@nypl/design-system-react-components 4.1.2 → 4.1.4

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

@@ -41,9 +41,14 @@ export interface HeroProps extends BoxProps {
      * Set `isDarkText` to `true` if the `textBackgroundColor` is set to a light
      * color. */
     isDarkText?: boolean;
-    /** Optional boolean used to toggle the treatment of the background image in
-     * the "campaign" variant. If true, the background image will be converted to
-     * black & white and darkened to 60% black. */
+    /** Optional boolean used to toggle the blur treatment of the background image
+     * in the "campaign" variant. If true, the background image will be blurred
+     * and darkened slightly.
+     */
+    isBlurredBackgroundImage?: boolean;
+    /** Optional boolean used to toggle the color treatment of the background
+     * image in the "campaign" variant. If true, the background image will be
+     * converted to black & white and darkened moderately. */
     isDarkBackgroundImage?: boolean;
     /** Optional string used for the subheader that displays underneath the
      * heading element. */

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

@@ -1,6 +1,8 @@
 import { BoxProps } from "@chakra-ui/react";
 import React from "react";
 import { IconNames } from "../Icons/Icon";
+import { messageVariantsArray } from "../../theme/sharedTypes";
+export type TagSemanticVariants = typeof messageVariantsArray[number];
 export interface TagSetExploreDataProps {
     /** The name of the SVG `Icon` to render before the tag label. */
     iconName?: IconNames;
@@ -19,6 +21,8 @@ export interface TagSetExploreProps extends BoxProps {
     /** The function to perform when a tag is clicked when `isDismissible` is
      * true.  This prop is not used in the "explore" variant. */
     onClick?: never;
+    /** Semantic type of the tags. */
+    semanticVariant?: TagSemanticVariants | "default";
     /** The array of data to display as tags. */
     tagSetData: TagSetExploreDataProps[];
     /** The `TagSet` variant to render; "filter" by default. */

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { BoxProps } from "@chakra-ui/react";
 import { IconNames } from "../Icons/Icon";
+import { messageVariantsArray } from "../../theme/sharedTypes";
+export type TagSemanticVariants = typeof messageVariantsArray[number];
 export interface TagSetFilterDataProps {
     /** The name of the SVG `Icon` to render before the tag label. */
     iconName?: IconNames;
@@ -16,6 +18,8 @@ export interface TagSetFilterProps extends Omit<BoxProps, "onClick"> {
     isDismissible?: boolean;
     /** The function to perform when a tag is clicked when `isDismissible` is true. */
     onClick?: (tagSet: TagSetFilterDataProps) => void;
+    /** Semantic type of the tags. */
+    semanticVariant?: TagSemanticVariants | "default";
     /** The array of data to display as tags. */
     tagSetData: TagSetFilterDataProps[];
     /** The `TagSet` variant to render; "filter" by default. */

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

@@ -568,7 +568,7 @@ declare const Hero: {
                 };
             };
         };
-        campaign: ({ foregroundColor, isDarkText, textColor }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+        campaign: ({ foregroundColor, isBlurredBackgroundImage, isDarkBackgroundImage, isDarkText, textColor, }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
             base: {
                 alignItems: string;
                 display: string;
@@ -603,6 +603,7 @@ declare const Hero: {
             content: {
                 alignItems: string;
                 bg: string;
+                boxShadow: string;
                 color: any;
                 display: string;
                 flexFlow: {

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

@@ -58,7 +58,6 @@ declare const StatusBadge: {
         py: string;
         paddingInlineEnd: string;
         paddingInlineStart: string;
-        whiteSpace: string;
         width: string;
         _dark: {
             backgroundColor: string;

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

@@ -1,6 +1,10 @@
 import { StyleFunctionProps } from "@chakra-ui/system";
 interface TagSetFilterProps extends StyleFunctionProps {
     isDismissible: boolean;
+    semanticVariant: string;
+}
+interface TagSetExploreProps extends StyleFunctionProps {
+    semanticVariant: string;
 }
 declare const _default: {
     TagSet: {
@@ -23,93 +27,7 @@ declare const _default: {
         };
     };
     TagSetExplore: {
-        baseStyle?: {
-            _focusWithin: {
-                boxShadow: string;
-                outline: string;
-                outlineOffset: string;
-                outlineColor: string;
-                _dark: {
-                    outlineColor: string;
-                };
-            };
-            a: {
-                border: string;
-                _focus: {
-                    outline: string;
-                };
-            };
-            "> span": {
-                display: string;
-                overflow: string;
-                textOverflow: string;
-                whiteSpace: string;
-            };
-            svg: {
-                fill: string;
-            };
-            _hover: {
-                bg: string;
-                borderColor: string;
-                a: {
-                    color: string;
-                };
-                svg: {
-                    fill: string;
-                };
-                "> span": {
-                    color: string;
-                };
-            };
-            _dark: {
-                bg: string;
-                borderColor: string;
-                color: string;
-                a: {
-                    color: string;
-                };
-                svg: {
-                    fill: string;
-                };
-                _hover: {
-                    bg: string;
-                    borderColor: string;
-                    a: {
-                        color: string;
-                    };
-                    svg: {
-                        fill: string;
-                    };
-                    "> span": {
-                        color: string;
-                    };
-                };
-            };
-            transitionDuration: string;
-            transitionTimingFunction: string;
-            textDecoration: string;
-            textDecorationStyle: string;
-            textDecorationThickness: string;
-            display: string;
-            alignItems: string;
-            justifyContent: string;
-            bg: string;
-            border: string;
-            borderColor: string;
-            borderRadius: string;
-            color: string;
-            cursor: string;
-            fontSize: string;
-            height: {
-                base: "32px";
-                md: "22px";
-            };
-            minHeight: string;
-            maxWidth: string;
-            py: string;
-            px: string;
-            textUnderlineOffset: string;
-        };
+        baseStyle?: ({ semanticVariant }: TagSetExploreProps) => any;
         sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
         };
@@ -123,53 +41,8 @@ declare const _default: {
         };
     };
     TagSetFilter: {
-        baseStyle?: ({ isDismissible }: TagSetFilterProps) => {
-            base: {
-                "> span": {
-                    display: string;
-                    overflow: string;
-                    textOverflow: string;
-                    whiteSpace: string;
-                };
-                _hover: {
-                    bg: string;
-                    borderColor: string;
-                };
-                _dark: {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                    _hover: {
-                        bg: string;
-                        borderColor: string;
-                        color: string;
-                    };
-                };
-                transitionDuration: string;
-                transitionTimingFunction: string;
-                alignItems: string;
-                bg: string;
-                border: string;
-                borderColor: string;
-                borderRadius: string;
-                color: string;
-                cursor: string;
-                display: string;
-                fontSize: string;
-                height: {
-                    base: "32px";
-                    md: "22px";
-                };
-                justifyContent: string;
-                minHeight: string;
-                maxWidth: string;
-                py: string;
-                paddingLeft: string;
-                paddingRight: string | {
-                    base: "8px";
-                    md: "6px";
-                };
-            };
+        baseStyle?: ({ isDismissible, semanticVariant }: TagSetFilterProps) => {
+            base: any;
         };
         sizes?: {
             [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{

package/package.json

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