@transferwise/components 46.99.0 → 46.100.1

package/src/accordion/Accordion.story.tsx

@@ -1,11 +1,13 @@
+import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import { FastFlag as FastFlagIcon } from '@transferwise/icons';
+import { FastFlag as FastFlagIcon, CardWise as CardWiseIcon } from '@transferwise/icons';
 
 import { Scroll, Size } from '../common';
 import Modal from '../modal';
 import { lorem10, lorem40 } from '../test-utils';
 
 import Accordion from './Accordion';
+import Button from '../button/Button';
 
 /**
  * Metadata for the Accordion component story.
@@ -20,7 +22,6 @@ const meta: Meta<typeof Accordion> = {
           'A simple accordion component that displays a list of items that can be expanded or collapsed.',
       },
     },
-    tags: ['autodocs'],
   },
   args: {
     items: [
@@ -53,6 +54,34 @@ const meta: Meta<typeof Accordion> = {
         id: 'Item 5',
         icon: <FastFlagIcon size={24} />,
       },
+      {
+        title: 'Item 6',
+        subtitle: 'Sixth item',
+        content: lorem10,
+        id: 'Item 6',
+        icon: <CardWiseIcon size={24} />,
+        media: (
+          <img
+            src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
+            alt=""
+          />
+        ),
+      },
+      {
+        title: 'Item 7',
+        subtitle: 'Seventh item',
+        content: lorem10,
+        id: 'Item 7',
+        media: (
+          <img
+            src="https://wise.com/public-resources/assets/spend/card/asset//digital_card_2023.png"
+            alt=""
+          />
+        ),
+        showMediaAtAllSizes: false,
+        showMediaCircle: false,
+        isContainerAligned: false,
+      },
     ],
   },
 };
@@ -81,6 +110,7 @@ export const Multiple: Story = {
         <Accordion {...args} items={[items[0]]} />
         <Accordion {...args} items={[items[0]]} indexOpen={0} />
         <Accordion {...args} items={items} />
+        <Accordion {...args} items={[items[6]]} indexOpen={0} />
       </>
     );
   },
@@ -104,28 +134,36 @@ export const WithinModal: Story = {
       delay: 1000,
     },
   },
-  render: (args) => {
+  render: (args, { viewMode }) => {
+    // Modal is open by default unless in docs view
+    const [open, setOpen] = useState(viewMode !== 'docs');
     const { items } = args;
+
     return (
-      <Modal
-        body={
-          <div className="p-a-1">
-            <h3 className="m-t-2 m-b-4 text-xs-center">Large transfer tips</h3>
-            <Accordion {...args} items={[items[0]]} />
-            <Accordion {...args} items={[items[0]]} indexOpen={0} />
-            <Accordion {...args} items={items} />
-          </div>
-        }
-        scroll={Scroll.CONTENT}
-        size={Size.LARGE}
-        open
-        footer={
-          <div className="p-a-3 text-xs-center">
-            <a href="/large-amounts">Learn more</a>
-          </div>
-        }
-        onClose={() => {}}
-      />
+      <>
+        <Button v2 onClick={() => setOpen(true)}>
+          Open Modal
+        </Button>
+        <Modal
+          body={
+            <div className="p-a-1">
+              <h3 className="m-t-2 m-b-4 text-xs-center">Large transfer tips</h3>
+              <Accordion {...args} items={[items[0]]} />
+              <Accordion {...args} items={[items[0]]} indexOpen={0} />
+              <Accordion {...args} items={items} />
+            </div>
+          }
+          scroll={Scroll.CONTENT}
+          size={Size.LARGE}
+          open={open}
+          footer={
+            <div className="p-a-3 text-xs-center">
+              <a href="/large-amounts">Learn more</a>
+            </div>
+          }
+          onClose={() => setOpen(false)}
+        />
+      </>
     );
   },
 };

package/src/accordion/Accordion.tsx

@@ -2,10 +2,7 @@ import { useState, FC } from 'react';
 
 import AccordionItem, { AccordionItemProps } from './AccordionItem';
 
-export type AccordionItem = Pick<
-  AccordionItemProps,
-  'id' | 'title' | 'subtitle' | 'content' | 'icon'
->;
+export type AccordionItem = Omit<AccordionItemProps, 'onClick' | 'open' | 'theme'>;
 
 export interface AccordionProps {
   /** The index of the item that should be open by default. */
