@transferwise/components 0.0.0-experimental-6528439 → 0.0.0-experimental-1ffdc56

package/src/button/LegacyButton.story.tsx

@@ -0,0 +1,228 @@
+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>
+      </>
+    );
+  },
+};

package/src/button/LegacyButton.tsx

@@ -0,0 +1,177 @@
+import { clsx } from 'clsx';
+import { ElementType, forwardRef, MouseEvent } from 'react';
+import { useIntl } from 'react-intl';
+
+import {
+  Size,
+  ControlType,
+  Priority,
+  ControlTypeAccent,
+  ControlTypeNegative,
+  ControlTypePositive,
+  PriorityPrimary,
+  PrioritySecondary,
+  PriorityTertiary,
+  SizeExtraSmall,
+  SizeSmall,
+  SizeMedium,
+  SizeLarge,
+} from '../common';
+import ProcessIndicator from '../processIndicator';
+
+import messages from '../i18n/commonMessages/Button.messages';
+import { typeClassMap, priorityClassMap } from './classMap';
+import { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';
+import { ButtonReferenceType } from './Button.types';
+
+/** @deprecated */
+type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
+
+/** @deprecated */
+type DeprecatedSizes = SizeExtraSmall;
+
+type CommonProps = {
+  v2?: false;
+
+  /** Makes the button take up the full width of its container */
+  block?: boolean;
+
+  /**
+   * The `target` attribute for HTML anchor.
+   * If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.
+   */
+  target?: string;
+  /**
+   * Toggles the disabled state
+   * @default false
+   */
+
+  disabled?: boolean;
+  /**
+   * Toggles the loading state
+   * @default false
+   */
+  loading?: boolean;
+  type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;
+  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;
+  size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
+  htmlType?: 'submit' | 'reset' | 'button';
+};
+
+type ButtonProps = CommonProps &
+  Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
+    as?: 'button';
+  };
+
+type AnchorProps = CommonProps &
+  Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
+    as?: 'a';
+    href?: string;
+  };
+
+export type LegacyButtonProps = ButtonProps | AnchorProps;
+
+/**
+ * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props
+ */
+const LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(
+  (
+    {
+      as: component = 'button',
+      block = false,
+      children,
+      className,
+      disabled,
+      loading = false,
+      priority = Priority.PRIMARY,
+      size = Size.MEDIUM,
+      type = ControlType.ACCENT,
+      onClick,
+      ...rest
+    }: LegacyButtonProps,
+    ref,
+  ) => {
+    const intl = useIntl();
+
+    logDeprecationNotices({ size, type });
+
+    const newType = establishNewType(type);
+    const newPriority = establishNewPriority(priority, type);
+
+    const classes = clsx(
+      `btn btn-${size}`,
+      `np-btn np-btn-${size}`,
+      {
+        'btn-loading': loading,
+        'btn-block np-btn-block': block,
+        disabled,
+      },
+      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      typeClassMap[newType],
+      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      priorityClassMap[newPriority],
+      className,
+    );
+
+    function processIndicatorSize() {
+      return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';
+    }
+
+    const Element = (component as ElementType) ?? 'button';
+    let props;
+
+    if (Element === 'button') {
+      const { htmlType = 'button', ...restProps } = rest as ButtonProps;
+      props = {
+        ...restProps,
+        disabled,
+        'aria-disabled': loading,
+        type: htmlType,
+      };
+    } else {
+      props = {
+        ...rest,
+        'aria-disabled': loading,
+      } as AnchorProps;
+    }
+
+    /**
+     * Ensures that the button cannot be activated in loading or disabled mode,
+     * when `aria-disabled` might be used over the `disabled` HTML attribute
+     */
+    const handleClick =
+      (handler: LegacyButtonProps['onClick']) =>
+      (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {
+        if (disabled || loading) {
+          event.preventDefault();
+        } else if (typeof handler === 'function') {
+          handler(event);
+        }
+      };
+
+    return (
+      <Element
+        ref={ref as React.Ref<ButtonReferenceType>}
+        className={classes}
+        onClick={handleClick(onClick)}
+        {...props}
+        aria-live={loading ? 'polite' : 'off'}
+        aria-busy={loading}
+        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}
+      >
+        {children}
+        {loading && (
+          <ProcessIndicator
+            size={processIndicatorSize()}
+            className="btn-loader"
+            data-testid="ButtonProgressIndicator"
+          />
+        )}
+      </Element>
+    );
+  },
+);
+
+export default LegacyButton;

package/src/button/index.ts

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

package/src/common/action/Action.tsx

@@ -1,8 +1,9 @@
 import { clsx } from 'clsx';
 import Link from '../../link';
 import { Typography } from '../propsValues/typography';
-import ActionButton from '../../actionButton';
 import { Priority } from '../propsValues/control';
