@transferwise/components 0.0.0-experimental-643f4d2 → 0.0.0-experimental-77845f6

package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx

@@ -0,0 +1,290 @@
+/* eslint-disable jsx-a11y/anchor-is-valid, no-console, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+import { Meta } from '@storybook/react-webpack5';
+import ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
+import { lorem10, lorem5 } from '../test-utils';
+import { Sentiment } from '../common';
+import Image from '../image';
+import Link from '../link';
+import Money from '../money';
+import React from 'react';
+import Button from '../button';
+import Modal from '../modal';
+import ListItem from '../listItem';
+import List from '../list';
+import { Flag } from '@wise/art';
+import Alert from '../alert';
+import Divider from '../divider';
+import { Rewards, Tags } from '@transferwise/icons';
+
+export default {
+  title: 'Forms/ExpressiveMoneyInput',
+  component: ExpressiveMoneyInput,
+} as Meta;
+
+const props: ExpressiveMoneyInputProps = {
+  label: 'You send',
+  currency: 'GBP',
+  amount: 1234.56,
+  onAmountChange: (amount) => {
+    console.log('Amount changed', amount);
+  },
+  currencySelector: {
+    addons: [
+      { asset: <Image src="../avatar-square-dude.webp" alt="" /> },
+      { profileName: 'Test Test' },
+    ],
+    options: [
+      {
+        title: 'Popular',
+        currencies: [
+          { code: 'USD', label: 'US Dollar', keywords: ['dollar', 'us'] },
+          { code: 'AUD', label: 'Australia Dollar', keywords: ['dollar', 'us'] },
+        ],
+      },
+      {
+        title: 'Others',
+        currencies: [
+          { code: 'GBP', label: 'Pound', keywords: ['british'] },
+          { code: 'EUR', label: 'Euro', keywords: ['euro'] },
+        ],
+      },
+    ],
+    onOpen: () => {
+      console.log('Currency selector opened');
+    },
+    onSearchChange: (payload) => {
+      console.log('Search changed', payload);
+    },
+    onChange: (currency) => {
+      console.log('Currency changed', currency);
+    },
+  },
+  loading: false,
+  inlinePrompt: { message: lorem10, sentiment: Sentiment.POSITIVE },
+  showChevron: true,
+  autoFocus: true,
+};
+
+export const NullAmount = {
+  args: props,
+  render: (args: ExpressiveMoneyInputProps) => (
+    <ExpressiveMoneyInput
+      label={args.label}
+      amount={null}
+      currency="EUR"
+      onAmountChange={args.onAmountChange}
+    />
+  ),
+};
+
+export const WithInitAmount = {
+  args: props,
+  render: (args: ExpressiveMoneyInputProps) => {
+    const availableBalance = 1500;
+    return (
+      <ExpressiveMoneyInput
+        label={args.label}
+        amount={availableBalance}
+        currency="EUR"
+        onAmountChange={args.onAmountChange}
+      />
+    );
+  },
+};
+
+export const WithLoading = {
+  args: props,
+  render: (args: ExpressiveMoneyInputProps) => {
+    const availableBalance = 1500;
+    return (
+      <ExpressiveMoneyInput
+        label={args.label}
+        amount={availableBalance}
+        currency="EUR"
+        loading
+        onAmountChange={args.onAmountChange}
+      />
+    );
+  },
+};
+
+export const WithoutChevron = {
+  args: props,
+  render: (args: ExpressiveMoneyInputProps) => {
+    const availableBalance = 1500;
+    return (
+      <ExpressiveMoneyInput
+        label={args.label}
+        amount={availableBalance}
+        currency="EUR"
+        showChevron={false}
+        onAmountChange={args.onAmountChange}
+      />
+    );
+  },
+};
+
+export const WithCurrencySelector = {
+  args: props,
+  render: (args: ExpressiveMoneyInputProps) => {
+    const availableBalance = 1500;
+    return (
+      <ExpressiveMoneyInput
+        label={args.label}
+        amount={availableBalance}
+        currency="EUR"
+        currencySelector={args.currencySelector}
+        onAmountChange={args.onAmountChange}
+      />
+    );
+  },
+};
+
+export const WithInlinePromptNoSentiment = {
+  args: props,
+  render: (args: ExpressiveMoneyInputProps) => {
+    const availableBalance = 1500;
+    const [sourceAmount, setSourceAmount] = React.useState(args.amount);
+    return (
+      <ExpressiveMoneyInput
+        label={args.label}
+        amount={sourceAmount}
+        currency="EUR"
+        currencySelector={args.currencySelector}
+        inlinePrompt={{
+          message: (
+            <>
+              {`Available balance `}
+              <Link
+                onClick={() => {
+                  setSourceAmount(availableBalance);
+                }}
+              >
+                <Money amount={availableBalance} currency={args.currency} />
+              </Link>
+            </>
+          ),
+        }}
+        onAmountChange={args.onAmountChange}
+      />
+    );
+  },
+};
+
+export const WithInlinePromptSentiment = {
+  args: props,
+  render: (args: ExpressiveMoneyInputProps) => {
+    return (
+      <>
+        <ExpressiveMoneyInput
+          label={args.label}
+          currency="EUR"
+          currencySelector={args.currencySelector}
+          inlinePrompt={{ message: lorem5, sentiment: 'negative' }}
+          onAmountChange={args.onAmountChange}
+        />
+        <ExpressiveMoneyInput
+          label={args.label}
+          currency="EUR"
+          currencySelector={args.currencySelector}
+          inlinePrompt={{ message: lorem5, sentiment: 'warning' }}
+          onAmountChange={args.onAmountChange}
+        />
+        <ExpressiveMoneyInput
+          label={args.label}
+          currency="EUR"
+          currencySelector={args.currencySelector}
+          inlinePrompt={{ message: lorem5, sentiment: 'neutral' }}
+          onAmountChange={args.onAmountChange}
+        />
+        <ExpressiveMoneyInput
+          label={args.label}
+          currency="EUR"
+          currencySelector={args.currencySelector}
+          inlinePrompt={{ message: lorem5, sentiment: 'positive' }}
+          onAmountChange={args.onAmountChange}
+        />
+        <ExpressiveMoneyInput
+          label={args.label}
+          currency="EUR"
+          currencySelector={args.currencySelector}
+          inlinePrompt={{ message: lorem5, sentiment: 'positive', media: <Tags /> }}
+          onAmountChange={args.onAmountChange}
+        />
+        <ExpressiveMoneyInput
+          label={args.label}
+          currency="EUR"
+          currencySelector={args.currencySelector}
+          inlinePrompt={{ message: lorem5, sentiment: 'proposition' }}
+          onAmountChange={args.onAmountChange}
+        />
+        <ExpressiveMoneyInput
+          label={args.label}
+          currency="EUR"
+          currencySelector={args.currencySelector}
+          inlinePrompt={{ message: lorem5, sentiment: 'proposition', media: <Rewards /> }}
+          onAmountChange={args.onAmountChange}
+        />
+      </>
+    );
+  },
+};
+
+export const Autofocus = {
+  args: props,
+  render: (args: ExpressiveMoneyInputProps) => (
+    <ExpressiveMoneyInput {...args} currency="MXN" inlinePrompt={undefined} />
+  ),
+};
+
+export const WithCustomRender = {
+  args: props,
+  render: (args: ExpressiveMoneyInputProps) => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <>
+        <ExpressiveMoneyInput
+          label="Instance with Custom Currency Selector"
+          currency="AUD"
+          currencySelector={{
+            customRender: ({ id, labelId }) => (
+              <Button v2 size="sm" priority="primary" onClick={() => setOpen(true)}>
+                Custom Render
+              </Button>
+            ),
+          }}
+          onAmountChange={(amount) => console.log(amount)}
+        />
+        <Modal
+          open={open}
+          title="Custom UX for currency selectors"
+          body={
+            <List>
+              <ListItem
+                media={
+                  <ListItem.AvatarView>
+                    <Flag code="gb" />
+                  </ListItem.AvatarView>
+                }
+                title="GBP"
+                control={<ListItem.Radio name="currency-key" checked={false} />}
+              />
+              <ListItem
+                media={
+                  <ListItem.AvatarView>
+                    <Flag code="au" />
+                  </ListItem.AvatarView>
+                }
+                title="AUD"
+                control={<ListItem.Radio name="currency-key" checked />}
+              />
+            </List>
+          }
+          onClose={() => setOpen(false)}
+        />
+        <Divider className="m-y-2" />
+        <Alert type="info" message="TODO: add proper message here" />
+      </>
+    );
+  },
+};

package/src/expressiveMoneyInput/ExpressiveMoneyInput.tsx

@@ -0,0 +1,125 @@
+import Body from '../body';
+import { Label } from '../label/Label';
+import { clsx } from 'clsx';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useId, type ReactNode } from 'react';
+
+import {
+  type Props as CurrencySelectorProps,
+  CurrencySelector,
+} from './currencySelector/CurrencySelector';
+import { CommonProps } from '../common';
+import { AmountInput } from './amountInput/AmountInput';
+import { Chevron } from './chevron/Chevron';
+import { InlinePrompt, type InlinePromptProps } from '../prompt/InlinePrompt';
+
+type AmountType = number | null;
+export type CurrencyType = string;
+
+type DefaultCurrencySelectorInstanceType = Pick<
+  CurrencySelectorProps,
+  'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'
+>;
+type CustomCurrencySelectorInstanceType = {
+  customRender?: (props: { id: string; labelId: string }) => ReactNode;
+};
+type CurrencySelectorType = DefaultCurrencySelectorInstanceType &
+  CustomCurrencySelectorInstanceType;
+
+export type Props = {
+  label?: ReactNode;
+  currencySelector?: CurrencySelectorType;
+  amount?: AmountType;
+  currency: CurrencyType;
+  inlinePrompt?: {
+    sentiment?: InlinePromptProps['sentiment'];
+    message: InlinePromptProps['children'];
+    media?: InlinePromptProps['media'];
+  };
+  showChevron?: boolean;
+  autoFocus?: boolean;
+  loading?: boolean;
+  onAmountChange: (amount: AmountType) => void;
+  onFocusChange?: (focused: boolean) => void;
+} & CommonProps;
+
+export default function ExpressiveMoneyInput({
+  label,
+  currency,
+  currencySelector = { options: [] } as DefaultCurrencySelectorInstanceType,
+  amount,
+  onAmountChange,
+  className,
+  inlinePrompt,
+  showChevron,
+  autoFocus,
+  loading,
+  onFocusChange,
+}: Props) {
+  const inputId = useId();
+  const labelId = useId();
+  const customAlertId = useId();
+  const currencyId = useId();
+
+  const selector = currencySelector.customRender?.({ id: currencyId, labelId }) ?? (
+    <CurrencySelector id={currencyId} labelId={labelId} currency={currency} {...currencySelector} />
+  );
+
+  return (
+    <div className={clsx('wds-expressive-money-input', className)}>
+      <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>
+        {label}
+      </Label>
+      <div
+        className={clsx('d-flex')}
+        role="group"
+        aria-labelledby={labelId}
+        {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}
+      >
+        <div className="wds-expressive-money-input-currency-selector">{selector}</div>
+        <AmountInput
+          id={inputId}
+          describedById={currencyId}
+          amount={amount}
+          currency={currency}
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus={autoFocus}
+          loading={loading}
+          onChange={onAmountChange}
+          onFocusChange={onFocusChange}
+        />
+        <div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>
+          <Chevron shouldShow={Boolean(showChevron)} />
+        </div>
+      </div>
+      <AnimatePresence initial={false}>
+        {inlinePrompt && (
+          <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>
+            <motion.div
+              key={customAlertId}
+              initial={{ opacity: 0, height: 0 }}
+              animate={{
+                opacity: 1,
+                height: 'auto',
+                transition: { delay: 0.75, duration: 0.3 },
+              }}
+              exit={{ opacity: 0, height: 0 }}
+            >
+              {inlinePrompt.sentiment ? (
+                <InlinePrompt
+                  id={customAlertId}
+                  media={inlinePrompt.media}
+                  sentiment={inlinePrompt.sentiment}
+                >
+                  {inlinePrompt.message}
+                </InlinePrompt>
+              ) : (
+                <Body>{inlinePrompt.message}</Body>
+              )}
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/src/expressiveMoneyInput/amountInput/AmountInput.css

@@ -0,0 +1,32 @@
+.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;
+}

package/src/expressiveMoneyInput/amountInput/AmountInput.less

@@ -0,0 +1,43 @@
+.wds-amount-input {
+  &-container {
+    width: 100%;
+  }
+
+  &-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) {
+    &-input-container {
+      transition: none;
+    }
+  }
+
+  &-input {
+    border: none;
+    outline: none;
+    flex-grow: 1;
+    text-align: right;
+    background-color: transparent;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  &-placeholder {
+    flex-grow: 0;
+    display: flex;
+    align-items: center;
+  }
+}