@transferwise/components 0.0.0-experimental-29d0f94 → 0.0.0-experimental-4b1de0a

package/src/main.less

@@ -39,6 +39,7 @@
 @import "./image/Image.less";
 @import "./info/Info.less";
 @import "./inputs/Input.less";
+@import "./listItem/ListItem.less";
 @import "./field/Field.less";
 @import "./inputs/InputGroup.less";
 @import "./inputs/SelectInput.less";

package/src/switch/Switch.tsx

@@ -12,13 +12,15 @@ export type SwitchProps = CommonProps & {
   'aria-label'?: string;
   /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */
   'aria-labelledby'?: string;
+  /** Identifies the element(s) that describes the element on which the attribute is set */
+  'aria-describedby'?: string;
   /** Whether the switch is checked or not */
   checked?: boolean;
   disabled?: boolean;
   /** ID to apply to the switch container */
   id?: string;
   /** Function called when the switch is toggled */
-  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;
+  onClick: (event?: MouseEvent<HTMLButtonElement>) => void;
 };
 
 const Switch = (props: SwitchProps) => {
@@ -30,6 +32,7 @@ const Switch = (props: SwitchProps) => {
     id = inputAttributes.id,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledbyProp,
+    'aria-describedby': ariaDescribedbyProp,
     onClick,
     disabled,
   } = props;
@@ -55,6 +58,7 @@ const Switch = (props: SwitchProps) => {
       aria-checked={checked}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
+      aria-describedby={ariaDescribedbyProp}
       disabled={disabled}
       onClick={!disabled ? onClick : undefined}
     >

package/src/test-utils/assets/placeholder-landscape.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 400 288"><rect width="394" height="282" x="3" y="3" fill="#9FE870" stroke="#163300" stroke-width="6" rx="29"/><path fill="#163300" stroke="#163300" stroke-width="2" d="m271 74-50 138h-26l41-115v-1h-57l1 2 12 20-18 21-2 2h31l-7 20h-67l38-45 1-2h-2l-22-40h127Z"/></svg>

package/src/test-utils/assets/placeholder-portrait.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 288 400"><rect width="282" height="394" x="3" y="3" fill="#9FE870" stroke="#163300" stroke-width="6" rx="29"/><path fill="#163300" stroke="#163300" stroke-width="2" d="m216 131-49 137h-27l41-114 1-2h-57l1 2 12 20-19 21-1 2h31l-7 20H74l38-45 2-1h-2l-23-40h127Z"/></svg>

package/src/test-utils/Parameters.d.ts

@@ -1,77 +0,0 @@
-declare module '@storybook/react' {
-  interface Parameters {
-    /** Prefer using `storyConfig` for configuring variants */
-    variants?: (
-      | 'default'
-      | 'light'
-      | 'dark'
-      | 'bright-green'
-      | 'forest-green'
-      | 'rtl'
-      | (string & Record<string, unknown>)
-    )[];
-    /** Used by Chromatic */
-    chromatic?: ChromaticParameters;
-    viewport?: {
-      viewports?: Record<string, unknown>;
-      defaultViewport?: string;
-    };
-  }
-}
-
-/**
- * Derived from Chromatic's config type definitions
- *
- * @see https://github.com/chromaui/chromatic-cli/blob/main/storybook-addon.d.ts
- */
-export interface ChromaticParameters {
-  /**
-   * Prefer using `storyConfig` for configuring viewports if possible.
-   *
-   * To set a viewport, specify one or more screen widths to the
-   * `chromatic.viewports` parameter. When left unspecified, Chromatic
-   * uses a default value of `[1200]`. Use `[414]` for 'Large mobile'
-   * viewport width.
-   *
-   * @default [1200]
-   */
-  viewports?: [414] | [414, 1200];
-
-  /**
-   * You can omit stories entirely from Chromatic testing using the disable story parameter.
-   */
-  disable?: boolean;
-
-  /**
-   * Chromatic will pause CSS animations and reset them to their beginning state.
-   *
-   * Some animations are used to "animate in" visible elements. To specify that Chromatic should pause the
-   * animation at the end, use the `pauseAnimationAtEnd` story parameter.
-   */
-  pauseAnimationAtEnd?: boolean;
-
-  /**
-   * Use story-level delay to ensure a minimum amount of time (in milliseconds) has passed before Chromatic takes a
-   * screenshot.
-   */
-  delay?: number;
-
-  /**
-   * The diffThreshold parameter allows you to fine tune the threshold for visual change between snapshots before
-   * they’re flagged by Chromatic. Sometimes you need assurance to the sub-pixel and other times you want to skip
-   * visual noise generated by non-deterministic rendering such as anti-aliasing.
-   *
-   * 0 is the most accurate. 1 is the least accurate.
-   *
-   * @default 0.063
-   */
-  diffThreshold?: number;
-
-  /**
-   * Modes for Chromatic testing.
-   *
-   * Specify the mode in which Chromatic should run tests. For example, 'light' for light mode,
-   * 'dark' for dark mode, or `rtl` for right to left content.
-   */
-  modes?: object;
-}