@transferwise/components 0.0.0-experimental-06b4575 → 0.0.0-experimental-7fec974

package/src/avatarLayout/AvatarLayout.story.tsx

@@ -288,7 +288,7 @@ export const EdgeInstances: Story = {
 /**
  * Like [AvatarView](?path=/docs/content-avatarview--docs#sentiment-awareness), `AvatarLayout` is sentiment-aware (note: not all features are supported) and will automatically adjust its colours if wrapped inside the
  * [SentimentSurface](?path=/docs/content-sentimentsurface--docs) component.
- * 
+ *
  * Features like: `interactive` are not supported.
  * Also `AvatarLayout` isn't supported on `"elevated"` state of `SentimentSurface`.
  */
@@ -302,7 +302,7 @@ export const SentimentAwareness: Story = {
   },
   render: (args) => (
     <>
-      {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map((sentiment) =>
+      {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map((sentiment) => (
         <SentimentSurface
           key={`${sentiment}-base`}
           sentiment={sentiment}
@@ -316,7 +316,7 @@ export const SentimentAwareness: Story = {
             avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
           />
         </SentimentSurface>
-      )}
+      ))}
     </>
   ),
   decorators: [

package/src/avatarView/AvatarView.story.tsx

@@ -440,7 +440,7 @@ export const Profiles: Story = {
 /**
  * `AvatarView` is sentiment-aware (note: not all features are supported) and will automatically adjust its colours if wrapped inside the
  * [SentimentSurface](?path=/docs/content-sentimentsurface--docs) component.
- * 
+ *
  * Features like `online`, `notification`, `selected`, and `interactive` are not supported.
  * For badge (`<AvatarView badge={}>`) only `flagCode` is supported.
  * Also `AvatarView` isn't supported on `"elevated"` state of `SentimentSurface`.
@@ -457,29 +457,34 @@ export const SentimentAwareness: Story = {
   render: () => {
     return (
       <>
-        {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map((sentiment) => (
-          <SentimentSurface
-            key={`${sentiment}-base`}
-            sentiment={sentiment}
-            emphasis="base"
-            className="p-a-1 d-flex"
-            style={{ gap: 'var(--size-16)' }}
-          >
-            <AvatarView size={32}>
-              <Bank />
-            </AvatarView>
-            <AvatarView size={32} profileName="John Doe" />
-            <AvatarView size={32}>
-              <Flag code="JPY" intrinsicSize={32} />
-            </AvatarView>
-            <AvatarView size={32} badge={sentiment === 'proposition' ? undefined : { status: sentiment }}>
-              <Bank />
-            </AvatarView>
-            <AvatarView size={32} badge={{ flagCode: 'eu' }}>
-              <Bank />
-            </AvatarView>
-          </SentimentSurface>
-        ))}
+        {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map(
+          (sentiment) => (
+            <SentimentSurface
+              key={`${sentiment}-base`}
+              sentiment={sentiment}
+              emphasis="base"
+              className="p-a-1 d-flex"
+              style={{ gap: 'var(--size-16)' }}
+            >
+              <AvatarView size={32}>
+                <Bank />
+              </AvatarView>
+              <AvatarView size={32} profileName="John Doe" />
+              <AvatarView size={32}>
+                <Flag code="JPY" intrinsicSize={32} />
+              </AvatarView>
+              <AvatarView
+                size={32}
+                badge={sentiment === 'proposition' ? undefined : { status: sentiment }}
+              >
+                <Bank />
+              </AvatarView>
+              <AvatarView size={32} badge={{ flagCode: 'eu' }}>
+                <Bank />
+              </AvatarView>
+            </SentimentSurface>
+          ),
+        )}
       </>
     );
   },

package/src/button/_stories/Button.test.story.tsx

@@ -3,7 +3,7 @@ import { ArrowRight, ChevronRight, Freeze } from '@transferwise/icons';
 import { expect, userEvent, within } from 'storybook/test';
 import Button from '../Button.resolver';
 import { ButtonPriority } from '../Button.types';
-import { withVariantConfig } from '../../../.storybook/helpers';
+import { allModes } from '../../../.storybook/modes';
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -32,11 +32,16 @@ const buttonPriorities = ['primary', 'secondary', 'secondary-neutral', 'tertiary
 const buttonSizes = ['sm', 'md', 'lg'] as const;
 export const AllVariants: Story = {
   tags: ['!autodocs'],
-  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green', 'rtl'], {
-    parameters: {
-      padding: '0',
+  parameters: {
+    padding: '0',
+    variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'],
+    chromatic: {
+      dark: allModes.dark,
+      brightGreen: allModes.brightGreen,
+      forestGreen: allModes.forestGreen,
+      rtl: allModes.rtl,
     },
-  }),
+  },
   render: () => (
     <div
       className="button-variants"

package/src/checkbox/Checkbox.story.tsx

@@ -5,7 +5,7 @@ import { Field } from '../field/Field';
 import { lorem10 } from '../test-utils';
 
 import Checkbox from './Checkbox';
-import { withVariantConfig } from '../../.storybook/helpers';
+import { allModes } from '../../.storybook/modes';
 
 const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
@@ -33,12 +33,25 @@ export const Multiple: Story = {
       </>
     );
   },
-  ...withVariantConfig(['default', 'dark', 'rtl']),
+  parameters: {
+    variants: ['default', 'dark', 'rtl'],
+    chromatic: {
+      dark: allModes.dark,
+      rtl: allModes.rtl,
+    },
+  },
 };
 
 export const MultipleMobile: Story = {
   ...Multiple,
-  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile'], Multiple),
+  parameters: {
+    variants: ['default', 'dark', 'rtl', 'mobile'],
+    chromatic: {
+      dark: allModes.dark,
+      rtl: allModes.rtl,
+      mobile: allModes.largeMobile,
+    },
+  },
 };
 
 export const WithinField = {

package/src/circularButton/CircularButton.story.tsx

@@ -6,7 +6,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import CircularButton from './CircularButton';
 import Title from '../title';
 import Body from '../body';
-import { withVariantConfig } from '../../.storybook/helpers';
+import { allModes } from '../../.storybook/modes';
 
 export default {
   component: CircularButton,
@@ -89,5 +89,10 @@ export const All: Story = {
 
 export const All400Zoom: Story = {
   ...All,
-  ...withVariantConfig(['400%'], All),
+  parameters: {
+    variants: ['400%'],
+    chromatic: {
+      '400%': allModes.zoom400,
+    },
+  },
 };

package/src/common/bottomSheet/BottomSheet.story.tsx

@@ -11,7 +11,7 @@ import Title from '../../title/Title';
 import { Typography } from '../propsValues/typography';
 
 import BottomSheet from './BottomSheet';
-import { withVariantConfig } from '../../../.storybook/helpers';
+import { allModes } from '../../../.storybook/modes';
 
 export default {
   component: BottomSheet,
@@ -67,7 +67,12 @@ export const Basic: Story = {
 
 export const BasicMobile: Story = {
   ...Basic,
-  ...withVariantConfig(['mobile'], Basic),
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
 };
 
 export const WithOverflowContent: Story = {
@@ -101,20 +106,41 @@ export const WithOverflowContent: Story = {
 
 export const WithOverflowContentMobile: Story = {
   ...WithOverflowContent,
-  ...withVariantConfig(['mobile'], WithOverflowContent),
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
 };
 
 export const WithOverflowContentDark: Story = {
   ...WithOverflowContent,
-  ...withVariantConfig(['dark'], WithOverflowContent),
+  parameters: {
+    variants: ['dark'],
+    chromatic: {
+      dark: allModes.dark,
+    },
+  },
 };
 
 export const WithOverflowContentDarkMobile: Story = {
   ...WithOverflowContent,
-  ...withVariantConfig(['dark', 'mobile'], WithOverflowContent),
+  parameters: {
+    variants: ['dark', 'mobile'],
+    chromatic: {
+      dark: allModes.dark,
+      mobile: allModes.largeMobile,
+    },
+  },
 };
 
 export const WithOverflowContentZoom400: Story = {
   ...WithOverflowContent,
-  ...withVariantConfig(['400%'], WithOverflowContent),
+  parameters: {
+    variants: ['400%'],
+    chromatic: {
+      '400%': allModes.zoom400,
+    },
+  },
 };

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

package/src/criticalBanner/CriticalCommsBanner.story.tsx

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

package/src/dateInput/DateInput.test.story.tsx

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

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 { withVariantConfig } from '../../.storybook/helpers';
+import { allModes } from '../../.storybook/modes';
 
 export default {
   component: DateLookup,
@@ -61,15 +61,13 @@ export const Basic: Story = {
 };
 export const Basic400Zoom: Story = {
   ...Basic,
-
-  ...withVariantConfig(['400%'], {
-    ...Basic,
-    parameters: {
-      chromatic: {
-        delay: 2000,
-      },
+  parameters: {
+    chromatic: {
+      delay: 2000,
+      zoom400: allModes.zoom400,
     },
-  }),
+    variants: ['400%'],
+  },
 };
 
 export const WithField: Story = {

package/src/dateLookup/monthCalendar/table/MonthCalendarTable.tsx

@@ -43,11 +43,7 @@ const MonthCalendarTable = ({
   };
 
   const isActive = (month: number) => {
-    return !!(
-      selectedDate &&
-      month === selectedDate.getMonth() &&
-      viewYear === selectedDate.getFullYear()
-    );
+    return !!(month === selectedDate?.getMonth() && viewYear === selectedDate.getFullYear());
   };
 
   const isThisMonth = (month: number) => {

package/src/dateLookup/yearCalendar/table/YearCalendarTable.tsx

@@ -43,7 +43,7 @@ const YearCalendarTable = ({
   };
 
   const isActive = (year: number) => {
-    return !!(selectedDate && year === selectedDate.getFullYear());
+    return !!(year === selectedDate?.getFullYear());
   };
 
   const isThisYear = (year: number) => {

package/src/header/Header.test.story.tsx

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

package/src/header/Header.tsx

@@ -100,7 +100,7 @@ const Header: FunctionComponent<HeaderProps> = React.forwardRef(
     useEffect(() => {
       if (as === 'legend' && internalRef.current) {
         const { parentElement } = internalRef.current;
-        if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {
+        if (parentElement?.tagName.toLowerCase() !== 'fieldset') {
           console.warn(
             'Legends should be the first child in a fieldset, and this is not possible when including an action',
           );

package/src/index.ts

@@ -36,6 +36,7 @@ export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
 export type { InlinePromptProps, ActionPromptProps } from './prompt';
+export type { InfoPromptProps, InfoPromptAction, InfoPromptMedia } from './prompt';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputProps } from './inputs/Input';
 export type { InputGroupProps } from './inputs/InputGroup';
@@ -171,7 +172,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, ActionPrompt } from './prompt';
+export { InfoPrompt, 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 { withVariantConfig } from '../../.storybook/helpers';
+import { allModes } from '../../.storybook/modes';
 
 const meta = {
   component: Info,
@@ -27,7 +27,13 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
-  ...withVariantConfig(['default', 'dark', 'rtl']),
+  parameters: {
+    variants: ['default', 'dark', 'rtl'],
+    chromatic: {
+      dark: allModes.dark,
+      rtl: allModes.rtl,
+    },
+  },
 };
 
 export const OpenedPopover = {
@@ -44,7 +50,12 @@ export const OpenedPopover = {
 
 export const OpenedPopoverMobile: Story = {
   ...OpenedPopover,
-  ...withVariantConfig(['mobile'], OpenedPopover),
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
 };
 
 export const OpenedModal = {
@@ -56,5 +67,10 @@ export const OpenedModal = {
 
 export const OpenedModalMobile: Story = {
   ...OpenedModal,
-  ...withVariantConfig(['mobile'], OpenedModal),
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
 };

package/src/inputs/Input.tsx

@@ -7,15 +7,14 @@ import { inputClassNameBase } from './_common';
 import { useInputAttributes } from './contexts';
 import { useInputPaddings } from './InputGroup';
 
-export interface InputProps
-  extends Merge<
-    React.ComponentPropsWithRef<'input'>,
-    {
-      size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;
-      shape?: 'rectangle' | 'pill';
-      'aria-invalid'?: boolean;
-    }
-  > {}
+export interface InputProps extends Merge<
+  React.ComponentPropsWithRef<'input'>,
+  {
+    size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;
+    shape?: 'rectangle' | 'pill';
+    'aria-invalid'?: boolean;
+  }
+> {}
 
 export const Input = forwardRef(function Input(
   { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,

package/src/inputs/SearchInput.tsx

@@ -7,15 +7,14 @@ import { Merge } from '../utils';
 import { Input } from './Input';
 import { InputGroup } from './InputGroup';
 
-export interface SearchInputProps
-  extends Merge<
-    React.ComponentPropsWithRef<'input'>,
-    {
-      size?: Size.SMALL | Size.MEDIUM;
-      shape?: 'rectangle' | 'pill';
-      'aria-invalid'?: boolean;
-    }
-  > {}
+export interface SearchInputProps extends Merge<
+  React.ComponentPropsWithRef<'input'>,
+  {
+    size?: Size.SMALL | Size.MEDIUM;
+    shape?: 'rectangle' | 'pill';
+    'aria-invalid'?: boolean;
+  }
+> {}
 
 export const SearchInput = forwardRef(function SearchInput(
   { shape = 'pill', size = Size.MEDIUM, disabled, className, ...restProps }: SearchInputProps,

package/src/inputs/TextArea.tsx

@@ -5,13 +5,12 @@ import { Merge } from '../utils';
 import { inputClassNameBase } from './_common';
 import { useInputAttributes } from './contexts';
 
-export interface TextAreaProps
-  extends Merge<
-    React.ComponentPropsWithRef<'textarea'>,
-    {
-      'aria-invalid'?: boolean;
-    }
-  > {}
+export interface TextAreaProps extends Merge<
+  React.ComponentPropsWithRef<'textarea'>,
+  {
+    'aria-invalid'?: boolean;
+  }
+> {}
 
 export const TextArea = forwardRef(function TextArea(
   { className, ...restProps }: TextAreaProps,

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 { withVariantConfig } from '../../../../.storybook/helpers';
+import { allModes } from '../../../../.storybook/modes';
 
 export default {
   component: ListItem,
@@ -16,7 +16,12 @@ export default {
 
 const Default = {
   ...VariantStory,
-  ...withVariantConfig(['bright-green'], VariantStory),
+  parameters: {
+    variants: ['bright-green'],
+    chromatic: {
+      'bright-green': allModes.brightGreen,
+    },
+  },
   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 { withVariantConfig } from '../../../../.storybook/helpers';
+import { allModes } from '../../../../.storybook/modes';
 
 export default {
   component: ListItem,
@@ -16,7 +16,12 @@ export default {
 
 const Default = {
   ...VariantStory,
-  ...withVariantConfig(['dark'], VariantStory),
+  parameters: {
+    variants: ['dark'],
+    chromatic: {
+      dark: allModes.dark,
+    },
+  },
   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 { withVariantConfig } from '../../../../.storybook/helpers';
+import { allModes } from '../../../../.storybook/modes';
 
 export default {
   component: ListItem,
@@ -16,7 +16,12 @@ export default {
 
 const Default = {
   ...VariantStory,
-  ...withVariantConfig(['forest-green'], VariantStory),
+  parameters: {
+    variants: ['forest-green'],
+    chromatic: {
+      forestGreen: allModes.forestGreen,
+    },
+  },
   args: { variant: 'forest-green' },
 };