@transferwise/components 46.116.0 → 46.117.0

package/src/sentimentSurface/SentimentSurface.tests.story.tsx

@@ -1,99 +1,32 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { expect, within } from 'storybook/test';
+import { ThemeProvider, type Theming } from '@wise/components-theming';
 import SentimentSurface from './SentimentSurface';
-import { storyConfig } from '../test-utils';
+import Button from '../button';
+import type { Sentiment, Emphasis } from './SentimentSurface.types';
+
+const sentiments: Sentiment[] = ['negative', 'success', 'proposition', 'warning', 'neutral'];
+const emphasisLevels: Emphasis[] = ['base', 'elevated'];
+
+// Themes that support light/dark screen modes
+const themesWithScreenModes: Theming['theme'][] = ['personal', 'business', 'platform'];
+// Themes that don't have light/dark variants
+const themesWithoutScreenModes: Theming['theme'][] = [
+  'forest-green',
+  'bright-green',
+  'business--forest-green',
+  'business--bright-green',
+  'platform--forest-green',
+];
+const screenModes: Theming['screenMode'][] = ['light', 'dark'];
 
 export default {
   component: SentimentSurface,
   title: 'Content/SentimentSurface/Tests',
+  tags: ['!autodocs'],
 } satisfies Meta<typeof SentimentSurface>;
 
 type Story = StoryObj<typeof SentimentSurface>;
 
-export const AllSentiments: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <SentimentSurface sentiment="negative">
-        Negative sentiment - Your payment has failed
-      </SentimentSurface>
-      <SentimentSurface sentiment="warning">
-        Warning sentiment - Action required on your account
-      </SentimentSurface>
-      <SentimentSurface sentiment="neutral">
-        Neutral sentiment - Your account is up to date
-      </SentimentSurface>
-      <SentimentSurface sentiment="success">
-        Success sentiment - Your payment was successful
-      </SentimentSurface>
-      <SentimentSurface sentiment="proposition">
-        Proposition sentiment - Try our new feature
-      </SentimentSurface>
-    </div>
-  ),
-};
-
-export const AllEmphasisLevels: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <SentimentSurface sentiment="neutral" emphasis="base">
-        Base emphasis (default)
-      </SentimentSurface>
-      <SentimentSurface sentiment="neutral" emphasis="elevated">
-        Elevated emphasis
-      </SentimentSurface>
-    </div>
-  ),
-};
-
-export const PolymorphicRendering: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Test that all elements are rendered with correct tags
-    const divElement = canvas.getByText('Rendered as div');
-    await expect(divElement.tagName).toBe('DIV');
-
-    const sectionElement = canvas.getByText('Rendered as section');
-    await expect(sectionElement.tagName).toBe('SECTION');
-
-    const articleElement = canvas.getByText('Rendered as article');
-    await expect(articleElement.tagName).toBe('ARTICLE');
-  },
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <SentimentSurface sentiment="neutral">Rendered as div</SentimentSurface>
-      <SentimentSurface sentiment="success" as="section">
-        Rendered as section
-      </SentimentSurface>
-      <SentimentSurface sentiment="proposition" as="article">
-        Rendered as article
-      </SentimentSurface>
-    </div>
-  ),
-};
-
-export const AllVariants = storyConfig(
-  {
-    render: () => (
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
-        {(['negative', 'warning', 'neutral', 'success', 'proposition'] as const).map(
-          (sentiment) => (
-            <div key={sentiment} style={{ display: 'contents' }}>
-              <SentimentSurface sentiment={sentiment} emphasis="base">
-                {sentiment} - base
-              </SentimentSurface>
-              <SentimentSurface sentiment={sentiment} emphasis="elevated">
-                {sentiment} - elevated
-              </SentimentSurface>
-            </div>
-          ),
-        )}
-      </div>
-    ),
-  },
-  { variants: ['default', 'dark'] },
-);
-
 export const NestedSentiments: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
@@ -121,3 +54,69 @@ export const NestedSentiments: Story = {
     </div>
   ),
 };
