@box/blueprint-web 12.121.0 → 12.122.0

package/dist/lib-esm/content-card/content-card-image.js

@@ -1,37 +1,44 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useState, createElement } from 'react';
 import { Ghost } from '../ghost/ghost.js';
 import styles from './content-card.module.js';
 
 const ContentCardImage = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     className,
+    icon,
     variant,
     ...rest
   } = props;
   const [isImageLoaded, setIsImageLoaded] = useState(false);
   /* eslint-disable jsx-a11y/alt-text */
-  return jsxs("div", {
+  return jsx("div", {
     className: variant === 'background' ? styles.cardBackground : styles.cardIcon,
-    children: [jsx("img", {
-      ...rest,
-      ref: forwardedRef,
-      className: clsx(styles.image, className),
-      hidden: !isImageLoaded,
-      onError: () => {
-        // show alt text if image fails to load
-        setIsImageLoaded(true);
-      },
-      onLoad: () => {
-        // show image after it is loaded
-        setIsImageLoaded(true);
-      }
-    }), !isImageLoaded && jsx(Ghost, {
-      height: "100%",
-      variant: "rectangle",
-      width: "100%"
-    })]
+    children: icon ? (/*#__PURE__*/createElement(icon, {
+      role: 'presentation',
+      width: '100%',
+      height: '100%'
+    })) : jsxs(Fragment, {
+      children: [jsx("img", {
+        ...rest,
+        ref: forwardedRef,
+        className: clsx(styles.image, className),
+        hidden: !isImageLoaded,
+        onError: () => {
+          // show alt text if image fails to load
+          setIsImageLoaded(true);
+        },
+        onLoad: () => {
+          // show image after it is loaded
+          setIsImageLoaded(true);
+        }
+      }), !isImageLoaded && jsx(Ghost, {
+        height: "100%",
+        variant: "rectangle",
+        width: "100%"
+      })]
+    })
   });
   /* eslint-enable */
 });

package/dist/lib-esm/content-card/types.d.ts

@@ -1,3 +1,4 @@
+import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
 import { type StyledText } from '../utils/commonTypes';
 export type ContentCardBodyProps = React.ComponentProps<'p'> & {
     /** Content of the body */
@@ -10,6 +11,8 @@ export type ContentCardFooterProps = React.ComponentProps<'div'> & {
 export type ContentCardImageProps = React.ComponentProps<'img'> & {
     /** The type of the image, either icon or background */
     variant: 'icon' | 'background';
+    /** Icon that will be used instead of the image  */
+    icon?: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
 };
 export type ContentCardTitleProps = React.ComponentProps<'h2'> & {
     /** Content of the title */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.121.0",
+    "version": "12.122.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.94.3",
+        "@box/blueprint-web-assets": "^4.94.5",
         "@internationalized/date": "^3.7.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,8 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.16.7",
+        "@box/storybook-utils": "^0.16.9",
+        "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",