@transferwise/components 0.0.0-experimental-a9e2e05 → 0.0.0-experimental-e92f7ac

package/src/button/LegacyButton/Button.story.tsx

@@ -1,224 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within, fn, expect } from '@storybook/test';
-import { useState } from 'react';
-
-import Button from '..';
-
-const withContainer = (Story: any) => (
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'initial',
-      justifyContent: 'center',
-      flexFlow: 'column',
-      alignItems: 'center',
-    }}
-  >
-    <Story />
-  </div>
-);
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  title: 'Actions/Button/Legacy',
-  args: {
-    children: 'Button text',
-    loading: false,
-    type: undefined,
-    onClick: fn(),
-    onBlur: fn(),
-    onFocus: fn(),
-    href: 'https://example.com',
-  },
-  argTypes: {
-    as: {
-      control: {
-        type: 'select',
-        options: ['button', 'a'],
-      },
-    },
-    type: {
-      type: {
-        name: 'enum',
-        value: ['accent', 'positive', 'negative'],
-      },
-    },
-    size: {
-      type: {
-        name: 'enum',
-        value: ['xs', 'sm', 'md', 'lg'],
-      },
-    },
-    priority: {
-      type: {
-        name: 'enum',
-        value: ['primary', 'secondary', 'tertiary'],
-      },
-    },
-    appearance: {
-      table: {
-        disable: true,
-      },
-    },
-    iconLeft: {
-      table: {
-        disable: true,
-      },
-    },
-    iconRight: {
-      table: {
-        disable: true,
-      },
-    },
-    avatars: {
-      table: {
-        disable: true,
-      },
-    },
-    'data-testid': {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  tags: ['autodocs'],
-  decorators: [withContainer],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Button>;
-
-export const Basic: Story = {};
-
-export const Secondary: Story = {
-  args: {
-    type: 'accent',
-    priority: 'secondary',
-  },
-};
-
-export const Tertiary: Story = {
-  args: {
-    type: 'accent',
-    priority: 'tertiary',
-  },
-};
-
-export const Negative: Story = {
-  args: {
-    type: 'negative',
-    priority: 'primary',
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    loading: true,
-  },
-};
-
-export const Variants: Story = {
-  render: () => {
-    return (
-      <div className="d-flex flex-column p-b-2 align-items-start">
-        <div className="d-flex flex-row p-b-2" style={{ gap: 'var(--size-16)' }}>
-          <Button type="accent" priority="primary">
-            Primary Accent
-          </Button>
-          <Button type="accent" priority="secondary">
-            Secondary Accent
-          </Button>
-          <Button type="accent" priority="tertiary">
-            Tertiary Accent
-          </Button>
-        </div>
-        <div className="d-flex flex-row p-b-2" style={{ gap: 'var(--size-16)' }}>
-          <Button type="positive" priority="primary">
-            Primary Positive
-          </Button>
-          <Button type="positive" priority="secondary">
-            Secondary Accent
-          </Button>
-        </div>
-        <div className="d-flex flex-row flex- p-b-2" style={{ gap: 'var(--size-16)' }}>
-          <Button type="negative" priority="primary">
-            Primary Negative
-          </Button>
-          <Button type="negative" priority="secondary">
-            Secondary Negative
-          </Button>
-        </div>
-        <div className="d-flex flex-row p-b-1" style={{ gap: 'var(--size-16)' }}>
-          <Button type="accent" priority="primary" disabled>
-            Button Disabled
-          </Button>
-          <Button type="accent" priority="secondary" disabled>
-            Button Disabled
-          </Button>
-          <Button type="accent" priority="tertiary" disabled>
-            Button Disabled
-          </Button>
-        </div>
-      </div>
-    );
-  },
-};
-
-const wait = async (duration = 500) =>
-  new Promise<void>((resolve) => {
-    setTimeout(resolve, duration);
-  });
-
-export const Focused: Story = {
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).toHaveFocus();
-    await expect(button).toHaveTextContent('Focused!');
-  },
-  render: function Render(args: React.ComponentProps<typeof Button>) {
-    const [focused, setFocused] = useState(false);
-
-    return (
-      <Button {...args} onFocus={() => setFocused(true)}>
-        {focused ? 'Focused!' : 'Button text'}
-      </Button>
-    );
-  },
-};
-
-export const SocialMedia: Story = {
-  render: () => {
-    return (
-      <>
-        <div className="m-b-2">
-          <button type="button" className="btn btn-google">
-            Login with Google
-          </button>
-        </div>
-        <div className="m-b-2">
-          <button type="button" className="btn btn-facebook">
-            Login with Facebook
-          </button>
-        </div>
-        <div className="m-b-2">
-          <button type="button" className="btn btn-lg btn-facebook">
-            Large Button
-          </button>
-        </div>
-        <div className="m-b-2">
-          <button type="button" className="btn btn-block btn-facebook">
-            Block Button
-          </button>
-        </div>
-        <div className="m-b-2">
-          <button type="button" className="btn btn-lg btn-block btn-facebook">
-            Large Block Button
-          </button>
-        </div>
-      </>
-    );
-  },
-};

package/src/button/LegacyButton/index.ts

@@ -1,3 +0,0 @@
-export { default } from './Button';
-
-export type { Props as ButtonProps } from './Button';

