@transferwise/components 0.0.0-experimental-5931a60 → 0.0.0-experimental-75d5cd4

package/src/label/Label.tsx

@@ -12,7 +12,7 @@ export const Label = ({ id, htmlFor, className, children }: LabelProps) => {
     <label
       id={id}
       htmlFor={htmlFor}
-      className={classNames('control-label d-flex flex-column gap-y-xs m-b-0', className)}
+      className={classNames('control-label d-flex flex-column gap-y-1 m-b-0', className)}
     >
       {children}
     </label>

package/src/main.css

@@ -1484,6 +1484,39 @@ button.np-option {
     border-radius: var(--radius-small);
   }
 }
+.np-select-option {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-select-option-selected {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  border: 1px solid #c9cbce;
+  border: 1px solid var(--color-interactive-secondary);
+}
+.np-select-option-list {
+  max-height: 350px;
+  overflow-y: auto;
+}
+.np-select-option-section {
+  margin-top: 0 !important;
+}
+.has-error * .np-select-option {
+  --ring-outline-color: var(--color-sentiment-negative);
+  --ring-outline-offset: 0;
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: 0;
+  outline-offset: var(--ring-outline-offset);
+}
+.has-error * .np-select-option:focus {
+  outline: none;
+}
+.has-error * .np-select-option:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
 .np-panel__content {
   opacity: 0;
   visibility: hidden;

package/src/main.less

@@ -13,6 +13,7 @@
 @import "./common/card/Card.less";
 @import "./common/closeButton/CloseButton.less";
 @import "./common/Option/Option.less";
+@import "./selectOption/SelectOption.less";
 @import "./common/panel/Panel.less";
 @import "./common/RadioButton/RadioButton.less";
 @import "./dateInput/DateInput.less";

package/src/selectOption/SelectOption.css

@@ -0,0 +1,33 @@
+.np-select-option {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-select-option-selected {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  border: 1px solid #c9cbce;
+  border: 1px solid var(--color-interactive-secondary);
+}
+.np-select-option-list {
+  max-height: 350px;
+  overflow-y: auto;
+}
+.np-select-option-section {
+  margin-top: 0 !important;
+}
+.has-error * .np-select-option {
+  --ring-outline-color: var(--color-sentiment-negative);
+  --ring-outline-offset: 0;
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: 0;
+  outline-offset: var(--ring-outline-offset);
+}
+.has-error * .np-select-option:focus {
+  outline: none;
+}
+.has-error * .np-select-option:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}

package/src/selectOption/SelectOption.less

@@ -0,0 +1,28 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+
+.np-select-option {
+  border-radius: var(--radius-small);
+  background-color: var(--color-background-neutral);
+
+  &-selected {
+    background-color: var(--color-background-screen);
+    border: 1px solid var(--color-interactive-secondary);
+  }
+
+  &-list {
+    max-height: 350px;
+    overflow-y: auto;
+  }
+
+  &-section {
+    // override large margin from Section & Header
+    margin-top: 0 !important;
+  }
+
+  .has-error * & {
+    .ring-negative();
+    .ring-offset-0();
+    .ring();
+    .focus-ring();
+  }
+}

package/src/selectOption/SelectOption.messages.ts

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  actionLabel: {
+    id: 'neptune.SelectOption.action.label',
+    defaultMessage: 'Choose',
+  },
+});

package/src/selectOption/SelectOption.story.tsx

@@ -0,0 +1,212 @@
+import type { StoryObj } from '@storybook/react';
+import { Flag } from '@wise/art';
+import SelectOption, { 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';
+
+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),
+  {
+    media: <BankTransfer />,
+    title: 'Last One',
+    content: <span>1.63 USD in total fees.</span>,
+  },
+];
+
+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 = {
+  render: (args) => {
+    function onChange(value: SelectOptionValue<CustomData>): void {
+      console.log(value);
+    }
+    return (
+      <div className="row">
+        <div className="col-md-8 col-md-offset-2">
+          <Field label="Balances">
+            <SelectOption
+              placeholder={{ title: 'No balance selected' }}
+              options={balances}
+              onChange={(value) => {
+                console.log('selected balance', value);
+              }}
+            />
+          </Field>
+        </div>
+
+        <div className="col-md-8 col-md-offset-2">
+          <Field label={<>Payment method</>} error="Just an example of validation message">
+            <SelectOption<CustomData>
+              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</>} error="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,154 @@
+import { useRef, useState } from 'react';
+import ActionButton, { 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> = {
+  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) => {
+                const isOptionSelected = hasSelected ? selected === option : false;
+                return (
+                  // eslint-disable-next-line react/jsx-key
+                  <NavigationOption
+                    as="div"
+                    role="option"
+                    aria-selected={isOptionSelected}
+                    isContainerAligned={!isLargeScreen}
+                    showMediaCircle
+                    showMediaAtAllSizes
+                    onClick={handleOnChange(option)}
+                    {...option}
+                  />
+                );
+              })}
+            </NavigationOptionsList>
+          </Section>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <Option
+        ref={rootRef}
+        {...props}
+        role="button"
+        aria-haspopup="dialog"
+        aria-expanded={showOptions}
+        aria-labelledby={ariaLabelledBy}
+        showMediaAtAllSizes
+        disabled={disabled}
+        media={hasSelected ? selected.media : placeholder.media ?? <Plus size={24} />}
+        title={(hasSelected ? selected : placeholder).title}
+        content={(hasSelected ? selected : placeholder).content}
+        className={classNames(
+          'np-select-option',
+          { 'np-select-option-selected': hasSelected },
+          props.className,
+        )}
+        button={
+          hasSelected ? (
+            <Chevron />
+          ) : (
+            <ActionButton disabled={disabled} onClick={handleOnClick(true)}>
+              {placeholder.actionLabel || intl.formatMessage(messages.actionLabel)}
+            </ActionButton>
+          )
+        }
+        {...(hasSelected && !disabled && { onClick: handleOnClick(!showOptions) })}
+      />
+      <ResponsivePanel
+        altAxis
+        anchorWidth
+        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;