@transferwise/components 0.0.0-experimental-cce363f → 0.0.0-experimental-0b6dfe0

package/build/index.esm.js

@@ -2257,7 +2257,7 @@ var Card$2 = Card$1;
 
 const Card = ({
   className,
-  children,
+  children = null,
   id,
   isDisabled = false,
   isSmall = false,
@@ -2280,7 +2280,10 @@ const Card = ({
       size: isSmall ? 'sm' : 'md',
       isDisabled: isDisabled,
       testId: "close-button",
-      onClick: onDismiss
+      onClick: e => {
+        stopPropagation$1(e);
+        onDismiss();
+      }
     }), children]
   });
 };
@@ -10336,10 +10339,12 @@ const PromoCardIndicator = ({
   children,
   label,
   icon,
+  isSmall = false,
   testid,
   ...rest
 }) => {
-  const IconComponent = icon && {
+  const isIconString = icon && typeof icon === 'string';
+  const IconComponent = isIconString && {
     check: Check,
     arrow: ArrowRight,
     download: Download
@@ -10353,12 +10358,15 @@ const PromoCardIndicator = ({
       type: Typography.BODY_LARGE_BOLD,
       className: "np-Card-indicatorText",
       children: label
-    }), IconComponent && /*#__PURE__*/jsx("span", {
+    }), icon && /*#__PURE__*/jsx(Avatar, {
+      type: AvatarType.ICON,
+      size: isSmall ? 40 : 56,
+      backgroundColor: "var(--Card-indicator-icon-background-color)",
       className: "np-Card-indicatorIcon",
-      children: /*#__PURE__*/jsx(IconComponent, {
+      children: IconComponent ? /*#__PURE__*/jsx(IconComponent, {
         size: 24,
         "aria-hidden": "true"
-      })
+      }) : icon
     }), children]
   });
 };
@@ -10420,6 +10428,7 @@ const PromoCard = /*#__PURE__*/forwardRef(({
   imageClass,
   imageSource,
   indicatorLabel,
+  indicatorIcon,
   isChecked,
   isDisabled,
   onClick,
@@ -10430,6 +10439,8 @@ const PromoCard = /*#__PURE__*/forwardRef(({
   title,
   type,
   value,
+  isSmall,
+  useDisplayFont = true,
   ...props
 }, reference) => {
   // Set the `checked` state to the value of `defaultChecked` if it is truthy,
@@ -10453,7 +10464,19 @@ const PromoCard = /*#__PURE__*/forwardRef(({
   // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
   // `'download'` if `download` is truthy. If neither condition is true, set
   // `icon` to `undefined`.
-  const icon = href && download ? 'download' : href ? 'arrow' : undefined;
+  // Create a function to get icon type
+  const getIconType = () => {
+    if (indicatorIcon) {
+      return indicatorIcon;
+    }
+    if (download) {
+      return 'download';
+    }
+    if (href && !type) {
+      return 'arrow';
+    }
+    return undefined;
+  };
   // Define all class names string based on the values of the `href`, `type`,
   // `checked`, and `className` props.
   const commonClasses = classNames({
@@ -10470,7 +10493,8 @@ const PromoCard = /*#__PURE__*/forwardRef(({
     isDisabled: isDisabled || contextIsDisabled,
     onClick,
     ref: reference,
-    'data-testid': testId
+    'data-testid': testId,
+    isSmall
   };
   // Object with Anchor props that will be passed to the `a` element. These
   // won't be refurned if set to `isDisabled`
@@ -10498,6 +10522,27 @@ const PromoCard = /*#__PURE__*/forwardRef(({
     ref: reference,
     tabIndex: 0
   } : {};
+  const getTitle = () => {
+    const titleContent = href && !type ? /*#__PURE__*/jsx("a", {
+      className: "np-Card-titleLink",
+      ...anchorProps,
+      children: title
+    }) : title;
+    const titleProps = {
+      id: `${componentId}-title`,
+      as: headingLevel,
+      className: 'np-Card-title'
+    };
+    return useDisplayFont ? /*#__PURE__*/jsx(Display, {
+      type: Typography.DISPLAY_SMALL,
+      ...titleProps,
+      children: titleContent
+    }) : /*#__PURE__*/jsx(Title, {
+      type: Typography.TITLE_SUBSECTION,
+      ...titleProps,
+      children: titleContent
+    });
+  };
   useEffect(() => {
     setChecked(defaultChecked ?? isChecked ?? false);
   }, [defaultChecked, isChecked]);
@@ -10511,17 +10556,7 @@ const PromoCard = /*#__PURE__*/forwardRef(({
         size: 24,
         "aria-hidden": "true"
       })
-    }), /*#__PURE__*/jsx(Display, {
-      id: `${componentId}-title`,
-      as: headingLevel,
-      className: "np-Card-title",
-      type: Typography.DISPLAY_SMALL,
-      children: href && !type ? /*#__PURE__*/jsx("a", {
-        className: "np-Card-titleLink",
-        ...anchorProps,
-        children: title
-      }) : title
-    }), /*#__PURE__*/jsx(Body, {
+    }), getTitle(), /*#__PURE__*/jsx(Body, {
       className: "np-Card-description",
       children: description
     }), imageSource && /*#__PURE__*/jsx("div", {
@@ -10535,7 +10570,8 @@ const PromoCard = /*#__PURE__*/forwardRef(({
       })
     }), /*#__PURE__*/jsx(PromoCardIndicator, {
       label: indicatorLabel,
-      icon: icon
+      icon: getIconType(),
+      isSmall: isSmall
     })]
   });
 });