@transferwise/components 0.0.0-experimental-70cb6d1 → 0.0.0-experimental-8bfed24

package/src/moneyInput/MoneyInput.tsx

@@ -24,7 +24,7 @@ import {
 import Title from '../title';
 
 import messages from './MoneyInput.messages';
-import { formatAmount, formatNumber, getCurrencyDecimals, parseAmount } from './currencyFormatting';
+import { formatAmount, parseAmount } from './currencyFormatting';
 import withId from '../withId';
 
 export interface CurrencyOptionItem {
@@ -48,34 +48,24 @@ const formatAmountIfSet = ({
   amount,
   currency,
   locale,
-  decimals,
 }: {
   amount: number | null | undefined;
   currency: string;
   locale: string;
-  decimals?: number;
 }) => {
-  if (typeof amount !== 'number') {
-    return '';
-  }
-  if (decimals != null && getCurrencyDecimals(currency) !== 0) {
-    return formatNumber(amount, locale, decimals);
-  }
-  return formatAmount(amount, currency, locale);
+  return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
 };
 
 const parseNumber = ({
   amount,
   currency,
   locale,
-  decimals,
 }: {
   amount: string;
   currency: string;
   locale: string;
-  decimals?: number;
 }) => {
-  return parseAmount(amount, currency, locale, decimals);
+  return parseAmount(amount, currency, locale);
 };
 
 const allowedInputKeys = new Set([
@@ -112,12 +102,6 @@ export interface MoneyInputProps extends WrappedComponentProps {
   onCustomAction?: () => void;
   classNames?: Record<string, string>;
   selectProps?: Partial<SelectInputProps<CurrencyOptionItem>>;
-  /**
-   * Specify the number of decimal places to format the amount. When not specified, the number of
-   * decimals is determined by the selected currency (e.g. 2 for EUR, 0 for JPY, 3 for BHD).
-   * This override is ignored for zero-decimal currencies (e.g. JPY, KRW, HUF), which always use 0.
-   */
-  decimals?: number;
 }
 
 export type MoneyInputPropsWithInputAttributes = MoneyInputProps &
@@ -149,7 +133,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
         amount: props.amount,
         currency: props.selectedCurrency.currency,
         locale: props.intl.locale,
-        decimals: props.decimals,
       }),
       locale: props.intl.locale,
     };
@@ -164,7 +147,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: nextProps.amount,
           currency: nextProps.selectedCurrency.currency,
           locale: nextProps.intl.locale,
-          decimals: nextProps.decimals,
         }),
       });
     }
@@ -192,7 +174,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: paste,
           currency: this.props.selectedCurrency.currency,
           locale,
-          decimals: this.props.decimals,
         });
 
     if (isNumberOrNull(parsed)) {
@@ -201,7 +182,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: parsed,
           currency: this.props.selectedCurrency.currency,
           locale,
-          decimals: this.props.decimals,
         }),
       });
       this.props.onAmountChange?.(parsed);
@@ -221,7 +201,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: value,
           currency: this.props.selectedCurrency.currency,
           locale: this.state.locale,
-          decimals: this.props.decimals,
         });
     if (isNumberOrNull(parsed)) {
       this.props.onAmountChange?.(parsed);
@@ -269,7 +248,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
         amount: previousState.formattedAmount,
         currency: this.props.selectedCurrency.currency,
         locale: previousState.locale,
-        decimals: this.props.decimals,
       });
       if (!isNumberOrNull(parsed)) {
         return {
@@ -281,7 +259,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: parsed,
           currency: this.props.selectedCurrency.currency,
           locale: previousState.locale,
-          decimals: this.props.decimals,
         }),
       };
     });
@@ -363,7 +340,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
             amount: this.props.placeholder,
             currency: this.props.selectedCurrency.currency,
             locale: this.state.locale,
-            decimals: this.props.decimals,
           })}
           autoComplete="off"
           aria-describedby={selectedCurrencyElementId}

package/src/moneyInput/currencyFormatting.ts

@@ -1,8 +1,8 @@
-import { formatAmount, formatNumber } from '@transferwise/formatting';
+import { formatAmount } from '@transferwise/formatting';
 
 import { DEFAULT_LOCALE } from '../common/locale';
 
-export { formatAmount, formatNumber };
+export { formatAmount };
 
 // TODO: do not duplicate this between formatting and components
 const currencyDecimals: Record<string, number> = {
@@ -52,7 +52,7 @@ function getValidLocale(locale: string) {
   }
 }
 