+import Button from '../../button';
+import { ButtonPriority, ButtonSentiment } from '../../button/Button.types';
 
 export type ActionOptions = {
   'aria-label'?: string;
@@ -14,11 +15,19 @@ export type ActionOptions = {
 
 type Props = {
   variant?: 'button' | 'action-button';
+  sentiment?: ButtonSentiment;
   action: ActionOptions;
   className?: string;
+  priority?: ButtonPriority;
 };
 
-export function Action({ action, className, variant = 'button' }: Props) {
+export function Action({
+  action,
+  className,
+  variant = 'button',
+  priority = Priority.SECONDARY,
+  sentiment = 'default',
+}: Props) {
   if ('href' in action) {
     return (
       <Link
@@ -34,23 +43,32 @@ export function Action({ action, className, variant = 'button' }: Props) {
     );
   }
 
-  return variant === 'button' ? (
-    <button
-      type="button"
-      aria-label={action['aria-label']}
-      className={clsx('btn-unstyled np-text-link-large', className)}
-      onClick={action.onClick}
-    >
-      {action.text}
-    </button>
-  ) : (
-    <ActionButton
-      aria-label={action['aria-label']}
-      priority={Priority.SECONDARY}
-      className={clsx(className)}
-      onClick={action.onClick}
-    >
-      {action.text}
-    </ActionButton>
-  );
+  switch (variant) {
+    case 'action-button':
+      return (
+        <Button
+          v2
+          size="sm"
+          sentiment={sentiment}
+          aria-label={action['aria-label']}
+          priority={priority}
+          className={clsx(className)}
+          onClick={action.onClick}
+        >
+          {action.text}
+        </Button>
+      );
+    case 'button':
+    default:
+      return (
+        <button
+          type="button"
+          aria-label={action['aria-label']}
+          className={clsx('btn-unstyled np-text-link-large', className)}
+          onClick={action.onClick}
+        >
+          {action.text}
+        </button>
+      );
+  }
 }

package/src/common/bottomSheet/BottomSheet.spec.tsx

@@ -1,4 +1,3 @@
-import { ThemeProvider } from '@wise/components-theming';
 import { render, mockMatchMedia } from '../../test-utils';
 
 import BottomSheet from './BottomSheet';
@@ -9,11 +8,9 @@ mockMatchMedia();
 describe('BottomSheet', () => {
   it('renders content when open', () => {
     const { baseElement } = render(
-      <ThemeProvider theme="personal" screenMode="light">
-        <BottomSheet open onClose={jest.fn()}>
-          <b>Test Content</b>
-        </BottomSheet>
-      </ThemeProvider>,
+      <BottomSheet open onClose={jest.fn()}>
+        <b>Test Content</b>
+      </BottomSheet>,
     );
     expect(baseElement).toMatchSnapshot();
   });

package/src/common/bottomSheet/__snapshots__/BottomSheet.spec.tsx.snap

@@ -2,11 +2,7 @@
 
 exports[`BottomSheet renders content when open 1`] = `
 <body>
-  <div>
-    <div
-      class="np-theme-personal"
-    />
-  </div>
+  <div />
   <div
     class="np-theme-personal"
   >

package/src/common/propsValues/sentiment.ts

@@ -4,6 +4,7 @@ export enum Sentiment {
   POSITIVE = 'positive',
   WARNING = 'warning',
   PENDING = 'pending',
+  CRITICAL = 'critical',
 
   /**
    * @deprecated

package/src/criticalBanner/CriticalCommsBanner.css

@@ -1,76 +1,11 @@
-div.critical-comms {
-  --critical-comms-background-color: var(--color-background-negative);
-  --critical-comms-title-color: var(--color-content-negative);
-  --critical-comms-subtitle-color: var(--color-content-secondary);
-  --critical-comms-subtitle-color-padding-left: var(--size-16);
-  --critical-comms-vertical-spacing: var(--size-8);
-  background-color: rgba(255,135,135,0.10196);
-  background-color: var(--critical-comms-background-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.np-theme-personal div.critical-comms,
-.np-theme-personal--dark div.critical-comms {
-  --critical-comms-background-color: var(--color-sentiment-negative);
-  --critical-comms-title-color: var(--color-contrast);
-  --critical-comms-subtitle-color: var(--color-contrast);
-  --critical-comms-subtitle-color-padding-left: 0;
-  --critical-comms-vertical-spacing: var(--size-16);
-  padding: 24px;
-  padding: var(--padding-medium);
-}
-.np-theme-personal div.critical-comms .tw-icon-alert-circle-fill,
-.np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill {
-  color: var(--color-contrast);
-}
-.np-theme-personal div.critical-comms .tw-icon-alert-circle-fill svg,
-.np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill svg {
-  width: 48px;
-  height: 48px;
-}
-.np-theme-personal div.critical-comms .cta-btn,
-.np-theme-personal--dark div.critical-comms .cta-btn {
-  background-color: var(--color-contrast);
-}
-.np-theme-personal div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus,
-.np-theme-personal--dark div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus {
-  outline-color: var(--color-contrast);
+.np-theme-personal .critical-comms .alert-critical {
+  color: var(--color-contrast-overlay);
+  background-color: var(--color-sentiment-negative) !important;
 }
-@media (max-width: 767px) {
-  div.critical-comms {
-    display: inline;
-    display: initial;
-  }
+.np-theme-personal .critical-comms .alert-critical .np-text-title-body {
+  color: var(--color-contrast-overlay);
 }
-div.critical-comms .critical-comms--title {
-  color: var(--critical-comms-title-color);
-}
-div.critical-comms .critical-comms--subtitle {
-  color: var(--critical-comms-subtitle-color);
-}
-div.critical-comms .critical-comms--cta {
-  padding-left: 0;
-}
-@media (max-width: 767px) {
-  div.critical-comms .critical-comms--cta {
-    padding-left: var(--critical-comms-subtitle-color-padding-left);
-    padding-top: var(--critical-comms-vertical-spacing);
-    min-width: 100%;
-  }
-}
-div.critical-comms .critical-comms-body {
+.np-theme-personal .critical-comms .action__desktop {
   display: flex;
-  width: 100%;
-}
-@media (max-width: 767px) {
-  div.critical-comms .critical-comms-body {
-    flex-direction: column;
-  }
-}
-@media (max-width: 767px) {
-  div.critical-comms .critical-comms-content {
-    padding-top: var(--critical-comms-vertical-spacing);
-    flex-wrap: wrap;
-  }
+  align-items: center;
 }