+
+const ButtonsGrid = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+    {emphasisLevels.map((emphasis) =>
+      sentiments.map((sentiment) => (
+        <SentimentSurface
+          key={`${sentiment}-${emphasis}`}
+          sentiment={sentiment}
+          emphasis={emphasis}
+          style={{
+            backgroundColor: 'var(--color-sentiment-background-surface)',
+            color: 'var(--color-sentiment-content-primary)',
+            padding: '16px',
+          }}
+        >
+          <span
+            style={{
+              marginRight: '16px',
+              textTransform: 'capitalize',
+              minWidth: '150px',
+              display: 'inline-block',
+            }}
+          >
+            {sentiment} ({emphasis})
+          </span>
+          <Button v2>Primary</Button>
+          <Button v2 priority="secondary" style={{ marginLeft: '8px' }}>
+            Secondary
+          </Button>
+          <Button v2 priority="secondary-neutral" style={{ marginLeft: '8px' }}>
+            Secondary Neutral
+          </Button>
+        </SentimentSurface>
+      )),
+    )}
+  </div>
+);
+
+export const ButtonsAcrossThemes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+      {/* Themes with light/dark screen modes */}
+      {themesWithScreenModes.map((theme) =>
+        screenModes.map((screenMode) => (
+          <ThemeProvider key={`${theme}-${screenMode}`} theme={theme} screenMode={screenMode}>
+            <div style={{ padding: '16px' }}>
+              <h3 style={{ margin: '0 0 16px 0', textTransform: 'capitalize' }}>
+                {theme} - {screenMode}
+              </h3>
+              <ButtonsGrid />
+            </div>
+          </ThemeProvider>
+        )),
+      )}
+      {/* Themes without light/dark variants */}
+      {themesWithoutScreenModes.map((theme) => (
+        <ThemeProvider key={theme} theme={theme}>
+          <div style={{ padding: '16px' }}>
+            <h3 style={{ margin: '0 0 16px 0', textTransform: 'capitalize' }}>{theme}</h3>
+            <ButtonsGrid />
+          </div>
+        </ThemeProvider>
+      ))}
+    </div>
+  ),
+};

package/src/sentimentSurface/SentimentSurface.tsx

@@ -5,21 +5,21 @@ import {
   SentimentSurfaceComponentProps,
   SentimentSurfaceComponent,
 } from './SentimentSurface.types';
-import { getSentimentSurfaceClassName } from './classMap';
 
 /**
- * SentimentSurface is a polymorphic container component that applies contextual background colours
- * and text styling based on sentiment types (negative, warning, neutral, success, proposition).
- * It's designed to visually communicate the nature or importance of its content through colour.
+ * SentimentSurface is a polymorphic container component that exposes and, optionally, applies
+ * contextual colour tokens as CSS custom properties, based on sentiment types (`negative`,
+ * `warning`, `neutral`, `success`, `proposition`).
  *
  * @param {ElementType} [as='div'] - Optional prop to override the HTML element rendered.
  * @param {Sentiment} sentiment - Required prop to set the sentiment type (negative, warning, neutral, success, proposition).
  * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).
+ * @param {boolean} [hasBaseStyles=true] - If true, sets the `background-color` and `color` on the container. Otherwise, only exposes the tokens as CSS custom properties without rendering.
  * @param {ReactNode} [children] - Content to render inside the surface.
  * @param {string} [className] - Additional CSS classes to apply.
  * @param {CSSProperties} [style] - Inline styles to apply.
  * @param {string} [id] - Unique identifier for the component.
- * @param {string} [testId] - A unique string that appears as data attribute `data-testid` in the rendered code.
+ * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.
  *
  * @component
  * @example
@@ -41,21 +41,28 @@ const SentimentSurface: SentimentSurfaceComponent = forwardRef(function Sentimen
     as,
     sentiment,
     emphasis = 'base',
-    className,
+    hasBaseStyles = true,
     style,
+    className,
     children,
     id,
-    testId,
+    'data-testid': dataTestId,
     ...props
   }: SentimentSurfaceComponentProps<T>,
   ref: ForwardedRef<HTMLElement>,
 ) {
   const Element = as ?? 'div';
-  const classNames = clsx(getSentimentSurfaceClassName(sentiment, emphasis), className);
+  const BASE_CLASS = 'wds-sentiment-surface';
+  const classNames = clsx(
+    BASE_CLASS,
+    `${BASE_CLASS}-${sentiment}-${emphasis}`,
+    hasBaseStyles && `${BASE_CLASS}--hasBaseStyles`,
+    className,
+  );
   const sentimentProps = {
     ref,
     id,
-    'data-testid': testId,
+    'data-testid': dataTestId,
     className: classNames,
     style,
     ...props,

package/src/sentimentSurface/SentimentSurface.types.ts

@@ -32,35 +32,20 @@ export interface CommonProps {
   emphasis?: Emphasis;
 
   /**
-   * Content to render inside the surface
+   * If true, sets the  `background-color` and `color` on the container. Otherwise, only exposes the tokens as CSS custom properties without rendering.
+   * @default true
    */
