@transferwise/components 0.0.0-experimental-0b6dfe0 → 0.0.0-experimental-6dd9117

package/build/index.esm.js

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, createContext, useContext, PureComponent, createRef, Component, Children, Fragment as Fragment$1 } from 'react';
+import { useId } from '@radix-ui/react-id';
 import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$2, ClockBorderless, CheckCircle, InfoCircle, Warning, CrossCircle, Clock, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
@@ -15,7 +16,6 @@ import mergeRefs from 'react-merge-refs';
 import { isUndefined, isKey, isNumber, isEmpty, isNull, isArray } from '@transferwise/neptune-validation';
 import { usePopper } from 'react-popper';
 import { Transition, Listbox } from '@headlessui/react';
-import { useId } from '@radix-ui/react-id';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, offset, flip, shift, size, autoUpdate } from '@floating-ui/react';
 import { usePreventScroll } from '@react-aria/overlays';
@@ -457,6 +457,21 @@ function getDirectionFromLocale(locale) {
   }
 }
 
+/**
+ * generateRandomId() function
+ *
+ * This function generates a random string of characters that can be used as
+ * an ID.
+ *
+ * @returns {string} A random string of characters.
+ * @example
+ * const id = generateRandomId();
+ * // id will be a random string of characters, such as "id-4711".
+ */
+const generateRandomId = () => {
+  return `id-${Math.random().toString(36).slice(7)}`;
+};
+
 const DEFAULT_TYPE$1 = Typography.TITLE_GROUP;
 const titleTypeMapping = {
   [Typography.TITLE_SCREEN]: 'h1',
@@ -640,8 +655,10 @@ const AccordionItem = ({
   const iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
     size: 24
   }) : null;
+  const fallbackId = useId();
+  const accordionId = id ?? fallbackId;
   return /*#__PURE__*/jsxs("div", {
-    id: id,
+    id: accordionId,
     className: classNames('np-accordion-item', iconElement ? 'np-accordion-item--with-icon' : null, {
       'np-accordion-item--open': open
     }),
@@ -655,14 +672,22 @@ const AccordionItem = ({
         size: Size.MEDIUM
       }),
       inverseMediaCircle: false,
+      "aria-expanded": open,
+      "aria-controls": `${accordionId}-section`,
+      id: `${accordionId}-control`,
       onClick: onClick
-    }), open && /*#__PURE__*/jsx(Body, {
-      as: "span",
-      type: Typography.BODY_LARGE,
-      className: classNames('np-accordion-item__content', 'd-block', {
-        'has-icon': icon
-      }),
-      children: content
+    }), open && /*#__PURE__*/jsx("div", {
+      id: `${accordionId}-section`,
+      role: "region",
+      "aria-labelledby": `${accordionId}-control`,
+      children: /*#__PURE__*/jsx(Body, {
+        as: "span",
+        type: Typography.BODY_LARGE,
+        className: classNames('np-accordion-item__content', 'd-block', {
+          'has-icon': icon
+        }),
+        children: content
+      })
     })]
   });
 };
@@ -2257,7 +2282,7 @@ var Card$2 = Card$1;
 
 const Card = ({
   className,
-  children = null,
+  children,
   id,
   isDisabled = false,
   isSmall = false,
@@ -2280,10 +2305,7 @@ const Card = ({
       size: isSmall ? 'sm' : 'md',
       isDisabled: isDisabled,
       testId: "close-button",
-      onClick: e => {
-        stopPropagation$1(e);
-        onDismiss();
-      }
+      onClick: onDismiss
     }), children]
   });
 };
@@ -10339,12 +10361,10 @@ const PromoCardIndicator = ({
   children,
   label,
   icon,
-  isSmall = false,
   testid,
   ...rest
 }) => {
-  const isIconString = icon && typeof icon === 'string';
-  const IconComponent = isIconString && {
+  const IconComponent = icon && {
     check: Check,
     arrow: ArrowRight,
     download: Download
@@ -10358,63 +10378,16 @@ const PromoCardIndicator = ({
       type: Typography.BODY_LARGE_BOLD,
       className: "np-Card-indicatorText",
       children: label
-    }), icon && /*#__PURE__*/jsx(Avatar, {
-      type: AvatarType.ICON,
-      size: isSmall ? 40 : 56,
-      backgroundColor: "var(--Card-indicator-icon-background-color)",
+    }), IconComponent && /*#__PURE__*/jsx("span", {
       className: "np-Card-indicatorIcon",
-      children: IconComponent ? /*#__PURE__*/jsx(IconComponent, {
+      children: /*#__PURE__*/jsx(IconComponent, {
         size: 24,
         "aria-hidden": "true"
-      }) : icon
+      })
     }), children]
   });
 };
 
