@transferwise/components 46.133.1 → 46.134.0

package/src/statusIcon/StatusIcon.story.tsx

@@ -1,102 +1,142 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { Sentiment, Size, Status } from '../common';
+import { Sentiment } from '../common';
+import SentimentSurface from '../sentimentSurface';
 
 import StatusIcon, { StatusIconSentiment } from './StatusIcon';
-import { withVariantConfig } from '../../.storybook/helpers';
+
+const sentiments = [
+  Sentiment.POSITIVE,
+  Sentiment.NEGATIVE,
+  Sentiment.WARNING,
+  Sentiment.NEUTRAL,
+  Sentiment.PENDING,
+] as const;
+
+const sizes = [16, 24, 32, 40, 48, 56, 72] as const;
+
+const label: Record<string, string> = {
+  positive: 'Positive',
+  negative: 'Negative',
+  warning: 'Warning',
+  neutral: 'Neutral',
+  pending: 'Pending',
+};
 
 export default {
   component: StatusIcon,
   title: 'Other/StatusIcon',
-
-  argTypes: {
-    iconLabel: {
-      control: 'text',
-    },
-  },
 } satisfies Meta<typeof StatusIcon>;
 
 type Story = StoryObj<typeof StatusIcon>;
 
-export const Basic: Story = {};
+export const Playground: Story = {
+  args: {
+    size: 40,
+  },
+};
 
 /**
- * Ignored by the screen readers. Use with care.
+ * All available sentiments at the selected size.
  */
-export const Presentational: Story = {
-  args: {
-    iconLabel: null,
+export const Sentiments: Story = {
+  argTypes: {
+    sentiment: { table: { disable: true } },
   },
+  render: ({ size }) => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      {sentiments.map((sentiment) => (
+        <div
+          key={sentiment}
+          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}
+        >
+          <StatusIcon sentiment={sentiment as StatusIconSentiment} size={size} />
+          <span style={{ fontSize: '11px' }}>{label[sentiment]}</span>
+        </div>
+      ))}
+    </div>
+  ),
 };
 
-export const Variants: Story = {
-  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green'], {
-    parameters: {
-      padding: '0',
-    },
-  }),
-  render: () => (
-    <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
-      {[
-        Sentiment.POSITIVE,
-        Sentiment.NEGATIVE,
-        Sentiment.WARNING,
-        Sentiment.NEUTRAL,
-        Sentiment.PENDING,
-        Status.PENDING,
-      ].map((sentiment) => {
-        return (
-          <span
-            key={sentiment}
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              flexDirection: 'column',
-              minHeight: '150px',
-              alignItems: 'center',
-            }}
-          >
-            {([16, 24, 32, 40, 48, 56, 72] as const).map((size) => {
-              return (
-                <StatusIcon key={size} size={size} sentiment={sentiment as StatusIconSentiment} />
-              );
-            })}
-          </span>
-        );
-      })}
-    </span>
+/**
+ * All available sizes at the selected sentiment.
+ */
+export const Sizes: Story = {
+  argTypes: {
+    size: { table: { disable: true } },
+  },
+  render: ({ sentiment }) => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      {sizes.map((size) => (
+        <div
+          key={size}
+          style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}
+        >
+          <StatusIcon sentiment={sentiment} size={size} />
+          <span style={{ fontSize: '11px' }}>{size}</span>
+        </div>
+      ))}
+    </div>
   ),
 };
 
