@transferwise/components 46.124.1 → 46.125.0

package/src/prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -1,6 +1,7 @@
 .wds-prompt {
-  border-radius: var(--radius-small);
+  border-radius: var(--Prompt-border-radius, var(--radius-small));
   display: flex;
+  gap: var(--Prompt-gap, var(--size-16));
   overflow-wrap: break-word;
   padding: var(--Prompt-padding, var(--padding-x-small));
   text-align: left;
@@ -11,6 +12,10 @@
     gap: var(--Prompt-gap, var(--size-16));
     grid-template-columns: auto 1fr;
     width: 100%;
+
+    &--with-dismiss {
+      grid-template-columns: auto 1fr auto;
+    }
   }
 
   &__media-wrapper {
@@ -28,10 +33,15 @@
     flex-wrap: wrap;
     gap: var(--Prompt-actions-gap, var(--size-8));
     grid-column-start: 2;
+    grid-column-end: 3;
 
-    @media (--screen-md-max) {
+    @media (--screen-sm-max) {
       grid-column: span 2;
       width: 100%;
+
+      .wds-prompt__content-wrapper--with-dismiss & {
+        grid-column: span 3;
+      }
     }
   }
 }

package/src/prompt/PrimitivePrompt/PrimitivePrompt.test.tsx

