@transferwise/components 46.116.1 → 46.117.0

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}`;
-};