-export const LegacySizes: Story = {
-  render: () => (
-    <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
-      {[
-        Sentiment.POSITIVE,
-        Sentiment.NEGATIVE,
-        Sentiment.NEUTRAL,
-        Sentiment.WARNING,
-        Status.PENDING,
-      ].map((sentiment) => {
-        return (
-          <span
-            key={sentiment}
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              flexDirection: 'column',
-              minHeight: '150px',
-              alignItems: 'center',
-            }}
+/**
+ * `StatusIcon` is sentiment-aware and will automatically adjust its colours when placed inside
+ * a [SentimentSurface](?path=/docs/foundations-sentimentsurface--docs) component — no extra
+ * props needed. Each row below is a `SentimentSurface` at either `base` or `elevated` emphasis (and a last row with no sentiment for reference).
+ */
+export const SentimentAwareness: Story = {
+  argTypes: {
+    sentiment: { table: { disable: true } },
+  },
+  render: ({ size }) => {
+    const surfaceSentiments = ['success', 'warning', 'negative', 'neutral'] as const;
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {surfaceSentiments.flatMap((sentiment) => [
+          <SentimentSurface
+            key={`${sentiment}-base`}
+            sentiment={sentiment}
+            emphasis="base"
+            style={{ display: 'flex', alignItems: 'center', padding: '8px', gap: '8px' }}
           >
-            {([Size.SMALL, Size.MEDIUM, Size.LARGE] as const).map((size) => {
-              return (
-                <StatusIcon key={size} size={size} sentiment={sentiment as StatusIconSentiment} />
-              );
-            })}
-          </span>
-        );
-      })}
-    </span>
-  ),
+            <div
+              style={{ width: '120px', fontSize: '11px', fontWeight: 'bold', paddingLeft: '8px' }}
+            >
+              {sentiment} (base)
+            </div>
+            <StatusIcon sentiment={sentiment as StatusIconSentiment} size={size} />
+          </SentimentSurface>,
+          <SentimentSurface
+            key={`${sentiment}-elevated`}
+            sentiment={sentiment}
+            emphasis="elevated"
+            style={{ display: 'flex', alignItems: 'center', padding: '8px', gap: '8px' }}
+          >
+            <div
+              style={{ width: '120px', fontSize: '11px', fontWeight: 'bold', paddingLeft: '8px' }}
+            >
+              {sentiment} (elevated)
+            </div>
+            <StatusIcon sentiment={sentiment as StatusIconSentiment} size={size} />
+          </SentimentSurface>,
+        ])}
+
+        {/* Row without a SentimentSurface wrapper */}
+        <div style={{ display: 'flex', alignItems: 'center', padding: '8px', gap: '8px' }}>
+          <div style={{ width: '120px', fontSize: '11px', fontWeight: 'bold', paddingLeft: '8px' }}>
+            none
+          </div>
+          <StatusIcon sentiment="pending" size={size} />
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      source: { type: 'dynamic' },
+      canvas: { sourceState: 'hidden' },
+    },
+  },
 };

package/src/statusIcon/StatusIcon.test.story.tsx

@@ -0,0 +1,125 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Sentiment, Size } from '../common';
+import SentimentSurface from '../sentimentSurface';
+import { withVariantConfig } from '../../.storybook/helpers';
+import { allModes } from '../../.storybook/modes';
+
+import StatusIcon, { StatusIconSentiment } from './StatusIcon';
+
+export default {
+  title: 'Other/StatusIcon/Tests',
+  component: StatusIcon,
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof StatusIcon>;
+
+type Story = StoryObj<typeof StatusIcon>;
+
+const sizes = [16, 24, 32, 40, 48, 56, 72] as const;
+
+const surfaceSentiments = ['success', 'warning', 'negative', 'neutral'] as const;
+
+// Cycle through different sentiments per size so each row shows varied icons
+const iconSentiments: StatusIconSentiment[] = [
+  Sentiment.POSITIVE,
+  Sentiment.NEGATIVE,
+  Sentiment.WARNING,
+  Sentiment.NEUTRAL,
+  Sentiment.PENDING,
+  Sentiment.POSITIVE,
+  Sentiment.NEGATIVE,
+];
+
+const rowStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  padding: '8px',
+  gap: '8px',
+} as const;
+
+const labelStyle = {
+  width: '120px',
+  fontSize: '11px',
+  fontWeight: 'bold',
+  paddingLeft: '8px',
+  flexShrink: 0,
+} as const;
+
+/**
+ * All sentiments, emphasis levels, and sizes across all themes for visual regression testing.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      {surfaceSentiments.flatMap((sentiment) => [
+        <SentimentSurface
+          key={`${sentiment}-base`}
+          sentiment={sentiment}
+          emphasis="base"
+          style={rowStyle}
+        >
+          <div style={labelStyle}>{sentiment} (base)</div>
+          {sizes.map((size, i) => (
+            <StatusIcon key={size} sentiment={iconSentiments[i]} size={size} />
+          ))}
+        </SentimentSurface>,
+        <SentimentSurface
+          key={`${sentiment}-elevated`}
+          sentiment={sentiment}
+          emphasis="elevated"
+          style={rowStyle}
+        >
+          <div style={labelStyle}>{sentiment} (elevated)</div>
+          {sizes.map((size, i) => (
+            <StatusIcon key={size} sentiment={iconSentiments[i]} size={size} />
+          ))}
+        </SentimentSurface>,
+      ])}
+
+      {/* Row without a SentimentSurface wrapper — standalone fallback colours */}
+      <div style={rowStyle}>
+        <div style={labelStyle}>none</div>
+        {sizes.map((size, i) => (
+          <StatusIcon key={size} sentiment={iconSentiments[i]} size={size} />
+        ))}
+      </div>
+    </div>
+  ),
+  parameters: {
+    padding: '16px',
+    variants: ['default', 'dark', 'bright-green', 'forest-green'],
+  },
+};
+
+export const RTL: Story = {
+  render: Variants.render,
+  ...withVariantConfig(['rtl']),
+};
+
+/**
+ * @deprecated Legacy `Size.SMALL | Size.MEDIUM | Size.LARGE` values still work but
+ * consumers should migrate to numeric sizes.
+ */
+export const LegacySizes: Story = {
+  render: () => {
+    const legacySizes = [
+      { value: Size.SMALL, label: 'Size.SMALL' },
+      { value: Size.MEDIUM, label: 'Size.MEDIUM' },
+      { value: Size.LARGE, label: 'Size.LARGE' },
+    ] as const;
+
+    return (
+      <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+        {legacySizes.map(({ value, label }) => (
+          <div
+            key={label}
+            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}
+          >
+            <StatusIcon size={value} />
+            <span style={{ fontSize: '11px' }}>{label}</span>
+          </div>
+        ))}
+      </div>
+    );
+  },
+};

