@transferwise/components 0.0.0-experimental-5125346 → 0.0.0-experimental-2220d83

package/src/selectOption/SelectOption.story.tsx

@@ -0,0 +1,230 @@
+import type { StoryObj } from '@storybook/react';
+import { Flag } from '@wise/art';
+import SelectOption, {
+  SelectOptionProps,
+  SelectOptionValue,
+  SelectOptiopsSection,
+} from './SelectOption';
+import { Bank, BankTransfer, Beach, Briefcase, Card, Plane } from '@transferwise/icons';
+import { Field } from '../field/Field';
+import { lorem10 } from '../test-utils';
+import Badge from '../badge';
+import Avatar from '../avatar';
+import { Sentiment } from '../common';
+
+export default {
+  title: 'Option/SelectOption',
+};
+
+type Story = StoryObj<typeof SelectOption>;
+
+type CustomData = { data?: string };
+
+function cardPaymentMethod(index?: number): SelectOptionValue<CustomData> {
+  return {
+    media: <Card />,
+    title: `Credit card ${index}`,
+    content: (
+      <>
+        <div>Transfer the money to Wise using your bank account.</div>
+        <div>0.32 GBP in fees, should arrive in seconds</div>
+      </>
+    ),
+  };
+}
+
+const recentPaymentMethods: SelectOptionValue<CustomData>[] = [
+  cardPaymentMethod(1),
+  cardPaymentMethod(2),
+];
+
+const allOtherPaymentMethods: SelectOptionValue<CustomData>[] = [
+  {
+    media: <Flag code="gbp" />,
+    title: 'Wise GBP balance',
+    content: (
+      <>
+        <span>300 GBP available</span>
+        <span>0 GBP in fees, should arrive in seconds</span>
+      </>
+    ),
+    disabled: true,
+    value: { data: lorem10 },
+  },
+  cardPaymentMethod(),
+  {
+    media: <Card />,
+    title: 'Debit card',
+    content: (
+      <>
+        <span>Send from your Visa or Mastercard.</span>
+        <span>0.74 GBP in fees, should arrive in seconds</span>
+      </>
+    ),
+  },
+  {
+    media: <Bank />,
+    title: 'Swift Transfer',
+    content: (
+      <>
+        <span>Send money internationally. Your bank will charge you extra fees.</span>
+        <span>0.32 GBP in fees, should arrive by Thursday</span>
+      </>
+    ),
+  },
+  {
+    media: <BankTransfer />,
+    title: 'Bank Transfer',
+    content: (
+      <>
+        <span>Transfer the money to Wise using your bank account.</span>
+        <span>0.32 GBP in fees, should arrive in seconds</span>
+      </>
+    ),
+  },
+  {
+    media: <BankTransfer />,
+    title: 'Withdraw from your U.S. bank account (ACH)',
+    content: (
+      <>
+        <span>1.63 USD in total fees.</span>
+        <span>
+          Pay with ACH using the bank account you’ve connected to Wise. Should arrive in seconds.
+        </span>
+      </>
+    ),
+  },
+  cardPaymentMethod(1),
+  cardPaymentMethod(2),
+  cardPaymentMethod(3),
+  cardPaymentMethod(4),
+  cardPaymentMethod(5),
+  cardPaymentMethod(6),
+];
+
+const paymentMethods: SelectOptiopsSection<CustomData>[] = [
+  {
+    title: 'Recently used',
+    options: recentPaymentMethods,
+  },
+  {
+    title: 'Payment methods',
+    options: allOtherPaymentMethods,
+  },
+];
+
+const balances: SelectOptiopsSection[] = [
+  {
+    title: 'Balances',
+    options: [
+      {
+        media: <Flag code="gbp" />,
+        title: 'Wise GBP balance',
+      },
+      {
+        media: <Flag code="eur" />,
+        title: 'Wise EUR balance',
+      },
+    ],
+  },
+  {
+    title: 'Jars',
+    options: [
+      {
+        media: (
+          <Badge badge={<Flag code="usd" />} size="md">
+            <Avatar type="icon" size="md" backgroundColor="var(--color-bright-pink)">
+              <Beach size="24" />
+            </Avatar>
+          </Badge>
+        ),
+        title: 'Hawaii Holiday',
+        content: 'Wise USD jar',
+      },
+      {
+        media: (
+          <Badge badge={<Flag code="aed" />} size="md">
+            <Avatar type="icon" size="md" backgroundColor="var(--color-bright-yellow)">
+              <Briefcase size="24" />
+            </Avatar>
+          </Badge>
+        ),
+        title: 'Emirates Business Trip',
+        content: 'Wise AED jar',
+      },
+      {
+        media: (
+          <Badge badge={<Flag code="jpy" />} size="md">
+            <Avatar type="icon" size="md" backgroundColor="var(--color-bright-blue)">
+              <Plane size="24" />
+            </Avatar>
+          </Badge>
+        ),
+        title: 'Trip to Mars',
+        content: 'Wise Jpy jar',
+      },
+    ],
+  },
+];
+
+export const Basic: Story = {
+  args: {
+    placeholder: { title: 'No balance selected' },
+    options: balances,
+    onChange: (value) => {
+      console.log('selected balance', value);
+    },
+  },
+  render: (args: SelectOptionProps) => {
+    return (
+      <div className="row">
+        <div className="col-md-8 col-md-offset-2">
+          <Field label="Balances">
+            <SelectOption {...args} />
+          </Field>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Error: Story = {
+  render: () => {
+    function onChange(value: SelectOptionValue<CustomData>): void {
+      console.log(value);
+    }
+    return (
+      <div className="row">
+        <div className="col-md-8 col-md-offset-2">
+          <Field
+            label={<>Payment method</>}
+            sentiment={Sentiment.NEGATIVE}
+            message="Just an example of validation message"
+          >
+            <SelectOption<CustomData>
+              aria-label="Choose one of payment methods"
+              placeholder={{ title: 'No method selected', actionLabel: 'Select' }}
+              options={paymentMethods}
+              onChange={onChange}
+            />
+          </Field>
+        </div>
+
+        <div className="col-md-8 col-md-offset-2">
+          <Field
+            label={<>Payment method</>}
+            sentiment={Sentiment.NEGATIVE}
+            message="Example of disabled select option"
+          >
+            <SelectOption<CustomData>
+              disabled
+              placeholder={{ title: 'No method selected' }}
+              options={paymentMethods}
+              onChange={onChange}
+            />
+          </Field>
+        </div>
+      </div>
+    );
+  },
+};

package/src/selectOption/SelectOption.tsx

@@ -0,0 +1,155 @@
+import { useRef, useState } from 'react';
+import { ActionButtonProps } from '../actionButton';
+import Chevron from '../chevron';
+import classNames from 'classnames';
+import Option from '../common/Option';
+import type { OptionProps } from '../common/Option/Option';
+import { Breakpoint, Position } from '../common';
+import Section from '../section';
+import Header from '../header';
+import { HeaderProps } from '../header/Header';
+import NavigationOption from '../navigationOption';
+import NavigationOptionsList from '../navigationOptionsList';
+import { useInputAttributes } from '../inputs/contexts';
+import messages from './SelectOption.messages';
+import { useIntl } from 'react-intl';
+import ResponsivePanel from '../common/responsivePanel';
+import { useScreenSize } from '../common/hooks/useScreenSize';
+import { Plus } from '@transferwise/icons';
+
+export type SelectOptiopsSection<T = unknown> = {
+  title?: HeaderProps['title'];
+  options: SelectOptionValue<T>[];
+};
+
+export type SelectOptionValue<T = unknown> = Pick<
+  OptionProps,
+  'media' | 'title' | 'content' | 'disabled'
+> & {
+  value?: T;
+};
+
+export type SelectOptionPlaceholder = Pick<OptionProps, 'media' | 'title' | 'content'> & {
+  actionLabel?: ActionButtonProps['children'];
+};
+
+export type SelectOptionProps<T = unknown> = {
+  onChange: (selected: SelectOptionValue<T>) => void;
+  selected?: SelectOptionValue<T>;
+  options: SelectOptiopsSection<T>[];
+  placeholder: SelectOptionPlaceholder;
+} & Omit<
+  OptionProps,
+  'as' | 'title' | 'media' | 'content' | 'onClick' | 'onChange' | 'showMediaAtAllSizes' | 'decision'
+>;
+
+export default function SelectOption<T>({
+  selected: selectedValueProp = undefined,
+  options,
+  onChange,
+  placeholder,
+  disabled,
+  ...props
+}: SelectOptionProps<T>) {
+  const intl = useIntl();
+  const rootRef = useRef(null);
+  const [selected, setSelected] = useState(selectedValueProp);
+  const [showOptions, setShowOptions] = useState(false);
+
+  const hasSelected = selected !== undefined;
+  const isLargeScreen = useScreenSize(Breakpoint.SMALL);
+
+  const inputAttributes = useInputAttributes();
+  const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];
+
+  function handleOnClick(showOptionsStatus: boolean) {
+    return () => {
+      setShowOptions(showOptionsStatus);
+    };
+  }
+
+  function handleOnChange(data: SelectOptionValue<T>) {
+    return () => {
+      setShowOptions(false);
+      setSelected(data);
+      onChange(data);
+    };
+  }
+
+  function getOptions(isLargeScreen = false) {
+    return (
+      <div className={classNames({ 'np-select-option-list': isLargeScreen })}>
+        {options.map((optionsSection) => (
+          // eslint-disable-next-line react/jsx-key
+          <Section
+            className={classNames('np-select-option-section', { 'p-x-2 p-y-1': isLargeScreen })}
+          >
+            {optionsSection.title && <Header title={optionsSection.title} />}
+            <NavigationOptionsList>
+              {optionsSection.options.map((option) => {
+                return (
+                  // eslint-disable-next-line react/jsx-key
+                  <NavigationOption
+                    isContainerAligned={!isLargeScreen}
+                    showMediaCircle
+                    showMediaAtAllSizes
+                    onClick={handleOnChange(option)}
+                    {...option}
+                  />
+                );
+              })}
+            </NavigationOptionsList>
+          </Section>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <Option
+        ref={rootRef}
+        showMediaAtAllSizes
+        disabled={disabled}
+        decision={false}
+        media={hasSelected ? selected.media : placeholder.media ?? <Plus size={24} />}
+        title={(hasSelected ? selected : placeholder).title}
+        content={(hasSelected ? selected : placeholder).content}
+        className={classNames(
+          'np-select-option',
+          'clickable',
+          hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder',
+          props.className,
+        )}
+        button={
+          <button
+            type="button"
+            disabled={disabled}
+            aria-haspopup="dialog"
+            aria-expanded={showOptions}
+            aria-labelledby={ariaLabelledBy}
+            className={hasSelected ? 'btn-unstyled' : 'np-action-btn'}
+            aria-label={hasSelected ? undefined : props['aria-label']}
+            onClick={handleOnClick(true)}
+          >
+            {hasSelected ? (
+              <Chevron />
+            ) : (
+              placeholder.actionLabel || intl.formatMessage(messages.actionLabel)
+            )}
+          </button>
+        }
+      />
+      <ResponsivePanel
+        anchorWidth
+        altAxis
+        anchorRef={rootRef}
+        open={showOptions}
+        position={Position.BOTTOM}
+        onClose={handleOnClick(false)}
+      >
+        {getOptions(isLargeScreen)}
+      </ResponsivePanel>
+    </>
+  );
+}

package/src/selectOption/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SelectOption';
+export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './SelectOption';

package/src/ssr.spec.js

@@ -226,6 +226,7 @@ describe('Server side rendering', () => {
       DateLookup: { value: new Date() },
       Link: { size: 16 },
       Tooltip: { children: <>yo</> },
+      SelectOption: { placeholder: { media: <img alt="img" /> } },
     };
 
     const { Provider } = exposedLibraryItems;