@transferwise/components 0.0.0-experimental-c575215 → 0.0.0-experimental-20970b7

package/src/button/Button.story.tsx

@@ -1,7 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import Button from './Button.resolver';
-import { Freeze, ArrowRight } from '@transferwise/icons';
+import { Freeze, ArrowRight, ArrowLeft } from '@transferwise/icons';
+import { ButtonApperance, ButtonPriority, ButtonType } from './Button.types';
 
 const withContainer = (Story: any) => (
   <div style={{ display: 'flex', flexDirection: 'initial', justifyContent: 'center' }}>
@@ -22,7 +23,7 @@ const meta: Meta<typeof Button> = {
     size: {
       type: {
         name: 'enum',
-        value: ['lg', 'md', 'sm'],
+        value: ['sm', 'md', 'lg'],
       },
     },
     href: {
@@ -36,7 +37,7 @@ const meta: Meta<typeof Button> = {
         value: ['primary', 'secondary', 'tertiary', 'minimal'],
       },
     },
-    sentiment: {
+    appearance: {
       type: {
         name: 'enum',
         value: ['default', 'negative'],
@@ -63,24 +64,24 @@ const meta: Meta<typeof Button> = {
     },
   },
   args: {
-    v2: true,
+    children: 'Button text',
     as: 'button',
-    size: 'lg',
-    priority: 'primary',
-    sentiment: 'default',
+    href: undefined,
     disabled: false,
     loading: false,
-    href: undefined,
+    size: 'md',
     iconStart: undefined,
     iconEnd: undefined,
+    priority: 'primary',
+    appearance: 'default',
     avatars: undefined,
+    useNewButton: true,
     onClick: fn(),
     onBlur: fn(),
     onFocus: fn(),
     onKeyDown: fn(),
     onMouseEnter: fn(),
     onMouseLeave: fn(),
-    children: 'Button text',
   },
   tags: ['autodocs'],
   decorators: [withContainer],
@@ -141,12 +142,12 @@ export const Minimal: Story = {
 
 export const Negative: Story = {
   args: {
-    sentiment: 'negative',
+    appearance: 'negative',
   },
   parameters: {
     docs: {
       description: {
-        story: 'A Button with negative sentiment.',
+        story: 'A Button with negative appearance.',
       },
     },
   },
@@ -154,13 +155,13 @@ export const Negative: Story = {
 
 export const NegativeSecondary: Story = {
   args: {
-    sentiment: 'negative',
+    appearance: 'negative',
     priority: 'secondary',
   },
   parameters: {
     docs: {
       description: {
-        story: 'A Button with negative sentiment and secondary priority.',
+        story: 'A Button with negative appearance and secondary priority.',
       },
     },
   },
@@ -312,3 +313,79 @@ export const WithAvatarAndIcon: Story = {
     },
   },
 };
+
+const buttonTypes = ['button', 'submit', 'reset'] as const;
+const buttonPriorities = ['primary', 'secondary', 'tertiary', 'minimal'] as const;
+const buttonAppearances = ['default', 'negative'] as const;
+const buttonSizes = ['sm', 'md', 'lg'] as const;
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px' }}>
+      {buttonTypes.map((type) =>
+        buttonPriorities.map((priority) =>
+          buttonAppearances.map((appearance) =>
+            buttonSizes.map((size) => (
+              <div
+                key={`${type}-${priority}-${appearance}-${size}`}
+                style={{ marginBottom: '16px' }}
+              >
+                <Button
+                  useNewButton
+                  type={type as ButtonType}
+                  priority={priority as ButtonPriority}
+                  appearance={appearance as ButtonApperance}
+                  size={size}
+                  iconStart={ArrowLeft}
+                  iconEnd={ArrowRight}
+                  avatars={[{ asset: <Freeze /> }]}
+                  block
+                  href="https://wise.com"
+                  target="_blank"
+                >
+                  {`${type.charAt(0).toUpperCase() + type.slice(1)} ${priority} ${appearance} ${size}`}
+                </Button>
+                <Button
+                  useNewButton
+                  type={type}
+                  priority={priority}
+                  appearance={appearance}
+                  size={size}
+                  iconStart={ArrowLeft}
+                  iconEnd={ArrowRight}
+                  avatars={[{ asset: <Freeze /> }]}
+                  block
+                  disabled
+                >
+                  {`${type.charAt(0).toUpperCase() + type.slice(1)} ${priority} ${appearance} ${size} Disabled`}
+                </Button>
+                <Button
+                  useNewButton
+                  type={type}
+                  priority={priority}
+                  appearance={appearance}
+                  size={size}
+                  iconStart={ArrowLeft}
+                  iconEnd={ArrowRight}
+                  avatars={[{ asset: <Freeze /> }]}
+                  block
+                  loading
+                >
+                  {`${type.charAt(0).toUpperCase() + type.slice(1)} ${priority} ${appearance} ${size} Loading`}
+                </Button>
+              </div>
+            )),
+          ),
+        ),
+      )}
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A comprehensive showcase of all possible Button variants, including combinations of type, priority, appearance, size, icons, avatars, block, loading, disabled, and href.',
+      },
+    },
+  },
+};

package/src/button/Button.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { ButtonProps as NewButtonProps } from './Button.types';
 import { PrimitiveAnchor, PrimitiveButton } from '../primitives';
 import AvatarLayout from '../avatarLayout';
@@ -12,11 +12,11 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>
       as = 'button',
       children,
       className,
-      size = 'lg',
+      size = 'md',
       href,
       disabled = false,
       priority = 'primary',
-      sentiment = 'default',
+      appearance = 'default',
       iconStart: IconStart,
       iconEnd: IconEnd,
       avatars,
@@ -27,7 +27,9 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>
     },
     ref,
   ) => {
-    const sizeClass = { sm: 'small', md: 'medium', lg: 'large' }[size];
+    const sizeClass = useMemo(() => {
+      return size === 'sm' ? 'small' : size === 'md' ? 'medium' : size === 'lg' ? 'large' : '';
+    }, [size]);
 
     const classNames = clsx(
       'wds-Button',
@@ -38,7 +40,7 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>
         [`wds-Button--loading`]: loading,
         [`wds-Button--${sizeClass}`]: size,
         [`wds-Button--${priority}`]: priority,
-        [`wds-Button--${sentiment}`]: sentiment,
+        [`wds-Button--${appearance}`]: appearance,
       },
       className,
     );