package/src/statusIcon/StatusIcon.test.tsx

@@ -39,35 +39,28 @@ describe('StatusIcon', () => {
       renderStatusIcon({ sentiment: sentiment as StatusIconSentiment });
 
       expect(screen.getByTestId('status-icon')).toHaveClass(expectedClass);
-      cleanup();
     },
   );
 
-  it("'warning' and 'pending' sentiments generate 'dark' colored icons", () => {
-    renderStatusIcon({ sentiment: Sentiment.WARNING });
-    expect(screen.getByTestId('alert-icon')).toHaveClass('dark');
-    cleanup();
 
-    renderStatusIcon({ sentiment: Sentiment.PENDING });
-    expect(screen.getByTestId('clock-borderless-icon')).toHaveClass('dark');
-    cleanup();
-
-    renderStatusIcon({ sentiment: Status.PENDING });
-    expect(screen.getByTestId('clock-borderless-icon')).toHaveClass('dark');
-  });
-
-  it("'positive', 'negative', and 'neutral' sentiments generate 'light' colored icons", () => {
-    renderStatusIcon({ sentiment: Sentiment.POSITIVE });
-    expect(screen.getByTestId('check-icon')).toHaveClass('light');
-    cleanup();
+  it.each([
+    [Sentiment.WARNING, 'alert-icon'],
+    [Sentiment.PENDING, 'clock-borderless-icon'],
+    [Status.PENDING, 'clock-borderless-icon'],
+    [Sentiment.POSITIVE, 'check-icon'],
+    [Sentiment.NEGATIVE, 'cross-icon'],
+    [Sentiment.NEUTRAL, 'info-icon'],
+  ])(
+    "renders the correct icon for '%s' sentiment",
+    (sentiment: Sentiment | Status, expectedIconTestId: string) => {
+      renderStatusIcon({ sentiment: sentiment as StatusIconSentiment });
 
-    renderStatusIcon({ sentiment: Sentiment.NEGATIVE });
-    expect(screen.getByTestId('cross-icon')).toHaveClass('light');
-    cleanup();
+      const icon = screen.getByTestId(expectedIconTestId);
+      expect(icon).toBeInTheDocument();
+      expect(icon).toHaveClass('status-icon');
+    },
+  );
 
-    renderStatusIcon();
-    expect(screen.getByTestId('info-icon')).toHaveClass('light');
-  });
 
   describe('accessible name', () => {
     it.each([

package/src/statusIcon/StatusIcon.tsx

@@ -1,9 +1,7 @@
 import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
-import { PropsWithChildren } from 'react';
 
-import SentimentSurface from '../sentimentSurface';
 import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';
 import Circle, { CircleProps } from '../common/circle';
 import { useMedia } from '../common/hooks/useMedia';
@@ -88,30 +86,18 @@ const StatusIcon = ({
   };
   const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];
 
-  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   const size = mapLegacySize[sizeProp] ?? sizeProp;
-  // eslint-disable-next-line react/no-unstable-nested-components
-  const SentimentSurfaceSetting = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (
-    <SentimentSurface
-      as="span"
-      // @ts-expect-error sentiment and SentimentSurface types mismatch
-      sentiment={
-        sentiment === 'positive' ? 'success' : sentiment === 'pending' ? 'warning' : sentiment
-      }
-      {...props}
-    />
-  );
+
   return (
     <Circle
-      as={SentimentSurfaceSetting}
       size={isTinyViewport && size < 40 ? 32 : size}
       data-testid="status-icon"
       className={clsx('status-circle', sentiment)}
       id={id}
     >
       <Icon
-        className={clsx('status-icon', iconColor)}
+        className="status-icon"
         title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}
       />
     </Circle>