@transferwise/components 46.116.1 → 46.117.1

package/src/button/Button.vars.less

@@ -1,10 +1,22 @@
 .wds-Button {
-  --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-color-hover: var(--color-interactive-control-hover);
-  --Button-color-active: var(--color-interactive-control-active);
+  --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
+  --Button-background-hover: var(
+    --color-sentiment-interactive-primary-hover,
+    var(--color-interactive-accent-hover)
+  );
+  --Button-background-active: var(
+    --color-sentiment-interactive-primary-active,
+    var(--color-interactive-accent-active)
+  );
+  --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
+  --Button-color-hover: var(
+    --color-sentiment-interactive-control-hover,
+    var(--color-interactive-control-hover)
+  );
+  --Button-color-active: var(
+    --color-sentiment-interactive-control-active,
+    var(--color-interactive-control-active)
+  );
   --Button-border-radius: var(--radius-full);
   --Button-label-gap: var(--size-4);
 
@@ -16,24 +28,54 @@
   --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);
-  --Button-secondary-color: var(--color-interactive-primary);
-  --Button-secondary-color-hover: var(--color-interactive-primary-hover);
-  --Button-secondary-color-active: var(--color-interactive-primary-active);
+  --Button-secondary-background: var(
+    --color-sentiment-interactive-secondary-neutral,
+    var(--color-interactive-neutral)
+  );
+  --Button-secondary-background-hover: var(
+    --color-sentiment-interactive-secondary-neutral-hover,
+    var(--color-interactive-neutral-hover)
+  );
+  --Button-secondary-background-active: var(
+    --color-sentiment-interactive-secondary-neutral-active,
+    var(--color-interactive-neutral-active)
+  );
+  --Button-secondary-color: var(
+    --color-sentiment-content-primary,
+    var(--color-interactive-primary)
+  );
+  --Button-secondary-color-hover: var(
+    --color-sentiment-content-primary-hover,
+    var(--color-interactive-primary-hover)
+  );
+  --Button-secondary-color-active: var(
+    --color-sentiment-content-primary-active,
+    var(--color-interactive-primary-active)
+  );
 
-  --Button-secondary-neutral-background: var(--color-background-neutral);
-  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
-  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
-  --Button-secondary-neutral-color: var(--color-content-primary);
+  --Button-secondary-neutral-background: var(
+    --color-sentiment-interactive-secondary-neutral,
+    var(--color-background-neutral)
+  );
+  --Button-secondary-neutral-background-hover: var(
+    --color-sentiment-interactive-secondary-neutral-hover,
+    var(--color-background-neutral-hover)
+  );
+  --Button-secondary-neutral-background-active: var(
+    --color-sentiment-interactive-secondary-neutral-active,
+    var(--color-background-neutral-active)
+  );
+  --Button-secondary-neutral-color: var(
+    --color-sentiment-content-primary,
+    var(--color-content-primary)
+  );
 
   --Button-tertiary-background: transparent;
-  --Button-tertiary-background-hover: var(--color-background-screen-hover);
-  --Button-tertiary-background-active: var(--color-background-screen-active);
-  --Button-tertiary-color: var(--color-interactive-primary);
-  --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
-  --Button-tertiary-color-active: var(--color-interactive-primary-active);
+  --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
+  --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
+  --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
+  --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
+  --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
 
   --Button-primary-negative-background: var(--color-sentiment-negative-primary);
   --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
@@ -52,5 +94,3 @@
     --Button-secondary-negative-color: var(--color-white);
   }
 }
-
-

package/src/button/{Button.accessibility.docs.mdx → _stories/Button.accessibility.docs.mdx}

@@ -1,6 +1,6 @@
 import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
-import { NavigationOption } from '..';
 import { Bulb } from '@transferwise/icons';
+import { NavigationOption } from '../../navigationOption/NavigationOption';
 import * as stories from './Button.story';
 
 <Meta title="Actions/Button/Accessibility" />

