@transferwise/components 0.0.0-experimental-c68416c → 0.0.0-experimental-26bc819

package/src/prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -1,6 +1,7 @@
 .wds-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/ssr.spec.tsx

@@ -91,6 +91,7 @@ describe('Server side rendering', () => {
 
   // stick all possible properties we might need to render all components in here
   const allProps: Record<string, unknown> = {
+    actionPrimary: { label: 'Action', onClick: jest.fn(), href: '#' },
     currencies: [],
     currencySelector: { options: [] },
     steps: [],