@transferwise/components 46.112.1 → 46.113.0

package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx

@@ -0,0 +1,232 @@
+/* eslint-disable jsx-a11y/anchor-is-valid, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+import { Meta, StoryObj, Decorator } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import { Flag } from '@wise/art';
+import { Rewards, Tags } from '@transferwise/icons';
+import { storySourceWithoutNoise } from '../../.storybook/helpers';
+import { lorem10, lorem5 } from '../test-utils';
+import { Sentiment } from '../common';
+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 ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
+import type { Props as CurrencySelectorProps } from './currencySelector/CurrencySelector';
+
+const getCurrencySelectorProps = ({
+  logEvents = false,
+  secondAvatar = false,
+} = {}): Partial<CurrencySelectorProps> => ({
+  addons: secondAvatar ? [{ profileName: 'Mikkael Jordan' }] : undefined,
+  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: logEvents ? fn() : () => {},
+  onSearchChange: logEvents ? fn() : (payload) => {},
+  onChange: logEvents ? fn() : (currency) => {},
+});
+
+const withScrollbarProtector: Decorator = (Story) => (
+  <>
+    <style>{`.docs-story > div {overflow-y:hidden;}`}</style>
+    <Story />
+  </>
+);
+
+export default {
+  title: 'Forms/ExpressiveMoneyInput',
+  component: ExpressiveMoneyInput,
+  tags: ['contribution'],
+  parameters: {
+    docs: {
+      toc: true,
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  args: {
+    label: 'You send',
+    currency: 'GBP',
+    amount: 1234.56,
+    currencySelector: getCurrencySelectorProps(),
+    loading: false,
+    inlinePrompt: { message: lorem10, sentiment: Sentiment.POSITIVE },
+    showChevron: false,
+    autoFocus: false,
+    onAmountChange: fn(),
+    onFocusChange: fn(),
+  },
+  decorators: [withScrollbarProtector],
+} satisfies Meta<ExpressiveMoneyInputProps>;
+
+type Story = StoryObj<ExpressiveMoneyInputProps>;
+
+export const Playground: Story = {
+  tags: ['!autodocs'],
+  render: (args: ExpressiveMoneyInputProps) => <ExpressiveMoneyInput {...args} />,
+};
+
+export const WithInitialAmount = {
+  args: {
+    amount: 1500,
+    inlinePrompt: undefined,
+  },
+};
+
+export const NullAmount = {
+  args: {
+    amount: null,
+    inlinePrompt: undefined,
+    currencySelector: getCurrencySelectorProps({ logEvents: true }),
+  },
+};
+
+export const WithLoading = {
+  args: {
+    loading: true,
+  },
+};
+
+/**
+ * The chevron should be visible only when the input is inactive
+ * and the current value is 0 or null.
+ */
+export const WithChevron = {
+  args: {
+    showChevron: true,
+    amount: 0,
+  },
+};
+
+export const WithBalanceText = storySourceWithoutNoise<ExpressiveMoneyInputProps>({
+  args: {
+    currencySelector: getCurrencySelectorProps({ logEvents: true }),
+  },
+  render: function Render(args: ExpressiveMoneyInputProps) {
+    const availableBalance = 1500;
+    const [sourceAmount, setSourceAmount] = React.useState(args.amount);
+    return (
+      <ExpressiveMoneyInput
+        {...args}
+        amount={sourceAmount}
+        inlinePrompt={{
+          message: (
+            <>
+              {`Available balance `}
+              <Link
+                onClick={() => {
+                  setSourceAmount(availableBalance);
+                }}
+              >
+                <Money amount={availableBalance} currency={args.currency} />
+              </Link>
+            </>
+          ),
+        }}
+      />
+    );
+  },
+});
+
+export const WithInlinePromptSentiment = {
+  render: (args: ExpressiveMoneyInputProps) => {
+    const inlinePrompts = [
+      { message: lorem5, sentiment: 'negative' },
+      { message: lorem5, sentiment: 'warning' },
+      { message: lorem5, sentiment: 'neutral' },
+      { message: lorem5, sentiment: 'positive' },
+      { message: lorem5, sentiment: 'positive', media: <Tags /> },
+      { message: lorem5, sentiment: 'proposition' },
+      { message: lorem5, sentiment: 'proposition', media: <Rewards /> },
+    ] as const;
+
+    return inlinePrompts.map((inlinePrompt, index) => (
+      <ExpressiveMoneyInput key={index} {...args} inlinePrompt={inlinePrompt} />
+    ));
+  },
+};
+
+export const WithSecondaryCurrencySelectorAvatar = {
+  args: {
+    currencySelector: getCurrencySelectorProps({ logEvents: true, secondAvatar: true }),
+  },
+};
+
+export const WithCustomCurrencySelector = {
+  render: (args: ExpressiveMoneyInputProps) => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <>
+        <ExpressiveMoneyInput
+          {...args}
+          currencySelector={{
+            customRender: ({ id, labelId }) => (
+              <Button
+                v2
+                size="sm"
+                priority="primary"
+                aria-describedby={labelId}
+                onClick={() => setOpen(true)}
+              >
+                Currency Selector
+              </Button>
+            ),
+          }}
+        />
+        <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)}
+        />
+      </>
+    );
+  },
+};
+
+export const WithAutofocus = {
+  tags: ['!autodocs', '!dev'],
+  args: {
+    inlinePrompt: undefined,
+    autoFocus: true,
+  },
+  render: (args: ExpressiveMoneyInputProps) => <ExpressiveMoneyInput {...args} />,
+};

package/src/expressiveMoneyInput/ExpressiveMoneyInput.tsx

@@ -0,0 +1,156 @@
+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;
+  /**
+   * The currency code, e.g. `USD`, `EUR`, `GBP`, etc. Governs the flag rendered in the currency selector.
+   */
+  currency: CurrencyType;
+  inlinePrompt?: {
+    sentiment?: InlinePromptProps['sentiment'];
+    message: InlinePromptProps['children'];
+    media?: InlinePromptProps['media'];
+  };
+  showChevron?: boolean;
+  /**
+   * If set, it auto-focuses the amount input upon component mount.<br />
+   * ⚠️ **Use with caution**, as it may impact user experience and
+   * fail [WCAG 2.4.3 requirements](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)
+   */
+  autoFocus?: boolean;
+  /**
+   * Dims the input to indicate a loading state. Does not disable it.
+   */
+  loading?: boolean;
+  onAmountChange: (amount: AmountType) => void;
+  onFocusChange?: (focused: boolean) => void;
+} & CommonProps;
+
+/**
+ * This component has been kindly contributed by our friends at the `Send` team 🎉.
+ *
+ * Some patterns and implementation details used in this component may differ
+ * from what's commonly used in the Design System. The overall build and QA was managed
+ * by the contributing team directly, and such did not follow a typical DS lifecycle.
+ *
+ * While we house this component and will help facilitate its future iterations,
+ * direct contributions by consuming product teams are highly encouraged.
+ *
+ * > ⚠️ **Prerequisite:** <br />The component depends on the
+ * [framer-motion](https://www.npmjs.com/package/framer-motion) package, which has been
+ * deliberately excluded from the Design System bundle and kept as an opt-in only.
+ * **Make sure to add it to your project dependencies.**
+ */
+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();
+
+  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">
+          {currencySelector.customRender?.({ id: currencyId, labelId }) ?? (
+            <CurrencySelector
+              id={currencyId}
+              labelId={labelId}
+              currency={currency}
+              {...currencySelector}
+            />
+          )}
+        </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 && Object.keys(inlinePrompt.sentiment).length > 0 ? (
+                <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;
+  }
+}