@transferwise/components 0.0.0-experimental-28eac06 → 0.0.0-experimental-9b6d886

package/src/button/Button.vars.css

@@ -1,46 +0,0 @@
-.wds-Button {
-  --Button-background: var(--color-interactive-accent);
-  --Button-background-hover: var(--color-interactive-accent-hover);
-  --Button-background-active: var(--color-interactive-accent-active);
-  --Button-color: var(--color-interactive-control);
-  --Button-border-radius: var(--radius-full);
-  --Button-label-gap: var(--size-4);
-  --Button-large-padding: var(--size-12) var(--size-16);
-  --Button-medium-padding: var(--size-8) var(--size-12);
-  --Button-small-padding: var(--size-5) var(--size-12);
-  --Button-avatar-border-color: var(--color-border-neutral);
-  --Button-transition-duration: 150ms;
-  --Button-transition-easing: ease-in-out;
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
-  --Button-secondary-background-active: var(--color-interactive-neutral-active);
-  --Button-secondary-color: var(--color-interactive-primary);
-  --Button-tertiary-background: var(--color-background-neutral);
-  --Button-tertiary-background-hover: var(--color-background-neutral-hover);
-  --Button-tertiary-background-active: var(--color-background-neutral-active);
-  --Button-tertiary-color: var(--color-content-primary);
-  --Button-minimal-background: transparent;
-  --Button-minimal-background-hover: var(--color-background-screen-hover);
-  --Button-minimal-background-active: var(--color-background-screen-active);
-  --Button-minimal-color: var(--color-interactive-primary);
-  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
-  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
-  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
-  --Button-primary-negative-color: var(--color-contrast-overlay);
-  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
-  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
-  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
-  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
-}
-.np-theme-personal--bright-green .wds-Button {
-  --Button-primary-negative-color: var(--color-white);
-  --Button-secondary-color: var(--color-interactive-control);
-  --Button-secondary-negative-color: var(--color-white);
-}
-.np-theme-personal--forest-green .wds-Button {
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
-  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
-  --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
-  --Button-secondary-negative-color: var(--color-contrast-overlay);
-}

package/src/button/Button.vars.less

@@ -1,55 +0,0 @@
-.wds-Button {
-  --Button-background: var(--color-interactive-accent);
-  --Button-background-hover: var(--color-interactive-accent-hover);
-  --Button-background-active: var(--color-interactive-accent-active);
-  --Button-color: var(--color-interactive-control);
-  --Button-border-radius: var(--radius-full);
-  --Button-label-gap: var(--size-4);
-
-  --Button-large-padding: var(--size-12) var(--size-16);
-  --Button-medium-padding: var(--size-8) var(--size-12);
-  --Button-small-padding: var(--size-5) var(--size-12);
-
-  --Button-avatar-border-color: var(--color-border-neutral);
-  --Button-transition-duration: 150ms;
-  --Button-transition-easing: ease-in-out;
-
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
-  --Button-secondary-background-active: var(--color-interactive-neutral-active);
-  --Button-secondary-color: var(--color-interactive-primary);
-
-  --Button-tertiary-background: var(--color-background-neutral);
-  --Button-tertiary-background-hover: var(--color-background-neutral-hover);
-  --Button-tertiary-background-active: var(--color-background-neutral-active);
-  --Button-tertiary-color: var(--color-content-primary);
-
-  --Button-minimal-background: transparent;
-  --Button-minimal-background-hover: var(--color-background-screen-hover);
-  --Button-minimal-background-active: var(--color-background-screen-active);
-  --Button-minimal-color: var(--color-interactive-primary);
-
-  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
-  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
-  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
-  --Button-primary-negative-color: var(--color-contrast-overlay);
-
-  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
-  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
-  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
-  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
-
-  .np-theme-personal--bright-green & {
-    --Button-primary-negative-color: var(--color-white);
-    --Button-secondary-color: var(--color-interactive-control);
-    --Button-secondary-negative-color: var(--color-white);
-  }
-
-  .np-theme-personal--forest-green & {
-    --Button-secondary-background: var(--color-interactive-neutral);
-    --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
-    --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
-    --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
-    --Button-secondary-negative-color: var(--color-contrast-overlay);
-  }
-}

package/src/button/LegacyButton.css

