@transferwise/components 46.112.1 → 46.113.0

package/src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx

@@ -0,0 +1,220 @@
+import type { AvatarLayoutProps } from '../../avatarLayout';
+import Button from '../../button';
+import {
+  SelectInput,
+  SelectInputOptionContent,
+  SelectInputTriggerButton,
+} from '../../inputs/SelectInput';
+import { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+import { ChevronDown } from '@transferwise/icons';
+import { Flag } from '@wise/art';
+import {
+  type ButtonHTMLAttributes,
+  forwardRef,
+  type MouseEventHandler,
+  useMemo,
+  useState,
+} from 'react';
+import { useIntl } from 'react-intl';
+
+import messages from '../ExpressiveMoneyInput.messages';
+
+export interface CurrencyOption {
+  label?: string;
+  code: string;
+  keywords: string[] | undefined;
+}
+
+export interface CurrencySection {
+  title: string;
+  currencies: CurrencyOption[];
+}
+
+export type CurrencyOptions = CurrencySection[];
+
+export type Props = {
+  id: string;
+  labelId: string;
+  options?: CurrencyOptions;
+  onChange?: (currency: CurrencyType) => void;
+  onOpen?: () => void;
+  addons?: AvatarLayoutProps['avatars'];
+  onSearchChange?: (payload: { query: string; resultCount: number }) => void;
+} & Pick<ExpressiveMoneyInputProps, 'currency'>;
+
+export const CurrencySelector = ({
+  id,
+  currency,
+  options = [],
+  labelId,
+  onChange,
+  addons,
+  onOpen,
+  onSearchChange,
+}: Props) => {
+  const intl = useIntl();
+
+  const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);
+
+  const activeCurrencyOption = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return allCurrencyOptions.find((option) => option.code === currency)!;
+  }, [currency, allCurrencyOptions]);
+
+  const disabled =
+    !onChange ||
+    options.length === 0 ||
+    (options.length === 1 && options[0].currencies.length <= 1);
+
+  const [searchQuery, setSearchQuery] = useState<string>('');
+
+  const handleTriggerClick: MouseEventHandler = (event) => {
+    const triggerEl = event.currentTarget;
+    if (triggerEl?.getAttribute('aria-expanded') === 'false') {
+      onOpen?.();
+    }
+  };
+
+  const items = searchQuery
+    ? filterAndSortCurrenciesForQuery(allCurrencyOptions, searchQuery).map(getCurrencySelectOption)
+    : options.map(getCurrencyGroup);
+
+  return (
+    <SelectInput
+      compareValues="code"
+      disabled={disabled}
+      id={id}
+      value={activeCurrencyOption}
+      filterable
+      filterPlaceholder={intl.formatMessage(messages.currencySelectorSearchPlaceholder)}
+      UNSAFE_triggerButtonProps={{
+        id: undefined,
+        'aria-labelledby': undefined,
+        'aria-describedby': labelId,
+        'aria-invalid': undefined,
+        'aria-label': intl.formatMessage(messages.currencySelectorSelectCurrency),
+      }}
+      items={items}
+      renderValue={({ code, label }) => {
+        return (
+          <SelectInputOptionContent
+            title={code}
+            note={label}
+            icon={<Flag code={code} intrinsicSize={24} />}
+          />
+        );
+      }}
+      renderTrigger={() => (
+        <SelectInputTriggerButton
+          as={ButtonInput}
+          // @ts-expect-error new (v2) ButtonProps
+          addonStart={{
+            type: 'avatar',
+            value: [
+              addons ? addons[0] : null,
+              {
+                ...(addons && addons.length > 1
+                  ? { ...addons[1] }
+                  : {
+                      asset: <Flag code={currency} />,
+                    }),
+              },
+            ]
+              .filter(Boolean)
+              .filter((avatar) => !(avatar && Object.keys(avatar).length === 0)),
+          }}
+          addonEnd={disabled ? undefined : { type: 'icon', value: <ChevronDown /> }}
+          onClick={(event) => handleTriggerClick(event)}
+        >
+          {currency}
+        </SelectInputTriggerButton>
+      )}
+      onChange={(newValue) => {
+        onChange?.(newValue.code);
+      }}
+      onFilterChange={({ queryNormalized }) => {
+        setSearchQuery(queryNormalized ?? '');
+        if (queryNormalized) {
+          onSearchChange?.({
+            query: queryNormalized,
+            resultCount: filterAndSortCurrenciesForQuery(allCurrencyOptions, queryNormalized)
+              .length,
+          });
+        }
+      }}
+    />
+  );
+};
+
+export const ButtonInput = forwardRef(function ButtonInput(
+  { children, ...rest }: React.PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,
+  ref: React.ForwardedRef<HTMLButtonElement | null>,
+) {
+  return (
+    <Button
+      ref={ref}
+      size="md"
+      v2
+      className="wds-currency-selector"
+      priority="secondary-neutral"
+      {...rest}
+    >
+      {children}
+    </Button>
+  );
+});
+
+const getCurrencySelectOption = (currency: CurrencyOption) => {
+  return {
+    type: 'option' as const,
+    value: currency,
+    filterMatchers: currency.keywords,
+  };
+};
+
+const getCurrencyGroup = (section: CurrencySection) => {
+  return {
+    type: 'group' as const,
+    label: section.title,
+    options: section.currencies.map(getCurrencySelectOption),
+  };
+};
+
+const getUniqueCurrencies = (options: CurrencyOptions) => {
+  const allCurrencyOptions = options.flatMap((section) => section.currencies);
+  const uniqueCurrencies = new Map<string, CurrencyOption>();
+
+  allCurrencyOptions.forEach((currencyObj) => {
+    uniqueCurrencies.set(currencyObj.code, currencyObj);
+  });
+
+  return Array.from(uniqueCurrencies.values());
+};
+
+const filterAndSortCurrenciesForQuery = (
+  currencies: CurrencyOption[],
+  query: string,
+): CurrencyOption[] => {
+  return (
+    currencies
+      .filter((currency) => {
+        return (
+          currency.code.toLowerCase().includes(query) ||
+          (currency.label ?? '').toLowerCase().includes(query) ||
+          currency.keywords?.some((keyword) => keyword.toLowerCase().includes(query))
+        );
+      })
+      // prefer exact matches, then sort alphabetically by code
+      .sort((a, b) => {
+        const aCode = a.code.toLowerCase();
+        const bCode = b.code.toLowerCase();
+        if (aCode === query) {
+          return -1;
+        }
+        if (bCode === query) {
+          return 1;
+        }
+        return aCode.localeCompare(bCode);
+      })
+  );
+};

