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

package/src/button/Button/less/Button.vars.css

@@ -0,0 +1,57 @@
+:root {
+  --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-padding: var(--size-8) var(--size-12);
+  --Button-border-radius: var(--radius-full);
+  --Button-font-size: var(--font-size-16);
+  --Button-line-height: var(--size-24);
+  --Button-font-weight: var(--font-weight-semi-bold);
+  --Button-letter-spacing: -0.011em;
+  --Button-size-small-padding: 5px var(--size-12);
+  --Button-size-medium-padding: var(--size-8) var(--size-12);
+  --Button-size-large-padding: var(--size-12) var(--size-16);
+  --Button-avatar-border-color: var(--color-border-neutral);
+  --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);
+  --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
+  --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);
+  --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
+}
+.np-theme-personal--dark {
+  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
+}
+.np-theme-personal--forest-green {
+  --color-interactive-neutral: rgba(159,232,112,0.2);
+  --color-interactive-neutral-hover: rgba(205,255,173,0.2);
+  --color-interactive-neutral-active: rgba(236,255,224,0.2);
+  --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
+  --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
+  --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
+  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
+  --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
+}
+.np-theme-personal--bright-green {
+  --color-contrast: #FFFFFF;
+  --Button-secondary-color: var(--color-interactive-control);
+  --Button-secondary-negative-color: var(--color-contrast);
+  --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
+}

package/src/button/Button/less/Button.vars.less

@@ -0,0 +1,65 @@
+:root {
+  --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-padding: var(--size-8) var(--size-12);
+  --Button-border-radius: var(--radius-full);
+  --Button-font-size: var(--font-size-16);
+  --Button-line-height: var(--size-24);
+  --Button-font-weight: var(--font-weight-semi-bold);
+  --Button-letter-spacing: -0.011em;
+  --Button-size-small-padding: 5px var(--size-12);
+  --Button-size-medium-padding: var(--size-8) var(--size-12);
+  --Button-size-large-padding: var(--size-12) var(--size-16);
+  --Button-avatar-border-color: var(--color-border-neutral);
+
+  --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);
+  --Button-primary-netative-avatar-border-color: #FFFFFF33;
+
+  --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);
+  --Button-secondary-netative-avatar-border-color: #A8200D1F;
+}
+
+.np-theme-personal--dark {
+  --Button-primary-netative-avatar-border-color: #0E0F0C1F;
+}
+
+.np-theme-personal--forest-green {
+  --color-interactive-neutral: #9FE87033;
+  --color-interactive-neutral-hover: #CDFFAD33;
+  --color-interactive-neutral-active: #ECFFE033;
+  --color-sentiment-negative-secondary: #FFC4C233;
+  --color-sentiment-negative-secondary-hover: #FFDCDB33;
+  --color-sentiment-negative-secondary-active: #FFEBEB33;
+  --Button-primary-netative-avatar-border-color: #0E0F0C1F;
+  --Button-secondary-netative-avatar-border-color: #0E0F0C1F;
+}
+
+.np-theme-personal--bright-green {
+  --color-contrast: #FFFFFF;
+  --Button-secondary-color: var(--color-interactive-control);
+  --Button-secondary-negative-color: var(--color-contrast);
+  --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
+}

package/src/button/Button/src/Button.tsx

