@transferwise/components 46.124.0 → 46.125.0

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);