@transferwise/components 0.0.0-experimental-bd2aa28 → 0.0.0-experimental-1664fea

package/src/listItem/prompt/Prompt.story.tsx

@@ -1,170 +0,0 @@
-import Link from '../../link';
-import { Sentiment } from '../../common';
-import { Prompt, ListItemPromptProps } from './Prompt';
-import { lorem40 } from '../../test-utils';
-import { StoryObj } from '@storybook/react';
-
-export default {
-  component: Prompt,
-  title: 'Content/ListItem/Prompt',
-  args: {
-    type: Sentiment.NEGATIVE,
-    children: 'You have done a terrible thing',
-  },
-  argTypes: {
-    type: {
-      options: [
-        Sentiment.POSITIVE,
-        Sentiment.NEGATIVE,
-        Sentiment.NEUTRAL,
-        Sentiment.WARNING,
-        'discount',
-        'savings',
-      ],
-      control: { type: 'radio' },
-      description: 'The type of prompt to display',
-    },
-    action: {
-      table: {
-        disable: true,
-      },
-    },
-    children: {
-      type: {
-        name: 'string',
-        required: true,
-        description: 'The content of the prompt',
-      },
-    },
-  },
-};
-
-type CustomStory = StoryObj<
-  ListItemPromptProps & {
-    interactivity?: 'none' | 'full-anchor' | 'full-button' | 'link';
-  }
->;
-
-export const Basic: CustomStory = {
-  args: {
-    interactivity: 'none',
-  },
-  argTypes: {
-    interactivity: {
-      options: ['none', 'full-button', 'full-anchor', 'link'],
-      control: { type: 'radio' },
-      description: 'The type of interactivity to display',
-    },
-  },
-  render: ({ interactivity, ...args }) => {
-    return (
-      <div>
-        <Prompt
-          type={args.type}
-          action={
-            interactivity === 'full-anchor'
-              ? { href: 'wise.com' }
-              : interactivity === 'full-button'
-                ? {
-                    onClick: () => {
-                      console.log('clicked');
-                    },
-                  }
-                : undefined
-          }
-        >
-          {args.children} {interactivity === 'link' && <Link href="www.wise.com">with a link</Link>}
-        </Prompt>
-      </div>
-    );
-  },
-};
-
-export const Variants = () => {
-  return (
-    <>
-      <div className="m-b-2">
-        <Prompt type={Sentiment.POSITIVE}>
-          Positive prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt type={Sentiment.NEGATIVE}>
-          Negative prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt type={Sentiment.NEUTRAL}>
-          Neutral prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt type={Sentiment.WARNING}>
-          Warning prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt type="discount">
-          Discount prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt type="savings">
-          Savings prompt <Link href="www.wise.com">with a link to amazing content</Link>
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt
-          type="discount"
-          action={{
-            href: 'www.wise.com',
-            target: '_self',
-            'aria-label': 'hidden anchor tags are accessible, right?',
-          }}
-        >
-          The whole prompt is secretly clickable
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt
-          type="negative"
-          action={{
-            href: 'www.wise.com',
-            target: '_self',
-            'aria-label': 'clickable <a>',
-          }}
-        >
-          The whole prompt is secretly clickable as an anchor tag
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt
-          type="warning"
-          action={{
-            onClick: () => {
-              console.log('clicked');
-            },
-            'aria-label': 'clickable button',
-          }}
-        >
-          The whole prompt is secretly clickable as a button
-        </Prompt>
-      </div>
-      <div className="m-b-2">
-        <Prompt
-          type="neutral"
-          action={{
-            href: 'www.wise.com',
-            target: '_self',
-            'aria-label': 'clickable prompt',
-          }}
-        >
-          The whole prompt is secretly clickable
-        </Prompt>
-      </div>
-      <div className="m-b-2" style={{ maxWidth: '300px' }}>
-        <Prompt type="warning">The prompt has very long text that wraps {lorem40}</Prompt>
-      </div>
-    </>
-  );
-};