@@ -0,0 +1,161 @@
+import { mockMatchMedia, render, screen, within } from '../../test-utils';
+import { PrimitivePrompt, PrimitivePromptProps } from './PrimitivePrompt';
+import { userEvent } from '@testing-library/user-event';
+
+mockMatchMedia();
+
+describe('PrimitivePrompt', () => {
+  const defaultProps: PrimitivePromptProps = {
+    media: <span data-testid="test-media">Media</span>,
+    children: <div>Test content</div>,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Basic rendering', () => {
+    it('renders children content', () => {
+      render(<PrimitivePrompt {...defaultProps} />);
+      expect(screen.getByText('Test content')).toBeInTheDocument();
+    });
+
+    it('renders media', () => {
+      render(<PrimitivePrompt {...defaultProps} />);
+      expect(screen.getByTestId('test-media')).toBeInTheDocument();
+    });
+
+    it('renders actions when provided', () => {
+      render(
+        <PrimitivePrompt
+          {...defaultProps}
+          actions={<button type="button">Action Button</button>}
+        />,
+      );
+
+      expect(screen.getByText('Action Button')).toBeInTheDocument();
+    });
+
+    it('does not render actions wrapper when actions not provided', () => {
+      render(<PrimitivePrompt {...defaultProps} data-testid="prompt" />);
+      const prompt = screen.getByTestId('prompt');
+      expect(within(prompt).queryByRole('button')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Sentiments', () => {
+    [
+      { sentiment: 'negative' as const, label: 'negative' },
+      { sentiment: 'warning' as const, label: 'warning' },
+      { sentiment: 'neutral' as const, label: 'neutral' },
+      { sentiment: 'success' as const, label: 'success' },
+    ].forEach(({ sentiment, label }) => {
+      it(`applies correct CSS class for ${label} sentiment`, () => {
+        render(<PrimitivePrompt {...defaultProps} sentiment={sentiment} data-testid="prompt" />);
+        const promptElement = screen.getByTestId('prompt');
+
+        expect(promptElement).toHaveClass(`wds-prompt--${label}`);
+      });
+    });
+
+    it('defaults to success sentiment', () => {
+      render(<PrimitivePrompt {...defaultProps} data-testid="prompt" />);
+      expect(screen.getByTestId('prompt')).toHaveClass('wds-prompt--success');
+    });
+
+    it('applies base wds-prompt class', () => {
+      render(<PrimitivePrompt {...defaultProps} data-testid="prompt" />);
+      expect(screen.getByTestId('prompt')).toHaveClass('wds-prompt');
+    });
+  });
+
+  describe('Dismiss functionality', () => {
+    it('renders dismiss button when onDismiss is provided', () => {
+      const onDismiss = jest.fn();
+      render(<PrimitivePrompt {...defaultProps} onDismiss={onDismiss} />);
+
+      expect(screen.getByLabelText('Close')).toBeInTheDocument();
+    });
+
+    it('calls onDismiss when dismiss button is clicked', async () => {
+      const onDismiss = jest.fn();
+      const user = userEvent.setup();
+      render(<PrimitivePrompt {...defaultProps} onDismiss={onDismiss} />);
+
+      const dismissButton = screen.getByLabelText('Close');
+      await user.click(dismissButton);
+
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not render dismiss button when onDismiss is not provided', () => {
+      render(<PrimitivePrompt {...defaultProps} />);
+      expect(screen.queryByLabelText('Close')).not.toBeInTheDocument();
+    });
+
+    it('applies with-dismiss class when onDismiss is provided', () => {
+      render(<PrimitivePrompt {...defaultProps} data-testid="prompt" onDismiss={() => {}} />);
+
+      const prompt = screen.getByTestId('prompt');
+
+      expect(screen.getByLabelText('Close')).toBeInTheDocument();
+      expect(prompt).toBeInTheDocument();
+    });
+
+    it('does not apply with-dismiss class when onDismiss is not provided', () => {
+      render(<PrimitivePrompt {...defaultProps} data-testid="prompt" />);
+
+      expect(screen.queryByLabelText('Close')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Custom attributes', () => {
+    it('applies custom className', () => {
+      render(<PrimitivePrompt {...defaultProps} className="custom-class" data-testid="prompt" />);
+      expect(screen.getByTestId('prompt')).toHaveClass('custom-class');
+    });
+
+    it('applies custom id', () => {
+      render(<PrimitivePrompt {...defaultProps} id="custom-id" data-testid="prompt" />);
+      expect(screen.getByTestId('prompt')).toHaveAttribute('id', 'custom-id');
+    });
+
+    it('applies custom data-testid', () => {
+      render(<PrimitivePrompt {...defaultProps} data-testid="custom-test-id" />);
+      expect(screen.getByTestId('custom-test-id')).toBeInTheDocument();
+    });
+
+    it('combines custom className with base classes', () => {
+      render(
+        <PrimitivePrompt
+          {...defaultProps}
+          className="custom-class"
+          sentiment="warning"
+          data-testid="prompt"
+        />,
+      );
+
+      const prompt = screen.getByTestId('prompt');
+
+      expect(prompt).toHaveClass('wds-prompt');
+      expect(prompt).toHaveClass('wds-prompt--warning');
+      expect(prompt).toHaveClass('custom-class');
+    });
+  });
+
+  describe('SentimentSurface integration', () => {
+    it('uses SentimentSurface for sentiment styling', () => {
+      render(<PrimitivePrompt {...defaultProps} sentiment="negative" data-testid="prompt" />);
+      const prompt = screen.getByTestId('prompt');
+
+      expect(prompt).toHaveClass('wds-sentiment-surface');
+    });
+
+    it('passes sentiment to SentimentSurface', () => {
+      render(<PrimitivePrompt {...defaultProps} sentiment="warning" data-testid="prompt" />);
+      const prompt = screen.getByTestId('prompt');
+
+      expect(prompt).toHaveClass('wds-prompt--warning');
+    });
+  });
+});

package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx

@@ -50,21 +50,25 @@ export const PrimitivePrompt = ({
       className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}
       {...restProps}
     >
-      <div className="wds-prompt__content-wrapper">
+      <div
+        className={clsx('wds-prompt__content-wrapper', {
+          'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,
+        })}
+      >
         <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>
         {children}
+        {onDismiss && (
+          <IconButton
+            size={24}
+            priority="secondary"
+            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}
+            onClick={onDismiss}
+          >
+            <Cross />
+          </IconButton>
+        )}
         {actions && <div className="wds-prompt__actions-wrapper">{actions}</div>}
       </div>
-      {onDismiss && (
-        <IconButton
-          size={24}
-          priority="secondary"
-          aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}
-          onClick={onDismiss}
-        >
-          <Cross />
-        </IconButton>
-      )}
     </SentimentSurface>
   );
 };

package/src/prompt/index.ts

@@ -4,3 +4,6 @@
 // InlinePrompt
 export type { InlinePromptProps } from './InlinePrompt';
 export { InlinePrompt } from './InlinePrompt';
+
+export type { ActionPromptProps } from './ActionPrompt';
+export { ActionPrompt } from './ActionPrompt';

package/src/snackbar/{Snackbar.tests.story.tsx → Snackbar.test.story.tsx}

@@ -7,7 +7,7 @@ import SnackbarProvider from './SnackbarProvider';
 import Button from '../button';
 import CheckboxOption from '../checkboxOption';
 import { wait } from '../test-utils/wait';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   title: 'Dialogs/Snackbar/Tests',
@@ -115,12 +115,7 @@ export const Mobile = {
       </div>
     ) as React.ReactNode,
   },
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], Default),
 };
 
 const switchToDarkMode = async (context: { canvasElement: HTMLElement }) => {
@@ -152,12 +147,7 @@ export const DarkMode = {
     ) as React.ReactNode,
   },
   play: switchToDarkMode,
-  parameters: {
-    variants: ['dark'],
-    chromatic: {
-      dark: allModes.dark,
-    },
-  },
+  ...withVariantConfig(['dark'], Default),
 };
 
 const switchToRTL = async (context: { canvasElement: HTMLElement }) => {
@@ -209,12 +199,7 @@ export const RTL = {
     ) as React.ReactNode,
   },
   play: switchToRTL,