package/src/expressiveMoneyInput/hooks/useFocus.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+const focusTimeout = 5 * 1000;
+
+export const useFocus = () => {
+  const [focus, setFocus] = useState(false);
+  const [visualFocus, setVisualFocus] = useState(false);
+  const [counter, setCounter] = useState(0);
+
+  useEffect(() => {
+    if (focus) {
+      const timeout = setTimeout(() => {
+        setVisualFocus(false);
+      }, focusTimeout);
+      return () => clearTimeout(timeout);
+    }
+  }, [focus, counter]);
+
+  return {
+    focus,
+    setFocus: (value: boolean) => {
+      setFocus(value);
+      if (value) {
+        setVisualFocus(true);
+      }
+      // any call to setFocus should reset the timeout, even if the input was already in focus
+      // updating the counter will trigger the useEffect to reset the timeout
+      setCounter((prev) => prev + 1);
+    },
+    visualFocus,
+    setVisualFocus: (value: boolean) => {
+      setVisualFocus(value);
+    },
+  };
+};

package/src/expressiveMoneyInput/hooks/useInputStyle.ts

@@ -0,0 +1,85 @@
+import { type CSSProperties, useEffect, useLayoutEffect, useState } from 'react';
+import { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+
+type InputStyleObject = {
+  value: string;
+  focus: boolean;
+  inputElement: HTMLInputElement | null;
+} & Pick<ExpressiveMoneyInputProps, 'loading'>;
+
+export const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {
+  const initialRender = !useTimeout(300);
+  const inputWidth = useFirstDefinedValue(inputElement?.clientWidth, [inputElement, value]);
+
+  const getStyle = (): CSSProperties => {
+    const fontSize = getFontSize(value, focus, inputWidth);
+
+    return {
+      fontSize,
+      height: fontSize,
+      // aligns the top of the digit with the currency button
+      marginTop: fontSize * -0.19,
+      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately
+      transition: initialRender ? 'none' : undefined,
+      color: loading ? 'var(--color-interactive-secondary)' : undefined,
+    };
+  };
+
+  const [style, setStyle] = useState(getStyle());
+
+  useLayoutEffect(() => {
+    setStyle(getStyle());
+  }, [value, focus, loading, inputWidth]);
+
+  return style;
+};
+
+function getFontSize(inputValue: string, isFocused: boolean, inputWidth: number | undefined) {
+  const defaultFontSize = 52;
+  const focusFontSize = 90;
+  const minimumFontSize = 34;
+
+  let fontSize = isFocused ? focusFontSize : defaultFontSize;
+
+  if (typeof inputWidth === 'undefined') {
+    return fontSize;
+  }
+  const textLength = inputValue.length;
+  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);
+
+  if (textLength > maxCharactersWithoutShrinking) {
+    const adjustedSize = Math.round((inputWidth / textLength) * 1.9);
+    fontSize = Math.min(fontSize, adjustedSize);
+  }
+
+  return Math.max(fontSize, minimumFontSize);
+}
+
+const useFirstDefinedValue = (newValue: number | undefined, dependencies: unknown[]) => {
+  const [value, setValue] = useState<number | undefined>(newValue);
+
+  useLayoutEffect(() => {
+    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {
+      setValue(newValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...dependencies, value]);
+
+  return value;
+};
+
+const useTimeout = (delay: number) => {
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setReady(true);
+    }, delay);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [delay]);
+
+  return ready;
+};

