@transferwise/components 0.0.0-experimental-b3df26d → 0.0.0-experimental-050f154

package/src/expressiveMoneyInput/index.ts

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

package/src/expressiveMoneyInput/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/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/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/utils.spec.ts

@@ -0,0 +1,114 @@
+import {
+  getDecimalSeparator,
+  getFormattedString,
+  getGroupSeparator,
+  getUnformattedNumber,
+} from './utils';
+
+describe('utils', () => {
+  describe('getDecimalSeparator', () => {
+    it('gets decimal separator for Spanish', () => {
+      expect(getDecimalSeparator('EUR', 'es')).toBe(',');
+    });
+
+    it('gets decimal separator for English', () => {
+      expect(getDecimalSeparator('EUR', 'en')).toBe('.');
+    });
+
+    it('gets decimal separator for Spanish in HUF', () => {
+      expect(getDecimalSeparator('HUF', 'es')).toBe('');
+    });
+
+    it('gets decimal separator for English in HUF', () => {
+      expect(getDecimalSeparator('HUF', 'en')).toBe('');
+    });
+  });
+
+  describe('getGroupSeparator', () => {
+    it('gets group separator for Spanish', () => {
+      expect(getGroupSeparator('EUR', 'es')).toBe('.');
+    });
+
+    it('gets group separator for English', () => {
+      expect(getGroupSeparator('EUR', 'en')).toBe(',');
+    });
+
+    it('gets group separator for French', () => {
+      expect(getGroupSeparator('EUR', 'fr')).toBe(' ');
+    });
+  });
+
+  describe('getUnformattedNumber', () => {
+    it('can turn a Spanish string into a number', () => {
+      expect(
+        getUnformattedNumber({
+          value: '123.456,00',
+          currency: 'EUR',
+          locale: 'es',
+        }),
+      ).toBe(123456);
+    });
+
+    it('can turn a French string into a number', () => {
+      expect(
+        getUnformattedNumber({
+          value: '1 234 567,45',
+          currency: 'EUR',
+          locale: 'fr',
+        }),
+      ).toBe(1234567.45);
+    });
+
+    it('can turn a English string into a number', () => {
+      expect(
+        getUnformattedNumber({
+          value: '123,456.78',
+          currency: 'EUR',
+          locale: 'en',
+        }),
+      ).toBe(123456.78);
+    });
+
+    it('can turn a Magyar string into a number', () => {
+      expect(
+        getUnformattedNumber({
+          value: '11 000 000',
+          currency: 'HUF',
+          locale: 'hu',
+        }),
+      ).toBe(11000000);
+    });
+  });
+
+  describe('getFormattedString', () => {
+    it('can turn a number into a Spanish string', () => {
+      expect(
+        getFormattedString({
+          value: 123456.45,
+          currency: 'EUR',
+          locale: 'es',
+        }),
+      ).toBe('123.456,45');
+    });
+
+    it('can turn a number into a French string', () => {
+      expect(
+        getFormattedString({
+          value: 1234567.45,
+          currency: 'EUR',
+          locale: 'fr',
+        }),
+      ).toBe('1 234 567,45');
+    });
+
+    it('can turn a number into a English string', () => {
+      expect(
+        getFormattedString({
+          value: 123456.78,
+          currency: 'EUR',
+          locale: 'en',
+        }),
+      ).toBe('123,456.78');
+    });
+  });
+});

package/src/expressiveMoneyInput/utils.ts