-const generateRandomId = () => {
-  return `id-${Math.random().toString(36).slice(7)}`;
-};
-/**
- * PromoCard component.
- *
- * PromoCard is a marketing style component that is used to group marketing
- * product related information (such as choosing Card types). It can be used to
- * display information in a structured way, and can be customized with various
- * props to suit different use cases.
- *
- * @component
- * @param {string} className - Additional class name for the PromoCard.
- * @param {string} description - Description text for the PromoCard.
- * @param {boolean} defaultChecked - Initial checked state for checkboxes and radios.
- * @param {string} download - Download file name for links.
- * @param {string} href - URL for links.
- * @param {string} hrefLang - Language code for linked URL.
- * @param {string} id - ID of the PromoCard.
- * @param {string} imageAlt - Alt text for the image.
- * @param {string} imageSource - Source URL of the image.
- * @param {string} indicatorLabel - Label for the indicator icon.
- * @param {boolean} isChecked - Checked state for checkboxes and radios.
- * @param {boolean} isDisabled - Whether the PromoCard is disabled.
- * @param {Function} onClick - Click event handler for the PromoCard.
- * @param {string} rel - Relationship between the URL and the current page.
- * @param {number} tabIndex - Tab index for keyboard navigation.
- * @param {string} target - Target window for links.
- * @param {string} testId - ID used for testing.
- * @param {string} title - Title text of the PromoCard.
- * @param {('checkbox'|'radio')} type - Type of the PromoCard (checkbox, radio).
- * @param {string} value - Value for checkboxes and radios.
- * @returns {JSX.Element} The rendered PromoCard component.
- * @example
- * <PromoCard
- *   title="Example PromoCard"
- *   description="This is an example PromoCard with a link variation."
- *   href="https://example.com"
- *   target="_blank"
- *   imageSource="https://example.com/image.png"
- *   imageAlt="Example Image"
- *   indicatorLabel="Learn More"
- * />
- */
 const PromoCard = /*#__PURE__*/forwardRef(({
   className,
   description,
@@ -10428,7 +10401,6 @@ const PromoCard = /*#__PURE__*/forwardRef(({
   imageClass,
   imageSource,
   indicatorLabel,
-  indicatorIcon,
   isChecked,
   isDisabled,
   onClick,
@@ -10439,8 +10411,6 @@ 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,
@@ -10464,19 +10434,7 @@ 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`.
-  // Create a function to get icon type
-  const getIconType = () => {
-    if (indicatorIcon) {
-      return indicatorIcon;
-    }
-    if (download) {
-      return 'download';
-    }
-    if (href && !type) {
-      return 'arrow';
-    }
-    return undefined;
-  };
+  const icon = href && download ? 'download' : href ? 'arrow' : undefined;
   // Define all class names string based on the values of the `href`, `type`,
   // `checked`, and `className` props.
   const commonClasses = classNames({
@@ -10493,8 +10451,7 @@ const PromoCard = /*#__PURE__*/forwardRef(({
     isDisabled: isDisabled || contextIsDisabled,
     onClick,
     ref: reference,
-    'data-testid': testId,
-    isSmall
+    'data-testid': testId
   };
   // Object with Anchor props that will be passed to the `a` element. These
   // won't be refurned if set to `isDisabled`
@@ -10522,27 +10479,6 @@ 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]);
@@ -10556,7 +10492,17 @@ const PromoCard = /*#__PURE__*/forwardRef(({
         size: 24,
         "aria-hidden": "true"
       })
-    }), getTitle(), /*#__PURE__*/jsx(Body, {
+    }), /*#__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, {
       className: "np-Card-description",
       children: description
     }), imageSource && /*#__PURE__*/jsx("div", {
@@ -10570,8 +10516,7 @@ const PromoCard = /*#__PURE__*/forwardRef(({
       })
     }), /*#__PURE__*/jsx(PromoCardIndicator, {
       label: indicatorLabel,
-      icon: getIconType(),
-      isSmall: isSmall
+      icon: icon
     })]
   });
 });