@@ -0,0 +1,116 @@
+import React, { forwardRef, useMemo } from 'react';
+import { clsx } from 'clsx';
+import type { ButtonProps } from './Button.types';
+import PrimitiveButton from '../../../primitives/PrimitiveButton';
+import PrimitiveAnchor from '../../../primitives/PrimitiveAnchor';
+import ProcessIndicator from '../../../processIndicator/ProcessIndicator';
+import AvatarView from '../../../avatarView/AvatarView';
+import AvatarLayout from '../../../avatarLayout/AvatarLayout';
+
+const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
+  (
+    {
+      as = 'button',
+      children,
+      className,
+      size = 'md',
+      href,
+      priority = 'primary',
+      appearance = 'default',
+      iconLeft: LeftIcon,
+      iconRight: RightIcon,
+      avatars,
+      type = 'button',
+      loading = false,
+      block = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const sizeClass = useMemo(() => {
+      return size === 'sm' ? 'small' : size === 'md' ? 'medium' : size === 'lg' ? 'large' : '';
+    }, [size]);
+
+    const classNames = clsx(
+      {
+        [`wds-Button`]: as === 'a',
+        [`wds-Button--block`]: block,
+        [`wds-Button--${sizeClass}`]: size,
+        [`wds-Button--${priority}`]: priority,
+        [`wds-Button--${appearance}`]: appearance,
+      },
+      className,
+    );
+
+    const contentClassNames = clsx('wds-Button-content', {
+      [`wds-Button-content--loading`]: loading,
+    });
+
+    const content = (
+      <span className={contentClassNames}>
+        {loading && (
+          <ProcessIndicator
+            size="xs"
+            className="wds-Button-loader"
+            data-testid="button-loader-indicator"
+          />
+        )}
+        <span className="wds-Button-label" aria-hidden={loading}>
+          {size === 'lg' ? (
+            children
+          ) : (
+            <>
+              {size === 'md' && avatars && (
+                <span className="wds-Button-avatars">
+                  {avatars.length === 1 ? (
+                    <AvatarView size={24} {...avatars[0]}>
+                      {avatars[0]?.asset}
+                    </AvatarView>
+                  ) : (
+                    <AvatarLayout orientation="horizontal" avatars={avatars} size={24} />
+                  )}
+                </span>
+              )}
+              {!avatars && LeftIcon && (
+                <LeftIcon className="wds-Button-icon wds-Button-icon--left" />
+              )}
+              {children}
+              {RightIcon && <RightIcon className="wds-Button-icon wds-Button-icon--right" />}
+            </>
+          )}
+        </span>
+      </span>
+    );
+
+    if (as === 'a') {
+      return (
+        <PrimitiveAnchor
+          ref={ref as React.Ref<HTMLAnchorElement>}
+          {...(props as any)}
+          href={href}
+          className={classNames}
+          disabled={props.disabled}
+        >
+          {content}
+        </PrimitiveAnchor>
+      );
+    }
+
+    return (
+      <PrimitiveButton
+        ref={ref as React.Ref<HTMLButtonElement>}
+        {...(props as any)}
+        className={classNames}
+        disabled={props.disabled}
+        loading={loading}
+        type={type}
+      >
+        {content}
+      </PrimitiveButton>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+export default Button;

package/src/button/Button/src/Button.types.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+import type {
+  PrimitiveButtonProps,
+  PrimitiveAnchorProps,
+  PrimitiveButtonElementRef,
+  PrimitiveAnchorElementRef,
+} from '../../../primitives';
+import type { SingleAvatarType } from '../../../avatarLayout';
+
+export type ButtonApperance = 'default' | 'negative';
+export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
+export type ButtonType = 'button' | 'submit' | 'reset' | undefined;
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonRefType = PrimitiveButtonElementRef | PrimitiveAnchorElementRef;
+
+/**
+ * Common properties for the Button component.
+ */
+export interface CommonButtonProps {
+  /** The HTML element to render */
+  as?: 'button' | 'a' | undefined;
+
+  /** Additional class name(s) to apply to the button */
+  className?: string;
+
+  /** Content to be displayed inside the button */
+  children?: ReactNode;
+
+  /** Whether the button is disabled */
+  disabled?: boolean;
+
+  href?: string;
+
+  /** Whether the button is in a loading state */
+  loading?: boolean;
+
+  /** Whether the button should take up the full width of its container */
+  block?: boolean;
+
+  /** Size of the button */
+  size?: ButtonSize;
+
+  /**
+   * Priority of the button
+   * @default 'primary'
+   */
+  priority?: ButtonPriority;
+
+  /**
+   * Appearance of the button
+   * @default 'default'
+   */
+  appearance?: ButtonApperance;
+
+  /** Icon to be displayed on the left side of the button */
+  iconLeft?: React.ElementType;
+
+  /** Icon to be displayed on the right side of the button */
+  iconRight?: React.ElementType;
+
+  /** Media to be displayed on the left side of the button */
+  avatars?: SingleAvatarType[];
+
+  /** Optional property to provide component Ref */
+  ref?: ButtonRefType;
+}
+
+export type ButtonElementProps = PrimitiveButtonProps & CommonButtonProps;
+export type AnchorElementProps = PrimitiveAnchorProps & CommonButtonProps;
+export type ButtonProps = ButtonElementProps | AnchorElementProps;

package/src/button/Button/src/index.ts

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

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

@@ -0,0 +1,314 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import Button from '../../src';
+import { Freeze, ArrowRight } from '@transferwise/icons';
+
+const withContainer = (Story: any) => (
+  <div style={{ display: 'flex', flexDirection: 'initial', justifyContent: 'center' }}>
+    <Story />
+  </div>
+);
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  title: 'Actions/Button',
+  argTypes: {
+    as: {
+      type: {
+        name: 'enum',
+        value: ['button', 'a'],
+      },
+    },
+    size: {
+      type: {
+        name: 'enum',
+        value: ['sm', 'md', 'lg'],
+      },
+    },
+    href: {
+      type: {
+        name: 'string',
+      },
+    },
+    priority: {
+      type: {
+        name: 'enum',
+        value: ['primary', 'secondary', 'tertiary', 'minimal'],
+      },
+    },
+    appearance: {
+      type: {
+        name: 'enum',
+        value: ['default', 'negative'],
+      },
+    },
+    iconLeft: {
+      control: 'object',
+    },
+    iconRight: {
+      control: 'object',
+    },
+    avatars: {
+      control: 'object',
+    },
+    htmlType: {
+      table: {
+        disable: true,
+      },
+    },
+    'data-testid': {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    children: 'Button text',
+    as: 'button',
+    href: undefined,
+    disabled: false,
+    loading: false,
+    size: 'md',
+    iconLeft: undefined,
+    iconRight: undefined,
+    priority: 'primary',
+    appearance: 'default',
+    avatars: undefined,
+    useNewButton: true,
+    onClick: fn(),
+    onBlur: fn(),
+    onFocus: fn(),
+    onKeyDown: fn(),
+    onMouseEnter: fn(),
+    onMouseLeave: fn(),
+  },
+  tags: ['autodocs'],
+  decorators: [withContainer],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'A basic example of the Button component.',
+      },
+    },
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    priority: 'secondary',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button with secondary priority.',
+      },
+    },
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    priority: 'tertiary',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button with tertiary priority.',
+      },
+    },
+  },
+};
+
+export const Minimal: Story = {
+  args: {
+    priority: 'minimal',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button with minimal priority.',
+      },
+    },
+  },
+};
+
+export const Negative: Story = {
+  args: {
+    appearance: 'negative',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button with negative appearance.',
+      },
+    },
+  },
+};
+
+export const NegativeSecondary: Story = {
+  args: {
+    appearance: 'negative',
+    priority: 'secondary',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button with negative appearance and secondary priority.',
+      },
+    },
+  },
+};
+
+export const AsAnchor: Story = {
+  args: {
+    as: 'a',
+    href: 'https://wise.com',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button rendered as an anchor element.',
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A disabled Button.',
+      },
+    },
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button in a loading state.',
+      },
+    },
+  },
+};
+
+export const SizeSmall: Story = {
+  args: {
+    size: 'sm',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A small Button.',
+      },
+    },
+  },
+};
+
+export const SizeLarge: Story = {
+  args: {
+    size: 'lg',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A large Button.',
+      },
+    },
+  },
+};
+
+export const DisplayBlock: Story = {
+  args: {
+    block: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button that takes up the full width of its container.',
+      },
+    },
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    iconRight: ArrowRight,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A Button with an icon on the right. Can also use `iconLeft` to place the icon on the left or have both at the same time.',
+      },
+    },
+  },
+};
+
+export const WithAvatars: Story = {
+  args: {
+    avatars: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A Button with avatars. Will supersed any `iconLeft` property and will always render avatars.',
+      },
+    },
+  },
+};
+
+export const WithProfileName: Story = {
+  args: {
+    avatars: [{ profileName: 'John Doe' }],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button with a Profile name.',
+      },
+    },
+  },
+};
+
+export const WithProfileImage: Story = {
+  args: {
+    avatars: [{ imgSrc: '../avatar-rectangle-fox.webp' }],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button with a Profile image.',
+      },
+    },
+  },
+};
+
+export const WithAvatarAndIcon: Story = {
+  args: {
+    avatars: [{ asset: <Freeze /> }],
+    iconRight: ArrowRight,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A Button with an avatar and an icon.',
+      },
+    },
+  },
+};