package/src/listItem/prompt/Prompt.tsx

@@ -1,44 +0,0 @@
-import { Confetti, Tags } from '@transferwise/icons';
-import { Sentiment } from '../../common';
-import StatusIcon from '../../statusIcon';
-import { clsx } from 'clsx';
-import { LinkProps } from '../../link';
-import Body from '../../body';
-
-export type ListItemPromptProps = {
-  type:
-    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`
-    | 'discount'
-    | 'savings';
-  children: React.ReactNode;
-  action?: Pick<LinkProps, 'href' | 'target' | 'onClick'> & { 'aria-label'?: string };
-};
-
-export const Prompt = ({ type, children, action }: ListItemPromptProps) => {
-  const Wrapper = action?.href ? 'a' : action?.onClick ? 'button' : 'span';
-
-  const icon =
-    type === 'discount' ? (
-      <Tags size={16} />
-    ) : type === 'savings' ? (
-      <Confetti size={16} />
-    ) : (
-      <StatusIcon size={16} sentiment={type} />
-    );
-
-  return (
-    <Wrapper
-      className={clsx(
-        'wds-list-item-prompt',
-        type,
-        (action?.href || action?.onClick) && 'np-prompt-interactive',
-      )}
-      {...(action ?? {})}
-    >
-      <div className="np-prompt-icon">{icon}</div>
-      <Body>{children}</Body>
-    </Wrapper>
-  );
-};
-
-export default Prompt;

package/src/listItem/useItemControl.tsx

@@ -1,23 +0,0 @@
-import { useContext, useEffect } from 'react';
-import {
-  ListItemContext,
-  ListItemContextData,
-  ListItemControlProps,
-  ListItemTypes,
-} from './ListItem';
-
-export function useItemControl(controlType: ListItemTypes, controlProps?: ListItemControlProps) {
-  const {
-    setControlType,
-    setControlProps,
-    props: baseItemProps,
-  } = useContext<ListItemContextData>(ListItemContext);
-
-  useEffect(() => {
-    setControlType(controlType);
-    // @ts-expect-error TODO: fix the type error later
-    setControlProps(controlProps);
-  }, [controlType, controlProps, setControlType, setControlProps]);
-
-  return { baseItemProps };
-}

package/src/selectOption/SelectOption.css

@@ -1,44 +0,0 @@
-.np-select-option {
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  padding: 16px;
-  padding: var(--size-16);
-}
-.np-select-option-placeholder {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-select-option-placeholder:not(.disabled):hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-select-option-placeholder:not(.disabled):focus,
-.np-select-option-placeholder:not(.disabled):active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-select-option-selected {
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
-}
-.np-select-option-list {
-  max-height: 350px;
-  overflow-y: auto;
-}
-.np-select-option-list > .np-section {
-  margin-top: 0;
-}
-.has-error * .np-select-option {
-  --ring-outline-color: var(--color-sentiment-negative);
-  --ring-outline-width: 3px;
-  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
-  outline: var(--ring-outline-color) solid 3px;
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: calc(-1 * 3px);
-  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

@@ -1,40 +0,0 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
-
-.np-select-option {
-  border-radius: var(--radius-small);
-  padding: var(--size-16);
-
-  &-placeholder {
-    background-color: var(--color-background-neutral);
-
-    &:not(.disabled):hover {
-      background-color: var(--color-background-neutral-hover);
-    }
-  
-    &:not(.disabled):focus,
-    &:not(.disabled):active {
-      background-color: var(--color-background-neutral-active);
-    }
-  }
-
-  &-selected {
-    border: 1px solid var(--color-interactive-secondary);
-  }
-
-  &-list {
-    max-height: 350px;
-    overflow-y: auto;
-
-    & > .np-section {
-      // remove large margin in Section & Header
-      margin-top: 0;
-    }
-  }
-
-  .has-error * & {
-    .ring-negative();
-    .ring-inset();
-    .ring();
-    .focus-ring();
-  }
-}

package/src/selectOption/SelectOption.messages.ts

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

package/src/selectOption/SelectOption.spec.tsx

@@ -1,83 +0,0 @@
-import { render, userEvent, screen, within, mockMatchMedia } from '../test-utils';
-import { composeStories } from '@storybook/react';
-import * as stories from './SelectOption.story';
-import { Breakpoint } from '../common';
-import { wait } from '../test-utils/wait';
-
-const { Basic: SelectOptionExample } = composeStories(stories);
-
-mockMatchMedia();
-
-describe('Select Option', () => {
-  it('opens dropdown on desktop view', async () => {
-    render(<SelectOptionExample />);
-
-    let dialog = screen.queryByRole('dialog');
-    expect(dialog).not.toBeInTheDocument();
-
-    const button = screen.getByRole('button');
-
-    await userEvent.click(button);
-
-    dialog = screen.queryByRole('dialog');
-    expect(dialog).toBeInTheDocument();
-  });
-
-  it('opens bottom sheet on mobile view', async () => {
-    // mock mobile view
-    window.innerWidth = Breakpoint.EXTRA_SMALL;
-
-    render(<SelectOptionExample />);
-
-    let dialog = screen.queryByRole('dialog');
-    expect(dialog).not.toBeInTheDocument();
-
-    const button = screen.getByRole('button');
-
-    await userEvent.click(button);
-
-    dialog = screen.queryByRole('dialog');
-    expect(dialog).toBeInTheDocument();
-  });
-
-  it('shows options', async () => {
-    render(<SelectOptionExample />);
-
-    const button = screen.getByRole('button');
-
-    await userEvent.click(button);
-
-    const dialog = screen.getByRole('dialog');
-    const sectionHeaders = within(dialog).getAllByRole('heading', { name: /balances|jars/i });
-    expect(sectionHeaders).toHaveLength(2);
-
-    const options = within(dialog).getAllByRole('heading', { level: 4 });
-    expect(options).toHaveLength(5);
-  });
-
-  it('choose option', async () => {
-    // mock mobile view
-    window.innerWidth = Breakpoint.EXTRA_SMALL;
-
-    render(
-      <SelectOptionExample placeholder={{ title: 'Please choose balance', actionLabel: 'Pick' }} />,
-    );
-
-    const button = screen.getByRole('button');
-
-    expect(button).toHaveTextContent('Pick');
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    await userEvent.click(button);
-    expect(screen.getByRole('dialog')).toBeInTheDocument();
-
-    const pickedOption = within(screen.getByRole('dialog')).getByText('Trip to Mars');
-
-    await userEvent.click(pickedOption);
-
-    // wait for dialog to close
-    await wait(500);
-    expect(screen.getByText('Trip to Mars')).toBeInTheDocument();
-    expect(screen.queryAllByTestId('chevron-down-icon')).toHaveLength(1);
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-  });
-});

package/src/selectOption/SelectOption.story.tsx

@@ -1,277 +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';
-import { useState } from 'react';
-
-export default {
-  title: 'Option/SelectOption',
-  tags: ['autodocs'],
-};
-
-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,
-  },
-  render: (args: SelectOptionProps) => {
-    const [selected, setSelected] = useState<SelectOptionValue | undefined>(undefined);
-
-    function onChange(value: SelectOptionValue): void {
-      setSelected(value);
-    }
-    return (
-      <div className="row">
-        <div className="col-md-8 col-md-offset-2">
-          <Field label="Balances">
-            <SelectOption {...args} {...{ selected, onChange }} />
-          </Field>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const Variants: Story = {
-  render: () => {
-    const [selected, setSelected] = useState<SelectOptionValue<CustomData>>({
-      ...paymentMethods[1].options[1],
-      content: null,
-    });
-    function onChange(value: SelectOptionValue<CustomData>): void {
-      setSelected({ ...value, content: null });
-    }
-    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={selected}
-            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={selected}
-              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={selected}
-              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>
-    );
-  },
-};