@transferwise/components 46.102.0 → 46.103.1

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -29,21 +29,40 @@ export const Basic: Story = {
   },
 };
 
+/**
+ * The `indeterminate` state is predominantly visual and should match the [native HTML checkbox
+ * implementation](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate).
+ * It is used to indicate a mixed state, where some but not all items are selected, but does not
+ * change the `checked` state of the input itself – it remains either checked or unchecked.
+ *
+ * In the example below the 1st checkbox is unchecked and the 2nd checkbox is checked.
+ */
 export const Indeterminate: Story = {
   args: {
-    'aria-label': 'Group checkbox with indeterminate state',
     indeterminate: true,
   },
   render: (args) => {
-    const [indeterminate, setIndeterminate] = useState(true);
+    const [checked1, setChecked1] = useState<boolean | undefined>(false);
+    const [checked2, setChecked2] = useState<boolean | undefined>(true);
 
     return (
-      <CheckboxButton
-        {...args}
-        checked
-        indeterminate={indeterminate}
-        onChange={() => setIndeterminate(!indeterminate)}
-      />
+      <>
+        <CheckboxButton
+          {...args}
+          checked={checked1}
+          indeterminate={args.indeterminate}
+          aria-label="Initially disabled checkbox with indeterminate state"
+          onChange={() => setChecked1((current) => !current)}
+        />
+
+        <CheckboxButton
+          {...args}
+          checked={checked2}
+          indeterminate={args.indeterminate}
+          aria-label="Initially enabled checkbox with indeterminate state"
+          onChange={() => setChecked2((current) => !current)}
+        />
+      </>
     );
   },
 };

package/src/common/RadioButton/RadioButton.tsx

