@transferwise/components 0.0.0-experimental-5125346 → 0.0.0-experimental-3b84ee4

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,157 @@
+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 = 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}
+        aria-haspopup="dialog"
+        aria-expanded={showOptions}
+        aria-labelledby={ariaLabelledBy}
+        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}
+            className="btn-unstyled"
+            aria-label={hasSelected ? undefined : props['aria-label']}
+            onClick={handleOnClick(true)}
+          >
+            {hasSelected ? (
+              <Chevron />
+            ) : (
+              <ActionButton>
+                {placeholder.actionLabel || intl.formatMessage(messages.actionLabel)}
+              </ActionButton>
+            )}
+          </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;

package/src/uploadInput/UploadInput.css

@@ -50,25 +50,8 @@
   color: var(--color-sentiment-negative) !important;
 }
 .np-theme-personal .np-upload-input-errors {
-  list-style: none;
   padding-left: 0;
-}
-.np-theme-personal .np-upload-input-errors li {
-  position: relative;
-  padding-left: 16px;
-  padding-left: var(--size-16);
-}
-@media (max-width: 320px) {
-  .np-theme-personal .np-upload-input-errors li {
-    padding-left: 32px;
-    padding-left: var(--size-32);
-  }
-}
-.np-theme-personal .np-upload-input-errors li:before {
-  content: '•';
-  position: absolute;
-  display: block;
-  left: 0;
+  list-style-position: inside;
 }
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;

package/src/uploadInput/UploadInput.less

@@ -59,24 +59,8 @@
     }
 
     &-errors {
-      list-style: none;
       padding-left: 0;
-
-      li {
-        position: relative;
-        padding-left: var(--size-16);
-
-        @media (--screen-400-zoom) {
-          padding-left: var(--size-32);
-        }
-
-        &:before {
-          content: '•';
-          position: absolute;
-          display: block;
-          left: 0;
-        }
-      }
+      list-style-position: inside;
     }
 
     .status-circle {

package/src/uploadInput/UploadInput.tests.story.tsx

@@ -125,24 +125,13 @@ WithFileErrors.args = {
       id: 5,
       filename: 'Error with multiple `string` errors passed in `array`.png',
       status: Status.FAILED,
-      errors: [
-        'Error 1',
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-        'Error 3',
-      ],
+      errors: ['Error 1', 'Error 2', 'Error 3'],
     },
     {
       id: 6,
       filename: 'Error with multiple `obj` errors passed in `array`.png',
       status: Status.FAILED,
-      errors: [
-        { message: 'Error 1' },
-        {
-          message:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-        },
-        { message: 'Error 3' },
-      ],
+      errors: [{ message: 'Error 1' }, { message: 'Error 2' }, { message: 'Error 3' }],
     },
   ],
   multiple: true,

package/src/uploadInput/uploadButton/UploadButton.css

@@ -8,9 +8,6 @@
   border-color: #c9cbce !important;
   border-color: var(--color-interactive-secondary) !important;
 }
-.np-upload-button-container.droppable-dropping:before {
-  z-index: 2;
-}
 .np-upload-button-container input[type="file"] {
   opacity: 0;
   z-index: -1;
@@ -21,7 +18,6 @@
 }
 .np-upload-button {
   width: 100%;
-  border-top: 1px solid transparent;
   padding: 16px;
   padding: var(--padding-small);
   border-radius: 0;

package/src/uploadInput/uploadButton/UploadButton.less

@@ -7,10 +7,6 @@
 
   &.droppable-dropping {
     border-color: var(--color-interactive-secondary) !important;
-
-    &:before {
-      z-index: 2;
-    }
   }
 
   input[type="file"] {
@@ -26,7 +22,6 @@
 
 .np-upload-button {
   width: 100%;
-  border-top: 1px solid transparent;
   padding: var(--padding-small);
   border-radius: 0;
 

package/src/uploadInput/uploadItem/UploadItem.css

@@ -1,49 +1,30 @@
 .np-upload-item {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
-  position: relative;
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+.np-upload-item:first-child ~ div:before {
   display: block;
-  position: absolute;
+  position: relative;
   height: 1px;
   background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   content: " ";
-  left: 16px;
-  left: var(--size-16);
-  width: calc(100% - 2 * 16px);
-  width: calc(100% - 2 * var(--size-16));
-}
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
-  top: 0;
-}
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
-  bottom: -1px;
+  margin: 0 16px;
+  margin: 0 var(--size-16);
 }
 .np-upload-item:first-child ~ div {
-  border-top: 1px;
-}
-.np-upload-item:not(:first-child) .np-upload-item--link:hover {
-  border-top-color: rgba(0,0,0,0.10196);
-  border-top-color: var(--color-border-neutral);
+  border-top: 0;
 }
 .np-upload-item:not(:last-child) {
   border-bottom: 0;
 }
-.np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
-  display: none;
+.np-upload-item.np-upload-item__link:hover:before,
+.np-upload-button-container:hover:before {
+  margin: 0 !important;
 }
-.np-upload-button-container:hover:before,
-.np-upload-button-container.droppable-dropping:before {
-  left: 0 !important;
-  width: 100% !important;
+.np-upload-item.np-upload-item__link:hover + div:before,
+.np-upload-button-container:hover + div:before {
+  margin: 0 !important;
 }
 .np-upload-button-container:has(:focus-visible) {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
@@ -60,29 +41,17 @@
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-top: 1px solid transparent;
   border-radius: inherit;
 }
 .np-upload-item__link a:focus-visible {
   outline-offset: -2px;
 }
-.np-upload-item__link a:hover:before {
-  display: none !important;
-}
-.np-upload-item__link a:hover:after {
-  left: 0 !important;
-  width: 100% !important;
-}
 .np-upload-item__link a:hover,
 .np-upload-item__link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
-}
-.np-upload-item__link a:hover .np-upload-button,
-.np-upload-item__link a:active .np-upload-button {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
-  border-radius: inherit;
 }
 .np-upload-item__body {
   display: flex;
@@ -107,7 +76,6 @@
   outline-offset: 0 !important;
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
-  border: none;
   color: var(--color-interactive-primary);
   right: 16px;
   right: var(--size-16);