-  children?: ReactNode;
+  hasBaseStyles?: boolean;
 
-  /**
-   * Additional CSS classes
-   */
+  children?: ReactNode;
   className?: string;
-
-  /**
-   * Inline styles
-   */
   style?: CSSProperties;
-
-  /**
-   * Unique identifier for the component
-   */
   id?: string;
 
   /**
    * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests
    */
-  testId?: string;
-
-  /**
-   * `data-testid` is strictly controlled through the `testId` prop.
-   * This lets consumers know that this data attribute will not be applied.
-   */
-  'data-testid'?: never;
+  'data-testid'?: string;
 }
 
 /**

package/src/test-utils/story-config.ts

@@ -53,7 +53,6 @@ const getViewportWidth = (viewport: (typeof viewports)[keyof typeof viewports])
  * The key to 'Large mobile' viewport {@link viewports.mobile2}
  */
 const mobileViewportKey = 'mobile2';
-// @ts-expect-error viewports has mobile2 property (comes from ...MINIMAL_VIEWPORTS)
 const mobileViewportWidth = getViewportWidth(viewports.mobile2);
 
 const zoom400perViewportKey = 'mobile3';

package/build/sentimentSurface/classMap.js

@@ -1,17 +0,0 @@
-'use strict';
-
-const BASE_CLASS = 'wds-sentiment-surface';
-const sentimentClassMap = {
-  negative: `${BASE_CLASS}-negative`,
-  warning: `${BASE_CLASS}-warning`,
-  neutral: `${BASE_CLASS}-neutral`,
-  success: `${BASE_CLASS}-success`,
-  proposition: `${BASE_CLASS}-proposition`
-};
-const getSentimentSurfaceClassName = (sentiment, emphasis) => {
-  return `${BASE_CLASS} ${sentimentClassMap[sentiment]}-${emphasis}`;
-};
-
-exports.getSentimentSurfaceClassName = getSentimentSurfaceClassName;
-exports.sentimentClassMap = sentimentClassMap;
-//# sourceMappingURL=classMap.js.map

package/build/sentimentSurface/classMap.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"classMap.js","sources":["../../src/sentimentSurface/classMap.ts"],"sourcesContent":["import type { Sentiment, Emphasis } from './SentimentSurface.types';\n\nconst BASE_CLASS = 'wds-sentiment-surface';\n\nexport const sentimentClassMap: Record<Sentiment, string> = {\n  negative: `${BASE_CLASS}-negative`,\n  warning: `${BASE_CLASS}-warning`,\n  neutral: `${BASE_CLASS}-neutral`,\n  success: `${BASE_CLASS}-success`,\n  proposition: `${BASE_CLASS}-proposition`,\n};\n\nexport const getSentimentSurfaceClassName = (sentiment: Sentiment, emphasis: Emphasis): string => {\n  return `${BASE_CLASS} ${sentimentClassMap[sentiment]}-${emphasis}`;\n};\n"],"names":["BASE_CLASS","sentimentClassMap","negative","warning","neutral","success","proposition","getSentimentSurfaceClassName","sentiment","emphasis"],"mappings":";;AAEA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,iBAAiB,GAA8B;EAC1DC,QAAQ,EAAE,CAAA,EAAGF,UAAU,CAAA,SAAA,CAAW;EAClCG,OAAO,EAAE,CAAA,EAAGH,UAAU,CAAA,QAAA,CAAU;EAChCI,OAAO,EAAE,CAAA,EAAGJ,UAAU,CAAA,QAAA,CAAU;EAChCK,OAAO,EAAE,CAAA,EAAGL,UAAU,CAAA,QAAA,CAAU;EAChCM,WAAW,EAAE,GAAGN,UAAU,CAAA,YAAA;;MAGfO,4BAA4B,GAAGA,CAACC,SAAoB,EAAEC,QAAkB,KAAY;EAC/F,OAAO,CAAA,EAAGT,UAAU,CAAA,CAAA,EAAIC,iBAAiB,CAACO,SAAS,CAAC,CAAA,CAAA,EAAIC,QAAQ,CAAA,CAAE;AACpE;;;;;"}