@@ -8,6 +8,8 @@ export interface RadioButtonProps<T extends string | number = string> {
   disabled?: boolean;
   value?: T;
   readOnly?: boolean;
+  className?: string;
+  'aria-describedby'?: string;
 }
 
 export default function RadioButton<T extends string | number = ''>({
@@ -18,17 +20,20 @@ export default function RadioButton<T extends string | number = ''>({
   onChange,
   disabled,
   readOnly,
+  className,
+  'aria-describedby': ariaDescribedBy,
 }: RadioButtonProps<T>) {
   return (
     <>
       <input
         type="radio"
-        className="sr-only"
+        className={clsx('sr-only', className)}
         id={id}
         value={value}
         name={name}
         checked={checked}
         disabled={disabled || readOnly}
+        aria-describedby={ariaDescribedBy}
         onChange={() => {
           if (!checked) {
             onChange?.(value);

package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx

@@ -6,7 +6,7 @@ import BottomSheet from '../../common/bottomSheet';
 import Option from '../../common/Option';
 import { Check, ChevronDown } from '@transferwise/icons';
 import { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';
-import { List } from '../../legacylistItem';
+import List from '../../list';
 
 export interface AnimatedLabelProps {
   activeLabel: number;

package/src/i18n/ja.json

@@ -45,7 +45,7 @@
   "neptune.Upload.csFailureText": "アップロードに失敗しました。もう一度やり直してください。",
   "neptune.Upload.csSuccessText": "アップロードが完了しました。",
   "neptune.Upload.csTooLargeMessage": "{maxSize}MB以下のファイルをアップロードしてください",
-  "neptune.Upload.csTooLargeNoLimitMessage": "より小さいファイルをご提供ください",
+  "neptune.Upload.csTooLargeNoLimitMessage": "より小さいファイルをアップロードしてください",
   "neptune.Upload.csWrongTypeMessage": "ファイルの種類はサポートされていません。別のファイルで再度お試しください",
   "neptune.Upload.psButtonText": "キャンセルする",
   "neptune.Upload.psProcessingText": "アップロードしています…",

package/src/i18n/pt.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Falha no envio. Por favor, tente novamente",
   "neptune.Upload.csSuccessText": "Envio concluído!",
   "neptune.Upload.csTooLargeMessage": "Por favor, envie um arquivo com menos de {maxSize}MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Forneça um arquivo menor",
   "neptune.Upload.csWrongTypeMessage": "Não trabalhamos com este tipo de arquivo. Por favor, tente novamente com um arquivo diferente",
   "neptune.Upload.psButtonText": "Cancelar",
   "neptune.Upload.psProcessingText": "Enviando...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Ou escolha um arquivo",
   "neptune.Upload.usDropMessage": "Arraste o arquivo para iniciar o envio",
   "neptune.Upload.usPlaceholder": "Selecione e envie um arquivo com menos de {maxSize}MB",
+  "neptune.Upload.usPlaceholderNoLimit": "Arraste e solte um arquivo",
   "neptune.UploadButton.allFileTypes": "Todos os tipos de arquivos",
   "neptune.UploadButton.dropFiles": "Arraste o arquivo para iniciar o envio",
   "neptune.UploadButton.instructions": "{fileTypes}, com menos de {size}MB",

package/src/iconButton/IconButton.story.tsx

@@ -91,7 +91,7 @@ export const Basic: Story = {
           gridTemplate: `auto auto / repeat(6, min-content)`,
         }}
       >
-        {['Primary', 'Secondary', 'Tertiary', 'Text', 'Neg primary', 'Neg secondary'].map(
+        {['Primary', 'Secondary', 'Tertiary', 'Minimal', 'Neg primary', 'Neg secondary'].map(
           (variant) => (
             <Body type="body-default-bold">{variant}</Body>
           ),

package/src/iconButton/IconButton.tsx

@@ -12,7 +12,7 @@ export type Props = {
   Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &
   Pick<
     HTMLAttributes<HTMLDivElement>,
-    'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'
+    'id' | 'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'
   >;
 
 const IconButton = forwardRef(function IconButton(

package/src/image/Image.tsx

@@ -10,6 +10,9 @@ export interface ImageProps {
   onLoad?: () => void;
   onError?: () => void;
   className?: string;
+  /**
+   * Specifies the [loading behavior of the image](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading).
+   */
   loading?: 'lazy' | 'eager';
   stretch?: boolean;
   role?: string;

package/src/image/index.ts

@@ -1 +1,2 @@
+export type { ImageProps } from './Image';
 export { default } from './Image';

package/src/index.ts

@@ -50,7 +50,7 @@ export type {
 export type { TextAreaProps } from './inputs/TextArea';
 export type { InstructionsListProps } from './instructionsList';
 export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './label/Label';
-export type { ListProps, LegacyListItemProps } from './legacylistItem';
+export type { LegacyListItemProps } from './legacylistItem';
 export type { LoaderProps } from './loader';
 export type { MarkdownProps } from './markdown';
 export type { ModalProps } from './modal';
@@ -108,6 +108,7 @@ export type {
   TableCellStatus,
   TableCellType,
 } from './table';
+export type { ListProps } from './list';
 
 /**
  * Components
@@ -165,7 +166,7 @@ export { TextArea } from './inputs/TextArea';
 export { default as InstructionsList } from './instructionsList';
 export { Label } from './label/Label';
 export { default as Link } from './link';
-export { List, default as LegacyListItem } from './legacylistItem';
+export { default as LegacyListItem } from './legacylistItem';
 export { default as Loader } from './loader';
 export { default as Logo } from './logo';
 export { default as Markdown } from './markdown';
@@ -209,6 +210,7 @@ export { default as Typeahead } from './typeahead';
 export { default as Upload } from './upload';
 export { default as UploadInput } from './uploadInput';
 export { default as Table } from './table';
+export { default as List } from './list';
 
 /**
  * Hooks

package/src/legacylistItem/LegacyListItem.story.tsx

@@ -2,11 +2,11 @@ import { action } from 'storybook/actions';
 import { Documents, FastFlag } from '@transferwise/icons';
 import { ComponentProps } from 'react';
 
-import { Button, IconButton } from '..';
+import { Button, IconButton, List } from '..';
 import AvatarView from '../avatarView';
 import Info from '../info';
 import Title from '../title/Title';
-import LegacyListItem, { List } from '.';
+import LegacyListItem from '.';
 
 export default {
   component: LegacyListItem,

package/src/legacylistItem/LegacyListItem.tests.story.tsx

@@ -1,7 +1,8 @@
 import { FastFlag } from '@transferwise/icons';
 import Button from '../button';
 import AvatarView from '../avatarView';
-import LegacyListItem, { List, type LegacyListItemProps } from '.';
+import LegacyListItem, { type LegacyListItemProps } from '.';
+import List from '../list';
 
 export default {
   component: LegacyListItem,

package/src/legacylistItem/index.ts

@@ -1,4 +1,2 @@
-export { List } from './List';
-export type { ListProps } from './List';
 export { default } from './LegacyListItem';
 export type { LegacyListItemProps } from './LegacyListItem';

package/src/list/List.spec.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '../test-utils';
+import List from './List';
+
+describe('List', () => {
+  it('should render content', () => {
+    render(
+      <List>
+        <li>Item 1</li>
+        <li>Item 2</li>
+      </List>,
+    );
+
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+  });
+
+  describe('`as` prop', () => {
+    it('renders `ul` by default', () => {
+      render(<List>Content</List>);
+      expect(screen.getByRole('list')).toBeInstanceOf(HTMLUListElement);
+    });
+
+    it('renders as `ol`', () => {
+      render(<List as="ol">Content</List>);
+      expect(screen.getByRole('list')).toBeInstanceOf(HTMLOListElement);
+    });
+
+    it('renders as `ul`', () => {
+      render(<List as="ul">Content</List>);
+      expect(screen.getByRole('list')).toBeInstanceOf(HTMLUListElement);
+    });
+
+    it('renders as `div`', () => {
+      render(
+        <List as="div" data-testid="list">
+          Content
+        </List>,
+      );
+      expect(screen.getByTestId('list')).toBeInstanceOf(HTMLDivElement);
+    });
+  });
+
+  it('accepts custom classname', () => {
+    render(<List className="custom-class">Content</List>);
+    expect(screen.getByRole('list')).toHaveClass('custom-class');
+  });
+
+  it('accepts CSS style', () => {
+    render(<List style={{ color: 'red' }}>Content</List>);
+    expect(screen.getByRole('list')).toHaveStyle({ color: 'red' });
+  });
+});

package/src/list/List.story.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import LegacyListItem from '../legacylistItem';
+import List from './List';
+
+export default {
+  component: List,
+  title: 'Content/List',
+  tags: ['autodocs'],
+} satisfies Meta<typeof List>;
+
+type Story = StoryObj<typeof List>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <List {...args}>
+      <LegacyListItem title="First item" value="This is the first item." />
+      <LegacyListItem title="Second item" value="This is the second item." />
+    </List>
+  ),
+};

package/src/list/List.tsx

@@ -0,0 +1,15 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+export interface ListProps {
+  as?: 'ul' | 'ol' | 'div';
+  className?: string;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  id?: string;
+  [key: `data-${string}`]: string | number | boolean | undefined;
+}
+
+export default function List({ as: Element = 'ul', className, ...props }: ListProps) {
+  return <Element className={clsx('wds-list', 'list-unstyled', className)} {...props} />;
+}

package/src/list/index.ts

@@ -0,0 +1,2 @@
+export type { ListProps } from './List';
+export { default } from './List';

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;

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