@transferwise/components 46.101.0 → 46.103.0

package/src/main.css

@@ -454,7 +454,8 @@
   right: 0;
 }
 .np-avatar-view .np-avatar-view-content {
-  color: var(--color-interactive-primary);
+  color: #37517e;
+  color: var(--color-content-primary);
 }
 .np-avatar-view-interactive {
   cursor: pointer;
@@ -462,6 +463,7 @@
 .np-avatar-view-interactive .np-circle {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  color: var(--color-interactive-primary);
 }
 .np-avatar-view-non-interactive .np-circle {
   background-color: transparent;
@@ -739,7 +741,7 @@
   justify-content: center;
   vertical-align: middle;
   text-align: center;
-  white-space: nowrap;
+  white-space: normal;
   word-wrap: break-word;
   -webkit-appearance: none;
      -moz-appearance: none;

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;
@@ -52,9 +55,10 @@ const Switch = (props: SwitchProps) => {
       role="switch"
       {...inputAttributes}
       id={id}
-      aria-checked={checked}
+      aria-checked={Boolean(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/build/legacylistItem/List.js

@@ -1,17 +0,0 @@
-'use strict';
-
-var clsx = require('clsx');
-var jsxRuntime = require('react/jsx-runtime');
-
-function List({
-  className,
-  children
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx("ul", {
-    className: clsx.clsx(className, 'list-unstyled'),
-    children: children
-  });
-}
-
-exports.List = List;
-//# sourceMappingURL=List.js.map

package/build/legacylistItem/List.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.js","sources":["../../src/legacylistItem/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface ListProps {\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function List({ className, children }: ListProps) {\n  return <ul className={clsx(className, 'list-unstyled')}>{children}</ul>;\n}\n"],"names":["List","className","children","_jsx","clsx"],"mappings":";;;;;SAOgBA,IAAIA,CAAC;EAAEC,SAAS;AAAEC,EAAAA;AAAQ,CAAa,EAAA;AACrD,EAAA,oBAAOC,cAAA,CAAA,IAAA,EAAA;AAAIF,IAAAA,SAAS,EAAEG,SAAI,CAACH,SAAS,EAAE,eAAe,CAAE;AAAAC,IAAAA,QAAA,EAAEA;AAAQ,GAAK,CAAC;AACzE;;;;"}

package/build/legacylistItem/List.mjs

@@ -1,15 +0,0 @@
-import { clsx } from 'clsx';
-import { jsx } from 'react/jsx-runtime';
-
-function List({
-  className,
-  children
-}) {
-  return /*#__PURE__*/jsx("ul", {
-    className: clsx(className, 'list-unstyled'),
-    children: children
-  });
-}
-
-export { List };
-//# sourceMappingURL=List.mjs.map

package/build/legacylistItem/List.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.mjs","sources":["../../src/legacylistItem/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface ListProps {\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function List({ className, children }: ListProps) {\n  return <ul className={clsx(className, 'list-unstyled')}>{children}</ul>;\n}\n"],"names":["List","className","children","_jsx","clsx"],"mappings":";;;SAOgBA,IAAIA,CAAC;EAAEC,SAAS;AAAEC,EAAAA;AAAQ,CAAa,EAAA;AACrD,EAAA,oBAAOC,GAAA,CAAA,IAAA,EAAA;AAAIF,IAAAA,SAAS,EAAEG,IAAI,CAACH,SAAS,EAAE,eAAe,CAAE;AAAAC,IAAAA,QAAA,EAAEA;AAAQ,GAAK,CAAC;AACzE;;;;"}

package/build/types/legacylistItem/List.d.ts

@@ -1,6 +0,0 @@
-export interface ListProps {
-    className?: string;
-    children?: React.ReactNode;
-}
-export declare function List({ className, children }: ListProps): import("react").JSX.Element;
-//# sourceMappingURL=List.d.ts.map

package/build/types/legacylistItem/List.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/legacylistItem/List.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,SAAS;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,SAAS,+BAEtD"}

package/src/legacylistItem/List.tsx

@@ -1,10 +0,0 @@
-import { clsx } from 'clsx';
-
-export interface ListProps {
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export function List({ className, children }: ListProps) {
-  return <ul className={clsx(className, 'list-unstyled')}>{children}</ul>;
-}

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