@transferwise/components 0.0.0-experimental-2524bc4 → 0.0.0-experimental-0ee6ecc

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';
 
@@ -38,15 +38,16 @@ type CommonProps = {
   size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
 };
 
-type ButtonProps = CommonProps &
+export type ButtonProps = CommonProps &
   Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
-    as?: 'button';
+    as?: 'button' | undefined;
     htmlType?: 'submit' | 'reset' | 'button';
   };
 
-type AnchorProps = CommonProps &
+export type AnchorProps = CommonProps &
   Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
-    as?: 'a';
+    as?: 'a' | undefined;
+    href?: string;
   };
 
 export type Props = ButtonProps | AnchorProps;
@@ -68,7 +69,7 @@ const Button = forwardRef<ButtonReferenceType, Props>(
       onClick,
       ...rest
     }: Props,
-    reference,
+    ref,
   ) => {
     const intl = useIntl();
 
@@ -132,7 +133,7 @@ const Button = forwardRef<ButtonReferenceType, Props>(
 
     return (
       <Element
-        ref={reference}
+        ref={ref}
         className={classes}
         onClick={handleClick(onClick)}
         {...props}
@@ -153,4 +154,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,32 @@
+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/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/es.json

@@ -54,7 +54,6 @@
   "neptune.UploadButton.allFileTypes": "Todos los tipos de archivos",
   "neptune.UploadButton.dropFiles": "Arrastra un archivo para subirlo",
   "neptune.UploadButton.instructions": "{fileTypes}, menor que {size}MB",
-  "neptune.UploadButton.maximumFiles": "Máximo {maxFiles} archivos.",
   "neptune.UploadButton.uploadFile": "Subir archivo",
   "neptune.UploadButton.uploadFiles": "Subir archivos",
   "neptune.UploadInput.deleteModalBody": "La eliminación de este archivo lo borrará de nuestro sistema.",

package/src/i18n/fr.json

@@ -27,11 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
   "neptune.SelectOption.action.label": "Sélectionner",
   "neptune.SelectOption.selected.action.label": "Modifier l'option choisie",
-  "neptune.StatusIcon.iconLabel.error": "Erreur :",
-  "neptune.StatusIcon.iconLabel.information": "Informations :",
+  "neptune.StatusIcon.iconLabel.error": "Erreur:",
+  "neptune.StatusIcon.iconLabel.information": "Informations:",
   "neptune.StatusIcon.iconLabel.pending": "En attente :",
-  "neptune.StatusIcon.iconLabel.success": "Terminé :",
-  "neptune.StatusIcon.iconLabel.warning": "Avertissement :",
+  "neptune.StatusIcon.iconLabel.success": "Terminé:",
+  "neptune.StatusIcon.iconLabel.warning": "Attention:",
   "neptune.Summary.statusDone": "Validé",
   "neptune.Summary.statusNotDone": "À compléter",
   "neptune.Summary.statusPending": "En attente",
@@ -47,14 +47,13 @@
   "neptune.Upload.csWrongTypeMessage": "Format non pris en charge. Veuillez réessayer avec un fichier différent",
   "neptune.Upload.psButtonText": "Annuler",
   "neptune.Upload.psProcessingText": "Téléchargement...",
-  "neptune.Upload.retry": "Réessayer",
+  "neptune.Upload.retry": "Réessayez",
   "neptune.Upload.usButtonText": "Ou sélectionnez un fichier",
   "neptune.Upload.usDropMessage": "Déposer un fichier pour démarrer le téléchargement",
   "neptune.Upload.usPlaceholder": "Glissez-déposez un fichier de moins de {maxSize} Mo",
   "neptune.UploadButton.allFileTypes": "Tous types de fichiers",
   "neptune.UploadButton.dropFiles": "Déposer un fichier pour démarrer le téléchargement",
   "neptune.UploadButton.instructions": "{fileTypes}, inférieur à {size} Mo",
-  "neptune.UploadButton.maximumFiles": "Max. {maxFiles} fichiers",
   "neptune.UploadButton.uploadFile": "Envoyer le fichier",
   "neptune.UploadButton.uploadFiles": "Transférer des documents",
   "neptune.UploadInput.deleteModalBody": "La suppression de ce fichier sera définitive sur notre système.",

package/src/i18n/hu.json

@@ -54,7 +54,6 @@
   "neptune.UploadButton.allFileTypes": "Összes fájltípus",
   "neptune.UploadButton.dropFiles": "Húzd a fájlokat ide a feltöltéshez",
   "neptune.UploadButton.instructions": "{fileTypes}, legfeljebb {size}MB",
-  "neptune.UploadButton.maximumFiles": "Maximum {maxFiles} fájl.",
   "neptune.UploadButton.uploadFile": "Fájl feltöltése",
   "neptune.UploadButton.uploadFiles": "Fájlok feltöltése",
   "neptune.UploadInput.deleteModalBody": "Ha törlöd ezt a fájlt, azzal a rendszerünkből is eltávolítod.",

package/src/i18n/id.json

@@ -54,7 +54,6 @@
   "neptune.UploadButton.allFileTypes": "Semua jenis file",
   "neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
   "neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",
-  "neptune.UploadButton.maximumFiles": "Maksimal {maxFiles} file.",
   "neptune.UploadButton.uploadFile": "Unggah file",
   "neptune.UploadButton.uploadFiles": "Unggah file",
   "neptune.UploadInput.deleteModalBody": "Menghapus file ini akan menghilangkannya dari sistem kami.",

package/src/i18n/ro.json

@@ -54,7 +54,6 @@
   "neptune.UploadButton.allFileTypes": "Toate tipurile de fișiere",
   "neptune.UploadButton.dropFiles": "Trage fișierul pentru a începe încărcarea",
   "neptune.UploadButton.instructions": "{fileTypes}, de maximum {size}MB",
-  "neptune.UploadButton.maximumFiles": "Maximum {maxFiles} fișiere.",
   "neptune.UploadButton.uploadFile": "Încarcă fișier",
   "neptune.UploadButton.uploadFiles": "Încarcă fișiere",
   "neptune.UploadInput.deleteModalBody": "Eliminarea acestui fișier îl va șterge din sistemul nostru.",

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)";
     }
   }
 }