package/src/button/src/Button.tsx

@@ -1,87 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { forwardRef } from 'react';
-import LegacyButton, { ButtonProps as LegacyButtonProps } from '../LegacyButton';
-import NewButton from '../Button';
-import { ButtonProps as NewButtonProps } from '../Button/src/Button.types';
-
-type LegacyButtonType =
-  | 'accent'
-  | 'negative'
-  | 'positive'
-  | 'primary'
-  | 'pay'
-  | 'secondary'
-  | 'danger'
-  | 'link'
-  | null
-  | undefined;
-type NewButtonType = 'button' | 'submit' | 'reset' | LegacyButtonType | undefined;
-
-export type ButtonProps =
-  | (LegacyButtonProps & { type?: LegacyButtonType; useNewButton?: false })
-  | (Omit<NewButtonProps, 'type'> & { type?: NewButtonType; useNewButton: true });
-
-const mapProps = (props: LegacyButtonProps): NewButtonProps => {
-  const { priority, size, type, as, ...newProps } = props;
-
-  const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {
-    accent: {
-      primary: 'primary',
-      secondary: 'tertiary',
-      tertiary: 'minimal',
-    },
-    positive: {
-      primary: 'primary',
-      secondary: 'tertiary',
-      tertiary: 'tertiary',
-    },
-    negative: {
-      primary: 'primary',
-      secondary: 'secondary',
-      tertiary: 'secondary',
-    },
-  };
-
-  const mappedPriority =
-    type && priority ? priorityMapping[type]?.[priority] || priority : priority || null;
-  const mappedAppearance = type === 'negative' ? 'negative' : null;
-
-  const legacyButtonTypes: LegacyButtonType[] = [
-    'accent',
-    'negative',
-    'positive',
-    'primary',
-    'pay',
-    'secondary',
-    'danger',
-    'link',
-  ];
-
-  return {
-    ...newProps,
-    size:
-      size === 'xs' || size === 'sm' ? 'sm' : size === 'md' ? 'md' : size === 'lg' ? 'lg' : size,
-    priority: mappedPriority,
-    appearance: mappedAppearance || ('appearance' in props ? props.appearance : null),
-    type:
-      as === 'button' && !legacyButtonTypes.includes(type as LegacyButtonType)
-        ? props.htmlType
-        : null,
-    href: as === 'a' ? props.href || '' : null,
-  } as NewButtonProps;
-};
-
-const Button = forwardRef<any, ButtonProps>((props, ref) => {
-  const { useNewButton, ...rest } = props;
-
-  if (useNewButton) {
-    const mappedProps = mapProps(props as LegacyButtonProps);
-    return <NewButton {...mappedProps} ref={ref as any} />;
-  }
-
-  return <LegacyButton {...(rest as LegacyButtonProps)} ref={ref as any} />;
-});
-
-Button.displayName = 'Button';
-
-export default Button;

package/src/button/src/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Button';
-export type { ButtonProps } from './Button';

package/src/button/test/Button.spec.tsx

@@ -1,32 +0,0 @@
-import { render, screen } from '../../test-utils';
-import Button, { ButtonProps } from '..';
-
-describe('Button', () => {
-  const legacyProps: ButtonProps = {
-    priority: 'primary',
-    size: 'md',
-    type: 'accent',
-  };
-
-  const newProps: ButtonProps = {
-    useNewButton: true,
-    priority: 'primary',
-    size: 'md',
-    type: 'accent',
-    testId: 'new-button',
-  };
-
-  it('renders LegacyButton when useNewButton is false', () => {
-    render(<Button {...legacyProps}>Legacy Button</Button>);
-    const button = screen.getByText('Legacy Button');
-    expect(button).toBeInTheDocument();
-    expect(button).toHaveClass('btn btn-md np-btn np-btn-md btn-accent btn-priority-1');
-  });
-
-  it('renders the new Button when useNewButton is true', () => {
-    render(<Button {...newProps}>New Button</Button>);
-    const button = screen.getByTestId('new-button');
-    expect(button).toBeInTheDocument();
-    expect(button).toHaveClass('wds-Button wds-Button--medium wds-Button--primary');
-  });
-});

package/src/phoneNumberInput/PhoneNumberInput.rtl.spec.tsx

@@ -1,32 +0,0 @@
-import { Field } from '../field/Field';
-import { mockMatchMedia, mockResizeObserver, render, screen, within } from '../test-utils';
-
-import PhoneNumberInput from './PhoneNumberInput';
-
-mockMatchMedia();
-mockResizeObserver();
-
-describe('PhoneNumberInput', () => {
-  it('supports custom `aria-labelledby` attribute', () => {
-    render(
-      <>
-        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-        <label id="prioritized-label">Prioritized label</label>
-        <PhoneNumberInput aria-labelledby="prioritized-label" onChange={() => {}} />
-      </>,
-    );
-
-    expect(
-      within(screen.getByLabelText('Prioritized label')).getByRole('textbox'),
-    ).toBeInTheDocument();
-  });
-
-  it('supports `Field` for labeling', () => {
-    render(
-      <Field label="Phone number">
-        <PhoneNumberInput initialValue="+12345678" onChange={() => {}} />
-      </Field>,
-    );
-    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Phone number/);
-  });
-});