@transferwise/components 0.0.0-experimental-c0d7cb2 → 0.0.0-experimental-95cea4f

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

@@ -0,0 +1,224 @@
+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/{Button.tsx → LegacyButton/Button.tsx}

@@ -16,10 +16,10 @@ import {
   SizeSmall,
   SizeMedium,
   SizeLarge,
-} from '../common';
-import ProcessIndicator from '../processIndicator';
+} from '../../common';
+import ProcessIndicator from '../../processIndicator';
 
-import messages from '../i18n/commonMessages/Button.messages';
+import messages from '../../i18n/commonMessages/Button.messages';
 import { typeClassMap, priorityClassMap } from './classMap';
 import { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';
 
@@ -33,20 +33,22 @@ type CommonProps = {
   block?: boolean;
   disabled?: boolean;
   loading?: boolean;
+  /** @deprecated */
   type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;
   priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;
   size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
 };
 
-type ButtonProps = CommonProps &
+export type ButtonProps = CommonProps &
   Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
-    as?: 'button';
+    as?: 'button' | undefined;
+    /** @deprecated */
     htmlType?: 'submit' | 'reset' | 'button';
   };
 
-type AnchorProps = CommonProps &
+export type AnchorProps = CommonProps &
   Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
-    as?: 'a';
+    as?: 'a' | undefined;
   };
 
 export type Props = ButtonProps | AnchorProps;
@@ -68,7 +70,7 @@ const Button = forwardRef<ButtonReferenceType, Props>(
       onClick,
       ...rest
     }: Props,
-    reference,
+    ref,
   ) => {
     const intl = useIntl();
 
@@ -132,7 +134,7 @@ const Button = forwardRef<ButtonReferenceType, Props>(
 
     return (
       <Element
-        ref={reference}
+        ref={ref}
         className={classes}
         onClick={handleClick(onClick)}
         {...props}
@@ -153,4 +155,6 @@ const Button = forwardRef<ButtonReferenceType, Props>(
   },
 );
 
+Button.displayName = 'Button';
+
 export default Button;

package/src/button/{classMap.ts → LegacyButton/classMap.ts}

@@ -1,4 +1,4 @@
-import { ControlType, Priority } from '../common';
+import { ControlType, Priority } from '../../common';
 
 export const typeClassMap = {
   [ControlType.ACCENT]: 'btn-accent',

package/src/button/LegacyButton/index.ts

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

package/src/button/{legacyUtils → LegacyButton/legacyUtils}/legacyUtils.spec.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
-import { ControlType, Priority, Size, Type } from '../../common';
-import { cleanup } from '../../test-utils';
+import { ControlType, Priority, Size, Type } from '../../../common';
+import { cleanup } from '../../../test-utils';
 
 import { establishNewPriority, establishNewType, logDeprecationNotices } from '.';
 

package/src/button/{legacyUtils → LegacyButton/legacyUtils}/legacyUtils.ts

@@ -1,5 +1,5 @@
-import { ControlType, Priority, Size, Type } from '../../common';
-import { logActionRequired, logActionRequiredIf } from '../../utilities';
+import { ControlType, Priority, Size, Type } from '../../../common';
+import { logActionRequired, logActionRequiredIf } from '../../../utilities';
 
 const deprecatedTypeMap: Record<Type, ControlType> = {
   [Type.PRIMARY]: ControlType.ACCENT,

package/src/button/index.ts

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

package/src/button/src/Button.tsx

@@ -0,0 +1,60 @@
+/* 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';
+
+export type ButtonProps = {
+  useNewButton?: boolean;
+} & (LegacyButtonProps | NewButtonProps);
+
+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 || undefined;
+  const mappedAppearance = type === 'negative' ? 'negative' : undefined;
+
+  return {
+    ...newProps,
+    size:
+      size === 'xs' || size === 'sm' ? 'sm' : size === 'md' ? 'md' : size === 'lg' ? 'lg' : size,
+    priority: mappedPriority,
+    appearance: mappedAppearance || ('appearance' in props ? props.appearance : undefined),
+    type: as === 'button' ? props.htmlType : undefined,
+    href: as === 'a' ? props.href || '' : undefined,
+  } as NewButtonProps;
+};
+
+const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
+  ({ useNewButton = false, ...props }, ref) => {
+    if (useNewButton) {
+      const mappedProps = mapProps(props as LegacyButtonProps);
+      return <NewButton {...mappedProps} ref={ref as any} />;
+    }
+
+    return <LegacyButton {...(props as LegacyButtonProps)} ref={ref} />;
+  },
+);
+
+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,33 @@
+import { render, screen } from '../../test-utils';
+import Button, { ButtonProps } from '..';
+
+describe('Button', () => {
+  const legacyProps: ButtonProps = {
+    useNewButton: false,
+    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/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/i18n/zh-CN.json

@@ -27,19 +27,9 @@
   "neptune.SelectInput.noResultsFound": "找不到结果",
   "neptune.SelectOption.action.label": "选择",
   "neptune.SelectOption.selected.action.label": "更改所选选项",
-  "neptune.StatusIcon.iconLabel.error": "错误:",
-  "neptune.StatusIcon.iconLabel.information": "信息:",
-  "neptune.StatusIcon.iconLabel.pending": "待处理:",
-  "neptune.StatusIcon.iconLabel.success": "成功:",
-  "neptune.StatusIcon.iconLabel.warning": "警告：",
   "neptune.Summary.statusDone": "已完成",
   "neptune.Summary.statusNotDone": "未完成",
   "neptune.Summary.statusPending": "待处理",
-  "neptune.Table.actionHeader": "操作",
-  "neptune.Table.emptyData": "找不到结果",
-  "neptune.Table.loaded": "表数据已加载",
-  "neptune.Table.loading": "表数据正在加载",
-  "neptune.Table.refreshPage": "刷新页面",
   "neptune.Upload.csButtonText": "上传另一个文件？",
   "neptune.Upload.csFailureText": "上传失败。请重试",
   "neptune.Upload.csSuccessText": "上传完毕！",

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-hover-background: var(--color-background-neutral-hover);
 }
 .np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-neutral-active);
+  --Button-active-background: 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-hover-background: 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-active-background: 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-hover-background: 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-active-background: 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-hover-background: var(--color-background-screen-hover);
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
+  --Button-active-background: 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-hover-background: var(--color-interactive-neutral-hover);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-interactive-neutral-active);
+  --Button-active-background: 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-hover-background: 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-active-background: 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-hover-background:~"var(@{bg-color}-hover)";
     }
     &:not(.disabled, :disabled):active {
-      background-color:~"var(@{bg-color}-active)";
+      --Button-active-background:~"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>
   );
 };