@transferwise/components 46.100.0 → 46.100.2

package/src/accordion/Accordion.css

@@ -1,21 +1,24 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.np-accordion-item {
+.np-accordion-item {
   display: block;
   width: 100%;
-}.np-accordion-item--open .media {
+}
+.np-accordion-item--open .media {
   border: 0 !important;
-}.np-accordion-item .decision:not(.disabled):not(:disabled):hover {
+}
+.np-accordion-item .decision:not(.disabled):not(:disabled):hover {
   background-color: transparent;
-}.np-accordion-item.np-accordion-item--dark .media-body,
+}
+.np-accordion-item.np-accordion-item--dark .media-body,
 .np-accordion-item.np-accordion-item--dark .np-text-title-body {
   color: #ffffff;
-}.np-accordion-item__content {
+}
+.np-accordion-item__content {
   padding: 0 12px 24px 12px;
   padding: 0 var(--size-12) var(--size-24) var(--size-12);
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
-}@media (min-width: 480px) {
+}
+@media (min-width: 480px) {
   .np-accordion-item__content.has-icon {
     padding-left: 68px;
   }
@@ -24,22 +27,28 @@
     padding-left: 0;
     padding-left: initial;
   }
-}.np-accordion-item .np-option .np-option__title {
+}
+.np-accordion-item .np-option .np-option__title {
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
-}.np-theme-personal .np-accordion-item--with-media .media {
+}
+.np-theme-personal .np-accordion-item--with-media .media {
   display: flex;
   align-items: center;
-}.np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
+}
+.np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
   padding: 0 56px 16px;
   padding: 0 var(--size-56) var(--size-16);
-}.np-theme-personal .np-accordion-item--with-icon .media {
+}
+.np-theme-personal .np-accordion-item--with-icon .media {
   display: flex;
   align-items: flex-start;
-}.np-theme-personal .np-accordion-item .decision__title {
+}
+.np-theme-personal .np-accordion-item .decision__title {
   font-size: 1.125rem;
   font-size: var(--font-size-18);
-}.np-theme-personal .np-accordion-item .np-option .np-option__title {
+}
+.np-theme-personal .np-accordion-item .np-option .np-option__title {
   margin-bottom: 0;
   font-size: 1.125rem;
   font-size: var(--font-size-18);
@@ -47,14 +56,16 @@
   letter-spacing: var(--letter-spacing-negative-xs);
   line-height: 1.5rem;
   line-height: var(--line-height-24);
-}.np-theme-personal .np-accordion-item .np-option .circle-sm {
+}
+.np-theme-personal .np-accordion-item .np-option .circle-sm {
   background-color: transparent;
   width: 24px;
   width: var(--size-24);
   height: 24px;
   height: var(--size-24);
   border-radius: 0;
-}.np-theme-personal .np-accordion-item__content {
+}
+.np-theme-personal .np-accordion-item__content {
   padding: 0 56px 16px 16px;
   padding: 0 var(--size-56) var(--size-16) var(--size-16);
   border-bottom: none;

package/src/accordion/Accordion.story.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FastFlag as FastFlagIcon, CardWise as CardWiseIcon } from '@transferwise/icons';
 
 import { Scroll, Size } from '../common';
@@ -6,6 +7,7 @@ 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: [
@@ -133,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/actionButton/ActionButton.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Settings } from '@transferwise/icons';
 
 import { storyConfig } from '../test-utils/story-config';
@@ -12,8 +12,8 @@ import ActionButton from './ActionButton';
  */
 export default {
   component: ActionButton,
-  title: 'Actions/ActionButton (Deprecated)',
-  tags: ['autodocs'],
+  title: 'Actions/ActionButton',
+  tags: ['deprecated'],
 } satisfies Meta<typeof ActionButton>;
 
 type Story = StoryObj<typeof ActionButton>;

package/src/actionOption/ActionOption.story.tsx

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 
 import { Nudge, Title, Typography } from '..';
@@ -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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { action } from 'storybook/actions';
 import { ClockBorderless } from '@transferwise/icons';
 
 import { lorem40 } from '../test-utils';
@@ -38,7 +38,7 @@ export default {
       },
     },
   },
