@transferwise/components 0.0.0-experimental-27bf250 → 0.0.0-experimental-bbf9517

package/src/avatarWrapper/AvatarWrapper.test.tsx

@@ -36,49 +36,10 @@ describe('FlowNavigationAvatar', () => {
 
             expect(screen.getByText('M')).toBeInTheDocument();
           });
-
-          describe('AND profileType', () => {
-            it('renders as BUSINESS profile type with an icon', () => {
-              const { container } = render(
-                <AvatarWrapper name={name} profileType={ProfileType.BUSINESS} />,
-              );
-
-              expect(container.firstChild).toMatchSnapshot();
-            });
-
-            it('renders as PERSONAL profile type with an icon', () => {
-              const { container } = render(
-                <AvatarWrapper name={name} profileType={ProfileType.PERSONAL} />,
-              );
-
-              expect(container.firstChild).toMatchSnapshot();
-            });
-
-            describe('AND avatar url', () => {
-              it('renders the image', () => {
-                const { container } = render(
-                  <AvatarWrapper
-                    url="https://wise.com"
-                    name={name}
-                    profileType={ProfileType.BUSINESS}
-                    avatarProps={{ theme: 'dark' }}
-                  />,
-                );
-
-                expect(container.firstChild).toMatchSnapshot();
-              });
-            });
-          });
         });
       });
 
       describe('with nothing passed', () => {
-        it('renders a personal icon', () => {
-          const { container } = render(<AvatarWrapper />);
-
-          expect(container.firstChild).toMatchSnapshot();
-        });
-
         it('renders aria-label', () => {
           render(<AvatarWrapper aria-label="test" />);
 
@@ -86,20 +47,6 @@ describe('FlowNavigationAvatar', () => {
         });
       });
 
-      describe('with a badge url passed', () => {
-        it('renders the badge', () => {
-          const { container } = render(
-            <AvatarWrapper
-              badgeUrl="https://badge.com"
-              badgeAltText="badge alt text"
-              badgeProps={{ size: Size.LARGE } as BadgeProps}
-            />,
-          );
-
-          expect(container.firstChild).toMatchSnapshot();
-        });
-      });
-
       describe('with a badge status icon passed', () => {
         it('renders the badge', () => {
           render(<AvatarWrapper badgeStatusIcon={Sentiment.POSITIVE} />);

package/src/checkbox/Checkbox.test.tsx

@@ -19,11 +19,6 @@ describe('Checkbox', () => {
     jest.clearAllMocks();
   });
 
-  it('renders the given label', () => {
-    const { container } = render(<Checkbox {...props} />);
-    expect(container).toMatchSnapshot();
-  });
-
   it('is enabled by default', () => {
     const { container } = render(<Checkbox {...props} />);
     expect(getCheckboxContainer(container)).not.toHaveClass('disabled');

package/src/chevron/Chevron.test.tsx

@@ -43,11 +43,4 @@ describe('Chevron', () => {
       expect(container.querySelector('.tw-icon-chevron-up')).not.toHaveClass('chevron-color');
     });
   });
-
-  describe('custom xs icon', () => {
-    it('renders', () => {
-      const { container } = render(<Chevron size={Size.EXTRA_SMALL} />);
-      expect(container).toMatchSnapshot();
-    });
-  });
 });

package/src/chips/Chips.test.tsx

@@ -53,10 +53,6 @@ const filterProps = {
 
 describe('Chips', () => {
   describe('Choice Chips', () => {
-    it(`renders as expected`, () => {
-      expect(render(<Chips {...choiceProps} />).container).toMatchSnapshot();
-    });
-
     it(`will pass previous state, updated state, and selected value on select`, () => {
       render(<Chips {...choiceProps} />);
       const accounting = screen.getByText('Accounting');
@@ -69,10 +65,6 @@ describe('Chips', () => {
   });
 
   describe('Filter Chips', () => {
-    it(`renders as expected`, () => {
-      expect(render(<Chips {...filterProps} />).container).toMatchSnapshot();
-    });
-
     it(`will pass previous state, updated state, and selected value on select`, () => {
       render(<Chips {...filterProps} />);
       const accounting = screen.getByText('Accounting');

package/src/common/RadioButton/RadioButton.test.tsx

@@ -3,24 +3,6 @@ import { screen, render, userEvent } from '../../test-utils';
 import RadioButton from '.';
 
 describe('Radio button', () => {
-  it('renders correctly', () => {
-    const { container } = render(<RadioButton id="an-id" name="a-name" value="a-value" />);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it('renders checked state correctly', () => {
-    const { container } = render(<RadioButton name="radio-name" checked />);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it('renders disabled state correctly', () => {
-    const { container } = render(<RadioButton name="radio-name" disabled />);
-
-    expect(container).toMatchSnapshot();
-  });
-
   it('responds to user input', async () => {
     const onChange = jest.fn();
     render(

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

@@ -5,15 +5,6 @@ import BottomSheet from './BottomSheet';
 mockMatchMedia();
 
 describe('BottomSheet', () => {
-  it('renders content when open', () => {
-    const { baseElement } = render(
-      <BottomSheet open onClose={jest.fn()}>
-        <b>Test Content</b>
-      </BottomSheet>,
-    );
-    expect(baseElement).toMatchSnapshot();
-  });
-
   it('does not renders when closed', () => {
     const { container } = render(
       <BottomSheet open={false} onClose={jest.fn()}>

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

@@ -10,12 +10,6 @@ describe('Card', () => {
     testId: 'test-card',
   };
 
-  it('matches snapshot', () => {
-    const { container } = render(<Card {...defaultProps} />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
   it('renders', () => {
     const props = {
       ...defaultProps,

package/src/common/closeButton/CloseButton.test.tsx

@@ -8,10 +8,6 @@ const props = {
 };
 
 describe('CloseButton', () => {
-  it(`renders as expected`, () => {
-    expect(render(<CloseButton {...props} />).container).toMatchSnapshot();
-  });
-
   describe('tabIndex', () => {
     it('should not have tabIndex by default', () => {
       render(<CloseButton {...props} />);

package/src/common/panel/Panel.test.tsx

@@ -20,12 +20,6 @@ describe('Panel', () => {
     onClose: jest.fn(),
   } satisfies PanelProps;
 
-  it('renders', () => {
-    const { container } = render(<Panel {...props} />);
-
-    expect(container).toMatchSnapshot();
-  });
-
   it('renders arrow', () => {
     const { rerender } = render(<Panel {...props} arrow={false} />);
 

package/src/flowNavigation/FlowNavigation.test.js

@@ -35,10 +35,6 @@ describe('FlowNavigation', () => {
     activeStep: 0,
   };
 
-  it(`renders as expected`, () => {
-    expect(render(<FlowNavigation {...props} />).container).toMatchSnapshot();
-  });
-
   it(`renders full Logo`, () => {
     render(<FlowNavigation {...props} />);
     expect(logoFull()).toBeInTheDocument();
@@ -126,12 +122,6 @@ describe('FlowNavigation', () => {
       window.innerWidth = Breakpoint.SMALL - 1;
     });
 
-    it('renders as expected', () => {
-      expect(
-        render(<FlowNavigation {...props} activeStep={1} onGoBack={jest.fn()} />).container,
-      ).toMatchSnapshot();
-    });
-
     it('renders Logo', () => {
       render(<FlowNavigation {...props} />);
       expect(screen.getByAltText('logo')).toBeInTheDocument();

package/src/listItem/ListItem.tsx

@@ -406,7 +406,7 @@ function View({
           aria-describedby={describedByIds}
           href={(controlProps as ListItemNavigationProps)?.href}
           target={(controlProps as ListItemNavigationProps)?.target}
-          className={clsx('wds-list-item-view d-flex flex-row', {
+          className={clsx('wds-list-item-view', {
             'wds-list-item-control': controlType === 'navigation',
             fullyInteractive: !isPartiallyInteractive,
           })}
@@ -424,7 +424,7 @@ function View({
   if (isPartiallyInteractive || controlType === 'non-interactive') {
     return (
       <div className={clsx('wds-list-item-gridWrapper', className)}>
-        <div className={clsx('wds-list-item-view d-flex flex-row')}>{children}</div>
+        <div className="wds-list-item-view">{children}</div>
 
         {renderExtras()}
       </div>

package/src/listItem/Prompt/ListItemPrompt.story.tsx

@@ -11,6 +11,7 @@ import {
 } from '../_stories/subcomponents';
 import { ListItem } from '../ListItem';
 import { Prompt, type ListItemPromptProps } from './ListItemPrompt';
+import { Clock } from '@transferwise/icons';
 
 const meta: Meta<ListItemPromptProps> = {
   component: Prompt,
@@ -66,7 +67,7 @@ export const Playground: Story = {
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={<Prompt {...args} />}
+        prompt={<ListItem.Prompt {...args} />}
       />
     </List>
   ),
@@ -86,28 +87,89 @@ export const Sentiment: Story = {
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={<Prompt sentiment={Sentiments.NEUTRAL}>This is a neutral prompt.</Prompt>}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.NEUTRAL}>
+            This is a neutral prompt.
+          </ListItem.Prompt>
+        }
       />
       <ListItem
         title={lorem5}
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={<Prompt sentiment={Sentiments.POSITIVE}>This is a positive prompt.</Prompt>}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.POSITIVE}>
+            This is a positive prompt.
+          </ListItem.Prompt>
+        }
       />
       <ListItem
         title={lorem5}
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={<Prompt sentiment={Sentiments.WARNING}>This is a warning prompt.</Prompt>}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.WARNING}>
+            This is a warning prompt.
+          </ListItem.Prompt>
+        }
       />
       <ListItem
         title={lorem5}
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={<Prompt sentiment={Sentiments.NEGATIVE}>This is a negative prompt.</Prompt>}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.NEGATIVE}>
+            This is a negative prompt.
+          </ListItem.Prompt>
+        }
+      />
+    </List>
+  ),
+};
+
+/**
+ * While all main sentiments (`warning`, `negative`, `positive` and `neutral`) are associated with a
+ * default `StatusIcon`s, we also allow for Icon overrides to bring the prompt's visual language
+ * closer to the prompt's content. <br /><br />
+ * It's also possible to override the default StatusIcon's accessible name announced by screen
+ * readers via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
+ * <br /><br />
+ * **NB**: If you're setting a label on a custom Icon, the accessible name should be provided via
+ * Icon's `title` prop instead.
+ */
+export const IconOverrides: Story = {
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    a11y: { disable: true },
+    knobs: { disable: true },
+  },
+  render: (args) => (
+    <List>
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.WARNING} mediaLabel="Processing: ">
+            This prompt uses default Icon, but with a custom label for screen readers.
+          </ListItem.Prompt>
+        }
+      />
+      <ListItem
+        title={lorem5}
+        subtitle={lorem10}
+        media={MEDIA.avatarSingle}
+        control={CONTROLS.switch}
+        prompt={
+          <ListItem.Prompt sentiment={Sentiments.WARNING} media={<Clock title="Processing: " />}>
+            This prompt uses custom Icon with a custom label for screen readers.
+          </ListItem.Prompt>
+        }
       />
     </List>
   ),
@@ -135,13 +197,13 @@ export const Interactivity: Story = {
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
         prompt={
-          <Prompt sentiment={args.sentiment}>
+          <ListItem.Prompt sentiment={args.sentiment}>
             This prompt includes a{' '}
             <Link href="https://wise.com" target="_blank" rel="noreferrer">
               link to some resource
             </Link>{' '}
             to help the user in their journey.
-          </Prompt>
+          </ListItem.Prompt>
         }
       />
 
@@ -151,13 +213,13 @@ export const Interactivity: Story = {
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
         prompt={
-          <Prompt sentiment={args.sentiment}>
+          <ListItem.Prompt sentiment={args.sentiment}>
             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
             This prompt includes an <Link onClick={action('inline button')}>
               inline button
             </Link>{' '}
             than can e.g. trigger a modal.
-          </Prompt>
+          </ListItem.Prompt>
         }
       />
     </List>

package/src/listItem/Prompt/ListItemPrompt.test.tsx

@@ -1,3 +1,4 @@
+import { Clock } from '@transferwise/icons';
 import { mockMatchMedia, render, screen } from '../../test-utils';
 import { Sentiment } from '../../common';
 import { ListItem } from '../ListItem';
@@ -18,6 +19,8 @@ describe('ListItem.Prompt', () => {
   });
 
   describe('render icon', () => {
+    const customLabel = 'Custom icon label';
+
     it.each([
       [Sentiment.NEUTRAL, 'info-icon'],
       [Sentiment.POSITIVE, 'check-icon'],
@@ -32,6 +35,34 @@ describe('ListItem.Prompt', () => {
       );
       expect(screen.getByTestId(iconId)).toBeInTheDocument();
     });
+
+    it('should accept accessible name override for a status icon', () => {
+      render(
+        <ListItem
+          title="Test Title"
+          prompt={
+            <ListItem.Prompt sentiment={Sentiment.NEGATIVE} mediaLabel={customLabel}>
+              Message
+            </ListItem.Prompt>
+          }
+        />,
+      );
+      expect(screen.getByLabelText(customLabel)).toBeInTheDocument();
+    });
+
+    it('should accept icon accessible name override', () => {
+      render(
+        <ListItem
+          title="Test Title"
+          prompt={
+            <ListItem.Prompt sentiment={Sentiment.NEGATIVE} media={<Clock title={customLabel} />}>
+              Message
+            </ListItem.Prompt>
+          }
+        />,
+      );
+      expect(screen.getByLabelText(customLabel)).toBeInTheDocument();
+    });
   });
 
   describe('muted state', () => {

package/src/listItem/Prompt/ListItemPrompt.tsx

@@ -3,7 +3,10 @@ import { Sentiment } from '../../common';
 import { ListItemContext, type ListItemContextData } from '../ListItemContext';
 import { InlinePrompt, type InlinePromptProps } from '../../prompt';
 
-export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;
+export type ListItemPromptProps = Pick<
+  InlinePromptProps,
+  'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'
+>;
 
 /**
  * This component allows for rendering an Inline Prompt. <br />
@@ -15,6 +18,8 @@ export const Prompt = ({
   sentiment = Sentiment.NEUTRAL,
   mediaLabel,
   children,
+  media,
+  loading,
 }: ListItemPromptProps) => {
   const { ids, props } = useContext<ListItemContextData>(ListItemContext);
   const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);
@@ -23,6 +28,8 @@ export const Prompt = ({
     <InlinePrompt
       id={ids.prompt}
       sentiment={sentiment}
+      media={media}
+      loading={loading}
       mediaLabel={mediaLabel}
       muted={isLongLivedMuted}
       className="wds-list-item-prompt"
@@ -33,4 +40,3 @@ export const Prompt = ({
 };
 
 Prompt.displayName = 'ListItem.Prompt';
-export default Prompt;

package/src/logo/Logo.story.tsx

@@ -1,15 +1,29 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import Logo from '.';
+import Logo, { LogoType } from '.';
+import { withVariantConfig } from '../../.storybook/helpers';
 
 export default {
   component: Logo,
   title: 'Content/Logo',
-  render: ({ inverse, type }) => {
+  render: () => {
     return (
-      <div className={`${inverse ? 'bg--dark' : ''} p-a-3`}>
-        <Logo type={type} inverse={inverse} />
-      </div>
+      <>
+        <div>
+          {Object.values(LogoType).map((type) => (
+            <div key={type} className="m-a-2">
+              <Logo type={type} />
+            </div>
+          ))}
+        </div>
+        <div className="bg--dark">
+          {Object.values(LogoType).map((type) => (
+            <div key={type} className="m-a-2">
+              <Logo type={type} inverse />
+            </div>
+          ))}
+        </div>
+      </>
     );
   },
 } satisfies Meta<typeof Logo>;
@@ -22,3 +36,8 @@ export const Basic: Story = {
     inverse: false,
   },
 };
+
+export const Mobile: Story = {
+  ...Basic,
+  ...withVariantConfig(['mobile']),
+};

package/src/main.css

@@ -5442,7 +5442,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   stroke: currentColor;
 }
 .wds-info-prompt {
-  --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
   --Prompt-padding: 12px;
 }
@@ -5458,11 +5457,14 @@ html:not([dir="rtl"]) .np-navigation-option {
 .wds-info-prompt__title,
 .wds-info-prompt__description {
   display: block;
+  color: var(--color-sentiment-primary);
 }
 .wds-info-prompt__action {
-  align-self: flex-start;
   margin-top: var(--Prompt-gap);
 }
+.wds-info-prompt__media {
+  display: flex;
+}
 .wds-info-prompt__media svg {
   width: 24px;
   height: 24px;

package/src/overlayHeader/OverlayHeader.test.tsx

@@ -11,9 +11,6 @@ describe('OverlayHeader', () => {
     logo: <img alt="logo_desktop" src="img_desktop" width="138" height="24" />,
     onClose: jest.fn(),
   };
-  it('renders as expected', () => {
-    expect(render(<OverlayHeader {...props} />).container).toMatchSnapshot();
-  });
 
   it('renders separator only if avatar and onClose are provided', () => {
     const { container } = render(<OverlayHeader {...props} />);

package/src/popover/Popover.test.tsx

@@ -22,19 +22,6 @@ describe('Popover', () => {
   let rerender;
 
   describe('on desktop', () => {
-    it('renders when is open', async () => {
-      render(
-        <Popover {...props}>
-          <button type="button">Open</button>
-        </Popover>,
-      );
-
-      await userEvent.click(screen.getByText('Open'));
-
-      await waitForPanel();
-      expect(getPanel()).toMatchSnapshot();
-    });
-
     describe('title', () => {
       it('renders title', async () => {
         ({ container, rerender } = render(
@@ -122,18 +109,6 @@ describe('Popover', () => {
       global.innerWidth = Breakpoint.SMALL - 1;
     });
 
-    it('renders when is open', async () => {
-      ({ container } = render(
-        <Popover {...props}>
-          <button type="button">Open</button>
-        </Popover>,
-      ));
-
-      await userEvent.click(screen.getByText('Open'));
-
-      expect(container).toMatchSnapshot();
-    });
-
     it('renders BottomSheet onClick', async () => {
       render(
         <Popover {...props}>

package/src/promoCard/PromoCard.test.tsx

@@ -26,12 +26,6 @@ describe('PromoCard', () => {
     };
   });
 
-  it('matches snapshot', () => {
-    const { container } = render(<PromoCard {...defaultProps} id="test-promo-card" />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
   it('renders', () => {
     const props = {
       ...defaultProps,

package/src/promoCard/PromoCardGroup.test.tsx

@@ -41,11 +41,6 @@ describe('PromoCardGroup', () => {
     };
   });
 
-  it('matches snapshot', () => {
-    const { container } = render(<PromoCardGroup {...defaultProps} />);
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
   it('renders', () => {
     const props = {
       ...defaultProps,

package/src/prompt/InfoPrompt/InfoPrompt.css

@@ -1,5 +1,4 @@
 .wds-info-prompt {
-  --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
   --Prompt-padding: 12px;
 }
@@ -15,11 +14,14 @@
 .wds-info-prompt__title,
 .wds-info-prompt__description {
   display: block;
+  color: var(--color-sentiment-primary);
 }
 .wds-info-prompt__action {
-  align-self: flex-start;
   margin-top: var(--Prompt-gap);
 }
+.wds-info-prompt__media {
+  display: flex;
+}
 .wds-info-prompt__media svg {
   width: 24px;
   height: 24px;

package/src/prompt/InfoPrompt/InfoPrompt.less

@@ -1,5 +1,4 @@
 .wds-info-prompt {
-  --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
   --Prompt-padding: 12px;
 
@@ -12,18 +11,20 @@
       justify-content: flex-start; /* Top align when title exists */
     }
   }
+
   &__title,
   &__description {
     display: block;
+    color: var(--color-sentiment-primary);
   }
 
   &__action {
-    align-self: flex-start;
     margin-top: var(--Prompt-gap);
   }
 
   &__media {
-    // To ensure icons are sized correctly, we set a fixed size for SVGs within the media wrapper
+    display: flex;
+
     svg {
       width: 24px;
       height: 24px;
@@ -33,4 +34,4 @@
   .wds-prompt__media-wrapper {
     padding: 0;
   }
-}
+}