@transferwise/components 45.15.1 → 45.17.0

package/build/index.esm.js

@@ -1150,8 +1150,8 @@ const Alert = props => {
     setShouldFire(false);
   };
   return /*#__PURE__*/jsxs("div", {
-    role: "alert",
     className: classNames('alert d-flex', `alert-${mappedType}`, className),
+    "data-testid": "alert",
     onTouchStart: handleTouchStart,
     onTouchEnd: handleTouchEnd,
     onTouchMove: handleTouchMove,
@@ -1160,17 +1160,20 @@ const Alert = props => {
       "data-testid": variant,
       children: [generateIcon(), /*#__PURE__*/jsxs("div", {
         className: "alert__message",
-        children: [title && /*#__PURE__*/jsx(Title, {
-          className: "m-b-1",
-          type: Typography.TITLE_BODY,
-          children: title
-        }), /*#__PURE__*/jsx(Body, {
-          as: "span",
-          className: "d-block",
-          type: Typography.BODY_LARGE,
-          children: children || /*#__PURE__*/jsx(InlineMarkdown$1, {
-            children: message
-          })
+        children: [/*#__PURE__*/jsxs("div", {
+          role: Sentiment.NEGATIVE === mappedType ? 'alert' : 'status',
+          children: [title && /*#__PURE__*/jsx(Title, {
+            className: "m-b-1",
+            type: Typography.TITLE_BODY,
+            children: title
+          }), /*#__PURE__*/jsx(Body, {
+            as: "span",
+            className: "d-block",
+            type: Typography.BODY_LARGE,
+            children: children || /*#__PURE__*/jsx(InlineMarkdown$1, {
+              children: message
+            })
+          })]
         }), action && /*#__PURE__*/jsx(Link, {
           href: action.href,
           className: "m-t-1",
@@ -2257,7 +2260,7 @@ var Card$2 = Card$1;
 
 const Card = ({
   className,
-  children,
+  children = null,
   id,
   isDisabled = false,
   isSmall = false,
@@ -2280,7 +2283,10 @@ const Card = ({
       size: isSmall ? 'sm' : 'md',
       isDisabled: isDisabled,
       testId: "close-button",
-      onClick: onDismiss
+      onClick: e => {
+        stopPropagation$1(e);
+        onDismiss();
+      }
     }), children]
   });
 };
@@ -3339,6 +3345,7 @@ class TableLink extends PureComponent {
         className: `tw-date-lookup-${type}-option ${active ? 'active' : ''} ${today ? 'today' : ''} np-text-body-default-bold`,
         disabled: disabled,
         "aria-label": this.calculateAriaLabel(longTitle, title, active, type, formatMessage),
+        "aria-pressed": active,
         onClick: this.onClick,
         children: title || item
       })
@@ -6218,65 +6225,74 @@ function BottomSheet({
     getFloatingProps
   } = useInteractions([dismiss, role]);
   const [floatingKey, setFloatingKey] = useState(0);
+  const {
+    theme,
+    screenMode
+  } = useTheme();
   return /*#__PURE__*/jsxs(Fragment, {
     children: [open ? /*#__PURE__*/jsx(PreventScroll, {}) : null, renderTrigger?.({
       ref: refs.setReference,
       getInteractionProps: getReferenceProps
     }), /*#__PURE__*/jsx(FloatingPortal, {
-      children: /*#__PURE__*/jsxs(Transition, {
-        show: open,
-        className: "np-bottom-sheet-v2-container",
-        beforeEnter: () => {
-          setFloatingKey(prev => prev + 1);
-        },
-        children: [/*#__PURE__*/jsx(Transition.Child, {
-          enter: "np-bottom-sheet-v2-backdrop-container--enter",
-          enterFrom: "np-bottom-sheet-v2-backdrop-container--enter-from",
-          leave: "np-bottom-sheet-v2-backdrop-container--leave",
-          leaveTo: "np-bottom-sheet-v2-backdrop-container--leave-to",
-          children: /*#__PURE__*/jsx("div", {
-            className: "np-bottom-sheet-v2-backdrop"
-          })
-        }), /*#__PURE__*/jsx(FloatingFocusManager, {
-          context: context,
-          initialFocus: initialFocusRef,
-          children: /*#__PURE__*/jsx("div", {
-            className: "np-bottom-sheet-v2",
-            children: /*#__PURE__*/jsx(Transition.Child, {
-              className: "np-bottom-sheet-v2-content",
-              enter: "np-bottom-sheet-v2-content--enter",
-              enterFrom: "np-bottom-sheet-v2-content--enter-from",
-              leave: "np-bottom-sheet-v2-content--leave",
-              leaveTo: "np-bottom-sheet-v2-content--leave-to",
-              children: /*#__PURE__*/jsxs("div", {
-                // Force inner state invalidation on open
-                ref: refs.setFloating,
-                className: "np-bottom-sheet-v2-content-inner-container",
-                ...getFloatingProps(),
-                children: [/*#__PURE__*/jsx("div", {
-                  className: "np-bottom-sheet-v2-header",
-                  children: /*#__PURE__*/jsx(CloseButton, {
-                    size: Size.SMALL,
-                    onClick: () => {
-                      onClose?.();
-                    }
-                  })
-                }), /*#__PURE__*/jsxs("div", {
-                  className: classNames('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
-                    'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
-                  }),
-                  children: [title ? /*#__PURE__*/jsx("h2", {
-                    className: "np-bottom-sheet-v2-title np-text-title-body",
-                    children: title
-                  }) : null, /*#__PURE__*/jsx("div", {
-                    className: "np-bottom-sheet-v2-body np-text-body-default",
-                    children: children
+      children: /*#__PURE__*/jsx(ThemeProvider, {
+        theme: theme,
+        screenMode: screenMode,
+        isNotRootProvider: true,
+        children: /*#__PURE__*/jsxs(Transition, {
+          show: open,
+          className: "np-bottom-sheet-v2-container",
+          beforeEnter: () => {
+            setFloatingKey(prev => prev + 1);
+          },
+          children: [/*#__PURE__*/jsx(Transition.Child, {
+            enter: "np-bottom-sheet-v2-backdrop-container--enter",
+            enterFrom: "np-bottom-sheet-v2-backdrop-container--enter-from",
+            leave: "np-bottom-sheet-v2-backdrop-container--leave",
+            leaveTo: "np-bottom-sheet-v2-backdrop-container--leave-to",
+            children: /*#__PURE__*/jsx("div", {
+              className: "np-bottom-sheet-v2-backdrop"
+            })
+          }), /*#__PURE__*/jsx(FloatingFocusManager, {
+            context: context,
+            initialFocus: initialFocusRef,
+            children: /*#__PURE__*/jsx("div", {
+              className: "np-bottom-sheet-v2",
+              children: /*#__PURE__*/jsx(Transition.Child, {
+                className: "np-bottom-sheet-v2-content",
+                enter: "np-bottom-sheet-v2-content--enter",
+                enterFrom: "np-bottom-sheet-v2-content--enter-from",
+                leave: "np-bottom-sheet-v2-content--leave",
+                leaveTo: "np-bottom-sheet-v2-content--leave-to",
+                children: /*#__PURE__*/jsxs("div", {
+                  // Force inner state invalidation on open
+                  ref: refs.setFloating,
+                  className: "np-bottom-sheet-v2-content-inner-container",
+                  ...getFloatingProps(),
+                  children: [/*#__PURE__*/jsx("div", {
+                    className: "np-bottom-sheet-v2-header",
+                    children: /*#__PURE__*/jsx(CloseButton, {
+                      size: Size.SMALL,
+                      onClick: () => {
+                        onClose?.();
+                      }
+                    })
+                  }), /*#__PURE__*/jsxs("div", {
+                    className: classNames('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
+                      'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
+                    }),
+                    children: [title ? /*#__PURE__*/jsx("h2", {
+                      className: "np-bottom-sheet-v2-title np-text-title-body",
+                      children: title
+                    }) : null, /*#__PURE__*/jsx("div", {
+                      className: "np-bottom-sheet-v2-body np-text-body-default",
+                      children: children
+                    })]
                   })]
-                })]
-              }, floatingKey)
+                }, floatingKey)
+              })
             })
-          })
-        })]
+          })]
+        })
       })
     })]
   });
@@ -6352,41 +6368,50 @@ function Popover({
     getFloatingProps
   } = useInteractions([role, dismiss]);
   const [floatingKey, setFloatingKey] = useState(0);
+  const {
+    theme,
+    screenMode
+  } = useTheme();
   return /*#__PURE__*/jsxs(Fragment, {
     children: [open ? /*#__PURE__*/jsx(PreventScroll, {}) : null, renderTrigger({
       ref: refs.setReference,
       getInteractionProps: getReferenceProps
     }), /*#__PURE__*/jsx(FloatingPortal, {
-      children: /*#__PURE__*/jsx(FloatingFocusManager, {
-        context: context,
-        children: /*#__PURE__*/jsx(Transition, {
-          show: open,
-          leave: "transition-opacity",
-          leaveTo: "opacity-0",
-          beforeEnter: () => {
-            setFloatingKey(prev => prev + 1);
-          },
-          children: /*#__PURE__*/jsx("div", {
-            // Force inner state invalidation on open
-            ref: refs.setFloating,
-            className: "np-popover-v2-container"
-            // eslint-disable-next-line react/forbid-dom-props
-            ,
-            style: floatingStyles,
-            ...getFloatingProps(),
-            children: /*#__PURE__*/jsxs("div", {
-              className: classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
-                'np-popover-v2--padding-md': padding === 'md'
-              }),
-              children: [title ? /*#__PURE__*/jsx("h2", {
-                className: "np-popover-v2-title np-text-title-body",
-                children: title
-              }) : null, /*#__PURE__*/jsx("div", {
-                className: "np-popover-v2-content np-text-body-default",
-                children: children
-              })]
-            })
-          }, floatingKey)
+      children: /*#__PURE__*/jsx(ThemeProvider, {
+        theme: theme,
+        screenMode: screenMode,
+        isNotRootProvider: true,
+        children: /*#__PURE__*/jsx(FloatingFocusManager, {
+          context: context,
+          children: /*#__PURE__*/jsx(Transition, {
+            show: open,
+            leave: "transition-opacity",
+            leaveTo: "opacity-0",
+            beforeEnter: () => {
+              setFloatingKey(prev => prev + 1);
+            },
+            children: /*#__PURE__*/jsx("div", {
+              // Force inner state invalidation on open
+              ref: refs.setFloating,
+              className: "np-popover-v2-container"
+              // eslint-disable-next-line react/forbid-dom-props
+              ,
+              style: floatingStyles,
+              ...getFloatingProps(),
+              children: /*#__PURE__*/jsxs("div", {
+                className: classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
+                  'np-popover-v2--padding-md': padding === 'md'
+                }),
+                children: [title ? /*#__PURE__*/jsx("h2", {
+                  className: "np-popover-v2-title np-text-title-body",
+                  children: title
+                }) : null, /*#__PURE__*/jsx("div", {
+                  className: "np-popover-v2-content np-text-body-default",
+                  children: children
+                })]
+              })
+            }, floatingKey)
+          })
         })
       })
     })]
@@ -10335,10 +10360,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
@@ -10352,12 +10379,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]
   });
 };
@@ -10419,6 +10449,7 @@ const PromoCard = /*#__PURE__*/forwardRef(({
   imageClass,
   imageSource,
   indicatorLabel,
+  indicatorIcon,
   isChecked,
   isDisabled,
   onClick,
@@ -10429,6 +10460,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,
@@ -10452,7 +10485,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({
@@ -10469,7 +10514,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`
@@ -10497,6 +10543,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]);
@@ -10510,17 +10577,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", {
@@ -10534,7 +10591,8 @@ const PromoCard = /*#__PURE__*/forwardRef(({
       })
     }), /*#__PURE__*/jsx(PromoCardIndicator, {
       label: indicatorLabel,
-      icon: icon
+      icon: getIconType(),
+      isSmall: isSmall
     })]
   });
 });