package/src/button/_stories/Button.brightGreen.tests.story.tsx

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/react-webpack5';
+import Button from '../Button.resolver';
+import { generateSurfaceVariant } from './helpers';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  title: 'Actions/Button/Tests/theme: bright green',
+  tags: ['!autodocs'],
+};
+export default meta;
+
+export const Success = generateSurfaceVariant({
+  sentiment: 'success',
+  theme: 'bright-green',
+});
+Success.storyName = 'Sentiment awareness: success';
+
+export const Warning = generateSurfaceVariant({ sentiment: 'warning', theme: 'bright-green' });
+Warning.storyName = 'Sentiment awareness: warning';
+
+export const Negative = generateSurfaceVariant({ sentiment: 'negative', theme: 'bright-green' });
+Negative.storyName = 'Sentiment awareness: negative';
+
+export const Neutral = generateSurfaceVariant({ sentiment: 'neutral', theme: 'bright-green' });
+Neutral.storyName = 'Sentiment awareness: neutral';
+
+export const Proposition = generateSurfaceVariant({
+  sentiment: 'proposition',
+  theme: 'bright-green',
+});
+Proposition.storyName = 'Sentiment awareness: proposition';

package/src/button/_stories/Button.dark.tests.story.tsx

@@ -0,0 +1,25 @@
+import { Meta } from '@storybook/react-webpack5';
+import Button from '../Button.resolver';
+import { generateSurfaceVariant } from './helpers';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  title: 'Actions/Button/Tests/theme: dark mode',
+  tags: ['!autodocs'],
+};
+export default meta;
+
+export const Success = generateSurfaceVariant({ theme: 'dark', sentiment: 'success' });
+Success.storyName = 'Sentiment awareness: success';
+
+export const Warning = generateSurfaceVariant({ theme: 'dark', sentiment: 'warning' });
+Warning.storyName = 'Sentiment awareness: warning';
+
+export const Negative = generateSurfaceVariant({ theme: 'dark', sentiment: 'negative' });
+Negative.storyName = 'Sentiment awareness: negative';
+
+export const Neutral = generateSurfaceVariant({ theme: 'dark', sentiment: 'neutral' });
+Neutral.storyName = 'Sentiment awareness: neutral';
+
+export const Proposition = generateSurfaceVariant({ theme: 'dark', sentiment: 'proposition' });
+Proposition.storyName = 'Sentiment awareness: proposition';

package/src/button/_stories/Button.default.tests.story.tsx

@@ -0,0 +1,25 @@
+import { Meta } from '@storybook/react-webpack5';
+import Button from '../Button.resolver';
+import { generateSurfaceVariant } from './helpers';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  title: 'Actions/Button/Tests/theme: default',
+  tags: ['!autodocs'],
+};
+export default meta;
+
+export const Success = generateSurfaceVariant({ sentiment: 'success' });
+Success.storyName = 'Sentiment awareness: success';
+
+export const Warning = generateSurfaceVariant({ sentiment: 'warning' });
+Warning.storyName = 'Sentiment awareness: warning';
+
+export const Negative = generateSurfaceVariant({ sentiment: 'negative' });
+Negative.storyName = 'Sentiment awareness: negative';
+
+export const Neutral = generateSurfaceVariant({ sentiment: 'neutral' });
+Neutral.storyName = 'Sentiment awareness: neutral';
+
+export const Proposition = generateSurfaceVariant({ sentiment: 'proposition' });
+Proposition.storyName = 'Sentiment awareness: proposition';

package/src/button/_stories/Button.forestGreen.tests.story.tsx

@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/react-webpack5';
+import Button from '../Button.resolver';
+import { generateSurfaceVariant } from './helpers';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  title: 'Actions/Button/Tests/theme: forest green',
+  tags: ['!autodocs'],
+};
+export default meta;
+
+export const Success = generateSurfaceVariant({ sentiment: 'success', theme: 'forest-green' });
+Success.storyName = 'Sentiment awareness: success';
+
+export const Warning = generateSurfaceVariant({ sentiment: 'warning', theme: 'forest-green' });
+Warning.storyName = 'Sentiment awareness: warning';
+
+export const Negative = generateSurfaceVariant({ sentiment: 'negative', theme: 'forest-green' });
+Negative.storyName = 'Sentiment awareness: negative';
+
+export const Neutral = generateSurfaceVariant({ sentiment: 'neutral', theme: 'forest-green' });
+Neutral.storyName = 'Sentiment awareness: neutral';
+
+export const Proposition = generateSurfaceVariant({
+  sentiment: 'proposition',
+  theme: 'forest-green',
+});
+Proposition.storyName = 'Sentiment awareness: proposition';