@@ -89,6 +86,10 @@ const Accordion: FC<AccordionProps> = ({ indexOpen = -1, items, onClick, theme =
           subtitle={item.subtitle}
           content={item.content}
           icon={item.icon}
+          media={item.media}
+          showMediaAtAllSizes={item.showMediaAtAllSizes}
+          showMediaCircle={item.showMediaCircle}
+          isContainerAligned={item.isContainerAligned}
           onClick={() => handleOnClick(index)}
         />
       ))}

package/src/accordion/AccordionItem/AccordionItem.tsx

@@ -24,6 +24,14 @@ export interface AccordionItemProps {
   open: boolean;
   /** An optional icon to display next to the accordion item title. */
   icon?: ReactNode;
+  /** An optional media element to display next to the accordion item title. */
+  media?: ReactNode;
+  /** An optional showMediaAtAllSizes with media available at all sizes of the screen. */
+  showMediaAtAllSizes?: boolean;
+  /** An optional showMediaCircle to display media within the circle. */
+  showMediaCircle?: boolean;
+  /** An optional isContainerAligned to display media aligned with the container. */
+  isContainerAligned?: boolean;
   /** @deprecated ... */
   theme?: 'light' | 'dark';
 }
@@ -42,6 +50,10 @@ export interface AccordionItemProps {
  * @param {Function} onClick - A callback function that is called when the accordion item is clicked.
  * @param {boolean} open - Whether the accordion item is currently open or closed.
  * @param {ReactNode} [icon] - An optional icon to display next to the accordion item title.
+ * @param {ReactNode} [media] - An optional media to display next to the accordion item.
+ * @param {boolean} [showMediaAtAllSizes] - An optional showMediaAtAllSizes with media available at all sizes of the screen.
+ * @param {boolean} [showMediaCircle] - An optional showMediaCircle to display media within the circle.
+ * @param {boolean} [isContainerAligned] - An optional isContainerAligned to display media aligned with the container.
  * @example
  * // Example usage:
  *
@@ -72,25 +84,31 @@ const AccordionItem: FC<AccordionItemProps> = ({
   onClick,
   open,
   icon,
+  media,
+  showMediaAtAllSizes,
+  showMediaCircle,
+  isContainerAligned,
   theme = 'light',
 }) => {
-  const iconElement = icon
+  const mediaElement = icon
     ? cloneElement(icon as React.ReactElement<IdIconProps>, { size: 24 })
-    : null;
+    : media;
   const fallbackId = useId();
   const accordionId = id ?? fallbackId;
 
   return (
     <div
       id={accordionId}
-      className={clsx('np-accordion-item', iconElement ? 'np-accordion-item--with-icon' : null, {
+      className={clsx('np-accordion-item', {
         'np-accordion-item--open': open,
+        'np-accordion-item--with-icon': Boolean(icon),
+        'np-accordion-item--with-media': Boolean(media),
       })}
     >
       <Option
         aria-label={ariaLabel}
         as="button"
-        media={iconElement}
+        media={mediaElement}
         title={title}
         content={subtitle}
         button={<Chevron orientation={open ? Position.TOP : Position.BOTTOM} size={Size.MEDIUM} />}
@@ -98,6 +116,9 @@ const AccordionItem: FC<AccordionItemProps> = ({
         aria-expanded={open}
         aria-controls={`${accordionId}-section`}
         id={`${accordionId}-control`}
+        showMediaCircle={showMediaCircle}
+        showMediaAtAllSizes={showMediaAtAllSizes}
+        isContainerAligned={isContainerAligned}
         onClick={onClick}
       />
       {open && (

package/src/actionButton/ActionButton.story.tsx

@@ -13,7 +13,6 @@ import ActionButton from './ActionButton';
 export default {
   component: ActionButton,
   title: 'Actions/ActionButton (Deprecated)',
-  tags: ['autodocs'],
 } satisfies Meta<typeof ActionButton>;
 
 type Story = StoryObj<typeof ActionButton>;

package/src/actionOption/ActionOption.story.tsx

@@ -18,7 +18,6 @@ export default {
     additionalContent:
       'Additional content goes here, this content does not align with the logo and button',
   },
-  tags: ['autodocs'],
 } satisfies Meta<typeof ActionOption>;
 
 type Story = StoryObj<typeof ActionOption>;

package/src/alert/Alert.story.tsx

@@ -38,7 +38,7 @@ export default {
       },
     },
   },
-  tags: ['autodocs'],
+
   parameters: {
     docs: {
       toc: true,

package/src/avatar/Avatar.spec.tsx

@@ -35,11 +35,14 @@ describe('Avatar', () => {
   });
 
   describe('branded avatar colors', () => {
-    it.each(avatarColorTestCases)('for seed of %s return background color of %s', (item) => {
-      render(<Avatar backgroundColorSeed={item.key.toString()}>JS</Avatar>);
+    it.each(avatarColorTestCases)(
+      'for seed of $key return background color of `$color.token`',
+      (item) => {
+        render(<Avatar backgroundColorSeed={item.key.toString()}>JS</Avatar>);
 
-      expect(screen.getByText('JS')).toHaveStyle(`background-color: ${item.color.token}`);
-    });
+        expect(screen.getByText('JS')).toHaveStyle(`background-color: var(${item.color.token})`);
+      },
+    );
   });
 
   it('adds aria-label to component if it is passed in', () => {

package/src/avatar/Avatar.story.tsx

@@ -13,7 +13,6 @@ import Avatar, { AvatarType } from '.';
 export default {
   component: Avatar,
   title: 'Content/Avatar (Deprecated)',
-  tags: ['autodocs'],
 } satisfies Meta<typeof Avatar>;
 
 type Story = StoryObj<typeof Avatar>;

package/src/avatarLayout/AvatarLayout.story.tsx

@@ -14,7 +14,6 @@ type Story = StoryObj<typeof AvatarLayout>;
 const sizes: AvatarLayoutProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
 
 export const Diagonal: Story = {
-  tags: ['autodocs'],
   render: () => (
     <div
       style={{
@@ -98,7 +97,6 @@ export const Diagonal: Story = {
 };
 
 export const Horizontal: Story = {
-  tags: ['autodocs'],
   render: () => (
     <div
       style={{
@@ -182,7 +180,6 @@ export const Horizontal: Story = {
 };
 
 export const EdgeInstances: Story = {
-  tags: ['autodocs'],
   render: () => (
     <div
       style={{

package/src/avatarView/AvatarView.story.tsx

@@ -35,7 +35,6 @@ const profileName2 = 'Tyler Durden';
 const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
 
 export const Selected: Story = {
-  tags: ['autodocs'],
   render: () => {
     return (
       <div
@@ -69,7 +68,6 @@ export const Selected: Story = {
 };
 
 export const Notification: Story = {
-  tags: ['autodocs'],
   render: () => (
     <div
       style={{
@@ -106,7 +104,6 @@ export const Notification: Story = {
 };
 
 export const Badge: Story = {
-  tags: ['autodocs'],
   render: () => {
     const currencies = ['USD', 'EUR', 'GBP', 'AUD', 'CAD', 'JPY', 'CNY'];
     const icons = [
@@ -250,7 +247,6 @@ export const Badge: Story = {
 };
 
 export const Images: Story = {
-  tags: ['autodocs'],
   render: () => {
     return (
       <div
@@ -305,7 +301,6 @@ export const Images: Story = {
 };
 
 export const Profiles: Story = {
-  tags: ['autodocs'],
   render: () => {
     return (
       <div
@@ -388,7 +383,6 @@ export const ProfileBrokenImageFallback: Story = {
 };
 
 export const EdgeInstaces: Story = {
-  tags: ['autodocs'],
   render: () => {
     const css = `.custom-variant {
       border: 1px dashed var(--color-border-neutral);

package/src/avatarWrapper/AvatarWrapper.story.tsx

@@ -8,7 +8,6 @@ import AvatarWrapper from './AvatarWrapper';
  * @deprecated use **`AvatarView`** components instead
  */
 export default {
-  tags: ['autodocs'],
   component: AvatarWrapper,
   title: 'Content/AvatarWrapper (Deprecated)',
 } satisfies Meta<typeof AvatarWrapper>;

package/src/badge/Badge.story.tsx

@@ -9,7 +9,6 @@ import Badge from './Badge';
  * @deprecated use **`<AvatarView badge={..} />`** components instead
  */
 export default {
-  tags: ['autodocs'],
   component: Badge,
   title: 'Content/Badge (Deprecated)',
   excludeStories: ['ExampleBadgeCss'],

package/src/body/Body.story.tsx

@@ -6,7 +6,6 @@ import Body from './Body';
 export default {
   title: 'Typography/Body',
   component: Body,
-  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/button/Button.story.tsx

@@ -272,7 +272,7 @@ const meta: Meta<typeof Button> = {
     children: 'Button text',
     onClick: fn(),
   },
-  tags: ['autodocs'],
+
   decorators: [withContainer],
   parameters: {
     docs: {

package/src/button/LegacyButton.story.tsx

@@ -85,7 +85,7 @@ const meta: Meta<typeof LegacyButton> = {
       },
     },
   },
-  tags: ['autodocs'],
+
   decorators: [withContainer],
 };
 

package/src/card/Card.story.tsx

@@ -22,7 +22,6 @@ const meta: Meta<typeof Card> = {
     onClick: fn(),
     as: 'div',
   },
-  tags: ['autodocs'],
 };
 
 export default meta;

package/src/checkbox/Checkbox.story.tsx

@@ -13,7 +13,6 @@ const meta: Meta<typeof Checkbox> = {
     label: 'This is the label',
     onChange: fn(),
   },
-  tags: ['autodocs'],
 };
 export default meta;
 

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -7,7 +7,7 @@ import CheckboxButton from './CheckboxButton';
 export default {
   component: CheckboxButton,
   title: 'Actions/CheckboxButton',
-  tags: ['autodocs'],
+
   args: {
     disabled: false,
     onBlur: action('blur'),

package/src/checkboxOption/CheckboxOption.story.tsx

@@ -11,7 +11,6 @@ import CheckboxOption from './CheckboxOption';
 const meta: Meta<typeof CheckboxOption> = {
   component: CheckboxOption,
   title: 'Option/CheckboxOption',
-  tags: ['autodocs'],
 };
 
 export default meta;

package/src/chevron/Chevron.story.tsx

@@ -5,7 +5,6 @@ import Chevron from './Chevron';
 export default {
   component: Chevron,
   title: 'Other/Chevron',
-  tags: ['autodocs'],
 } satisfies Meta<typeof Chevron>;
 
 type Story = StoryObj<typeof Chevron>;

package/src/chips/Chips.story.tsx

@@ -6,7 +6,6 @@ import Chips, { ChipsProps, ChipValue } from './Chips';
 const meta: Meta<typeof Chips> = {
   title: 'Actions/Chips',
   component: Chips,
-  tags: ['autodocs'],
 };
 export default meta;
 

package/src/circularButton/CircularButton.story.tsx

@@ -11,7 +11,7 @@ import Body from '../body';
 export default {
   component: CircularButton,
   title: 'Actions/CircularButton',
-  tags: ['autodocs'],
+
   args: {
     children: 'Button text',
     icon: <Icons.Freeze />,

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

@@ -16,13 +16,14 @@ export default {
   component: BottomSheet,
   title: 'Dialogs/BottomSheet',
   args: {
-    open: true,
+    open: false,
   },
-  render: (args) => {
-    const [open, setOpen] = useState(args.open);
+
+  render: (args, { viewMode }) => {
+    const [open, setOpen] = useState(viewMode !== 'docs');
 
     return (
-      <div style={{ height: '2000px' }}>
+      <div>
         <Button onClick={() => setOpen(true)}>Open BottomSheet</Button>
         <BottomSheet
           {...args}

package/src/common/card/Card.story.tsx

@@ -9,7 +9,6 @@ import Card from '.';
 const meta: Meta<typeof Card> = {
   component: Card,
   title: 'Internal/Card',
-  tags: ['autodocs'],
 };
 
 export default meta;

package/src/common/circle/Circle.story.tsx

@@ -14,7 +14,6 @@ export default {
 type Story = StoryObj<typeof Circle>;
 
 export const Basic: Story = {
-  tags: ['autodocs'],
   args: {
     children: 'NP',
     size: 40,

package/src/common/locale/index.spec.ts

@@ -31,7 +31,7 @@ describe('locale utils', () => {
       ['ar-dz', null],
       ['ar-iq', null],
       ['zh-tw', 'zh'],
-      ['nl-nl', null],
+      ['nl-nl', 'nl'],
     ])('locale "%s" -> language "%s"', (locale, expectedValue) => {
       expect(getLangFromLocale(locale)).toBe(expectedValue);
     });

package/src/common/locale/index.ts

@@ -13,6 +13,7 @@ export const RTL_LANGUAGES = ['ar', 'he'];
  */
 export const SUPPORTED_LANGUAGES = [
   DEFAULT_LANG,
+  'cs',
   'de',
   'es',
   'fr',
@@ -20,6 +21,7 @@ export const SUPPORTED_LANGUAGES = [
   'id',
   'it',
   'ja',
+  'nl',
   'pl',
   'pt',
   'ro',

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -6,7 +6,6 @@ import { storyConfig } from '../test-utils';
 export default {
   component: CriticalCommsBanner,
   title: 'Feedback/CriticalCommsBanner',
-  tags: ['autodocs'],
 } satisfies Meta<typeof CriticalCommsBanner>;
 
 export const Basic = {

package/src/dateInput/DateInput.story.tsx

@@ -6,7 +6,6 @@ import { DateInput } from '..';
 const meta: Meta<typeof DateInput> = {
   component: DateInput,
   title: 'Forms/DateInput',
-  tags: ['autodocs'],
 } satisfies Meta<typeof DateInput>;
 
 export default meta;

package/src/divider/Divider.story.tsx

@@ -29,7 +29,7 @@ const hideControls = (args: string[]) => {
 const meta: Meta<typeof Divider> = {
   component: Divider,
   title: 'Layouts/Divider',
-  tags: ['autodocs'],
+
   decorators: [withContainer],
   parameters: {
     actions: { argTypesRegex: null },

package/src/emphasis/Emphasis.story.tsx

@@ -5,7 +5,6 @@ import Emphasis from './Emphasis';
 export default {
   component: Emphasis,
   title: 'Typography/Emphasis',
-  tags: ['autodocs'],
 } satisfies Meta<typeof Emphasis>;
 
 type Story = StoryObj<typeof Emphasis>;

package/src/field/Field.story.tsx

@@ -13,7 +13,7 @@ import Info from '../info';
 export default {
   component: Field,
   title: 'Forms/Field',
-  tags: ['autodocs'],
+
   argTypes: {
     messageIconLabel: {
       control: 'text',

package/src/i18n/index.ts

@@ -7,6 +7,7 @@ import hu from './hu.json';
 import id from './id.json';
 import it from './it.json';
 import ja from './ja.json';
+import nl from './nl.json';
 import pl from './pl.json';
 import pt from './pt.json';
 import ro from './ro.json';
@@ -28,6 +29,7 @@ const translations: Record<string, Record<string, string>> = {
   id,
   it,
   ja,
+  nl,
   pl,
   pt,
   ro,

package/src/iconButton/IconButton.story.tsx

@@ -81,7 +81,6 @@ const Template = ({ size, disabled }: Props) => {
 };
 
 export const Basic: Story = {
-  tags: ['autodocs'],
   render: () => {
     return (
       <div

package/src/info/Info.story.tsx

@@ -13,6 +13,7 @@ const meta = {
     title: 'Fast transfer hint',
     content: lorem10,
   },
+
   render: (args) => (
     <p>
       <span>Fast transfer</span> <Info {...args} />

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -16,6 +16,7 @@ const meta: Meta<typeof InputWithDisplayFormat> = {
       </Field>
     );
   },
+
   args: {
     onFocus: fn(),
     onBlur: fn(),

package/src/inputs/SelectInput.story.tsx

@@ -22,7 +22,7 @@ import {
 const meta = {
   title: 'Forms/SelectInput',
   component: SelectInput,
-  tags: ['autodocs'],
+
   parameters: { actions: { argTypesRegex: '' } },
 } satisfies Meta<typeof SelectInput>;
 export default meta;

package/src/instructionsList/InstructionsList.story.tsx

@@ -10,7 +10,6 @@ export default {
   component: InstructionsList,
   title: 'Typography/InstructionsList',
   render: (args) => <InstructionsList {...args} />,
-  tags: ['autodocs'],
 } satisfies Meta<typeof InstructionsList>;
 
 type Story = StoryObj<typeof InstructionsList>;

package/src/label/Label.story.tsx

@@ -4,7 +4,6 @@ import { Label } from './Label';
 export default {
   component: Label,
   title: 'Forms/Label',
-  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/legacylistItem/LegacyListItem.story.tsx

@@ -11,7 +11,6 @@ import LegacyListItem, { List } from '.';
 export default {
   component: LegacyListItem,
   title: 'Other/LegacyListItem',
-  tags: ['autodocs'],
 };
 
 const Template = ({

package/src/loader/Loader.story.tsx

@@ -16,7 +16,6 @@ export default {
       },
     },
   },
-  tags: ['autodocs'],
 } satisfies Meta<typeof Loader>;
 
 type Story = StoryObj<typeof Loader>;