@transferwise/components 46.117.0 → 46.118.0

package/src/button/Button.css

@@ -24,11 +24,11 @@
   --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);
   --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);

package/src/button/Button.vars.css

@@ -24,11 +24,11 @@
   --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);
   --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);

package/src/button/Button.vars.less

@@ -1,5 +1,8 @@
 .wds-Button {
-  --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
+  --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)
@@ -8,7 +11,10 @@
     --color-sentiment-interactive-primary-active,
     var(--color-interactive-accent-active)
   );
-  --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
+  --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)
@@ -71,11 +77,26 @@
   );
 
   --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);

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,10 +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 SentimentSurface from '../sentimentSurface';
+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' }}>
@@ -801,8 +801,8 @@ export const AccessibilityAddons: Story = {
 };
 
 /**
- * `Button` is sentiment-aware and will automatically adjust its
- * colours if wrapped inside the [SentimentSurface](/?path=/docs/content-sentimentsurface--docs) component
+ * `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) => {

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

@@ -1,15 +1,14 @@
 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';
+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;
 
@@ -138,79 +137,3 @@ export const AllVariants = storyConfig(
   },
   { 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/button/_stories/helpers.tsx

@@ -0,0 +1,118 @@
+import { ThemeProvider, type ThemeProviderProps } from '@wise/components-theming';
+import { ChevronRight, Freeze } from '@transferwise/icons';
+import { Flag } from '@wise/art';
+import SentimentSurface from '../../sentimentSurface';
+import Header from '../../header';
+import Button from '../Button';
+
+interface GenerateSurfaceVariantProps {
+  theme?: 'forest-green' | 'bright-green' | 'dark';
+  sentiment: 'success' | 'warning' | 'negative' | 'neutral' | 'proposition';
+}
+export const generateSurfaceVariant = ({ theme, sentiment }: GenerateSurfaceVariantProps) => ({
+  storyName: '',
+  render: () => {
+    const PERMUTATIONS = {
+      emphasis: ['base', 'elevated'] 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', 'tertiary'] as const,
+    };
+
+    const story = PERMUTATIONS.emphasis.map((emphasis) => (
+      <SentimentSurface
+        key={`${emphasis}-${sentiment}`}
+        sentiment={sentiment}
+        emphasis={emphasis}
+        style={{
+          padding: 'var(--size-8)',
+          display: 'grid',
+          gridTemplateColumns: 'repeat(1, 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>
+    ));
+
+    if (theme === 'dark') {
+      return (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, min-content)' }}>
+          <ThemeProvider theme="personal" screenMode="dark" className="p-a-2 p-l-4">
+            <Header title="Personal brand" />
+            {story}
+          </ThemeProvider>
+          <ThemeProvider theme="business" screenMode="dark" className="p-a-2 p-r-4">
+            <Header title="Business brand" />
+            {story}
+          </ThemeProvider>
+        </div>
+      );
+    }
+
+    const personalVariant = (theme || 'personal') as ThemeProviderProps['theme'];
+    const businessVariant = (
+      theme ? (`business--${theme}` as const) : 'business'
+    ) as ThemeProviderProps['theme'];
+    const platformVariant = (
+      theme ? (`platform--${theme}` as const) : 'platform'
+    ) as ThemeProviderProps['theme'];
+    return (
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, min-content)' }}>
+        <ThemeProvider theme={personalVariant} screenMode="light" className="p-a-2 p-l-4">
+          <Header title="Personal brand" />
+          {story}
+        </ThemeProvider>
+        <ThemeProvider theme={businessVariant} screenMode="light" className="p-a-2">
+          <Header title="Business brand" />
+          {story}
+        </ThemeProvider>
+        {theme === 'bright-green' ? null : (
+          <ThemeProvider theme={platformVariant} screenMode="light" className="p-a-2 p-r-4">
+            <Header title="Platform brand" />
+            {story}
+          </ThemeProvider>
+        )}
+      </div>
+    );
+  },
+  decorators: [
+    (Story: React.ComponentType) => (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+});

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -5,7 +5,7 @@ import { storyConfig } from '../test-utils';
 
 export default {
   component: CriticalCommsBanner,
-  title: 'Feedback/CriticalCommsBanner',
+  title: 'Prompts/CriticalCommsBanner',
 } satisfies Meta<typeof CriticalCommsBanner>;
 
 export const Basic = {

package/src/iconButton/IconButton.story.tsx

@@ -109,8 +109,8 @@ export const Basic: Story = {
 };
 
 /**
- * `IconButton` is sentiment-aware and will automatically adjust its
- * colours if wrapped inside the [SentimentSurface](/?path=/docs/content-sentimentsurface--docs) component
+ * `IconButton` 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: () => {

package/src/index.ts

@@ -35,6 +35,7 @@ export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
+export type { InlinePromptProps } from './prompt';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputProps } from './inputs/Input';
 export type { InputGroupProps } from './inputs/InputGroup';
@@ -89,6 +90,7 @@ export type { SnackbarContextType } from './snackbar/SnackbarContext';
 export type { StatusIconProps } from './statusIcon';
 export type { StickyProps } from './sticky';
 export type { SummaryProps } from './summary';
+export type { SentimentSurfaceProps } from './sentimentSurface';
 export type { SwitchProps } from './switch';
 export type { SwitchOptionProps } from './switchOption';
 export type { TabItem, TabsProps } from './tabs';
@@ -169,6 +171,7 @@ export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
 export { default as InlineAlert } from './inlineAlert';
+export { InlinePrompt } from './prompt';
 export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { Input } from './inputs/Input';
 export { InputGroup } from './inputs/InputGroup';
@@ -209,6 +212,7 @@ export { default as ResponsivePanel } from './common/responsivePanel';
 export { default as Section } from './section';
 export { default as SegmentedControl } from './segmentedControl';
 export { default as Select } from './select';
+export { default as SentimentSurface } from './sentimentSurface';
 export { default as SlidingPanel } from './slidingPanel';
 export { default as SnackbarPortal } from './snackbar/Snackbar';
 export { SnackbarConsumer, SnackbarContext } from './snackbar/SnackbarContext';

package/src/inlineAlert/InlineAlert.story.tsx

@@ -6,7 +6,7 @@ import Link from '../link';
 
 export default {
   component: InlineAlert,
-  title: 'Forms/InlineAlert',
+  title: 'Prompts/InlineAlert',
 } as Meta<InlineAlertProps>;
 
 export const Basic = () => {

package/src/link/Link.story.tsx

@@ -161,8 +161,8 @@ export const Basic = () => {
 };
 
 /**
- * `Link` is sentiment-aware and will automatically adjust its
- * colours if wrapped inside the [SentimentSurface](/?path=/docs/content-sentimentsurface--docs) component
+ * `Link` is sentiment-aware and will automatically adjust its colours if wrapped inside
+ * the [SentimentSurface](?path=/docs/foundations-sentimentsurface--docs) component
  */
 export const SentimentAwareness = function Render() {
   return (['success', 'warning', 'negative'] as const).map((sentiment) => (