@transferwise/components 0.0.0-experimental-4c97d70 → 0.0.0-experimental-862fadc

package/src/moneyInput/MoneyInput.tsx

@@ -24,7 +24,7 @@ import {
 import Title from '../title';
 
 import messages from './MoneyInput.messages';
-import { formatAmount, parseAmount } from './currencyFormatting';
+import { formatAmount, formatNumber, getCurrencyDecimals, parseAmount } from './currencyFormatting';
 import withId from '../withId';
 
 export interface CurrencyOptionItem {
@@ -48,24 +48,34 @@ const formatAmountIfSet = ({
   amount,
   currency,
   locale,
+  decimals,
 }: {
   amount: number | null | undefined;
   currency: string;
   locale: string;
+  decimals?: number;
 }) => {
-  return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
+  if (typeof amount !== 'number') {
+    return '';
+  }
+  if (decimals != null && getCurrencyDecimals(currency) !== 0) {
+    return formatNumber(amount, locale, decimals);
+  }
+  return formatAmount(amount, currency, locale);
 };
 
 const parseNumber = ({
   amount,
   currency,
   locale,
+  decimals,
 }: {
   amount: string;
   currency: string;
   locale: string;
+  decimals?: number;
 }) => {
-  return parseAmount(amount, currency, locale);
+  return parseAmount(amount, currency, locale, decimals);
 };
 
 const allowedInputKeys = new Set([
@@ -102,6 +112,12 @@ 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 &
@@ -133,6 +149,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
         amount: props.amount,
         currency: props.selectedCurrency.currency,
         locale: props.intl.locale,
+        decimals: props.decimals,
       }),
       locale: props.intl.locale,
     };
@@ -147,6 +164,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: nextProps.amount,
           currency: nextProps.selectedCurrency.currency,
           locale: nextProps.intl.locale,
+          decimals: nextProps.decimals,
         }),
       });
     }
@@ -174,6 +192,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: paste,
           currency: this.props.selectedCurrency.currency,
           locale,
+          decimals: this.props.decimals,
         });
 
     if (isNumberOrNull(parsed)) {
@@ -182,6 +201,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: parsed,
           currency: this.props.selectedCurrency.currency,
           locale,
+          decimals: this.props.decimals,
         }),
       });
       this.props.onAmountChange?.(parsed);
@@ -201,6 +221,7 @@ 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);
@@ -248,6 +269,7 @@ 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 {
@@ -259,6 +281,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: parsed,
           currency: this.props.selectedCurrency.currency,
           locale: previousState.locale,
+          decimals: this.props.decimals,
         }),
       };
     });
@@ -340,6 +363,7 @@ 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 } from '@transferwise/formatting';
+import { formatAmount, formatNumber } from '@transferwise/formatting';
 
 import { DEFAULT_LOCALE } from '../common/locale';
 
-export { formatAmount };
+export { formatAmount, formatNumber };
 
 // TODO: do not duplicate this between formatting and components
 const currencyDecimals: Record<string, number> = {
@@ -52,7 +52,7 @@ function getValidLocale(locale: string) {
   }
 }
 
