@transferwise/components 0.0.0-experimental-14ff413 → 0.0.0-experimental-b79d3f4

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

@@ -1,125 +0,0 @@
-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>
-    );
-  },
-};