package/src/button/Button.types.ts

@@ -7,7 +7,7 @@ import type {
 } from '../primitives';
 import type { SingleAvatarType } from '../avatarLayout';
 
-export type ButtonSentiment = 'default' | 'negative';
+export type ButtonApperance = 'default' | 'negative';
 export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
 export type ButtonType = 'button' | 'submit' | 'reset';
 export type ButtonSize = 'sm' | 'md' | 'lg';
@@ -17,18 +17,15 @@ export type ButtonRefType = PrimitiveButtonElementRef | PrimitiveAnchorElementRe
  * Common properties for the Button component.
  */
 export interface CommonButtonProps {
-  /**
-   * If set, toggles the new Button API
-   * @default false
-   * */
-  v2?: boolean;
-
   /** The HTML element to render */
   as?: 'button' | 'a' | null;
 
   /** 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;
 
@@ -40,23 +37,20 @@ export interface CommonButtonProps {
   /** Whether the button should take up the full width of its container */
   block?: boolean;
 
-  /**
-   * Size of the button
-   * @default lg
-   * */
+  /** Size of the button */
   size?: ButtonSize;
 
   /**
    * Priority of the button
-   * @default "primary"
+   * @default 'primary'
    */
   priority?: ButtonPriority;
 
   /**
-   * Sentiment of the button
-   * @default default
+   * Appearance of the button
+   * @default 'default'
    */
-  sentiment?: ButtonSentiment;
+  appearance?: ButtonApperance;
 
   /** Icon to be displayed on the left side of the button */
   iconStart?: React.ElementType;
@@ -69,9 +63,6 @@ export interface CommonButtonProps {
 
   /** Optional property to provide component Ref */
   ref?: ButtonRefType;
-
-  /** Content to be displayed inside the button */
-  children?: ReactNode;
 }
 
 export type ButtonElementProps = PrimitiveButtonProps & CommonButtonProps;

package/src/button/Button.vars.css

@@ -1,4 +1,4 @@
-:root {
+.wds-Button {
   --Button-background: var(--color-interactive-accent);
   --Button-background-hover: var(--color-interactive-accent-hover);
   --Button-background-active: var(--color-interactive-accent-active);
@@ -13,8 +13,6 @@
   --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-transition-duration: 150ms;
-  --Button-transition-easing: ease-in-out;
   --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);
@@ -31,29 +29,23 @@
   --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-primary-negative-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);
+  --Button-secondary-negative-avatar-border-color: rgba(168,32,13,0.12157);
 }
 .np-theme-personal--dark .wds-Button {
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
+  --Button-primary-negative-avatar-border-color: rgba(14,15,12,0.12157);
 }
 .np-theme-personal--forest-green .wds-Button {
-  --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);
+  --Button-primary-negative-avatar-border-color: rgba(14,15,12,0.12157);
+  --Button-secondary-negative-avatar-border-color: rgba(14,15,12,0.12157);
 }
 .np-theme-personal--bright-green .wds-Button {
   --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);
+  --Button-secondary-negative-avatar-border-color: var(--Button-primary-negative-avatar-border-color);
 }