-function getCurrencyDecimals(currency: string) {
+export function getCurrencyDecimals(currency: string) {
   const upperCaseCurrency = currency.toUpperCase();
   return currencyDecimals[upperCaseCurrency] ?? DEFAULT_CURRENCY_DECIMALS;
 }
@@ -61,10 +61,16 @@ function getDecimalSeparator(locale: string) {
   return isNumberLocaleSupported() ? (1.1).toLocaleString(locale)[1] : '.';
 }
 
-export function parseAmount(number: string, currency: string, locale = DEFAULT_LOCALE) {
+export function parseAmount(
+  number: string,
+  currency: string,
+  locale = DEFAULT_LOCALE,
+  decimals?: number,
+) {
   const validLocale = getValidLocale(locale);
 
-  const precision = getCurrencyDecimals(currency);
+  const currencyDefault = getCurrencyDecimals(currency);
+  const precision = currencyDefault === 0 ? 0 : (decimals ?? currencyDefault);
   const groupSeparator = isNumberLocaleSupported() ? (10000).toLocaleString(validLocale)[2] : ',';
   const decimalSeparator = getDecimalSeparator(validLocale);
   const numberWithStandardDecimalSeparator = (number || '')

package/src/prompt/ActionPrompt/ActionPrompt.tsx

@@ -1,19 +1,31 @@
 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?: PromptMedia;
+  media?: {
+    imgSrc?: string;
+    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
+      asset?: AvatarViewProps['children'];
+      badge?: Pick<BadgeAssetsProps, 'flagCode'>;
+    };
+    'aria-label'?: string;
+    'aria-hidden'?: boolean;
+  };
   action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
     label: ButtonProps['children'];
   };
@@ -62,13 +74,54 @@ export const ActionPrompt = ({
     .filter(Boolean)
     .join(' ');
 
-  const renderMedia = () =>
-    renderPromptMedia({
-      media,
-      sentiment,
-      mediaId,
-      imgClassName: 'wds-action-prompt--media-image',
-    });
+  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']}
+      />
+    );
+  };
 
   return (
     <PrimitivePrompt

package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx

@@ -1,6 +1,6 @@
 import { Cross } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import SentimentSurface, { Emphasis, Sentiment } from '../../sentimentSurface';
+import SentimentSurface, { Sentiment } from '../../sentimentSurface';
 import IconButton from '../../iconButton';
 import { useIntl } from 'react-intl';
 import closeBtnMessages from '../../common/closeButton/CloseButton.messages';
@@ -8,15 +8,10 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
   /**
-   * The sentiment determines the colour scheme.
+   * The sentiment determines the colour scheme
    * @default success
    */
   sentiment?: Sentiment;
-  /**
-   * The emphasis level affecting background and text contrast.
-   * @default 'base
-   */
-  emphasis?: Emphasis;
   /**
    * Media to be displayed on the prompt (icon/image/etc).
    */
@@ -40,7 +35,6 @@ export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
  * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */
 export const PrimitivePrompt = ({
   sentiment = 'success',
-  emphasis = 'base',
   media,
   actions,
   onDismiss,
@@ -53,7 +47,6 @@ export const PrimitivePrompt = ({
   return (
     <SentimentSurface
       sentiment={sentiment}
-      emphasis={emphasis}
       className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}
       {...restProps}
     >

package/src/prompt/index.ts

@@ -12,7 +12,3 @@ export { ActionPrompt } from './ActionPrompt';
 // InfoPrompt
 export type { InfoPromptProps, InfoPromptAction, InfoPromptMedia } from './InfoPrompt';
 export { InfoPrompt } from './InfoPrompt';
-
-// CriticalBanner
-export type { CriticalBannerProps } from './CriticalBanner';
-export { CriticalBanner } from './CriticalBanner';

package/src/select/Select.css

@@ -123,14 +123,15 @@
   max-width: calc(100% - 32px);
 }
 .np-dropdown-menu-desktop {
-  max-height: 70vh;
   max-height: 70svh;
+  max-height: var(--np-panel-available-height, 70svh);
   min-width: 160px;
   max-width: calc(100vw - 32px);
 }
 @media (min-height: 592px) {
   .np-dropdown-menu-desktop {
     max-height: 592px;
+    max-height: var(--np-panel-available-height, 592px);
   }
 }
 .np-dropdown-menu {

package/src/select/Select.less

@@ -81,7 +81,7 @@
 
   // Override some of Button component styles
   .btn {
-    &:not(.disabled,:disabled,.btn-loading) {
+    &:not(.disabled, :disabled, .btn-loading) {
       color: var(--color-content-primary);
 
       &:hover {
@@ -108,15 +108,14 @@
 }
 
 .np-dropdown-menu-desktop {
-  max-height: 70vh;
-  max-height: 70svh;
+  max-height: var(--np-panel-available-height, 70svh);
   min-width: 160px;
   max-width: ~"calc(100vw - 32px)";
 }
 
 @media (min-height: 592px) {
   .np-dropdown-menu-desktop {
-    max-height: 592px;
+    max-height: var(--np-panel-available-height, 592px);
   }
 }
 
@@ -270,7 +269,9 @@
   /* stylelint-disable-next-line no-duplicate-selectors */
   .np-select .np-dropdown-toggle {
     background-color: unset;
-    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+    transition:
+      background-color 0.3s ease-in-out,
+      box-shadow 0.3s ease-in-out;
     border: none;
     box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 

package/src/select/Select.test.story.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within } from 'storybook/test';
+import { useState } from 'react';
+
+import { withVariantConfig } from '../../.storybook/helpers';
+import Select, { SelectOptionItem } from './Select';
+
+const meta = {
+  title: 'Forms/Select/Tests',
+  component: Select,
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Select>;
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+const options: SelectOptionItem[] = Array.from({ length: 10 }, (_, i) => ({
+  value: i + 1,
+  label: `Option ${i + 1}`,
+}));
+
+/**
+ * Visual regression story: Select placed at the bottom of the viewport so the dropdown
+ * flips to the top when opened. The play function opens the dropdown automatically.
+ */
+export const DropdownFlipsToTop: Story = {
+  render: function Render() {
+    const [selected, setSelected] = useState<SelectOptionItem>(options[0]);
+    return (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'flex-end',
+          minHeight: '50vh',
+        }}
+      >
+        <Select
+          id="flip-test-select"
+          size="md"
+          block
+          options={options}
+          selected={selected}
+          onChange={(option) => {
+            if (option && 'value' in option) {
+              setSelected(option as SelectOptionItem);
+            }
+          }}
+        />
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole('button', { name: /Option 1/i });
+    await userEvent.click(trigger);
+  },
+  ...withVariantConfig(['default']),
+};

package/src/select/Select.tsx

@@ -608,8 +608,8 @@ export default function Select({
       ) : (
         <Panel
           open={open}
-          flip={false}
           altAxis
+          considerHeight
           anchorRef={selectReference}
           anchorWidth={isDropdownAutoWidth}
           position={dropdownUp ? Position.TOP : Position.BOTTOM}

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -202,26 +202,18 @@ const TokenSwatch = ({ token }: { token: string }) => (
 export const EmphasisLevels: Story = {
   render: (args) => (
     <>
-      {sentiments.map((sentiment) => (
-        <div key={sentiment}>
-          <SentimentSurface
-            key={`${sentiment}-base`}
-            {...args}
-            sentiment={sentiment}
-            emphasis="base"
-          >
-            <div className="p-a-2 text-capitalize">{sentiment} - Base emphasis</div>
-          </SentimentSurface>
-          <SentimentSurface
-            key={`${sentiment}-elevated`}
-            {...args}
-            sentiment={sentiment}
-            emphasis="elevated"
-          >
-            <div className="p-a-2 text-capitalize">{sentiment} - Elevated emphasis</div>
-          </SentimentSurface>
-        </div>
-      ))}
+      <SentimentSurface {...args} sentiment="negative" emphasis="base">
+        <div className="p-a-2">Negative - Base emphasis</div>
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="negative" emphasis="elevated">
+        <div className="p-a-2">Negative - Elevated emphasis</div>
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="success" emphasis="base">
+        <div className="p-a-2">Success - Base emphasis</div>
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="success" emphasis="elevated">
+        <div className="p-a-2">Success - Elevated emphasis</div>
+      </SentimentSurface>
     </>
   ),
   parameters: {
@@ -377,8 +369,8 @@ export const SentimentAwareComponents: Story = {
           {STATUS_NEGATIVE}
         </div>
 
-        <Header level="group" title="Success sentiment surface - Base emphasis" />
-        <SentimentSurface sentiment="success" emphasis="base">
+        <Header level="group" title="Success sentiment surface" />
+        <SentimentSurface sentiment="success">
           <div className="p-a-2 m-b-2 sentimentAwareComponent">
             {BODY}
             {AVATAR_SUCCESS}
@@ -386,26 +378,8 @@ export const SentimentAwareComponents: Story = {
           </div>
         </SentimentSurface>
 
-        <Header level="group" title="Success sentiment surface - Elevated emphasis" />
-        <SentimentSurface sentiment="success" emphasis="elevated">
-          <div className="p-a-2 m-b-2 sentimentAwareComponent">
-            {BODY}
-            {AVATAR_SUCCESS}
-            {STATUS_SUCCESS}
-          </div>
-        </SentimentSurface>
-
-        <Header level="group" title="Negative sentiment surface - Base emphasis" />
-        <SentimentSurface sentiment="negative" emphasis="base">
-          <div className="p-a-2 m-b-2 sentimentAwareComponent">
-            {BODY}
-            {AVATAR_NEGATIVE}
-            {STATUS_NEGATIVE}
-          </div>
-        </SentimentSurface>
-
-        <Header level="group" title="Negative sentiment surface - Elevated emphasis" />
-        <SentimentSurface sentiment="negative" emphasis="elevated">
+        <Header level="group" title="Negative sentiment surface" />
+        <SentimentSurface sentiment="negative">
           <div className="p-a-2 m-b-2 sentimentAwareComponent">
             {BODY}
             {AVATAR_NEGATIVE}
@@ -453,7 +427,7 @@ function CustomCard({ children, className }: { className?: string; children: Rea
 
 export const CustomComponents: Story = {
   tags: ['!autodocs', '!dev'],
-  render: () => (
+  render: (args) => (
     <>
       <style>{`
         .custom-card {