package/src/button/{Button.story.tsx → _stories/Button.story.tsx}

@@ -2,9 +2,10 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { Freeze, ArrowRight, ChevronRight } from '@transferwise/icons';
 import { Flag } from '@wise/art';
-import Button from './Button.resolver';
-import type { ButtonProps, ButtonPriority } from './Button.types';
-import { lorem10, lorem20, storyConfig } from '../test-utils';
+import { lorem10, lorem20 } from '../../test-utils';
+import SentimentSurface from '../../sentimentSurface';
+import type { ButtonProps } from '../Button.types';
+import Button from '../Button.resolver';
 
 const withContainer = (Story: any) => (
   <div style={{ display: 'flex', justifyContent: 'center' }}>
@@ -695,116 +696,6 @@ export const WithAvatars: StoryObj<PreviewStoryArgs> = {
   decorators: [withComponentGrid()],
 };
 
-const buttonPriorities = ['primary', 'secondary', 'secondary-neutral', 'tertiary'] as const;
-const buttonSizes = ['sm', 'md', 'lg'] as const;
-
-export const AllVariants = storyConfig(
-  {
-    tags: ['!autodocs'],
-    parameters: {
-      padding: '0',
-    },
-    render: () => (
-      <div
-        className="button-variants"
-        style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', maxWidth: '1200px' }}
-      >
-        {buttonPriorities.map((priority) =>
-          buttonSizes.map((size) => (
-            <div
-              key={`${priority}-default-${size}`}
-              style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
-            >
-              <Button
-                v2
-                priority={priority as ButtonPriority}
-                size={size}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
-                block
-              >
-                {`${priority} default ${size}`}
-              </Button>
-              <Button
-                className="m-t-1 m-b-1"
-                v2
-                priority={priority as ButtonPriority}
-                size={size}
-                addonStart={{
-                  type: 'avatar',
-                  value: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
-                }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
-                block
-                disabled
-              >
-                {`${priority} default ${size} Disabled`}
-              </Button>
-              <Button
-                v2
-                priority={priority as ButtonPriority}
-                size={size}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
-                block
-                loading
-              >
-                {`${priority} default ${size} Loading`}
-              </Button>
-            </div>
-          )),
-        )}
-        {['primary', 'secondary'].map((priority) =>
-          buttonSizes.map((size) => (
-            <div
-              key={`${priority}-negative-${size}`}
-              style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
-            >
-              <Button
-                v2
-                sentiment="negative"
-                priority={priority as ButtonPriority}
-                size={size}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                block
-              >
-                {`${priority} negative ${size}`}
-              </Button>
-              <Button
-                className="m-t-1 m-b-1"
-                v2
-                sentiment="negative"
-                priority={priority as ButtonPriority}
-                size={size}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                block
-                disabled
-              >
-                {`${priority} negative ${size} Disabled`}
-              </Button>
-              <Button
-                v2
-                sentiment="negative"
-                priority={priority as ButtonPriority}
-                size={size}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                block
-                loading
-              >
-                {`${priority} negative ${size} Loading`}
-              </Button>
-            </div>
-          )),
-        )}
-      </div>
-    ),
-  },
-  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
-);
-
 /**
  * **NB:** The button doesn't know how long its label is, how many words it consists of and
  * how zoomed in it is. That is likely to lead to scenarios in which the text will overflow
@@ -908,3 +799,77 @@ export const AccessibilityAddons: Story = {
   },
   tags: ['!autodocs', '!dev'],
 };
+
+/**
+ * `Button` is sentiment-aware and will automatically adjust its colours if wrapped inside
+ * the [SentimentSurface](?path=/docs/foundations-sentimentsurface--docs) component
+ */
+export const SentimentAwareness: Story = {
+  render: (args) => {
+    return (
+      <>
+        {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map(
+          (sentiment) => (
+            <SentimentSurface
+              key={sentiment}
+              sentiment={sentiment}
+              className="p-a-1 d-flex align-items-center"
+              style={{ gap: 'var(--size-8)' }}
+            >
+              <Button
+                v2
+                size="md"
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              >
+                Primary
+              </Button>
+              <Button
+                v2
+                size="md"
+                priority="secondary"
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              >
+                Secondary
+              </Button>
+              <Button
+                v2
+                size="md"
+                priority="secondary-neutral"
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              >
+                Secondary Neutral
+              </Button>
+              <Button
+                v2
+                size="md"
+                disabled
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              >
+                Disabled
+              </Button>
+            </SentimentSurface>
+          ),
+        )}
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      source: { type: 'dynamic' },
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/button/_stories/Button.tests.story.tsx

@@ -0,0 +1,139 @@
+import { Meta } from '@storybook/react-webpack5';
+import { ArrowRight, ChevronRight, Freeze } from '@transferwise/icons';
+import { expect, userEvent, within } from 'storybook/test';
+import { storyConfig } from '../../test-utils';
+import Button from '../Button.resolver';
+import { ButtonPriority } from '../Button.types';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  title: 'Actions/Button/Tests',
+  tags: ['!autodocs'],
+};
+export default meta;
+
+export const FocusTertiary = storyConfig(
+  {
+    render: () => (
+      <Button v2 priority="tertiary">
+        Focus has underline
+      </Button>
+    ),
+  },
+  {},
+);
+FocusTertiary.play = async ({ canvasElement }) => {
+  await userEvent.tab();
+  const canvas = within(canvasElement);
+  const buttonElement: HTMLButtonElement = canvas.getByRole('button');
+  await expect(buttonElement).toHaveFocus();
+};
+
+const buttonPriorities = ['primary', 'secondary', 'secondary-neutral', 'tertiary'] as const;
+const buttonSizes = ['sm', 'md', 'lg'] as const;
+export const AllVariants = storyConfig(
+  {
+    tags: ['!autodocs'],
+    parameters: {
+      padding: '0',
+    },
+    render: () => (
+      <div
+        className="button-variants"
+        style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', maxWidth: '1200px' }}
+      >
+        {buttonPriorities.map((priority) =>
+          buttonSizes.map((size) => (
+            <div
+              key={`${priority}-default-${size}`}
+              style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
+            >
+              <Button
+                v2
+                priority={priority as ButtonPriority}
+                size={size}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+                block
+              >
+                {`${priority} default ${size}`}
+              </Button>
+              <Button
+                className="m-t-1 m-b-1"
+                v2
+                priority={priority as ButtonPriority}
+                size={size}
+                addonStart={{
+                  type: 'avatar',
+                  value: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
+                }}
+                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+                block
+                disabled
+              >
+                {`${priority} default ${size} Disabled`}
+              </Button>
+              <Button
+                v2
+                priority={priority as ButtonPriority}
+                size={size}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+                block
+                loading
+              >
+                {`${priority} default ${size} Loading`}
+              </Button>
+            </div>
+          )),
+        )}
+        {['primary', 'secondary'].map((priority) =>
+          buttonSizes.map((size) => (
+            <div
+              key={`${priority}-negative-${size}`}
+              style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
+            >
+              <Button
+                v2
+                sentiment="negative"
+                priority={priority as ButtonPriority}
+                size={size}
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                block
+              >
+                {`${priority} negative ${size}`}
+              </Button>
+              <Button
+                className="m-t-1 m-b-1"
+                v2
+                sentiment="negative"
+                priority={priority as ButtonPriority}
+                size={size}
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                block
+                disabled
+              >
+                {`${priority} negative ${size} Disabled`}
+              </Button>
+              <Button
+                v2
+                sentiment="negative"
+                priority={priority as ButtonPriority}
+                size={size}
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+                block
+                loading
+              >
+                {`${priority} negative ${size} Loading`}
+              </Button>
+            </div>
+          )),
+        )}
+      </div>
+    ),
+  },
+  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
+);