package/src/button/Button.vars.less

@@ -1,4 +1,4 @@
-:root {
+.wds-Button {
   --Button-background: var(--color-interactive-accent);
   --Button-background-hover: var(--color-interactive-accent-hover);
   --Button-background-active: var(--color-interactive-accent-active);
@@ -13,8 +13,6 @@
   --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-transition-duration: 150ms;
-  --Button-transition-easing: ease-in-out;
 
   --Button-secondary-background: var(--color-interactive-neutral);
   --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
@@ -35,31 +33,25 @@
   --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-primary-negative-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;
+  --Button-secondary-negative-avatar-border-color: #A8200D1F;
 }
 
 .np-theme-personal--dark {
   .wds-Button {
-    --Button-primary-netative-avatar-border-color: #0E0F0C1F;
+    --Button-primary-negative-avatar-border-color: #0E0F0C1F;
   }
 }
 
 .np-theme-personal--forest-green {
   .wds-Button {
-    --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;
+    --Button-primary-negative-avatar-border-color: #0E0F0C1F;
+    --Button-secondary-negative-avatar-border-color: #0E0F0C1F;
   }
 }
 
@@ -68,6 +60,6 @@
     --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);
+    --Button-secondary-negative-avatar-border-color: var(--Button-primary-negative-avatar-border-color);
   }
-}
+}

package/src/button/LegacyButton.story.tsx

@@ -55,7 +55,7 @@ const meta: Meta<typeof Button> = {
         value: ['primary', 'secondary', 'tertiary'],
       },
     },
-    sentiment: {
+    appearance: {
       table: {
         disable: true,
       },

package/src/button/LegacyButton.tsx

@@ -56,7 +56,7 @@ export type LegacyButtonProps = ButtonProps | AnchorProps;
 export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
 
 /**
- * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props
+ * @deprecated make sure you use new Button component via `<Button useNewButton .. />` and new props
  */
 const LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(
   (

package/src/main.css

@@ -716,7 +716,7 @@ div.critical-comms .critical-comms-body {
 .np-btn.disabled[class] {
   pointer-events: auto;
 }
-:root {
+.wds-Button {
   --Button-background: var(--color-interactive-accent);
   --Button-background-hover: var(--color-interactive-accent-hover);
   --Button-background-active: var(--color-interactive-accent-active);
@@ -731,8 +731,6 @@ div.critical-comms .critical-comms-body {
   --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-transition-duration: 150ms;
-  --Button-transition-easing: ease-in-out;
   --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);
@@ -749,31 +747,25 @@ div.critical-comms .critical-comms-body {
   --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-primary-negative-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);
+  --Button-secondary-negative-avatar-border-color: rgba(168,32,13,0.12157);
 }
 .np-theme-personal--dark .wds-Button {
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
+  --Button-primary-negative-avatar-border-color: rgba(14,15,12,0.12157);
 }
 .np-theme-personal--forest-green .wds-Button {
-  --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);
+  --Button-primary-negative-avatar-border-color: rgba(14,15,12,0.12157);
+  --Button-secondary-negative-avatar-border-color: rgba(14,15,12,0.12157);
 }
 .np-theme-personal--bright-green .wds-Button {
   --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);
+  --Button-secondary-negative-avatar-border-color: var(--Button-primary-negative-avatar-border-color);
 }
 /* Button Styles */
 .wds-Button {
@@ -783,13 +775,9 @@ div.critical-comms .critical-comms-body {
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  font-weight: 600;
   font-weight: var(--Button-font-weight);
-  font-size: 1rem;
   font-size: var(--Button-font-size);
-  letter-spacing: -0.011em;
   letter-spacing: var(--Button-letter-spacing);
-  line-height: 24px;
   line-height: var(--Button-line-height);
   text-align: center;
   -webkit-text-decoration: none;
@@ -799,30 +787,23 @@ div.critical-comms .critical-comms-body {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background-color: #00a2dd;
   background-color: var(--Button-background);
   border: none;
-  border-radius: 9999px;
   border-radius: var(--Button-border-radius);
   color: var(--Button-color);
   cursor: pointer;
-  padding: 8px 12px;
   padding: var(--Button-padding);
-  transition: color, background-color 150ms ease-in-out;
-  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
 }
 .wds-Button:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 .wds-Button:hover {
-  background-color: #008fc9;
   background-color: var(--Button-background-hover);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 .wds-Button:active {
-  background-color: #0081ba;
   background-color: var(--Button-background-active);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -837,7 +818,6 @@ div.critical-comms .critical-comms-body {
 .wds-Button:disabled:hover,
 .wds-Button.wds-Button--disabled:active,
 .wds-Button:disabled:active {
-  background-color: #00a2dd;
   background-color: var(--Button-background);
 }
 .wds-Button--secondary {