@transferwise/components 0.0.0-experimental-a9e2e05 → 0.0.0-experimental-e92f7ac

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

@@ -1,116 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

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

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

@@ -1,314 +0,0 @@
-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.',
-      },
-    },
-  },
-};