@transferwise/components 0.0.0-experimental-75fc27b → 0.0.0-experimental-8a932bb

package/src/button/src/Button.tsx

@@ -0,0 +1,118 @@
+/* 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 =
+  | (Omit<LegacyButtonProps, 'ref'> & {
+      type?: LegacyButtonType;
+      htmlType?: string;
+      useNewButton?: false;
+      href?: string;
+      ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
+    })
+  | (Omit<Omit<NewButtonProps, 'type'>, 'ref'> & {
+      type?: NewButtonType;
+      useNewButton: true;
+      href?: string;
+      ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
+    });
+
+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:
+      type && !legacyButtonTypes.includes(type as LegacyButtonType) ? type : props.htmlType || null,
+    href: as === 'a' ? props.href || '' : null,
+  } as NewButtonProps;
+};
+
+const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>((props, ref) => {
+  const { useNewButton, as, ...rest } = props;
+
+  if (useNewButton) {
+    const mappedProps = mapProps(props as LegacyButtonProps);
+    return (
+      <NewButton
+        {...mappedProps}
+        ref={ref as React.Ref<HTMLButtonElement | HTMLAnchorElement>}
+        as={as}
+      />
+    );
+  }
+
+  if (as === 'a') {
+    return (
+      <LegacyButton
+        {...(rest as LegacyButtonProps & React.AnchorHTMLAttributes<HTMLAnchorElement>)}
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        as="a"
+      />
+    );
+  }
+
+  return (
+    <LegacyButton
+      {...(rest as LegacyButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>)}
+      ref={ref as React.Ref<HTMLButtonElement>}
+      as="button"
+    />
+  );
+});
+
+Button.displayName = 'Button';
+
+export default Button;

package/src/button/src/index.ts

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

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

@@ -0,0 +1,66 @@
+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');
+  });
+
+  it('renders a button with href when as is "a"', () => {
+    const linkProps: ButtonProps = {
+      ...legacyProps,
+      as: 'a',
+      href: 'https://example.com',
+    };
+    render(<Button {...linkProps}>Legacy Button</Button>);
+    const linkButton = screen.getByText('Legacy Button');
+    expect(linkButton).toBeInTheDocument();
+    expect(linkButton).toHaveAttribute('href', 'https://example.com');
+  });
+
+  it('does not set type when type is in LegacyButtonType', () => {
+    const legacyTypeProps: ButtonProps = {
+      ...newProps,
+      type: 'accent',
+    };
+    render(<Button {...legacyTypeProps}>Button Type</Button>);
+    const button = screen.getByTestId('new-button');
+    expect(button).toBeInTheDocument();
+    expect(button).not.toHaveAttribute('type');
+  });
+
+  it('sets type when type is not in LegacyButtonType', () => {
+    const buttonTypeProps: ButtonProps = {
+      ...newProps,
+      type: 'submit',
+    };
+    render(<Button {...buttonTypeProps}>Submit Button</Button>);
+    const button = screen.getByTestId('new-button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('type', 'submit');
+  });
+});

package/src/circularButton/CircularButton.tsx

@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
 import { cloneElement } from 'react';
 
 import Body from '../body/Body';
-import { typeClassMap, priorityClassMap } from '../button/classMap';
+import { typeClassMap, priorityClassMap } from '../button/LegacyButton/classMap';
 import { Breakpoint, ControlType, Priority, Typography } from '../common';
 import Circle from '../common/circle';
 import { useMedia } from '../common/hooks/useMedia';

package/src/common/action/Action.tsx

@@ -22,7 +22,7 @@ export function Action({ action, className, variant = 'button' }: Props) {
   if ('href' in action) {
     return (
       <Link
-        href={action.href}
+        href={action.href ?? ''}
         className={className}
         aria-label={action['aria-label']}
         target={action.target}

package/src/iconButton/IconButton.css

@@ -2,77 +2,72 @@
   border: none;
 }
 .np-icon-button-tertiary-default {
-  color: var(--color-interactive-primary);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
+  --Button-color: var(--color-interactive-primary);
+  --Button-background: var(--color-background-neutral);
 }
 .np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-background-neutral-hover);
+  --Button-background-hover: var(--color-background-neutral-hover);
 }
 .np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-neutral-active);
+  --Button-background-active: var(--color-background-neutral-active);
 }
 .np-icon-button-primary-default {
-  color: var(--color-interactive-control);
-  background-color: #00a2dd;
-  background-color: var(--color-interactive-accent);
+  --Button-color: var(--color-interactive-control);
+  --Button-background: var(--color-interactive-accent);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
-  background-color: #008fc9;
-  background-color: var(--color-interactive-accent-hover);
+  --Button-background-hover: var(--color-interactive-accent-hover);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
-  background-color: #0081ba;
-  background-color: var(--color-interactive-accent-active);
+  --Button-background-active: var(--color-interactive-accent-active);
 }
 .np-icon-button-primary-negative {
-  color: var(--color-contrast-overlay);
-  background-color: var(--color-sentiment-negative-primary);
+  --Button-color: var(--color-contrast-overlay);
+  --Button-background: var(--color-sentiment-negative-primary);
 }
 .np-icon-button-primary-negative:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-sentiment-negative-primary-hover);
+  --Button-background-hover: var(--color-sentiment-negative-primary-hover);
 }
 .np-icon-button-primary-negative:not(.disabled):not(:disabled):active {
-  background-color: var(--color-sentiment-negative-primary-active);
+  --Button-background-active: var(--color-sentiment-negative-primary-active);
 }
 .np-theme-personal--bright-green .np-icon-button-primary-negative {
   color: var(--color-white);
 }
 .np-icon-button-minimal-default {
-  color: var(--color-interactive-primary);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
+  --Button-color: var(--color-interactive-primary);
+  --Button-background: var(--color-background-screen);
   background-color: transparent;
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-background-screen-hover);
+  --Button-background-hover: var(--color-background-screen-hover);
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
+  --Button-background-active: var(--color-background-screen-active);
 }
 .np-icon-button-secondary-default {
-  color: var(--color-interactive-primary);
-  background-color: var(--color-interactive-neutral);
+  --Button-color: var(--color-interactive-primary);
+  --Button-background: var(--color-interactive-neutral);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-interactive-neutral-hover);
+  --Button-background-hover: var(--color-interactive-neutral-hover);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-interactive-neutral-active);
+  --Button-background-active: var(--color-interactive-neutral-active);
 }
 .np-theme-personal--bright-green .np-icon-button-secondary-default,
 .np-theme-personal--forest-green .np-icon-button-secondary-default {
   color: var(--color-interactive-control);
 }
 .np-icon-button-secondary-negative {
-  color: var(--color-sentiment-negative-primary);
-  background-color: var(--color-sentiment-negative-secondary);
+  --Button-color: var(--color-sentiment-negative-primary);
+  --Button-background: var(--color-sentiment-negative-secondary);
 }
 .np-icon-button-secondary-negative:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-sentiment-negative-secondary-hover);
+  --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
 }
 .np-icon-button-secondary-negative:not(.disabled):not(:disabled):active {
-  background-color: var(--color-sentiment-negative-secondary-active);
+  --Button-background-active: var(--color-sentiment-negative-secondary-active);
 }
 .np-theme-personal--bright-green .np-icon-button-secondary-negative {
   color: var(--color-white);

package/src/iconButton/IconButton.less

@@ -42,14 +42,14 @@
   }
 
   .colors(@icon-color, @bg-color) {
-    color: var(@icon-color);
-    background-color: var(@bg-color);
+    --Button-color: var(@icon-color);
+    --Button-background: var(@bg-color);
 
     &:not(.disabled, :disabled):hover {
-      background-color:~"var(@{bg-color}-hover)";
+      --Button-background-hover:~"var(@{bg-color}-hover)";
     }
     &:not(.disabled, :disabled):active {
-      background-color:~"var(@{bg-color}-active)";
+      --Button-background-active:~"var(@{bg-color}-active)";
     }
   }
 }

package/src/link/Link.tsx

@@ -1,13 +1,14 @@
 import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import { AnchorHTMLAttributes } from 'react';
 import { useIntl } from 'react-intl';
+import { PrimitiveAnchor } from '../primitives';
+import type { PrimitiveAnchorProps } from '../primitives';
 
 import { LinkLarge, LinkDefault } from '../common';
 
 import messages from './Link.messages';
 
-export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };
+export type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };
 
 /**
  * Standard Link component with navigate away icon
@@ -24,22 +25,30 @@ const Link = ({
   onClick,
   ...props
 }: Props) => {
+  const { formatMessage } = useIntl();
   const isBlank = target === '_blank';
 
-  const { formatMessage } = useIntl();
+  const classNames = clsx(
+    'np-link',
+    'd-inline-flex',
+    {
+      [`np-text-${type}`]: type,
+    },
+    className,
+  );
 
   return (
-    <a
+    <PrimitiveAnchor
       href={href}
       target={target}
-      className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}
+      className={classNames}
       aria-label={ariaLabel}
       rel={isBlank ? 'noreferrer' : undefined}
       onClick={onClick}
       {...props}
     >
       {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}
-    </a>
+    </PrimitiveAnchor>
   );
 };