@@ -1,23 +0,0 @@
-.np-btn {
-  position: relative;
-}
-.np-btn.np-btn-block > span.btn-loader {
-  position: absolute;
-  left: 24px;
-  left: var(--size-24);
-}
-[dir="rtl"] .np-btn.np-btn-block > span.btn-loader {
-  right: 24px;
-  right: var(--size-24);
-  left: auto;
-  left: initial;
-}
-.np-btn.np-btn-xs > span.btn-loader {
-  background-size: 16px 16px;
-}
-.np-btn.np-btn-xs.btn-block > span.btn-loader {
-  top: 0;
-}
-.np-btn.disabled[class] {
-  pointer-events: auto;
-}

package/src/button/LegacyButton.less

@@ -1,24 +0,0 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
-
-.np-btn {
-  position: relative;
-
-  &.np-btn-block > span.btn-loader {
-    position: absolute;
-    .left(var(--size-24));
-  }
-
-  &.np-btn-xs > span.btn-loader {
-    background-size: 16px 16px;
-  }
-
-  &.np-btn-xs.btn-block > span.btn-loader {
-    top: 0;
-  }
-
-  // we do not want pointer events disabled as that
-  // prevents the custom cursor to be shown
-  &.disabled[class] {
-    pointer-events: auto;
-  }
-}

package/src/button/LegacyButton.spec.tsx

