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

package/src/slidingPanel/SlidingPanel.tsx

@@ -6,8 +6,10 @@ import { Position } from '../common';
 
 export const EXIT_ANIMATION = 350;
 
-export interface SlidingPanelProps
-  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {
+export interface SlidingPanelProps extends Pick<
+  React.ComponentPropsWithRef<'div'>,
+  'ref' | 'className' | 'children'
+> {
   position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;
   open: boolean;
   showSlidingPanelBorder?: boolean;

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

package/src/ssr.test.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: [],

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

package/src/table/TableCell.tsx

@@ -27,9 +27,7 @@ export interface TableCellMedia extends TableCellTypeProp, TableCellTextProps {
 }
 
 export interface TableCellLeading
-  extends TableCellTypeProp,
-    TableCellTextProps,
-    TableCellStatusProp {
+  extends TableCellTypeProp, TableCellTextProps, TableCellStatusProp {
   avatar?: Pick<AvatarViewProps, 'badge' | 'imgSrc' | 'profileName' | 'profileType'> & {
     asset?: AvatarViewProps['children'];
     /** @deprecated Use `"imgSrc" instead. */

package/src/tabs/Tabs.tsx

@@ -353,7 +353,7 @@ export default class Tabs extends Component<TabsProps, TabsState> {
   };
 
   onKeyDown = (index: number) => (event: React.KeyboardEvent<HTMLLIElement>) => {
-    if (event && event.key === 'Enter') {
+    if (event?.key === 'Enter') {
       this.switchTab(index);
     }
   };

package/src/tooltip/Tooltip.story.tsx

@@ -4,7 +4,7 @@ import { userEvent, within } from 'storybook/test';
 import Button from '../button';
 
 import Tooltip from './Tooltip';
-import { withVariantConfig } from '../../.storybook/helpers';
+import { allModes } from '../../.storybook/modes';
 
 export default {
   component: Tooltip,
@@ -40,5 +40,10 @@ export const OpenedTooltip: Story = {
 
 export const OpenedTooltipDark: Story = {
   ...OpenedTooltip,
-  ...withVariantConfig(['dark'], OpenedTooltip),
+  parameters: {
+    variants: ['dark'],
+    chromatic: {
+      dark: allModes.dark,
+    },
+  },
 };

package/src/uploadInput/UploadInput.tsx

@@ -435,7 +435,7 @@ const UploadInput = ({
                 if (
                   el &&
                   el.id !== markedFileForDelete?.id &&
-                  !fileRefs.some((ref) => ref && ref.id === el.id) &&
+                  !fileRefs.some((ref) => ref?.id === el.id) &&
                   el.status !== 'processing'
                 ) {
                   fileRefs.push(el);

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -36,20 +36,19 @@ interface WithDisplayFormatState {
   selectionEnd: number;
 }
 
-export interface WithDisplayFormatProps<T extends TextElementProps = TextElementProps>
-  extends Pick<
-    TextElementProps,
-    | 'className'
-    | 'disabled'
-    | 'id'
-    | 'maxLength'
-    | 'minLength'
-    | 'name'
-    | 'placeholder'
-    | 'readOnly'
-    | 'required'
-    | 'inputMode'
-  > {
+export interface WithDisplayFormatProps<T extends TextElementProps = TextElementProps> extends Pick<
+  TextElementProps,
+  | 'className'
+  | 'disabled'
+  | 'id'
+  | 'maxLength'
+  | 'minLength'
+  | 'name'
+  | 'placeholder'
+  | 'readOnly'
+  | 'required'
+  | 'inputMode'
+> {
   value?: string;
   displayPattern: string;
   /**