package/build/sentimentSurface/classMap.mjs

@@ -1,14 +0,0 @@
-const BASE_CLASS = 'wds-sentiment-surface';
-const sentimentClassMap = {
-  negative: `${BASE_CLASS}-negative`,
-  warning: `${BASE_CLASS}-warning`,
-  neutral: `${BASE_CLASS}-neutral`,
-  success: `${BASE_CLASS}-success`,
-  proposition: `${BASE_CLASS}-proposition`
-};
-const getSentimentSurfaceClassName = (sentiment, emphasis) => {
-  return `${BASE_CLASS} ${sentimentClassMap[sentiment]}-${emphasis}`;
-};
-
-export { getSentimentSurfaceClassName, sentimentClassMap };
-//# sourceMappingURL=classMap.mjs.map

package/build/sentimentSurface/classMap.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"classMap.mjs","sources":["../../src/sentimentSurface/classMap.ts"],"sourcesContent":["import type { Sentiment, Emphasis } from './SentimentSurface.types';\n\nconst BASE_CLASS = 'wds-sentiment-surface';\n\nexport const sentimentClassMap: Record<Sentiment, string> = {\n  negative: `${BASE_CLASS}-negative`,\n  warning: `${BASE_CLASS}-warning`,\n  neutral: `${BASE_CLASS}-neutral`,\n  success: `${BASE_CLASS}-success`,\n  proposition: `${BASE_CLASS}-proposition`,\n};\n\nexport const getSentimentSurfaceClassName = (sentiment: Sentiment, emphasis: Emphasis): string => {\n  return `${BASE_CLASS} ${sentimentClassMap[sentiment]}-${emphasis}`;\n};\n"],"names":["BASE_CLASS","sentimentClassMap","negative","warning","neutral","success","proposition","getSentimentSurfaceClassName","sentiment","emphasis"],"mappings":"AAEA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,iBAAiB,GAA8B;EAC1DC,QAAQ,EAAE,CAAA,EAAGF,UAAU,CAAA,SAAA,CAAW;EAClCG,OAAO,EAAE,CAAA,EAAGH,UAAU,CAAA,QAAA,CAAU;EAChCI,OAAO,EAAE,CAAA,EAAGJ,UAAU,CAAA,QAAA,CAAU;EAChCK,OAAO,EAAE,CAAA,EAAGL,UAAU,CAAA,QAAA,CAAU;EAChCM,WAAW,EAAE,GAAGN,UAAU,CAAA,YAAA;;MAGfO,4BAA4B,GAAGA,CAACC,SAAoB,EAAEC,QAAkB,KAAY;EAC/F,OAAO,CAAA,EAAGT,UAAU,CAAA,CAAA,EAAIC,iBAAiB,CAACO,SAAS,CAAC,CAAA,CAAA,EAAIC,QAAQ,CAAA,CAAE;AACpE;;;;"}

package/build/types/sentimentSurface/classMap.d.ts

@@ -1,4 +0,0 @@
-import type { Sentiment, Emphasis } from './SentimentSurface.types';
-export declare const sentimentClassMap: Record<Sentiment, string>;
-export declare const getSentimentSurfaceClassName: (sentiment: Sentiment, emphasis: Emphasis) => string;
-//# sourceMappingURL=classMap.d.ts.map

package/build/types/sentimentSurface/classMap.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"classMap.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/classMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAIpE,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAMvD,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,WAAW,SAAS,EAAE,UAAU,QAAQ,KAAG,MAEvF,CAAC"}

package/src/sentimentSurface/classMap.ts

@@ -1,15 +0,0 @@
-import type { Sentiment, Emphasis } from './SentimentSurface.types';
-
-const BASE_CLASS = 'wds-sentiment-surface';
-
-export const sentimentClassMap: Record<Sentiment, string> = {
-  negative: `${BASE_CLASS}-negative`,
-  warning: `${BASE_CLASS}-warning`,
-  neutral: `${BASE_CLASS}-neutral`,
-  success: `${BASE_CLASS}-success`,
-  proposition: `${BASE_CLASS}-proposition`,
-};
-
-export const getSentimentSurfaceClassName = (sentiment: Sentiment, emphasis: Emphasis): string => {
-  return `${BASE_CLASS} ${sentimentClassMap[sentiment]}-${emphasis}`;
-};