@@ -1,147 +0,0 @@
-import { createRef } from 'react';
-
-import { render, screen, userEvent } from '../test-utils';
-
-import LegacyButton from './LegacyButton';
-import messages from '../i18n/commonMessages/Button.messages';
-import { ButtonReferenceType } from './Button.types';
-
-describe('LegacyButton', () => {
-  // eslint-disable-next-line no-console
-  const originalWarn = console.warn;
-  let mockedWarn: typeof originalWarn;
-
-  const props = {
-    onClick: jest.fn(),
-    onFocus: jest.fn(),
-    onBlur: jest.fn(),
-    children: 'Send money',
-  };
-
-  beforeAll(() => {
-    mockedWarn = jest.fn().mockImplementation((args) => {
-      if (typeof args !== 'string' || !args.startsWith('Button has deprecated the')) {
-        originalWarn(args);
-      }
-    });
-    // eslint-disable-next-line no-console
-    console.warn = mockedWarn;
-  });
-
-  beforeEach(jest.clearAllMocks);
-
-  afterAll(() => {
-    // eslint-disable-next-line no-console
-    console.warn = originalWarn;
-  });
-
-  describe('by default', () => {
-    it('renders the text', () => {
-      render(<LegacyButton {...props} />);
-      expect(screen.getByText(props.children)).toBeInTheDocument();
-    });
-
-    it('set `ref` to be true on Button', () => {
-      const reference = createRef<ButtonReferenceType>();
-
-      expect(reference.current).toBeFalsy();
-      render(<LegacyButton ref={reference}>Click me!</LegacyButton>);
-      expect(reference.current).toBeTruthy();
-    });
-
-    it('is not disabled', () => {
-      render(<LegacyButton {...props} />);
-      expect(screen.getByRole('button')).toBeEnabled();
-    });
-  });
-
-  describe('button attributes', () => {
-    it('sets the htmlType if set', () => {
-      render(<LegacyButton {...props} htmlType="submit" />);
-      expect(screen.getByRole('button')).toHaveAttribute('type', 'submit');
-    });
-
-    it('passes through custom classes if set', () => {
-      render(<LegacyButton {...props} className="donkeysarethebest" />);
-      expect(screen.getByRole('button')).toHaveClass('donkeysarethebest');
-    });
-
-    it('passes through aria-label if set', () => {
-      render(<LegacyButton {...props} aria-label="unique label" />);
-      const loadingButton = screen.getByLabelText('unique label');
-      expect(loadingButton).toBeInTheDocument();
-    });
-  });
-
-  describe('onClick', () => {
-    it('calls onClick when clicked', async () => {
-      render(<LegacyButton {...props} />);
-      await userEvent.click(screen.getByRole('button'));
-      expect(props.onClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('does not call onClick when clicked if disabled', async () => {
-      render(<LegacyButton {...props} disabled />);
-      await userEvent.click(screen.getByRole('button'));
-      expect(props.onClick).toHaveBeenCalledTimes(0);
-    });
-
-    it('does not call onClick when clicked if loading', async () => {
-      render(<LegacyButton {...props} loading />);
-      await userEvent.click(screen.getByRole('button'));
-      expect(props.onClick).toHaveBeenCalledTimes(0);
-    });
-  });
-
-  describe('onFocus and onBlur', () => {
-    it('calls both handlers by default', async () => {
-      render(<LegacyButton {...props} />);
-      await userEvent.tab();
-      expect(props.onFocus).toHaveBeenCalledTimes(1);
-      await userEvent.tab();
-      expect(props.onFocus).toHaveBeenCalledTimes(1);
-    });
-
-    it('does not call either handler if disabled', async () => {
-      render(<LegacyButton {...props} disabled />);
-      await userEvent.tab();
-      expect(props.onFocus).not.toHaveBeenCalled();
-      await userEvent.tab();
-      expect(props.onFocus).not.toHaveBeenCalled();
-    });
-
-    it('calls both handlers if loading', async () => {
-      render(<LegacyButton {...props} loading />);
-      await userEvent.tab();
-      expect(props.onFocus).toHaveBeenCalledTimes(1);
-      await userEvent.tab();
-      expect(props.onFocus).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('other states', () => {
-    it('renders as loading if `loading` is true', () => {
-      render(<LegacyButton {...props} loading />);
-      const button = screen.queryByRole('button', {
-        name: messages.loadingAriaLabel.defaultMessage,
-      });
-      expect(button).toBeInTheDocument();
-      expect(button).toBeEnabled();
-      expect(button).toHaveClass('btn-loading');
-      expect(button).toHaveAttribute('aria-disabled', 'true');
-      expect(button).toHaveAttribute('aria-busy', 'true');
-      expect(button).toHaveAttribute('aria-live', 'polite');
-      expect(screen.getByTestId('ButtonProgressIndicator')).toBeInTheDocument();
-    });
-
-    it('disables the button', () => {
-      render(<LegacyButton {...props} disabled />);
-      const button = screen.queryByRole('button');
-      expect(button).toBeDisabled();
-      expect(button).toHaveClass('disabled');
-      expect(button).toHaveAttribute('aria-disabled', 'false');
-      expect(button).toHaveAttribute('aria-busy', 'false');
-      expect(button).toHaveAttribute('aria-live', 'off');
-    });
-  });
-});

package/src/button/LegacyButton.story.tsx

@@ -1,228 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within, fn, expect } from '@storybook/test';
-import { useState } from 'react';
-
-import Button from '.';
-import LegacyButton from './LegacyButton';
-
-// needed for the SB to show correct name in the Source blocks
-LegacyButton.displayName = 'Button';
-
-const withContainer = (Story: any) => (
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'initial',
-      justifyContent: 'center',
-      flexFlow: 'column',
-      alignItems: 'center',
-    }}
-  >
-    <Story />
-  </div>
-);
-
-const meta: Meta<typeof LegacyButton> = {
-  component: LegacyButton,
-  title: 'Actions/Button/Legacy Button',
-  args: {
-    size: undefined,
-    priority: undefined,
-    type: undefined,
-    block: false,
-    disabled: false,
-    loading: false,
-    href: undefined,
-    as: undefined,
-    target: undefined,
-    htmlType: undefined,
-    children: 'Button text',
-    onClick: fn(),
-    onBlur: fn(),
-    onFocus: fn(),
-  },
-  argTypes: {
-    href: {
-      control: 'text',
-      description: 'If set together with `as="a"`, the component will render as an HTML anchor.',
-    },
-    as: {
-      control: {
-        name: 'enum',
-        options: ['button', 'a'],
-      },
-      description: 'If set together with `href`, the component will render as an HTML anchor.',
-    },
-    type: {
-      type: {
-        name: 'enum',
-        value: ['accent', 'positive', 'negative'],
-      },
-      description:
-        '**NB**: `primary` | `pay` | `secondary` | `danger` | `link` are deprecated.\n\n',
-    },
-    size: {
-      type: {
-        name: 'enum',
-        value: ['lg', 'md', 'sm', 'xs'],
-      },
-      description: '**NB**: `xs` is deprecated.\n\n',
-    },
-    priority: {
-      type: {
-        name: 'enum',
-        value: ['primary', 'secondary', 'tertiary'],
-      },
-    },
-    block: {
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    v2: {
-      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>
-      </>
-    );
-  },
-};