package/src/expressiveMoneyInput/hooks/useSelectionRange.ts

@@ -0,0 +1,23 @@
+import { type SyntheticEvent, useRef } from 'react';
+
+export const useSelectionRange = () => {
+  const selection = useRef<{
+    selectionStart: number | null;
+    selectionEnd: number | null;
+  }>();
+
+  const handleSelect = (e: SyntheticEvent<HTMLInputElement>) => {
+    const input = e.target as HTMLInputElement;
+    const { selectionStart, selectionEnd } = input;
+    selection.current = { selectionStart, selectionEnd };
+  };
+  const handleSelectionBlur = () => {
+    selection.current = undefined;
+  };
+
+  return {
+    selection: selection.current,
+    handleSelect,
+    handleSelectionBlur,
+  };
+};

package/src/expressiveMoneyInput/index.ts

@@ -0,0 +1,2 @@
+export type { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
+export { default } from './ExpressiveMoneyInput';

package/src/i18n/en.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selected",
   "neptune.DateLookup.twentyYears": "20 years",
   "neptune.DateLookup.year": "year",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
+  "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
   "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Info.ariaLabel": "More information",
   "neptune.Label.optional": "(Optional)",

package/src/index.ts

@@ -62,6 +62,7 @@ export type {
   CurrencyOptionItem,
   MoneyInputProps,
 } from './moneyInput';
+export type { ExpressiveMoneyInputProps } from './expressiveMoneyInput';
 export type { NavigationOptionListProps } from './navigationOptionsList';
 export type { NavigationOptionProps } from './navigationOption/NavigationOption';
 export type { OverlayHeaderProps } from './overlayHeader';
@@ -188,6 +189,7 @@ export { default as Markdown } from './markdown';
 export { default as Modal } from './modal';
 export { default as Money } from './money';
 export { default as MoneyInput } from './moneyInput';
+export { default as ExpressiveMoneyInput } from './expressiveMoneyInput';
 export { default as NavigationOption } from './navigationOption';
 export { default as NavigationOptionsList } from './navigationOptionsList';
 export { default as Nudge } from './nudge';

package/src/main.css

@@ -526,26 +526,26 @@
   background-color: var(--color-sentiment-positive-secondary-active);
 }
 .wds-inline-prompt--proposition {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
+  background-color: #D2F9F7;
+  color: var(--color-interactive-primary);
 }
 .wds-inline-prompt--proposition a,
 .wds-inline-prompt--proposition button {
-  color: var(--color-sentiment-positive-primary);
+  color: var(--color-interactive-primary);
 }
 .wds-inline-prompt--proposition a:hover,
 .wds-inline-prompt--proposition button:hover {
-  color: var(--color-sentiment-positive-primary-hover);
+  color: var(--color-interactive-primary-hover);
 }
 .wds-inline-prompt--proposition a:active,
 .wds-inline-prompt--proposition button:active {
-  color: var(--color-sentiment-positive-primary-active);
+  color: var(--color-interactive-primary-active);
 }
 .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
-  background-color: var(--color-sentiment-positive-secondary-hover);
+  background-color: #B2F4F3;
 }
 .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
