@transferwise/components 46.124.1 → 46.125.0

package/src/common/circle/Circle.story.tsx

@@ -3,7 +3,7 @@ import Circle from './Circle';
 import { Profile } from '@transferwise/icons';
 import { CircleProps } from '.';
 import Body from '../../body';
-import { allModes } from '../../../.storybook/modes';
+import { withVariantConfig } from '../../../.storybook/helpers';
 
 export default {
   title: 'Internal/Circle',
@@ -46,13 +46,7 @@ export const Sizes: Story = {
       </div>
     );
   },
-  parameters: {
-    variants: ['light', 'dark'],
-    chromatic: {
-      light: allModes.light,
-      dark: allModes.dark,
-    },
-  },
+  ...withVariantConfig(['light', 'dark']),
 };
 
 export const FixedSize: Story = {
@@ -83,10 +77,5 @@ export const FixedSize: Story = {
       </div>
     );
   },
-  parameters: {
-    variants: ['400%'],
-    chromatic: {
-      zoom400: allModes.zoom400,
-    },
-  },
+  ...withVariantConfig(['400%']),
 };

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import CriticalCommsBanner from '.';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: CriticalCommsBanner,
@@ -24,13 +24,7 @@ export const Variants: Story = {
     subtitle: 'Add money within the next 30 days',
     action: { label: 'Take action', href: 'https://wise.com' },
   },
-  parameters: {
-    variants: ['default', 'dark', 'rtl'],
-    chromatic: {
-      dark: allModes.dark,
-      rtl: allModes.rtl,
-    },
-  },
+  ...withVariantConfig(['default', 'dark', 'rtl']),
 };
 
 export const Mobile: Story = {
@@ -40,12 +34,5 @@ export const Mobile: Story = {
     subtitle: 'Add money within the next 30 days',
     action: { label: 'Take action', href: 'https://wise.com' },
   },
-  parameters: {
-    variants: ['default', 'dark', 'rtl', 'mobile'],
-    chromatic: {
-      dark: allModes.dark,
-      rtl: allModes.rtl,
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
 };

package/src/dateInput/{DateInput.tests.story.tsx → DateInput.test.story.tsx}

@@ -6,7 +6,7 @@ import { lorem10 } from '../test-utils';
 
 import Provider from '../provider/Provider';
 import translations from '../i18n';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta: Meta<typeof DateInput> = {
   component: DateInput,
@@ -223,20 +223,10 @@ export const NoNonDigitsAllowed: Story = {
 
 export const BasicMobile: Story = {
   ...Basic,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], Basic),
 };
 
 export const InputErrorMobile: Story = {
   ...InputError,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], InputError),
 };

package/src/dateLookup/DateLookup.story.tsx

@@ -4,7 +4,7 @@ import { StoryObj } from '@storybook/react-webpack5';
 import { Field } from '..';
 import { Size } from '../common';
 import DateLookup, { type DateLookupProps } from './DateLookup';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: DateLookup,