@@ -0,0 +1,116 @@
+import { formatAmount } from '@transferwise/formatting';
+import type { KeyboardEvent } from 'react';
+
+export const getDecimalSeparator = (currency: string, locale: string): string | null => {
+  return formatAmount(1.1, currency, locale).replace(/\p{Number}/gu, '');
+};
+
+export const getGroupSeparator = (currency: string, locale: string): string | null => {
+  return formatAmount(10000000, currency, locale).replace(/\p{Number}/gu, '')[0];
+};
+
+export const getDecimalCount = (currency: string, locale: string): number => {
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  if (!decimalSeparator) {
+    return 0;
+  }
+  const parts = formatAmount(1.1, currency, locale).split(decimalSeparator);
+  return parts.length === 2 ? parts[1].length : 0;
+};
+
+export const getEnteredDecimalsCount = (value: string, decimalSeparator: string) => {
+  return value.split(decimalSeparator)[1]?.length ?? 0;
+};
+
+export const getUnformattedNumber = ({
+  value: formattedValue,
+  currency,
+  locale,
+}: {
+  value: string;
+  currency: string;
+  locale: string;
+}): number | null => {
+  const groupSeparator = getGroupSeparator(currency, locale);
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  if (!formattedValue) {
+    return null;
+  }
+
+  // parseFloat can't handle thousands separators
+  const withoutGroupSeparator = groupSeparator
+    ? formattedValue.replace(/ /gu, '').replace(new RegExp(`\\${groupSeparator}`, 'g'), '')
+    : formattedValue;
+
+  // parseFloat can only handle . as decimal separator
+  const withNormalisedDecimalSeparator = decimalSeparator
+    ? withoutGroupSeparator.replace(decimalSeparator, '.')
+    : withoutGroupSeparator;
+
+  const parsedValue = Number.parseFloat(withNormalisedDecimalSeparator);
+  return parsedValue;
+};
+
+export const getFormattedString = ({
+  value: unformattedValue,
+  currency,
+  locale,
+  alwaysShowDecimals = false,
+}: {
+  value: number;
+  currency: string;
+  locale: string;
+  alwaysShowDecimals?: boolean;
+}): string => {
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  // formatAmount rounds extra decimals, so 1.999 will become 2. Instead we will manually strip extra decimals so that it becomes 1.99 after formatting
+  const decimalCount = getDecimalCount(currency, locale);
+  const unformattedString = unformattedValue.toString();
+
+  const [integerPart, decimalPart] = decimalSeparator
+    ? unformattedString.split(decimalSeparator)
+    : [unformattedString, undefined];
+
+  const formattedDecimalPart = decimalPart ? decimalPart.slice(0, decimalCount) : '';
+
+  const sanitisedUnformattedValue = Number.parseFloat(`${integerPart}.${formattedDecimalPart}`);
+
+  return formatAmount(sanitisedUnformattedValue, currency, locale, {
+    alwaysShowDecimals,
+  });
+};
+
+export const isInputPossiblyOverflowing = ({
+  ref,
+  value,
+}: {
+  ref: React.RefObject<HTMLInputElement>;
+  value: string;
+}) => {
+  const textLength = value.length;
+  const inputWidth = ref.current?.clientWidth;
+  if (!inputWidth || !textLength) {
+    return;
+  }
+
+  const maxCharactersWithoutOverflow = Math.floor(inputWidth / 19);
+  return textLength > maxCharactersWithoutOverflow;
+};
+
+const allowedInputKeys = new Set([
+  'Backspace',
+  'Delete',
+  ',',
+  '.',
+  'ArrowLeft',
+  'ArrowRight',
+  'Enter',
+  'Tab',
+]);
+
+export const isAllowedInputKey = (e: KeyboardEvent<HTMLInputElement>) => {
+  const { metaKey, key, ctrlKey } = e;
+  const isNumberKey = !Number.isNaN(Number.parseInt(key, 10));
+
+  return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);
+};

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);
@@ -4447,6 +4447,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/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.story.tsx

@@ -0,0 +1,49 @@
+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>
+      <InlinePrompt className="m-b-1" sentiment="positive">
+        {lorem5}
+      </InlinePrompt>
+      <InlinePrompt media={<Rewards />} className="m-b-1" sentiment="positive">
+        {lorem10}
+      </InlinePrompt>
+      <InlinePrompt className="m-b-1" sentiment="negative">
+        {lorem5}
+      </InlinePrompt>
+      <InlinePrompt className="m-b-1" sentiment="negative">
+        {lorem10}
+      </InlinePrompt>
+      <InlinePrompt className="m-b-1" sentiment="neutral">
+        {lorem5}
+      </InlinePrompt>
+      <InlinePrompt className="m-b-1" sentiment="neutral">
+        {lorem10}
+      </InlinePrompt>
+      <InlinePrompt className="m-b-1" sentiment="warning">
+        {lorem5}
+      </InlinePrompt>
+      <InlinePrompt className="m-b-1" sentiment="warning">
+        {lorem10}
+      </InlinePrompt>
+      <InlinePrompt className="m-b-1" sentiment="proposition">
+        {lorem5}
+      </InlinePrompt>
+      <InlinePrompt className="m-b-1" sentiment="proposition">
+        {lorem10}
+      </InlinePrompt>
+      <InlinePrompt className="m-b-1" sentiment="proposition" media={<CardWise />}>
+        {lorem10}
+      </InlinePrompt>
+      <InlinePrompt>{lorem5}</InlinePrompt>
+    </div>
+  );
+};

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -1,12 +1,14 @@
 import { Sentiment } from '../../common';
-import { BackslashCircle } from '@transferwise/icons';
+import { BackslashCircle, GiftBox } from '@transferwise/icons';
 import ProcessIndicator from '../../processIndicator';
 import StatusIcon from '../../statusIcon';
 import { clsx } from 'clsx';
 import Body from '../../body';
 
 export type InlinePromptProps = {
-  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;
+  sentiment?:
+    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`
+    | 'proposition';
   loading?: boolean;
   /**
    * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)
@@ -16,6 +18,7 @@ export type InlinePromptProps = {
   className?: string;
   'data-testid'?: string;
   children: React.ReactNode;
+  media?: React.ReactNode;
 };
 
 export const InlinePrompt = ({
@@ -24,9 +27,16 @@ export const InlinePrompt = ({
   loading = false,
   className,
   children,
+  media = null,
   ...rest
 }: InlinePromptProps) => {
   const renderMedia = () => {
+    if (media && ['proposition', 'positive'].includes(sentiment)) {
+      return media;
+    }
+    if (sentiment === 'proposition') {
+      return <GiftBox />;
+    }
     if (muted) {
       return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" />;
     }

package/src/ssr.spec.tsx

@@ -92,6 +92,7 @@ describe('Server side rendering', () => {
   // stick all possible properties we might need to render all components in here
   const allProps: Record<string, unknown> = {
     currencies: [],
+    currencySelector: { options: [] },
     steps: [],
     stepper: {
       steps: [],