-  background-color: var(--color-sentiment-positive-secondary-active);
+  background-color: #91F0EE;
 }
 .wds-inline-prompt--neutral {
   background-color: rgba(134,167,189,0.10196);
@@ -4421,6 +4421,14 @@ button.np-link {
   flex-shrink: 0;
   width: auto;
 }
+.tw-money-input .input-group-addon:not(.amount-currency-select-btn):not(.tw-money-input__fixed-currency):not(:has(~ .tw-money-input__fixed-currency)) {
+  padding-right: 0 !important;
+}
+[dir="rtl"] .tw-money-input .input-group-addon:not(.amount-currency-select-btn):not(.tw-money-input__fixed-currency):not(:has(~ .tw-money-input__fixed-currency)) {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  padding-right: initial !important;
+}
 .tw-money-input .amount-currency-select-btn {
   flex-shrink: 0;
   width: auto;
@@ -4447,6 +4455,64 @@ button.np-link {
   box-shadow: inset 0 0 0 1px #c9cbce !important;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary) !important;
 }
+.wds-amount-input-container {
+  width: 100%;
+}
+.wds-amount-input-input-container {
+  display: flex;
+  justify-content: right;
+  width: 100%;
+  transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
+  color: var(--color-interactive-primary);
+  overflow: hidden;
+  margin-bottom: 0 !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  .wds-amount-input-input-container {
+    transition: none;
+  }
+}
+.wds-amount-input-input {
+  border: none;
+  outline: none;
+  flex-grow: 1;
+  text-align: right;
+  background-color: transparent;
+}
+.wds-amount-input-input:focus-visible {
+  outline: none;
+}
+.wds-amount-input-placeholder {
+  flex-grow: 0;
+  display: flex;
+  align-items: center;
+}
+.wds-currency-selector:disabled {
+  opacity: 1 !important;
+  cursor: auto !important;
+  cursor: initial !important;
+  mix-blend-mode: initial !important;
+}
+.wds-chevron-container {
+  width: 32px;
+  width: var(--size-32);
+  overflow: hidden;
+  color: var(--color-interactive-primary);
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  transition: width 0.3s ease;
+}
+.wds-chevron-hidden {
+  width: 0;
+}
+.wds-expressive-money-input-currency-selector {
+  flex-shrink: 0;
+  margin-right: 24px;
+  margin-right: var(--size-24);
+}
+.wds-expressive-money-input-chevron {
+  transform: translateY(-5%);
+}
 .np-navigation-option {
   -webkit-text-decoration: none;
   text-decoration: none;

package/src/main.less

@@ -51,6 +51,7 @@
 @import "./logo/Logo.less";
 @import "./modal/Modal.less";
 @import "./moneyInput/MoneyInput.less";
+@import "./expressiveMoneyInput/ExpressiveMoneyInput.less";
 @import "./navigationOption/NavigationOption.less";
 @import "./navigationOptionsList/NavigationOptionsList.less";
 @import "./nudge/Nudge.less";

package/src/moneyInput/MoneyInput.css

@@ -38,6 +38,14 @@
   flex-shrink: 0;
   width: auto;
 }
+.tw-money-input .input-group-addon:not(.amount-currency-select-btn):not(.tw-money-input__fixed-currency):not(:has(~ .tw-money-input__fixed-currency)) {
+  padding-right: 0 !important;
+}
+[dir="rtl"] .tw-money-input .input-group-addon:not(.amount-currency-select-btn):not(.tw-money-input__fixed-currency):not(:has(~ .tw-money-input__fixed-currency)) {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  padding-right: initial !important;
+}
 .tw-money-input .amount-currency-select-btn {
   flex-shrink: 0;
   width: auto;

package/src/moneyInput/MoneyInput.less

@@ -32,11 +32,16 @@
 
   .input-group-addon {
     flex-shrink: 0;
+    
     &:not(.amount-currency-select-btn) {
       display: flex;
       align-items: center;
       flex-shrink: 0;
       width: auto;
+
+      &:not(.tw-money-input__fixed-currency):not(:has(~ .tw-money-input__fixed-currency)) {
+        .padding(right, 0) !important;
+      }
     }
   }
   

package/src/prompt/InlinePrompt/InlinePrompt.css

@@ -91,26 +91,26 @@
   background-color: var(--color-sentiment-positive-secondary-active);
 }
 .wds-inline-prompt--proposition {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
+  background-color: #D2F9F7;
+  color: var(--color-interactive-primary);
 }
 .wds-inline-prompt--proposition a,
 .wds-inline-prompt--proposition button {
-  color: var(--color-sentiment-positive-primary);
+  color: var(--color-interactive-primary);
 }
 .wds-inline-prompt--proposition a:hover,
 .wds-inline-prompt--proposition button:hover {
-  color: var(--color-sentiment-positive-primary-hover);
+  color: var(--color-interactive-primary-hover);
 }
 .wds-inline-prompt--proposition a:active,
 .wds-inline-prompt--proposition button:active {
-  color: var(--color-sentiment-positive-primary-active);
+  color: var(--color-interactive-primary-active);
 }
 .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
-  background-color: var(--color-sentiment-positive-secondary-hover);
+  background-color: #B2F4F3;
 }
 .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
-  background-color: var(--color-sentiment-positive-secondary-active);
+  background-color: #91F0EE;
 }
 .wds-inline-prompt--neutral {
   background-color: rgba(134,167,189,0.10196);

package/src/prompt/InlinePrompt/InlinePrompt.less

@@ -94,26 +94,26 @@
   }
 
   &--proposition {
-    background-color: var(--color-sentiment-positive-secondary);
+    background-color: #D2F9F7;
 
-    color: var(--color-sentiment-positive-primary);
+    color: var(--color-interactive-primary);
 
     a, button {
-      color: var(--color-sentiment-positive-primary);
+      color: var(--color-interactive-primary);
       &:hover {
-        color: var(--color-sentiment-positive-primary-hover);
+        color: var(--color-interactive-primary-hover);
       }
       &:active {
-        color: var(--color-sentiment-positive-primary-active);
+        color: var(--color-interactive-primary-active);
       }
     }
 
     .wds-inline-prompt&:has(a, button) {
       &:hover {
-        background-color: var(--color-sentiment-positive-secondary-hover);
+        background-color: #B2F4F3;
       }
       &:active {
-        background-color: var(--color-sentiment-positive-secondary-active);
+        background-color: #91F0EE;
       }
     }
   }

