@transferwise/components 0.0.0-experimental-b80ad21 → 0.0.0-experimental-3821d5a

package/build/main.css

@@ -1308,7 +1308,7 @@
   --Button-color-active: var(--Button-secondary-neutral-color);
 }
 .wds-Button--secondary-neutral .wds-Button-icon--end {
-  color: var(--color-interactive-primary);
+  color: var(--Button-secondary-color);
 }
 .wds-Button--tertiary {
   --Button-background: var(--Button-tertiary-background);

package/build/styles/button/Button.css

@@ -113,7 +113,7 @@
   --Button-color-active: var(--Button-secondary-neutral-color);
 }
 .wds-Button--secondary-neutral .wds-Button-icon--end {
-  color: var(--color-interactive-primary);
+  color: var(--Button-secondary-color);
 }
 .wds-Button--tertiary {
   --Button-background: var(--Button-tertiary-background);

package/build/styles/main.css

@@ -1308,7 +1308,7 @@
   --Button-color-active: var(--Button-secondary-neutral-color);
 }
 .wds-Button--secondary-neutral .wds-Button-icon--end {
-  color: var(--color-interactive-primary);
+  color: var(--Button-secondary-color);
 }
 .wds-Button--tertiary {
   --Button-background: var(--Button-tertiary-background);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-b80ad21",
+  "version": "0.0.0-experimental-3821d5a",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -84,13 +84,13 @@
     "storybook-addon-tag-badges": "^2.0.2",
     "storybook-addon-test-codegen": "^2.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "0.0.0-experimental-b80ad21",
+    "@transferwise/neptune-css": "0.0.0-experimental-3821d5a",
     "@wise/components-theming": "1.9.1",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
-    "@transferwise/neptune-css": "0.0.0-experimental-b80ad21",
+    "@transferwise/neptune-css": "0.0.0-experimental-3821d5a",
     "@wise/art": "^2.24.4",
     "@wise/components-theming": "^1.6.2",
     "react": ">=18",

package/src/button/Button.css

@@ -113,7 +113,7 @@
   --Button-color-active: var(--Button-secondary-neutral-color);
 }
 .wds-Button--secondary-neutral .wds-Button-icon--end {
-  color: var(--color-interactive-primary);
+  color: var(--Button-secondary-color);
 }
 .wds-Button--tertiary {
   --Button-background: var(--Button-tertiary-background);

package/src/button/Button.less

@@ -74,7 +74,7 @@
     --Button-color-active: var(--Button-secondary-neutral-color);
 
     .wds-Button-icon--end {
-      color: var(--color-interactive-primary);
+      color: var(--Button-secondary-color);
     }
   }
 

package/src/button/Button.story.tsx

@@ -696,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
@@ -926,14 +816,39 @@ export const SentimentAwareness: Story = {
               className="p-a-1 d-flex align-items-center"
               style={{ gap: 'var(--size-8)' }}
             >
-              <Button v2>Primary</Button>
-              <Button v2 priority="secondary">
+              <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 priority="secondary-neutral">
+              <Button
+                v2
+                size="md"
+                priority="secondary-neutral"
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              >
                 Secondary Neutral
               </Button>
-              <Button v2 disabled>
+              <Button
+                v2
+                size="md"
+                disabled
+                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
+                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
+              >
                 Disabled
               </Button>
             </SentimentSurface>

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

@@ -2,6 +2,10 @@ import { Meta } from '@storybook/react-webpack5';
 import Button from './Button.resolver';
 import { expect, userEvent, within } from 'storybook/test';
 import { storyConfig } from '../test-utils';
+import { ButtonPriority } from './Button.types';
+import { ArrowRight, ChevronRight, Freeze } from '@transferwise/icons';
+import SentimentSurface from '../sentimentSurface';
+import { Flag } from '@wise/art';
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -25,3 +29,188 @@ FocusTertiary.play = async ({ 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'] },
+);
+
+export const SentimentAwareness = storyConfig(
+  {
+    render: () => {
+      const PERMUTATIONS = {
+        emphasis: ['base', 'elevated'] as const,
+        sentiment: ['success', 'warning', 'negative', 'neutral', 'proposition'] as const,
+        disabled: [false, true] as const,
+        others: [
+          {
+            addonStart: { type: 'avatar' as const, value: [{ asset: <Freeze /> }] },
+            addonEnd: { type: 'icon' as const, value: <ChevronRight /> },
+          },
+          {
+            addonStart: { type: 'avatar' as const, value: [{ profileName: 'John Doe' }] },
+          },
+          {
+            addonStart: {
+              type: 'avatar' as const,
+              value: [
+                {
+                  asset: <Flag code="gb" />,
+                },
+                { asset: <Freeze /> },
+              ],
+            },
+          },
+          {
+            loading: true,
+          },
+        ],
+        priority: ['primary', 'secondary', 'secondary-neutral'] as const,
+      };
+
+      return (
+        <>
+          {PERMUTATIONS.emphasis.map((emphasis) =>
+            PERMUTATIONS.sentiment.map((sentiment) => (
+              <SentimentSurface
+                key={`${emphasis}-${sentiment}`}
+                sentiment={sentiment}
+                emphasis={emphasis}
+                style={{
+                  padding: 'var(--size-8)',
+                  display: 'grid',
+                  gridTemplateColumns: 'repeat(3, min-content)',
+                  gap: 'var(--size-8)',
+                }}
+              >
+                {PERMUTATIONS.disabled.map((disabled) =>
+                  PERMUTATIONS.others.map((media, mediaVariant) =>
+                    PERMUTATIONS.priority.map((priority) => (
+                      <div key={`${emphasis}-${sentiment}-${disabled}-${priority}-${mediaVariant}`}>
+                        <Button v2 size="md" disabled={disabled} priority={priority} {...media}>
+                          {priority}
+                        </Button>
+                      </div>
+                    )),
+                  ),
+                )}
+              </SentimentSurface>
+            )),
+          )}
+        </>
+      );
+    },
+    decorators: [
+      (Story: React.ComponentType) => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+          <Story />
+        </div>
+      ),
+    ],
+  },
+  {},
+);

package/src/main.css

@@ -1308,7 +1308,7 @@
   --Button-color-active: var(--Button-secondary-neutral-color);
 }
 .wds-Button--secondary-neutral .wds-Button-icon--end {
-  color: var(--color-interactive-primary);
+  color: var(--Button-secondary-color);
 }
 .wds-Button--tertiary {
   --Button-background: var(--Button-tertiary-background);