-  tags: ['autodocs'],
+
   parameters: {
     docs: {
       toc: true,

package/src/alert/Alert.tests.story.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within, expect, waitFor } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { userEvent, within, expect, waitFor } from 'storybook/test';
 import { Button, Field, SelectInput, Sentiment } from '..';
 import Alert, { type AlertProps } from './Alert';
 

package/src/avatar/Avatar.css

@@ -1,13 +1,12 @@
-@media (min-width: 768px) {
-}@media (min-width: 768px) {
-}.tw-avatar {
+.tw-avatar {
   position: relative;
   border-radius: 50%;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   box-sizing: border-box;
-}.tw-avatar .tw-avatar__content {
+}
+.tw-avatar .tw-avatar__content {
   align-items: center;
   background-color: rgba(134,167,189,0.10196);
   background-color: #86a7bd1a;
@@ -22,58 +21,73 @@
   max-width: 100%;
   overflow: hidden;
   width: 100%;
-}.tw-avatar--outlined {
+}
+.tw-avatar--outlined {
   border: 1px solid #00a2dd;
   border: 1px solid var(--color-interactive-accent);
   cursor: pointer;
-}.tw-avatar--outlined:not(.disabled):not(:disabled):hover {
+}
+.tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
-}.tw-avatar--thumbnail * {
+}
+.tw-avatar--thumbnail * {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
-}.tw-avatar--icon * {
+}
+.tw-avatar--icon * {
   max-height: 100%;
   max-width: 100%;
-}.tw-avatar.tw-avatar--initials,
+}
+.tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
   font-family: Arial, sans-serif;
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
-}.tw-avatar.tw-avatar--initials,
+}
+.tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--icon {
   color: #37517e;
   color: var(--color-content-primary);
-}.tw-avatar.tw-avatar--initials,
+}
+.tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
   font-family: Arial, sans-serif;