package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx

@@ -15,6 +15,12 @@ describe('InlinePrompt', () => {
     expect(screen.getByText('Hello world')).toBeInTheDocument();
   });
 
+  it('renders with GiftBox icon as default for `proposition` sentiment', () => {
+    render(<InlinePrompt {...defaultProps} sentiment="proposition" />);
+    expect(screen.getByText('Prompt message')).toBeInTheDocument();
+    expect(screen.getByTestId('gift-box-icon')).toBeInTheDocument();
+  });
+
   describe('renders with each sentiment', () => {
     it.each([Sentiment.POSITIVE, Sentiment.NEUTRAL, Sentiment.NEGATIVE, Sentiment.WARNING])(
       'renders with sentiment %s',

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

@@ -0,0 +1,39 @@
+import { lorem10, lorem5 } from '../../test-utils';
+import { InlinePrompt } from './InlinePrompt';
+import { CardWise, Rewards } from '@transferwise/icons';
+
+export default {
+  title: 'Internal/InlinePrompt',
+  component: InlinePrompt,
+};
+
+export const AllVariants = () => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridAutoFlow: 'row',
+        rowGap: 'var(--size-12)',
+        justifyItems: 'start',
+        width: 'fit-content',
+      }}
+    >
+      <InlinePrompt sentiment="positive">{lorem5}</InlinePrompt>
+      <InlinePrompt media={<Rewards />} sentiment="positive">
+        {lorem10}
+      </InlinePrompt>
+      <InlinePrompt sentiment="negative">{lorem5}</InlinePrompt>
+      <InlinePrompt sentiment="negative">{lorem10}</InlinePrompt>
+      <InlinePrompt sentiment="neutral">{lorem5}</InlinePrompt>
+      <InlinePrompt sentiment="neutral">{lorem10}</InlinePrompt>
+      <InlinePrompt sentiment="warning">{lorem5}</InlinePrompt>
+      <InlinePrompt sentiment="warning">{lorem10}</InlinePrompt>
+      <InlinePrompt sentiment="proposition">{lorem5}</InlinePrompt>
+      <InlinePrompt sentiment="proposition">{lorem10}</InlinePrompt>
+      <InlinePrompt sentiment="proposition" media={<CardWise />}>
+        {lorem10}
+      </InlinePrompt>
+      <InlinePrompt>{lorem5}</InlinePrompt>
+    </div>
+  );
+};