@transferwise/components 0.0.0-experimental-d2bc8ee → 0.0.0-experimental-c3d7358

package/src/sentimentSurface/SentimentSurface.less

@@ -0,0 +1,296 @@
+.wds-sentiment-surface {
+    background-color: var(--color-sentiment-background-surface);
+    color: var(--color-sentiment-content-primary);
+
+    &-negative {
+        .np-theme-personal &,
+        .np-theme-personal--bright-green & {
+            &-base {
+                .sentiment-surface-tokens(
+                    #CB272F, #B8232B, #A72027,
+                    #CB272F, #B8232B, #A72027,
+                    #FBEAEA, #F9E1E1, #F8D8D8,
+                    #F5D3D4, #F0BDBE, #ECACAD,
+                    #FBEAEA, #F9E1E1, #F8D8D8,
+                    #FBEAEA, #F9E1E1, #F8D8D8
+                );
+            }
+            &-elevated {
+                .sentiment-surface-tokens(
+                    #FFFFFF, #F5CCCC, #F1B7B7,
+                    #FBEAEA, #F5CCCC, #F1B7B7,
+                    #CB272F, #B8232B, #A72027,
+                    #9B141B, #831116, #6D0E13,
+                    #CB272F, #B8232B, #A72027,
+                    #90000D, #B8232B, #A72027
+                );
+            }
+        }
+
+        .np-theme-personal--dark &,
+        .np-theme-personal--forest-green & {
+            &-base {
+                .sentiment-surface-tokens(
+                    #FFA8AD, #FFBDC0, #FFD1D3,
+                    #FFA8AD, #FFBDC0, #FFD1D3,
+                    #410B0D, #641115, #761418,
+                    #601013, #7A1519, #90181D,
+                    #410B0D, #641115, #761418,
+                    #410B0D, #641115, #761418
+                );
+            }
+            &-elevated {
+                .sentiment-surface-tokens(
+                    #410B0D, #641115, #761418,
+                    #410B0D, #641115, #761418,
+                    #FFA8AD, #FFBDC0, #FFD1D3,
+                    #D9898D, #D68084, #D06C71,
+                    #FFA8AD, #FFBDC0, #FFD1D3,
+                    #FFA8AD, #FFBDC0, #FFD1D3
+                );
+            }
+        }
+    }
+
+    &-warning {
+        .np-theme-personal &,
+        .np-theme-personal--bright-green & {
+            &-base {
+                .sentiment-surface-tokens(
+                    #4A3B1C, #302612, #2C2311,  // content-primary (default, hover, active)
+                    #FFD11A, #FFBF0F, #FFBB00,  // interactive-primary
+                    #FFF7D7, #FFF0B2, #FFE98F,  // interactive-secondary
+                    #FFEC9E, #FFE187, #FFD55F,  // interactive-secondary-neutral
+                    #4A3B1C, #302612, #2C2311,  // interactive-control
+                    #FFF7D7, #FFF0B2, #FFE98F   // background-surface
+                );
+            }
+            &-elevated {
+                .sentiment-surface-tokens(
+                    #4A3B1C, #302612, #2C2311,  // content-primary
+                    #4A3B1C, #302612, #2C2311,  // interactive-primary
+                    #FFD11A, #FFBF0F, #FFBB00,  // interactive-secondary
+                    #FFEC9E, #FFEDB8, #FFF2CC,  // interactive-secondary-neutral
+                    #FFD11A, #FFBF0F, #FFBB00,  // interactive-control
+                    #FFD11A, #FFBF0F, #FFBB00   // background-surface
+                );
+            }
+        }
+
+        .np-theme-personal--dark &,
+        .np-theme-personal--forest-green & {
+            &-base {
+                .sentiment-surface-tokens(
+                    #FADC65, #F9D648, #F8CD20,  // content-primary
+                    #FADC65, #F9D648, #F8CD20,  // interactive-primary
+                    #3A3523, #504930, #665D3D,  // interactive-secondary
+                    #4D462A, #5D532F, #685D33,  // interactive-secondary-neutral
+                    #3A3523, #504930, #665D3D,  // interactive-control
+                    #3A3523, #504930, #665D3D   // background-surface
+                );
+            }
+            &-elevated {
+                .sentiment-surface-tokens(
+                    #3A3523, #504930, #665D3D,  // content-primary
+                    #3A3523, #504930, #665D3D,  // interactive-primary
+                    #FADC65, #F9D648, #F8CD20,  // interactive-secondary
+                    #E3C85D, #DFC044, #D9B526,  // interactive-secondary-neutral
+                    #FADC65, #F9D648, #F8CD20,  // interactive-control
+                    #FADC65, #F9D648, #F8CD20   // background-surface
+                );
+            }
+        }
+    }
+    &-success {
+        .np-theme-personal &,
+        .np-theme-personal--bright-green & {
+            &-base {
+                .sentiment-surface-tokens(
+                    #054D28, #043A1E, #022614,  // content-primary (default, hover, active)
+                    #054D28, #043A1E, #022614,  // interactive-primary
+                    #E2F6D5, #D3F2C0, #C5EDAB,  // interactive-secondary
+                    #BCD9B8, #AACFA5, #94C38E,  // interactive-secondary-neutral
+                    #E2F6D5, #D3F2C0, #C5EDAB,  // interactive-control
+                    #E2F6D5, #D3F2C0, #C5EDAB   // background-surface
+                );
+            }
+            &-elevated {
+                .sentiment-surface-tokens(
+                    #E2F6D5, #D3F2C0, #C5EDAB,  // content-primary
+                    #E2F6D5, #D3F2C0, #C5EDAB,  // interactive-primary
+                    #054D28, #043A1E, #022614,  // interactive-secondary
+                    #256A43, #2A794C, #329057,  // interactive-secondary-neutral
+                    #054D28, #043A1E, #022614,  // interactive-control
+                    #054D28, #043A1E, #022614   // background-surface
+                );
+            }
+        }
+
+        .np-theme-personal--dark &,
+        .np-theme-personal--forest-green & {
+            &-base {
+                .sentiment-surface-tokens(
+                    #BAE5A0, #C8EAB3, #D6F0C7,  // content-primary
+                    #BAE5A0, #C8EAB3, #D6F0C7,  // interactive-primary
+                    #252C20, #323B2B, #3E4A36,  // interactive-secondary
+                    #37422F, #46533B, #546548,  // interactive-secondary-neutral
+                    #252C20, #323B2B, #3E4A36,  // interactive-control
+                    #252C20, #323B2B, #3E4A36   // background-surface
+                );
+            }
+            &-elevated {
+                .sentiment-surface-tokens(
+                    #252C20, #323B2B, #3E4A36,  // content-primary
+                    #252C20, #323B2B, #3E4A36,  // interactive-primary
+                    #BAE5A0, #C8EAB3, #D6F0C7,  // interactive-secondary
+                    #A8CF91, #94C478, #83BB63,  // interactive-secondary-neutral
+                    #BAE5A0, #C8EAB3, #D6F0C7,  // interactive-control
+                    #BAE5A0, #C8EAB3, #D6F0C7   // background-surface
+                );
+            }
+        }
+    }
+    &-neutral {
+        .np-theme-personal &,
+        .np-theme-personal--bright-green & {
+            &-base {
+                .sentiment-surface-tokens(
+                    #454745, #353635, #232423,  // content-primary (default, hover, active)
+                    #454745, #353635, #232423,  // interactive-primary
+                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-secondary
+                    #E4E4DC, #DCDCD2, #D3D2C6,  // interactive-secondary-neutral
+                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-control
+                    #F1F1ED, #E7E7E1, #DFDED5   // background-surface
+                );
+            }
+            &-elevated {
+                .sentiment-surface-tokens(
+                    #F1F1ED, #E7E7E1, #DFDED5,  // content-primary
+                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-primary
+                    #454745, #353635, #232423,  // interactive-secondary
+                    #5A5C5A, #6D6F6D, #727472,  // interactive-secondary-neutral
+                    #454745, #353635, #232423,  // interactive-control
+                    #454745, #353635, #232423   // background-surface
+                );
+            }
+        }
+
+        .np-theme-personal--dark &,
+        .np-theme-personal--forest-green & {
+            &-base {
+                .sentiment-surface-tokens(
+                    #F1F1ED, #E7E7E1, #DFDED5,  // content-primary
+                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-primary
+                    #2A2C29, #414441, #595B58,  // interactive-secondary
+                    #424441, #4C4E4B, #565955,  // interactive-secondary-neutral
+                    #2A2C29, #414441, #595B58,  // interactive-control
+                    #2A2C29, #414441, #595B58   // background-surface
+                );
+            }
+            &-elevated {
+                .sentiment-surface-tokens(
+                    #2A2C29, #414441, #595B58,  // content-primary
+                    #2A2C29, #414441, #595B58,  // interactive-primary
+                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-secondary
+                    #E4E4DC, #DCDCD2, #D3D2C6,  // interactive-secondary-neutral
+                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-control
+                    #F1F1ED, #E7E7E1, #DFDED5   // background-surface
+                );
+            }
+        }
+    }
+    &-proposition {
+        .np-theme-personal &,
+        .np-theme-personal--bright-green & {
+            &-base {
+                .sentiment-surface-tokens(
+                    #0E0F0C, #0A2826, #074140,  // content-primary (default, hover, active)
+                    #054D4D, #043A3A, #022626,  // interactive-primary
+                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-secondary
+                    #B4D5D5, #A3CCCC, #9AC6C6,  // interactive-secondary-neutral
+                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-control
+                    #E0F7F7, #CAF1F1, #B6ECEC   // background-surface
+                );
+            }
+            &-elevated {
+                .sentiment-surface-tokens(
+                    #FFFFFF, #EAF9F9, #D5F4F4,  // content-primary
+                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-primary
+                    #054D4D, #043A3A, #022626,  // interactive-secondary
+                    #1F6161, #247070, #298080,  // interactive-secondary-neutral
+                    #054D4D, #043A3A, #022626,  // interactive-control
+                    #054D4D, #043A3A, #022626   // background-surface
+                );
+            }
+        }
+
+        .np-theme-personal--dark &,
+        .np-theme-personal--forest-green & {
+            &-base {
+                .sentiment-surface-tokens(
+                    #FFFFFF, #EAF9F9, #D5F4F4,  // content-primary
+                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-primary
+                    #0B312F, #124F4C, #176460,  // interactive-secondary
+                    #174E4D, #1D6261, #237675,  // interactive-secondary-neutral
+                    #0B312F, #124F4C, #176460,  // interactive-control
+                    #0B312F, #124F4C, #176460   // background-surface
+                );
+            }
+            &-elevated {
+                .sentiment-surface-tokens(
+                    #0E0F0C, #0A2826, #074140,  // content-primary
+                    #0B312F, #104744, #16605C,  // interactive-primary
+                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-secondary
+                    #B4D5D5, #A3CCCC, #9AC6C6,  // interactive-secondary-neutral
+                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-control
+                    #E0F7F7, #CAF1F1, #B6ECEC   // background-surface
+                );
+            }
+        }
+    }
+}
+
+.sentiment-surface-tokens(
+    @content-primary,
+    @content-primary-hover,
+    @content-primary-active,
+    @interactive-primary,
+    @interactive-primary-hover,
+    @interactive-primary-active,
+    @interactive-secondary,
+    @interactive-secondary-hover,
+    @interactive-secondary-active,
+    @interactive-secondary-neutral,
+    @interactive-secondary-neutral-hover,
+    @interactive-secondary-neutral-active,
+    @interactive-control,
+    @interactive-control-hover,
+    @interactive-control-active,
+    @background-surface,
+    @background-surface-hover,
+    @background-surface-active
+) {
+    --color-sentiment-content-primary: @content-primary;
+    --color-sentiment-content-primary-hover: @content-primary-hover;
+    --color-sentiment-content-primary-active: @content-primary-active;
+
+    --color-sentiment-interactive-primary: @interactive-primary;
+    --color-sentiment-interactive-primary-hover: @interactive-primary-hover;
+    --color-sentiment-interactive-primary-active: @interactive-primary-active;
+
+    --color-sentiment-interactive-secondary: @interactive-secondary;
+    --color-sentiment-interactive-secondary-hover: @interactive-secondary-hover;
+    --color-sentiment-interactive-secondary-active: @interactive-secondary-active;
+
+    --color-sentiment-interactive-secondary-neutral: @interactive-secondary-neutral;
+    --color-sentiment-interactive-secondary-neutral-hover: @interactive-secondary-neutral-hover;
+    --color-sentiment-interactive-secondary-neutral-active: @interactive-secondary-neutral-active;
+
+    --color-sentiment-interactive-control: @interactive-control;
+    --color-sentiment-interactive-control-hover: @interactive-control-hover;
+    --color-sentiment-interactive-control-active: @interactive-control-active;
+
+    --color-sentiment-background-surface: @background-surface;
+    --color-sentiment-background-surface-hover: @background-surface-hover;
+    --color-sentiment-background-surface-active: @background-surface-active;
+}

