@transferwise/components 0.0.0-experimental-9462b09 → 0.0.0-experimental-343827b

package/src/selectOption/SelectOption.story.tsx

@@ -1,269 +0,0 @@
-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(1),
-  {
-    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 Variants: Story = {
-  render: () => {
-    function onChange(value: SelectOptionValue<CustomData>): void {
-      console.log(value);
-    }
-    return (
-      <div className="row">
-        <div className="col-md-8 col-md-offset-2">
-          <SelectOption<CustomData>
-            className="d-block"
-            aria-label="Choose one of payment methods"
-            placeholder={{ title: 'No method selected', actionLabel: 'Select' }}
-            selected={paymentMethods[1].options[1]}
-            options={paymentMethods}
-            onChange={onChange}
-          />
-        </div>
-
-        <div className="col-md-8 col-md-offset-2">
-          <Field label={<>Payment method</>}>
-            <SelectOption<CustomData>
-              aria-label="Choose one of payment methods"
-              placeholder={{ title: 'No method selected', actionLabel: 'Select' }}
-              selected={paymentMethods[1].options[1]}
-              options={paymentMethods}
-              onChange={onChange}
-            />
-          </Field>
-        </div>
-
-        <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' }}
-              selected={paymentMethods[1].options[1]}
-              options={paymentMethods}
-              onChange={onChange}
-            />
-          </Field>
-        </div>
-
-        <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

@@ -1,151 +0,0 @@
-import { useRef, useState } from 'react';
-import { ActionButtonProps } from '../actionButton';
-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 { ChevronDown, 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, index) => (
-          <Section key={index} className={classNames({ 'p-x-2 p-y-1': isLargeScreen })}>
-            {optionsSection.title && <Header title={optionsSection.title} />}
-            <NavigationOptionsList>
-              {optionsSection.options.map((option, index) => {
-                return (
-                  <NavigationOption
-                    key={index}
-                    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}
-        className={classNames(
-          'np-select-option',
-          'clickable',
-          hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder',
-          props.className,
-        )}
-        button={
-          <button
-            {...inputAttributes}
-            type="button"
-            disabled={disabled}
-            aria-labelledby={ariaLabelledBy}
-            aria-haspopup="dialog"
-            aria-expanded={showOptions}
-            className={hasSelected ? 'btn-unstyled' : 'np-action-btn'}
-            aria-label={hasSelected ? undefined : props['aria-label']}
-            onClick={handleOnClick(true)}
-          >
-            {hasSelected ? (
-              <ChevronDown title={intl.formatMessage(messages.selectedActionLabel)} />
-            ) : (
-              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

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

package/src/tabs/TabList.js

@@ -1,15 +0,0 @@
-import PropTypes from 'prop-types';
-
-const TabList = ({ children }) => {
-  return (
-    <ul className="tabs__tab-list" role="tablist">
-      {children}
-    </ul>
-  );
-};
-
-TabList.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
-};
-
-export default TabList;

package/src/tabs/Tabs.story.js

@@ -1,135 +0,0 @@
-import { useState } from 'react';
-
-import { Size, Width } from '../common';
-
-import Tabs from './Tabs';
-
-export default {
-  component: Tabs,
-  title: 'Navigation/Tabs',
-};
-
-export const Basic = () => {
-  const [selected, setSelected] = useState(0);
-  return (
-    <Tabs
-      className="tabs-custom-class"
-      name="tabs-docs"
-      transitionSpacing={Size.MEDIUM}
-      tabs={[
-        {
-          title: 'Title 1',
-          disabled: false,
-          content: (
-            <div className="p-a-2">
-              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
-            </div>
-          ),
-        },
-        {
-          title: 'Title 2',
-          disabled: false,
-          content: (
-            <div className="p-a-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
-          ),
-        },
-        {
-          title: 'Title 3',
-          disabled: true,
-          content: (
-            <div className="p-a-2">
-              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
-            </div>
-          ),
-        },
-      ]}
-      selected={selected}
-      animatePanelsOnClick
-      onTabSelect={(index) => setSelected(index)}
-    />
-  );
-};
-
-export const AutoTabHeaderWidth = () => {
-  const [selected, setSelected] = useState(0);
-  return (
-    <Tabs
-      className="tabs-custom-class"
-      name="tabs-docs"
-      transitionSpacing={Size.MEDIUM}
-      headerWidth={Width.AUTO}
-      tabs={[
-        {
-          title: 'Title 1',
-          disabled: false,
-          content: (
-            <div className="p-a-2">
-              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
-            </div>
-          ),
-        },
-        {
-          title: 'Title 2',
-          disabled: false,
-          content: (
-            <div className="p-a-2">
-              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
-            </div>
-          ),
-        },
-        {
-          title: 'Title 3',
-          disabled: true,
-          content: (
-            <div className="p-a-2">
-              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
-            </div>
-          ),
-        },
-      ]}
-      selected={selected}
-      onTabSelect={(index) => setSelected(index)}
-    />
-  );
-};
-
-export const NoPanelAnimation = () => {
-  const [selected, setSelected] = useState(0);
-  return (
-    <Tabs
-      animatePanels={false}
-      className="tabs-custom-class"
-      name="tabs-docs"
-      transitionSpacing={Size.MEDIUM}
-      tabs={[
-        {
-          title: 'Title 1',
-          disabled: false,
-          content: (
-            <div className="p-a-2">
-              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
-            </div>
-          ),
-        },
-        {
-          title: 'Title 2',
-          disabled: false,
-          content: (
-            <div className="p-a-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
-          ),
-        },
-        {
-          title: 'Title 3',
-          disabled: true,
-          content: (
-            <div className="p-a-2">
-              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
-            </div>
-          ),
-        },
-      ]}
-      selected={selected}
-      onTabSelect={(index) => setSelected(index)}
-    />
-  );
-};