@transferwise/components 0.0.0-experimental-9ff97c1 → 0.0.0-experimental-8d248e3

package/build/index.js

@@ -3,6 +3,7 @@
 var classNames = require('classnames');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var reactId = require('@radix-ui/react-id');
 var icons = require('@transferwise/icons');
 var PropTypes = require('prop-types');
 var reactIntl = require('react-intl');
@@ -16,7 +17,6 @@ var mergeRefs = require('react-merge-refs');
 var neptuneValidation = require('@transferwise/neptune-validation');
 var reactPopper = require('react-popper');
 var react$1 = require('@headlessui/react');
-var reactId = require('@radix-ui/react-id');
 var shim = require('use-sync-external-store/shim');
 var react = require('@floating-ui/react');
 var overlays = require('@react-aria/overlays');
@@ -490,6 +490,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 = exports.Typography.TITLE_GROUP;
 const titleTypeMapping = {
   [exports.Typography.TITLE_SCREEN]: 'h1',
@@ -673,8 +688,10 @@ const AccordionItem = ({
   const iconElement = icon ? /*#__PURE__*/React.cloneElement(icon, {
     size: 24
   }) : null;
+  const fallbackId = reactId.useId();
+  const accordionId = id ?? fallbackId;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    id: id,
+    id: accordionId,
     className: classNames__default.default('np-accordion-item', iconElement ? 'np-accordion-item--with-icon' : null, {
       'np-accordion-item--open': open
     }),
@@ -688,14 +705,22 @@ const AccordionItem = ({
         size: exports.Size.MEDIUM
       }),
       inverseMediaCircle: false,
+      "aria-expanded": open,
+      "aria-controls": `${accordionId}-section`,
+      id: `${accordionId}-control`,
       onClick: onClick
-    }), open && /*#__PURE__*/jsxRuntime.jsx(Body, {
-      as: "span",
-      type: exports.Typography.BODY_LARGE,
-      className: classNames__default.default('np-accordion-item__content', 'd-block', {
-        'has-icon': icon
-      }),
-      children: content
+    }), open && /*#__PURE__*/jsxRuntime.jsx("div", {
+      id: `${accordionId}-section`,
+      role: "region",
+      "aria-labelledby": `${accordionId}-control`,
+      children: /*#__PURE__*/jsxRuntime.jsx(Body, {
+        as: "span",
+        type: exports.Typography.BODY_LARGE,
+        className: classNames__default.default('np-accordion-item__content', 'd-block', {
+          'has-icon': icon
+        }),
+        children: content
+      })
     })]
   });
 };
@@ -796,7 +821,7 @@ const ActionOption = ({
   });
 };
 
-var messages$9 = reactIntl.defineMessages({
+var messages$a = reactIntl.defineMessages({
   ariaLabel: {
     id: "neptune.CloseButton.ariaLabel"
   }
@@ -812,7 +837,7 @@ const CloseButton = /*#__PURE__*/React.forwardRef(function CloseButton({
   testId
 }, reference) {
   const intl = reactIntl.useIntl();
-  ariaLabel ??= intl.formatMessage(messages$9.ariaLabel);
+  ariaLabel ??= intl.formatMessage(messages$a.ariaLabel);
   const Icon = filled ? icons.CrossCircleFill : icons.Cross;
   return /*#__PURE__*/jsxRuntime.jsx("button", {
     ref: reference,
@@ -832,7 +857,7 @@ const CloseButton = /*#__PURE__*/React.forwardRef(function CloseButton({
   });
 });
 
-var messages$8 = reactIntl.defineMessages({
+var messages$9 = reactIntl.defineMessages({
   opensInNewTab: {
     id: "neptune.Link.opensInNewTab"
   }
@@ -861,7 +886,7 @@ const Link = ({
     onClick: onClick,
     ...props,
     children: [children, " ", isBlank && /*#__PURE__*/jsxRuntime.jsx(icons.NavigateAway, {
-      title: formatMessage(messages$8.opensInNewTab)
+      title: formatMessage(messages$9.opensInNewTab)
     })]
   });
 };
@@ -2101,6 +2126,12 @@ const BottomSheet$1 = props => {
 };
 var BottomSheet$2 = BottomSheet$1;
 
+var messages$8 = reactIntl.defineMessages({
+  loadingAriaLabel: {
+    id: "neptune.Button.loadingAriaLabel"
+  }
+});
+
 const typeClassMap$1 = {
   [exports.ControlType.ACCENT]: 'btn-accent',
   [exports.ControlType.POSITIVE]: 'btn-positive',
@@ -2167,6 +2198,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
   type = exports.ControlType.ACCENT,
   ...rest
 }, reference) => {
+  const intl = reactIntl.useIntl();
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   logDeprecationNotices({
     size,
@@ -2209,6 +2241,8 @@ const Button = /*#__PURE__*/React.forwardRef(({
     ref: reference,
     className: classes,
     ...props,
+    "aria-live": loading ? 'polite' : 'off',
+    "aria-label": loading ? intl.formatMessage(messages$8.loadingAriaLabel) : undefined,
     children: [children, loading && /*#__PURE__*/jsxRuntime.jsx("span", {
       className: classNames__default.default('btn-loader', {
         'm-l-2': !block
@@ -10425,50 +10459,6 @@ const PromoCardIndicator = ({
   });
 };
 
-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__*/React.forwardRef(({
   className,
   description,
@@ -10643,6 +10633,7 @@ const LanguageProvider = ({
 };
 
 var en = {
+	"neptune.Button.loadingAriaLabel": "loading",
 	"neptune.Chips.ariaLabel": "Clear {choice}",
 	"neptune.ClearButton.ariaLabel": "Clear",
 	"neptune.CloseButton.ariaLabel": "Close",