@@ -61,13 +61,15 @@ export const Basic: Story = {
 };
 export const Basic400Zoom: Story = {
   ...Basic,
-  parameters: {
-    chromatic: {
-      delay: 2000,
-      zoom400: allModes.zoom400,
+
+  ...withVariantConfig(['400%'], {
+    ...Basic,
+    parameters: {
+      chromatic: {
+        delay: 2000,
+      },
     },
-    variants: ['400%'],
-  },
+  }),
 };
 
 export const WithField: Story = {

package/src/header/{Header.tests.story.tsx → Header.test.story.tsx}

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import Header, { type HeaderProps } from './Header';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta: Meta<typeof Header> = {
   component: Header,
@@ -85,16 +85,11 @@ export const SectionTrailingSpaceWithAction: Story = {
 };
 
 export const AllVariants: Story = {
-  parameters: {
-    padding: '0',
-    variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'],
-    chromatic: {
-      dark: allModes.dark,
-      brightGreen: allModes.brightGreen,
-      forestGreen: allModes.forestGreen,
-      rtl: allModes.rtl,
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green', 'rtl'], {
+    parameters: {
+      padding: '0',
     },
-  },
+  }),
   render: () => (
     <div
       className="header-variants"

package/src/index.ts

@@ -35,7 +35,7 @@ export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
-export type { InlinePromptProps } from './prompt';
+export type { InlinePromptProps, ActionPromptProps } from './prompt';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputProps } from './inputs/Input';
 export type { InputGroupProps } from './inputs/InputGroup';
@@ -171,7 +171,7 @@ export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
 export { default as InlineAlert } from './inlineAlert';
-export { InlinePrompt } from './prompt';
+export { InlinePrompt, ActionPrompt } from './prompt';
 export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { Input } from './inputs/Input';
 export { InputGroup } from './inputs/InputGroup';

package/src/info/Info.story.tsx

@@ -4,7 +4,7 @@ import { userEvent, within } from 'storybook/test';
 import { lorem10 } from '../test-utils';
 
 import Info, { InfoPresentation } from '.';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta = {
   component: Info,
@@ -27,13 +27,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
-  parameters: {
-    variants: ['default', 'dark', 'rtl'],
-    chromatic: {
-      dark: allModes.dark,
-      rtl: allModes.rtl,
-    },
-  },
+  ...withVariantConfig(['default', 'dark', 'rtl']),
 };
 
 export const OpenedPopover = {
@@ -50,12 +44,7 @@ export const OpenedPopover = {
 
 export const OpenedPopoverMobile: Story = {
   ...OpenedPopover,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], OpenedPopover),
 };
 
 export const OpenedModal = {
@@ -67,10 +56,5 @@ export const OpenedModal = {
 
 export const OpenedModalMobile: Story = {
   ...OpenedModal,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], OpenedModal),
 };

package/src/listItem/_stories/variants/ListItem.brightGreen.test.story.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
 import { VariantStory } from './helpers';
-import { allModes } from '../../../../.storybook/modes';
+import { withVariantConfig } from '../../../../.storybook/helpers';
 
 export default {
   component: ListItem,
@@ -16,12 +16,7 @@ export default {
 
 const Default = {
   ...VariantStory,
-  parameters: {
-    variants: ['bright-green'],
-    chromatic: {
-      'bright-green': allModes.brightGreen,
-    },
-  },
+  ...withVariantConfig(['bright-green'], VariantStory),
   args: { variant: 'bright-green' },
 };
 

package/src/listItem/_stories/variants/ListItem.dark.test.story.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
 import { VariantStory } from './helpers';
-import { allModes } from '../../../../.storybook/modes';
+import { withVariantConfig } from '../../../../.storybook/helpers';
 
 export default {
   component: ListItem,
@@ -16,12 +16,7 @@ export default {
 
 const Default = {
   ...VariantStory,
-  parameters: {
-    variants: ['dark'],
-    chromatic: {
-      dark: allModes.dark,
-    },
-  },
+  ...withVariantConfig(['dark'], VariantStory),
   args: { variant: 'dark' },
 };
 

package/src/listItem/_stories/variants/ListItem.forestGreen.test.story.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
 import { VariantStory } from './helpers';
-import { allModes } from '../../../../.storybook/modes';
+import { withVariantConfig } from '../../../../.storybook/helpers';
 
 export default {
   component: ListItem,
@@ -16,12 +16,7 @@ export default {
 
 const Default = {
   ...VariantStory,
-  parameters: {
-    variants: ['forest-green'],
-    chromatic: {
-      forestGreen: allModes.forestGreen,
-    },
-  },
+  ...withVariantConfig(['forest-green'], VariantStory),
   args: { variant: 'forest-green' },
 };
 

package/src/listItem/_stories/variants/ListItem.rtl.test.story.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
 import { VariantStory } from './helpers';
-import { allModes } from '../../../../.storybook/modes';
+import { withVariantConfig } from '../../../../.storybook/helpers';
 
 export default {
   component: ListItem,
@@ -16,12 +16,7 @@ export default {
 
 const Default = {
   ...VariantStory,
-  parameters: {
-    variants: ['rtl'],
-    chromatic: {
-      rtl: allModes.rtl,
-    },
-  },
+  ...withVariantConfig(['rtl'], VariantStory),
   args: { variant: 'rtl' },
 };
 

package/src/main.css

@@ -5337,8 +5337,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .wds-prompt {
   border-radius: 10px;
-  border-radius: var(--radius-small);
+  border-radius: var(--Prompt-border-radius, var(--radius-small));
   display: flex;
+  gap: 16px;
+  gap: var(--Prompt-gap, var(--size-16));
   word-wrap: break-word;
   padding: 8px;
   padding: var(--Prompt-padding, var(--padding-x-small));
@@ -5354,6 +5356,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   grid-template-columns: auto 1fr;
   width: 100%;
 }
+.wds-prompt__content-wrapper--with-dismiss {
+  grid-template-columns: auto 1fr auto;
+}
 .wds-prompt__media-wrapper {
   align-self: flex-start;
   padding-top: calc(4px - 1px);
@@ -5369,12 +5374,16 @@ html:not([dir="rtl"]) .np-navigation-option {
   gap: 8px;
   gap: var(--Prompt-actions-gap, var(--size-8));
   grid-column-start: 2;
+  grid-column-end: 3;
 }
-@media (max-width: 991px) {
+@media (max-width: 767px) {
   .wds-prompt__actions-wrapper {
     grid-column: span 2;
     width: 100%;
   }
+  .wds-prompt__content-wrapper--with-dismiss .wds-prompt__actions-wrapper {
+    grid-column: span 3;
+  }
 }
 .wds-inline-prompt {
   --Prompt-gap: calc(var(--size-12) / 2);
@@ -7423,3 +7432,24 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-list-item__action {
   flex-shrink: 0;
 }
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: var(--radius-large);
+}
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+@media (max-width: 767px) {
+  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}

package/src/main.less

@@ -86,6 +86,7 @@
 @import "./progress/Progress.less";
 @import "./progressBar/ProgressBar.less";
 @import "./legacylistItem/LegacyListItem.less";
+@import "./prompt/ActionPrompt/ActionPrompt.less";
 
 // List all less files in src in alphabetical order: find -s src -type f -name '*.less' ! -name 'main.less'
 // Make sure you are not referencing main.less itself in this file!

package/src/modal/Modal.story.tsx

@@ -6,7 +6,7 @@ import { useState } from 'react';
 import { Button, Modal, ModalProps } from '..';
 import { CommonProps, Scroll } from '../common';
 import { lorem10, lorem100, lorem1000 } from '../test-utils';
-import { allModes } from '../../.storybook/modes';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: Modal,
@@ -78,12 +78,7 @@ export const Basic: Story = {
 
 export const BasicMobile: Story = {
   ...Basic,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], Basic),
 };
 
 export const ContentScroll: Story = {
@@ -97,12 +92,7 @@ export const ContentScroll: Story = {
 
 export const ContentScrollMobile: Story = {
   ...ContentScroll,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], ContentScroll),
 };
 
 export const ViewportScroll: Story = {
@@ -116,12 +106,7 @@ export const ViewportScroll: Story = {
 
 export const ViewportScrollMobile: Story = {
   ...ViewportScroll,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], ViewportScroll),
 };
 
 export const WithoutTitle: Story = {
@@ -134,12 +119,7 @@ export const WithoutTitle: Story = {
 
 export const WithoutTitleMobile: Story = {
   ...WithoutTitle,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], WithoutTitle),
 };
 
 export const WithThemeProviderInContent: Story = {
@@ -161,10 +141,5 @@ export const WithThemeProviderInContent: Story = {
 
 export const WithThemeProviderInContentMobile: Story = {
   ...WithThemeProviderInContent,
-  parameters: {
-    variants: ['mobile'],
-    chromatic: {
-      mobile: allModes.largeMobile,
-    },
-  },
+  ...withVariantConfig(['mobile'], WithThemeProviderInContent),
 };

package/src/prompt/ActionPrompt/ActionPrompt.css

@@ -0,0 +1,21 @@
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: var(--radius-large);
+}
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+@media (max-width: 767px) {
+  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}

package/src/prompt/ActionPrompt/ActionPrompt.less

@@ -0,0 +1,23 @@
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: var(--radius-large);
+
+  &--media-image {
+    width: var(--size-48);
+    height: var(--size-48);
+    object-fit: contain;
+  }
+
+  &--with-two-actions {
+    @media (--screen-sm-max) {
+      .wds-prompt__actions-wrapper {
+        .wds-Button {
+          flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+          min-width: fit-content;
+        }
+      }
+    }
+  }
+}