@transferwise/components 46.100.0 → 46.100.1

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

package/src/logo/Logo.story.tsx

@@ -12,7 +12,6 @@ export default {
       </div>
     );
   },
-  tags: ['autodocs'],
 } satisfies Meta<typeof Logo>;
 
 type Story = StoryObj<typeof Logo>;

package/src/markdown/Markdown.story.tsx

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

package/src/modal/Modal.story.tsx

@@ -10,10 +10,11 @@ import { lorem10, lorem100, lorem1000, storyConfig } from '../test-utils';
 export default {
   component: Modal,
   title: 'Dialogs/Modal',
+
   args: {
     size: 'md',
     position: 'center',
-    open: true,
+    open: false,
   },
   parameters: {
     chromatic: {
@@ -27,10 +28,11 @@ type Story = StoryObj<typeof Modal>;
 export interface StoryContentProps {
   args: CommonProps & ModalProps;
   screenMode?: ScreenMode;
+  viewMode?: string;
 }
 
-const StoryContent = ({ args, screenMode }: StoryContentProps) => {
-  const [open, setOpen] = useState(args.open);
+const StoryContent = ({ args, screenMode, viewMode }: StoryContentProps) => {
+  const [open, setOpen] = useState(viewMode !== 'docs');
 
   return (
     <>
@@ -70,7 +72,7 @@ export const Basic: Story = {
       </Button>
     ),
   },
-  render: (args) => <StoryContent args={args} />,
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
 export const BasicMobile: Story = storyConfig(Basic, { variants: ['mobile'] });
@@ -81,6 +83,7 @@ export const ContentScroll: Story = {
     body: lorem1000,
     scroll: Scroll.CONTENT,
   },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
 export const ContentScrollMobile: Story = storyConfig(ContentScroll, { variants: ['mobile'] });
@@ -91,6 +94,7 @@ export const ViewportScroll: Story = {
     body: lorem1000,
     scroll: Scroll.VIEWPORT,
   },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
 export const ViewportScrollMobile: Story = storyConfig(ViewportScroll, { variants: ['mobile'] });
@@ -100,6 +104,7 @@ export const WithoutTitle: Story = {
     body: lorem1000,
     scroll: Scroll.CONTENT,
   },
+  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
 };
 
 export const WithoutTitleMobile: Story = storyConfig(WithoutTitle, { variants: ['mobile'] });
@@ -115,9 +120,9 @@ export const WithThemeProviderInContent: Story = {
       </Button>
     ),
   },
-  render: (args, { globals: { screenMode } }) => (
+  render: (args, { globals: { screenMode }, viewMode }) => (
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    <StoryContent args={args} screenMode={screenMode} />
+    <StoryContent args={args} screenMode={screenMode} viewMode={viewMode} />
   ),
 };
 

package/src/moneyInput/MoneyInput.story.tsx

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

package/src/navigationOption/NavigationOption.story.tsx

@@ -18,7 +18,6 @@ import NavigationOption from './NavigationOption';
 export default {
   component: NavigationOption,
   title: 'Option/NavigationOption',
-  tags: ['autodocs'],
 };
 
 type TemplateTypes = {

package/src/phoneNumberInput/PhoneNumberInput.story.tsx

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

package/src/popover/Popover.story.tsx

@@ -26,7 +26,7 @@ const Content = () => (
 export default {
   component: Popover,
   title: 'Dialogs/Popover',
-  tags: ['autodocs'],
+
   args: {
     preferredPlacement: Position.BOTTOM,
     title: 'Guaranteed rate',

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx

@@ -15,7 +15,6 @@ const meta: Meta<typeof PrimitiveAnchor> = {
     onMouseEnter: fn(),
     onMouseLeave: fn(),
   },
-  tags: ['autodocs'],
 };
 export default meta;
 

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx

@@ -14,7 +14,6 @@ const meta: Meta<typeof PrimitiveButton> = {
     onMouseEnter: fn(),
     onMouseLeave: fn(),
   },
-  tags: ['autodocs'],
 };
 export default meta;
 

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx

@@ -9,7 +9,6 @@ const meta = {
   args: {
     children: 'Button text',
   },
-  tags: ['autodocs'],
 } satisfies Meta<typeof PrimitiveButton>;
 
 export default meta;

package/src/processIndicator/ProcessIndicator.story.tsx

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

package/src/progressBar/ProgressBar.story.tsx

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

package/src/promoCard/PromoCard.story.tsx

@@ -6,7 +6,7 @@ import PromoCard, { type PromoCardCheckedProps, type PromoCardLinkProps } from '
 const meta: Meta<typeof PromoCard> = {
   component: PromoCard,
   title: 'Layouts/PromoCard',
-  tags: ['autodocs'],
+
   parameters: {
     actions: { argTypesRegex: null },
   },

package/src/promoCard/PromoCardGroup.story.tsx

@@ -43,7 +43,6 @@ const PromoCards = () => {
 const meta: Meta<typeof PromoCardGroup> = {
   component: PromoCardGroup,
   title: 'Layouts/PromoCardGroup',
-  tags: ['autodocs'],
 };
 
 export default meta;

package/src/statusIcon/StatusIcon.story.tsx

@@ -8,7 +8,7 @@ import { storyConfig } from '../test-utils';
 export default {
   component: StatusIcon,
   title: 'Other/StatusIcon',
-  tags: ['autodocs'],
+
   argTypes: {
     iconLabel: {
       control: 'text',

package/src/stepper/Stepper.story.tsx

@@ -33,7 +33,6 @@ export default {
       options: [...Array(STEPS.length).keys()],
     },
   },
-  tags: ['autodocs'],
 } satisfies Meta<typeof Stepper>;
 
 type Story = StoryObj<typeof Stepper>;

package/src/sticky/Sticky.story.tsx

@@ -6,7 +6,7 @@ import { allModes } from '../../.storybook/modes';
 const meta: Meta<typeof Sticky> = {
   component: Sticky,
   title: 'Dialogs/Sticky',
-  tags: ['autodocs'],
+
   args: {
     open: true,
     position: 'bottom', // Default position

package/src/switch/Switch.story.tsx

@@ -18,7 +18,6 @@ const meta: Meta<typeof Switch> = {
     'aria-label': undefined,
     onClick: fn(),
   },
-  tags: ['autodocs'],
 } satisfies Meta<typeof Switch>;
 
 export default meta;