-  parameters: {
-    variants: ['rtl'],
-    chromatic: {
-      rtl: allModes.rtl,
-    },
-  },
+  ...withVariantConfig(['rtl'], Default),
 };
 
 export const RTLMobile = {
@@ -223,13 +208,7 @@ export const RTLMobile = {
     ...RTL.args,
   },
   play: switchToRTL,
-  parameters: {
-    variants: ['rtl', 'mobile'],
-    chromatic: {
-      rtl: allModes.rtl,
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['rtl', 'mobile'], Default),
 };
 
 export const Zoom400 = {
@@ -254,12 +233,7 @@ export const Zoom400 = {
       </div>
     ),
   },
-  parameters: {
-    variants: ['400%'],
-    chromatic: {
-      zoom400: allModes.zoom400,
-    },
-  },
+  ...withVariantConfig(['400%'], Default),
 };
 
 export const MultipleClicks = {

package/src/{ssr.spec.tsx → ssr.test.tsx}

@@ -181,6 +181,7 @@ describe('Server side rendering', () => {
 
   // Override props in case of name collision.
   const overrideProps: Partial<Record<keyof ExposedLibraryItemsType, Record<string, unknown>>> = {
+    ActionPrompt: { action: { label: 'Action', onClick: jest.fn(), href: '#' } },
     Alert: { children: undefined, message: 'Fluffy kittens', size: undefined },
     Card: { isExpanded: true },
     CheckboxButton: { children: undefined, onChange: jest.fn() },

package/src/statusIcon/StatusIcon.story.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Sentiment, Size, Status } from '../common';
 
 import StatusIcon, { StatusIconSentiment } from './StatusIcon';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: StatusIcon,
@@ -30,15 +30,11 @@ export const Presentational: Story = {
 };
 
 export const Variants: Story = {
-  parameters: {
-    padding: '0',
-    variants: ['default', 'dark', 'bright-green', 'forest-green'],
-    chromatic: {
-      dark: allModes.dark,
-      brightGreen: allModes.brightGreen,
-      forestGreen: allModes.forestGreen,
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green'], {
+    parameters: {
+      padding: '0',
     },
-  },
+  }),
   render: () => (
     <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
       {[

package/src/tabs/Tabs.story.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Size, Width } from '../common';
+import { Width } from '../common';
 
 import Tabs from './Tabs';
 
@@ -15,7 +15,6 @@ export const Basic = () => {
     <Tabs
       className="tabs-custom-class"
       name="tabs-docs"
-      transitionSpacing={Size.MEDIUM}
       tabs={[
         {
           title: 'Title 1',
@@ -44,7 +43,6 @@ export const Basic = () => {
         },
       ]}
       selected={selected}
-      animatePanelsOnClick
       onTabSelect={(index) => setSelected(index)}
     />
   );
@@ -56,7 +54,6 @@ export const AutoTabHeaderWidth = () => {
     <Tabs
       className="tabs-custom-class"
       name="tabs-docs"
-      transitionSpacing={Size.MEDIUM}
       headerWidth={Width.AUTO}
       tabs={[
         {
@@ -92,44 +89,3 @@ export const AutoTabHeaderWidth = () => {
     />
   );
 };
-
-export const NoPanelAnimation = () => {
-  const [selected, setSelected] = useState(0);
-  return (
-    <Tabs
-      animatePanelsOnClick={false}
-      className="tabs-custom-class"
-      name="tabs-docs"
-      transitionSpacing={Size.MEDIUM}
-      tabs={[
-        {
-          title: 'Title 1',
-          disabled: false,
-          content: (
-            <div className="p-a-2">
-              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
-            </div>
-          ),
-        },
-        {
-          title: 'Title 2',
-          disabled: false,
-          content: (
-            <div className="p-a-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
-          ),
-        },
-        {
-          title: 'Title 3',
-          disabled: true,
-          content: (
-            <div className="p-a-2">
-              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
-            </div>
-          ),
-        },
-      ]}
-      selected={selected}
-      onTabSelect={(index) => setSelected(index)}
-    />
-  );
-};

package/src/tabs/{Tabs.spec.tsx → Tabs.test.tsx}

@@ -1,4 +1,3 @@
-import { Globals } from '@react-spring/web';
 import { render, screen, userEvent } from '../test-utils';
 import Tabs, { TabsProps } from './Tabs';
 
@@ -18,21 +17,13 @@ function generateTabs(tabsStatus = defaultTabsStatus) {
   }));
 }
 
-beforeAll(() => {
-  Globals.assign({
-    skipAnimation: true,
-  });
-});
-
 describe('Tabs', () => {
   const initialProps: TabsProps = {
-    animatePanelsOnClick: true,
     tabs: generateTabs(),
     changeTabOnSwipe: true,
     name: 'testName',
     headerWidth: 'block',
     selected: 0,
-    transitionSpacing: 'default',
     onTabSelect: jest.fn(),
     className: 'custom-class-name',
   };
@@ -65,19 +56,6 @@ describe('Tabs', () => {
     expect(screen.getByRole('tabpanel')).toHaveAttribute('id', controlsTarget);
   });
 
-  describe('transitionSpacing', () => {
-    test.each([
-      ['default', '100%'],
-      ['xs', '8px'],
-      ['sm', '16px'],
-      ['md', '24px'],
-      ['lg', '32px'],
-    ] as const)('should respect `%s`', (input, width) => {
-      render(<Tabs {...initialProps} transitionSpacing={input} />);
-      expect(screen.getByRole('tabpanel').nextSibling).toHaveStyle({ width });
-    });
-  });
-
   it('should render correct number of tabs', () => {
     render(<Tabs {...initialProps} />);
     expect(screen.getAllByRole('tab')).toHaveLength(defaultTabsStatus.length);