-}.tw-avatar.tw-avatar--branded .tw-avatar__content {
+}
+.tw-avatar.tw-avatar--branded .tw-avatar__content {
   font-family: 'Wise Sans', 'Inter', sans-serif;
   font-family: var(--font-family-display);
   font-feature-settings: "ss01";
   color: var(--color-dark-charcoal);
   line-height: 1;
-}.tw-avatar--24 {
+}
+.tw-avatar--24 {
   min-width: 24px;
   width: 24px;
   height: 24px;
-}.tw-avatar--24.tw-avatar--emoji,
+}
+.tw-avatar--24.tw-avatar--emoji,
 .tw-avatar--24.tw-avatar--icon {
   font-size: 12px;
-}.tw-avatar--24.tw-avatar--initials {
+}
+.tw-avatar--24.tw-avatar--initials {
   font-size: 8.4px;
-}.tw-avatar--24.tw-avatar--branded {
+}
+.tw-avatar--24.tw-avatar--branded {
   font-size: 10.8px;
-}.tw-avatar--24.tw-avatar--outlined {
+}
+.tw-avatar--24.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--24.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--24.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--24.tw-avatar--thumbnail::after {
+}
+.tw-avatar--24.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -83,25 +97,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--40 {
+}
+.tw-avatar--40 {
   min-width: 40px;
   width: 40px;
   height: 40px;
-}.tw-avatar--40.tw-avatar--emoji,
+}
+.tw-avatar--40.tw-avatar--emoji,
 .tw-avatar--40.tw-avatar--icon {
   font-size: 20px;
-}.tw-avatar--40.tw-avatar--initials {
+}
+.tw-avatar--40.tw-avatar--initials {
   font-size: 14px;
-}.tw-avatar--40.tw-avatar--branded {
+}
+.tw-avatar--40.tw-avatar--branded {
   font-size: 18px;
-}.tw-avatar--40.tw-avatar--outlined {
+}
+.tw-avatar--40.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--40.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--40.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--40.tw-avatar--thumbnail::after {
+}
+.tw-avatar--40.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -111,25 +132,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--48 {
+}
+.tw-avatar--48 {
   min-width: 48px;
   width: 48px;
   height: 48px;
-}.tw-avatar--48.tw-avatar--emoji,
+}
+.tw-avatar--48.tw-avatar--emoji,
 .tw-avatar--48.tw-avatar--icon {
   font-size: 24px;
-}.tw-avatar--48.tw-avatar--initials {
+}
+.tw-avatar--48.tw-avatar--initials {
   font-size: 16.8px;
-}.tw-avatar--48.tw-avatar--branded {
+}
+.tw-avatar--48.tw-avatar--branded {
   font-size: 21.6px;
-}.tw-avatar--48.tw-avatar--outlined {
+}
+.tw-avatar--48.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--48.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--48.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--48.tw-avatar--thumbnail::after {
+}
+.tw-avatar--48.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -139,25 +167,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--56 {
+}
+.tw-avatar--56 {
   min-width: 56px;
   width: 56px;
   height: 56px;
-}.tw-avatar--56.tw-avatar--emoji,
+}
+.tw-avatar--56.tw-avatar--emoji,
 .tw-avatar--56.tw-avatar--icon {
   font-size: 28px;
-}.tw-avatar--56.tw-avatar--initials {
+}
+.tw-avatar--56.tw-avatar--initials {
   font-size: 19.6px;
-}.tw-avatar--56.tw-avatar--branded {
+}
+.tw-avatar--56.tw-avatar--branded {
   font-size: 25.2px;
-}.tw-avatar--56.tw-avatar--outlined {
+}
+.tw-avatar--56.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--56.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--56.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--56.tw-avatar--thumbnail::after {
+}
+.tw-avatar--56.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -167,25 +202,32 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar--72 {
+}
+.tw-avatar--72 {
   min-width: 72px;
   width: 72px;
   height: 72px;
-}.tw-avatar--72.tw-avatar--emoji,
+}
+.tw-avatar--72.tw-avatar--emoji,
 .tw-avatar--72.tw-avatar--icon {
   font-size: 36px;
-}.tw-avatar--72.tw-avatar--initials {
+}
+.tw-avatar--72.tw-avatar--initials {
   font-size: 25.2px;
-}.tw-avatar--72.tw-avatar--branded {
+}
+.tw-avatar--72.tw-avatar--branded {
   font-size: 32.4px;
-}.tw-avatar--72.tw-avatar--outlined {
+}
+.tw-avatar--72.tw-avatar--outlined {
   padding: 2px;
-}.tw-avatar--72.tw-avatar--outlined.tw-avatar--thumbnail::after {
+}
+.tw-avatar--72.tw-avatar--outlined.tw-avatar--thumbnail::after {
   top: 2px;
   left: 2px;
   right: 2px;
   bottom: 2px;
-}.tw-avatar--72.tw-avatar--thumbnail::after {
+}
+.tw-avatar--72.tw-avatar--thumbnail::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -195,11 +237,14 @@
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
-}.tw-avatar img {
+}
+.tw-avatar img {
   width: 100%;
   height: 100%;
-}.np-theme-personal .tw-avatar--outlined {
+}
+.np-theme-personal .tw-avatar--outlined {
   border-color: var(--color-interactive-primary);
-}.np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
+}
+.np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }

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: { key: string | number; color: { hex: string; token: string } }) => {
+        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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import * as wiseIcons from '@transferwise/icons';
 import { Flag } from '@wise/art';
 
@@ -12,8 +12,8 @@ import Avatar, { AvatarType } from '.';
  */
 export default {
   component: Avatar,
-  title: 'Content/Avatar (Deprecated)',
-  tags: ['autodocs'],
+  title: 'Content/Avatar',
+  tags: ['deprecated'],
 } satisfies Meta<typeof Avatar>;
 
 type Story = StoryObj<typeof Avatar>;

package/src/avatarLayout/AvatarLayout.story.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-key */
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import AvatarLayout, { AvatarLayoutProps } from '.';
 import { Freeze, Graph, Plane, Rewards } from '@transferwise/icons';
 import { Flag } from '@wise/art';
@@ -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/avatarLayout/AvatarLayout.tsx

@@ -84,7 +84,7 @@ export default function AvatarLayout({
 const DIAGONAL_LAYOUT_STYLE_CONFIG = {
   // Diagonal layout doesn't support 16 size
   16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },
-  24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },
+  24: { avatarSize: 16, offset: 2.5, fontSize: 8, iconSize: 11.25 },
   32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },
   40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },
   48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },

package/src/avatarView/AvatarView.story.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-key */
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import {
   Camera,
   Convert,
@@ -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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { ProfileType, Sentiment, Status } from '../common';
 
@@ -8,9 +8,9 @@ import AvatarWrapper from './AvatarWrapper';
  * @deprecated use **`AvatarView`** components instead
  */
 export default {
-  tags: ['autodocs'],
   component: AvatarWrapper,
-  title: 'Content/AvatarWrapper (Deprecated)',
+  title: 'Content/AvatarWrapper',
+  tags: ['deprecated'],
 } satisfies Meta<typeof AvatarWrapper>;
 
 type Story = StoryObj<typeof AvatarWrapper>;