package/src/sentimentSurface/SentimentSurface.spec.tsx

@@ -0,0 +1,140 @@
+import { render, screen } from '../test-utils';
+import SentimentSurface from './SentimentSurface';
+import { Sentiment, Emphasis } from './SentimentSurface.types';
+
+describe('SentimentSurface', () => {
+  const testContent = 'Test content';
+
+  describe('rendering', () => {
+    it('renders with children', () => {
+      render(<SentimentSurface sentiment="neutral">{testContent}</SentimentSurface>);
+      expect(screen.getByText(testContent)).toBeInTheDocument();
+    });
+
+    it('renders as div by default', () => {
+      render(
+        <SentimentSurface sentiment="neutral" testId="surface">
+          {testContent}
+        </SentimentSurface>,
+      );
+      expect(screen.getByTestId('surface').tagName).toBe('DIV');
+    });
+
+    it('renders as custom element when as prop is provided', () => {
+      render(
+        <SentimentSurface sentiment="neutral" as="section" testId="surface">
+          {testContent}
+        </SentimentSurface>,
+      );
+      expect(screen.getByTestId('surface').tagName).toBe('SECTION');
+    });
+  });
+
+  describe('sentiment variants', () => {
+    const sentiments: Sentiment[] = ['negative', 'warning', 'neutral', 'success', 'proposition'];
+
+    sentiments.forEach((sentiment) => {
+      it(`renders ${sentiment} sentiment with correct class`, () => {
+        render(
+          <SentimentSurface sentiment={sentiment} testId="surface">
+            {testContent}
+          </SentimentSurface>,
+        );
+        const element = screen.getByTestId('surface');
+        expect(element).toHaveClass('wds-sentiment-surface');
+        expect(element).toHaveClass(`wds-sentiment-surface-${sentiment}-base`);
+      });
+    });
+  });
+
+  describe('emphasis variants', () => {
+    const emphasisLevels: Emphasis[] = ['base', 'elevated'];
+
+    emphasisLevels.forEach((emphasis) => {
+      it(`renders ${emphasis} emphasis with correct class`, () => {
+        render(
+          <SentimentSurface sentiment="neutral" emphasis={emphasis} testId="surface">
+            {testContent}
+          </SentimentSurface>,
+        );
+        const element = screen.getByTestId('surface');
+        expect(element).toHaveClass('wds-sentiment-surface');
+        expect(element).toHaveClass(`wds-sentiment-surface-neutral-${emphasis}`);
+      });
+    });
+
+    it('defaults to base emphasis when not provided', () => {
+      render(
+        <SentimentSurface sentiment="neutral" testId="surface">
+          {testContent}
+        </SentimentSurface>,
+      );
+      const element = screen.getByTestId('surface');
+      expect(element).toHaveClass('wds-sentiment-surface');
+      expect(element).toHaveClass('wds-sentiment-surface-neutral-base');
+    });
+  });
+
+  describe('custom props', () => {
+    it('applies custom className', () => {
+      const customClass = 'custom-class';
+      render(
+        <SentimentSurface sentiment="neutral" className={customClass} testId="surface">
+          {testContent}
+        </SentimentSurface>,
+      );
+      expect(screen.getByTestId('surface')).toHaveClass(customClass);
+    });
+
+    it('applies custom id', () => {
+      const customId = 'custom-id';
+      render(
+        <SentimentSurface sentiment="neutral" id={customId}>
+          {testContent}
+        </SentimentSurface>,
+      );
+      expect(screen.getByText(testContent)).toHaveAttribute('id', customId);
+    });
+
+    it('applies testId via data-testid', () => {
+      const testId = 'test-surface';
+      render(
+        <SentimentSurface sentiment="neutral" testId={testId}>
+          {testContent}
+        </SentimentSurface>,
+      );
+      expect(screen.getByTestId(testId)).toBeInTheDocument();
+    });
+
+    it('applies custom style', () => {
+      const customStyle = { padding: '20px' };
+      render(
+        <SentimentSurface sentiment="neutral" style={customStyle} testId="surface">
+          {testContent}
+        </SentimentSurface>,
+      );
+      expect(screen.getByTestId('surface')).toHaveStyle(customStyle);
+    });
+  });
+
+  describe('HTML attributes', () => {
+    it('supports aria-label attribute', () => {
+      const ariaLabel = 'Surface label';
+      render(
+        <SentimentSurface sentiment="neutral" aria-label={ariaLabel} testId="surface">
+          {testContent}
+        </SentimentSurface>,
+      );
+      expect(screen.getByTestId('surface')).toHaveAttribute('aria-label', ariaLabel);
+    });
+
+    it('supports role attribute', () => {
+      render(
+        <SentimentSurface sentiment="neutral" role="region" testId="surface">
+          {testContent}
+        </SentimentSurface>,
+      );
+      expect(screen.getByTestId('surface')).toHaveAttribute('role', 'region');
+    });
+  });
+});

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -0,0 +1,210 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import SentimentSurface from './SentimentSurface';
+import { storyConfig } from '../test-utils';
+import type { Sentiment, Emphasis } from './SentimentSurface.types';
+
+const withContainer = (Story: () => JSX.Element) => (
+  <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem' }}>
+    <Story />
+  </div>
+);
+
+const withComponentGrid = (Story: () => JSX.Element) => (
+  <div
+    style={{
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1rem',
+      maxWidth: '800px',
+    }}
+  >
+    <Story />
+  </div>
+);
+
+/**
+ * SentimentSurface is a polymorphic container component that applies contextual background colours
+ * and text styling based on sentiment types.
+ */
+const meta: Meta<typeof SentimentSurface> = {
+  component: SentimentSurface,
+  title: 'Content/SentimentSurface',
+  argTypes: {
+    sentiment: {
+      control: 'select',
+      options: ['negative', 'warning', 'neutral', 'success', 'proposition'],
+      description: 'The sentiment type that determines the colour scheme',
+    },
+    emphasis: {
+      control: 'select',
+      options: ['base', 'elevated'],
+      description: 'The emphasis level affecting background and text contrast',
+      table: {
+        defaultValue: { summary: 'base' },
+      },
+    },
+    as: {
+      control: 'text',
+      description: 'The underlying HTML element to render',
+      table: {
+        defaultValue: { summary: 'div' },
+      },
+    },
+    children: {
+      control: 'text',
+      description: 'Content to render inside the surface',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+    },
+    id: {
+      control: 'text',
+      description: 'Unique identifier for the component',
+    },
+    testId: {
+      control: 'text',
+      description: 'Test ID for React Testing Library',
+    },
+  },
+  args: {
+    sentiment: 'neutral',
+    emphasis: 'base',
+    children: 'This is a sentiment surface',
+    style: { padding: '24px', borderRadius: '16px' },
+  },
+  decorators: [withContainer],
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SentimentSurface>;
+
+/**
+ * The Playground story allows you to experiment with all the props of the SentimentSurface component.
+ * Use the controls below to customise the sentiment type, emphasis level, and content.
+ */
+export const Playground: Story = {
+  args: {
+    sentiment: 'negative',
+    emphasis: 'base',
+    children: 'Customise the sentiment and emphasis using the controls below',
+  },
+};
+
+/**
+ * There are five different sentiment types that communicate different types of information or states.
+ */
+export const Sentiments: Story = {
+  render: (args) => (
+    <>
+      <SentimentSurface {...args} sentiment="negative">
+        Negative: Your payment has failed
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="warning">
+        Warning: Action required on your account
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="neutral">
+        Neutral: Your account is up to date
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="success">
+        Success: Your payment was successful
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="proposition">
+        Proposition: Try our new feature
+      </SentimentSurface>
+    </>
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
+  decorators: [withComponentGrid],
+};
+
+/**
+ * Each sentiment type has two emphasis levels – base and elevated – to provide different levels of visual prominence.
+ */
+export const EmphasisLevels: Story = {
+  render: (args) => (
+    <>
+      <SentimentSurface {...args} sentiment="negative" emphasis="base">
+        Negative - Base emphasis
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="negative" emphasis="elevated">
+        Negative - Elevated emphasis
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="success" emphasis="base">
+        Success - Base emphasis
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="success" emphasis="elevated">
+        Success - Elevated emphasis
+      </SentimentSurface>
+    </>
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
+  decorators: [withComponentGrid],
+};
+
+/**
+ * The component can be rendered as any HTML element using the `as` prop.
+ */
+export const PolymorphicRendering: Story = {
+  render: (args) => (
+    <>
+      <SentimentSurface {...args} sentiment="negative">
+        Rendered as div (default)
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="negative" as="section">
+        Rendered as section
+      </SentimentSurface>
+      <SentimentSurface {...args} sentiment="negative" as="article">
+        Rendered as article
+      </SentimentSurface>
+    </>
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
+  decorators: [withComponentGrid],
+};
+
+const sentiments: Sentiment[] = ['negative', 'warning', 'neutral', 'success', 'proposition'];
+const emphasisLevels: Emphasis[] = ['base', 'elevated'];
+
+export const AllVariants = storyConfig(
+  {
+    tags: ['!autodocs'],
+    parameters: {
+      padding: '0',
+      controls: { disable: true },
+    },
+    render: () => (
+      <div
+        className="sentiment-surface-variants"
+        style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '800px' }}
+      >
+        {sentiments.map((sentiment) =>
+          emphasisLevels.map((emphasis) => (
+            <SentimentSurface
+              key={`${sentiment}-${emphasis}`}
+              sentiment={sentiment}
+              emphasis={emphasis}
+              style={{ padding: '24px', borderRadius: '16px' }}
+            >
+              {sentiment} - {emphasis} emphasis
+            </SentimentSurface>
+          )),
+        )}
+      </div>
+    ),
+  },
+  { variants: ['default', 'dark', 'bright-green', 'forest-green'] },
+);