-export function getCurrencyDecimals(currency: string) {
+function getCurrencyDecimals(currency: string) {
   const upperCaseCurrency = currency.toUpperCase();
   return currencyDecimals[upperCaseCurrency] ?? DEFAULT_CURRENCY_DECIMALS;
 }
@@ -61,16 +61,10 @@ function getDecimalSeparator(locale: string) {
   return isNumberLocaleSupported() ? (1.1).toLocaleString(locale)[1] : '.';
 }
 
-export function parseAmount(
-  number: string,
-  currency: string,
-  locale = DEFAULT_LOCALE,
-  decimals?: number,
-) {
+export function parseAmount(number: string, currency: string, locale = DEFAULT_LOCALE) {
   const validLocale = getValidLocale(locale);
 
-  const currencyDefault = getCurrencyDecimals(currency);
-  const precision = currencyDefault === 0 ? 0 : (decimals ?? currencyDefault);
+  const precision = getCurrencyDecimals(currency);
   const groupSeparator = isNumberLocaleSupported() ? (10000).toLocaleString(validLocale)[2] : ',';
   const decimalSeparator = getDecimalSeparator(validLocale);
   const numberWithStandardDecimalSeparator = (number || '')

package/src/prompt/ActionPrompt/ActionPrompt.tsx

@@ -1,31 +1,19 @@
 import { AriaAttributes, ReactNode, useId } from 'react';
 import { clsx } from 'clsx';
 
-import StatusIcon from '../../statusIcon';
 import Body from '../../body';
 import Button from '../../button';
 import { Breakpoint, Typography } from '../../common';
-import AvatarView, { AvatarViewProps } from '../../avatarView';
-import Image from '../../image';
 import { ButtonProps } from '../../button/Button.types';
 import { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';
-import { BadgeAssetsProps } from '../../badge';
-import { GiftBox } from '@transferwise/icons';
 import { useScreenSize } from '../../common/hooks/useScreenSize';
+import { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';
 
 export type ActionPromptProps = {
   title: ReactNode;
   description?: ReactNode;
   /** @default {} */
-  media?: {
-    imgSrc?: string;
-    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
-      asset?: AvatarViewProps['children'];
-      badge?: Pick<BadgeAssetsProps, 'flagCode'>;
-    };
-    'aria-label'?: string;
-    'aria-hidden'?: boolean;
-  };
+  media?: PromptMedia;
   action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
     label: ButtonProps['children'];
   };
@@ -74,54 +62,13 @@ export const ActionPrompt = ({
     .filter(Boolean)
     .join(' ');
 
-  const renderMedia = () => {
-    if (media?.imgSrc) {
-      return (
-        <Image
-          id={mediaId}
-          src={media.imgSrc}
-          className="wds-action-prompt--media-image"
-          alt={media['aria-label'] ?? ''}
-        />
-      );
-    }
-    if (media?.avatar) {
-      const badge = media.avatar.badge
-        ? media.avatar.badge
-        : sentiment === 'proposition'
-          ? {}
-          : { status: sentiment };
-      return (
-        <AvatarView
-          {...media.avatar}
-          badge={badge}
-          aria-label={media['aria-label']}
-          aria-hidden={media['aria-hidden']}
-          id={mediaId}
-          size={48}
-        >
-          {media.avatar.asset}
-        </AvatarView>
-      );
-    }
-    return sentiment === 'proposition' ? (
-      <AvatarView
-        id={mediaId}
-        size={48}
-        aria-label={media['aria-label']}
-        aria-hidden={media['aria-hidden']}
-      >
-        <GiftBox />
-      </AvatarView>
-    ) : (
-      <StatusIcon
-        id={mediaId}
-        size={48}
-        sentiment={sentiment}
-        iconLabel={media['aria-hidden'] ? null : media['aria-label']}
-      />
-    );
-  };
+  const renderMedia = () =>
+    renderPromptMedia({
+      media,
+      sentiment,
+      mediaId,
+      imgClassName: 'wds-action-prompt--media-image',
+    });
 
   return (
     <PrimitivePrompt

package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx

@@ -0,0 +1,131 @@
+import { Meta, Source, Canvas } from '@storybook/addon-docs/blocks';
+import * as CriticalBannerStories from './CriticalBanner.story';
+
+<Meta title="Prompts/CriticalBanner/Accessibility" tags={['new']} />
+
+# Accessibility
+
+Under the hood, `CriticalBanner` is marked as `role="region"` for a section of content that users might want to navigate to directly.
+
+By default, it's labelled by the `title` and described by the `description`.
+
+## Announcement Behavior
+
+`CriticalBanner` is designed for critical messages that require immediate attention. It always uses **`aria-live="assertive"`** to immediately interrupt and announce changes to screen readers.
+
+Unlike `InfoPrompt` which offers configurable politeness levels, `CriticalBanner` is always assertive because it communicates critical, time-sensitive information that users must be aware of immediately.
+
+### What Gets Announced
+
+The component intelligently announces only **visible content**, respecting the collapsed/expanded state:
+
+- **Collapsed with title**: Announces title only (description is hidden)
+- **Collapsed without title**: Announces description only (visible up to 2 lines)
+- **Expanded**: Announces title, description, and action button labels (all visible)
+
+<Source
+  dark
+  code={`
+// Collapsed with title - announces: "Your account requires verification"
+<CriticalBanner
+  title="Your account requires verification"
+  description="Please verify your identity to continue"
+  action={{ label: "Verify now", onClick: handleVerify }}
+  expanded={false}
+  onToggle={handleToggle}
+/>
+
+// Expanded - announces: "Your account requires verification | Please verify your identity to continue | Verify now | Learn more"
+
+<CriticalBanner
+  title="Your account requires verification"
+  description="Please verify your identity to continue"
+  action={{ label: 'Verify now', onClick: handleVerify }}
+  actionSecondary={{ label: 'Learn more', onClick: handleLearnMore }}
+  expanded={true}
+  onToggle={handleToggle}
+/>
+
+// Collapsed without title - announces: "Your verification is pending..."
+
+<CriticalBanner
+  description="Your verification is pending. We'll notify you once complete."
+  expanded={false}
+  onToggle={handleToggle}
+/>
+`}
+/>
+
+### When Announcements Trigger
+
+Screen readers announce the banner content whenever:
+
+- The banner first appears in the DOM
+- The user toggles between collapsed and expanded states
+- The content (title, description, or action labels) changes
+
+## Custom Labels
+
+If you want to provide a custom label for screen readers, you can use the `aria-label` prop. Make sure to include all necessary information in it, because when provided, the default labelling will be removed.
+
+<Source
+  dark
+  code={`
+<CriticalBanner
+  title="Account suspended"
+  description="Unusual activity detected"
+  action={{ label: "Verify identity", onClick: handleVerify }}
+  aria-label="Critical: Your account has been suspended due to unusual activity. Please verify your identity immediately to restore access."
+  expanded={false}
+  onToggle={handleToggle}
+/>
+`}
+/>
+
+## Media
+
+Custom media icons should include their own accessibility attributes. Use the `title` prop on icons to provide accessible names for screen readers:
+
+<Source
+  dark
+  code={`
+import { Bank, AlertCircle } from '@transferwise/icons';
+
+<CriticalBanner
+  title="Bank connection required"
+  description="Connect your bank account to continue"
+  media={{ avatar: { asset: <Bank title="Bank account" /> } }}
+  action={{ label: 'Connect now', onClick: handleConnect }}
+  expanded={false}
+  onToggle={handleToggle}
+/>
+
+<CriticalBanner
+  title="Verification required"
+  description="We need to verify your identity"
+  media={{ avatar: { asset: <AlertCircle title="Alert" /> } }}
+  action={{ label: "Start verification", onClick: handleVerify }}
+  expanded={false}
+  onToggle={handleToggle}
+/>
+`}
+/>
+
+Alternatively, you can use `media['aria-label']` to provide a label for custom images:
+
+<Source
+  dark
+  code={`
+<CriticalBanner
+  title="Card blocked"
+  description="Your card has been blocked for security reasons"
+  media={{
+    imgSrc: '/wise-card.svg',
+    'aria-label': 'Wise debit card'
+  }}
+  action={{ label: "Unblock card", onClick: handleUnblock }}
+  expanded={false}
+  onToggle={handleToggle}
+/>
+`}
+/>

package/src/prompt/CriticalBanner/CriticalBanner.css

@@ -0,0 +1,39 @@
+.wds-critical-banner {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: 0;
+}
+.wds-critical-banner--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+@media (max-width: 767px) {
+  .wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}
+.wds-critical-banner__description--collapsed {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.wds-critical-banner .wds-prompt__content-wrapper {
+  grid-template-columns: auto 1fr auto;
+  align-items: flex-start;
+}
+.wds-critical-banner__text-wrapper {
+  min-width: 0;
+}
+@media (max-width: 767px) {
+  .wds-critical-banner .wds-prompt__actions-wrapper {
+    grid-column: span 3;
+  }
+}

package/src/prompt/CriticalBanner/CriticalBanner.less

@@ -0,0 +1,45 @@
+.wds-critical-banner {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: 0;
+
+  &--media-image {
+    width: var(--size-48);
+    height: var(--size-48);
+    object-fit: contain;
+  }
+
+  &--with-two-actions {
+    @media (--screen-sm-max) {
+      .wds-prompt__actions-wrapper {
+        .wds-Button {
+          flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+          min-width: fit-content;
+        }
+      }
+    }
+  }
+
+  &__description--collapsed {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .wds-prompt__content-wrapper {
+    grid-template-columns: auto 1fr auto;
+    align-items: flex-start;
+  }
+
+  &__text-wrapper {
+    min-width: 0;
+  }
+
+  .wds-prompt__actions-wrapper {
+    @media (--screen-sm-max) {
+      grid-column: span 3;
+    }
+  }
+}