@transferwise/components 46.117.1 → 46.119.0

package/src/index.ts

@@ -35,6 +35,7 @@ export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
+export type { InlinePromptProps } from './prompt';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputProps } from './inputs/Input';
 export type { InputGroupProps } from './inputs/InputGroup';
@@ -89,6 +90,7 @@ export type { SnackbarContextType } from './snackbar/SnackbarContext';
 export type { StatusIconProps } from './statusIcon';
 export type { StickyProps } from './sticky';
 export type { SummaryProps } from './summary';
+export type { SentimentSurfaceProps } from './sentimentSurface';
 export type { SwitchProps } from './switch';
 export type { SwitchOptionProps } from './switchOption';
 export type { TabItem, TabsProps } from './tabs';
@@ -169,6 +171,7 @@ export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
 export { default as InlineAlert } from './inlineAlert';
+export { InlinePrompt } from './prompt';
 export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { Input } from './inputs/Input';
 export { InputGroup } from './inputs/InputGroup';
@@ -209,6 +212,7 @@ export { default as ResponsivePanel } from './common/responsivePanel';
 export { default as Section } from './section';
 export { default as SegmentedControl } from './segmentedControl';
 export { default as Select } from './select';
+export { default as SentimentSurface } from './sentimentSurface';
 export { default as SlidingPanel } from './slidingPanel';
 export { default as SnackbarPortal } from './snackbar/Snackbar';
 export { SnackbarConsumer, SnackbarContext } from './snackbar/SnackbarContext';

package/src/inlineAlert/InlineAlert.story.tsx

@@ -6,7 +6,7 @@ import Link from '../link';
 
 export default {
   component: InlineAlert,
-  title: 'Forms/InlineAlert',
+  title: 'Prompts/InlineAlert',
 } as Meta<InlineAlertProps>;
 
 export const Basic = () => {

package/src/inputs/SelectInput.tsx

@@ -250,8 +250,10 @@ const defaultRenderTrigger = (({ content, placeholderShown, clear, disabled, siz
   </InputGroup>
 )) satisfies SelectInputProps['renderTrigger'];
 
-interface SelectInputClearButtonProps
-  extends Pick<React.ComponentPropsWithoutRef<'button'>, 'className' | 'onClick'> {}
+interface SelectInputClearButtonProps extends Pick<
+  React.ComponentPropsWithoutRef<'button'>,
+  'className' | 'onClick'
+> {}
 
 function SelectInputClearButton({ className, onClick }: SelectInputClearButtonProps) {
   const intl = useIntl();
@@ -576,17 +578,10 @@ const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContai
   );
 });
 
-interface SelectInputOptionsProps<T = string>
-  extends Pick<
-    SelectInputProps<T>,
-    | 'items'
-    | 'renderValue'
-    | 'renderFooter'
-    | 'filterable'
-    | 'filterPlaceholder'
-    | 'id'
-    | 'parentId'
-  > {
+interface SelectInputOptionsProps<T = string> extends Pick<
+  SelectInputProps<T>,
+  'items' | 'renderValue' | 'renderFooter' | 'filterable' | 'filterPlaceholder' | 'id' | 'parentId'
+> {
   searchInputRef: React.MutableRefObject<HTMLInputElement | null>;
   listboxRef: React.MutableRefObject<HTMLDivElement | null>;
   filterQuery: string;
@@ -828,14 +823,19 @@ function SelectInputOptions<T = string>({
             <Virtualizer
               ref={virtualiserHandlerRef}
               key={needle}
-              count={filteredItems.length}
+              data={filteredItems}
               keepMounted={mountedIndexes}
               scrollRef={listboxRef} // `VList` doesn't expose this
               onScroll={async () => {
                 if (!virtualiserHandlerRef.current) return;
 
-                const startIndex = virtualiserHandlerRef.current.findStartIndex();
-                const endIndex = virtualiserHandlerRef.current.findStartIndex();
+                const startIndex = virtualiserHandlerRef.current.findItemIndex(
+                  virtualiserHandlerRef.current.scrollOffset,
+                );
+                const endIndex = virtualiserHandlerRef.current.findItemIndex(
+                  virtualiserHandlerRef.current.scrollOffset +
+                    virtualiserHandlerRef.current.viewportSize,
+                );
 
                 setMountedIndexes((prevMountedIndexes) => {
                   const indexes = new Set(prevMountedIndexes);
@@ -848,7 +848,7 @@ function SelectInputOptions<T = string>({
                 });
               }}
             >
-              {(index) => (
+              {(item, index) => (
                 // The position of each item can't be inferred by browsers when
                 // virtualizing, as some of the items may not be in the DOM
                 <SelectInputItemsCountContext.Provider value={filteredItems.length}>
@@ -924,8 +924,10 @@ function SelectInputItemView<T = string>({
   return null;
 }
 
-interface SelectInputGroupItemViewProps<T = string>
-  extends SelectInputItemViewProps<T, SelectInputGroupItem<T | undefined>> {}
+interface SelectInputGroupItemViewProps<T = string> extends SelectInputItemViewProps<
+  T,
+  SelectInputGroupItem<T | undefined>
+> {}
 
 function SelectInputGroupItemView<T = string>({
   item,

package/src/link/Link.story.tsx

@@ -161,8 +161,8 @@ export const Basic = () => {
 };
 
 /**
- * `Link` is sentiment-aware and will automatically adjust its
- * colours if wrapped inside the [SentimentSurface](/?path=/docs/content-sentimentsurface--docs) component
+ * `Link` is sentiment-aware and will automatically adjust its colours if wrapped inside
+ * the [SentimentSurface](?path=/docs/foundations-sentimentsurface--docs) component
  */
 export const SentimentAwareness = function Render() {
   return (['success', 'warning', 'negative'] as const).map((sentiment) => (

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

@@ -69,4 +69,52 @@ describe('ListItem.Prompt', () => {
       expect(screen.getByTestId('InlinePrompt_Muted')).toBeInTheDocument();
     });
   });
+
+  [
+    { sentiment: Sentiment.NEGATIVE as const, iconLabel: 'Error:' },
+    { sentiment: Sentiment.WARNING as const, iconLabel: 'Warning:' },
+    { sentiment: Sentiment.NEUTRAL as const, iconLabel: 'Information:' },
+    { sentiment: Sentiment.POSITIVE as const, iconLabel: 'Success:' },
+    { sentiment: 'proposition' as const, iconLabel: '' },
+  ].forEach(({ sentiment, iconLabel }) => {
+    describe(sentiment, () => {
+      const customLabel = 'Custom icon label';
+
+      if (!iconLabel) {
+        it('should not have accessible name for the icon', () => {
+          const { container } = render(
+            <ListItem
+              title="Test Title"
+              prompt={<ListItem.Prompt sentiment={sentiment}>Message</ListItem.Prompt>}
+            />,
+          );
+          expect(container.querySelector('svg')).not.toHaveAccessibleName();
+        });
+      } else {
+        it('should use default aria label', () => {
+          render(
+            <ListItem
+              title="Test Title"
+              prompt={<ListItem.Prompt sentiment={sentiment}>Message</ListItem.Prompt>}
+            />,
+          );
+          expect(screen.getByLabelText(iconLabel)).toBeInTheDocument();
+        });
+      }
+
+      it('should allow for customisation of aria label', () => {
+        render(
+          <ListItem
+            title="Test Title"
+            prompt={
+              <ListItem.Prompt sentiment={sentiment} iconLabel={customLabel}>
+                Message
+              </ListItem.Prompt>
+            }
+          />,
+        );
+        expect(screen.getByLabelText(customLabel)).toBeInTheDocument();
+      });
+    });
+  });
 });

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

@@ -23,6 +23,7 @@ const meta: Meta<ListItemPromptProps> = {
   decorators: [withoutKey],
   args: {
     sentiment: undefined,
+    iconLabel: undefined,
     children: 'You have done a terrible thing',
   },
   argTypes: {

package/src/listItem/Prompt/ListItemPrompt.tsx

@@ -4,7 +4,7 @@ import { Sentiment } from '../../common';
 import { ListItemContext, type ListItemContextData } from '../ListItemContext';
 import { InlinePrompt, type InlinePromptProps } from '../../prompt';
 
-export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'muted'>;
+export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'iconLabel'>;
 
 /**
  * This component allows for rendering an Inline Prompt. <br />
@@ -12,7 +12,11 @@ export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentimen
  *
  * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.
  */
-export const Prompt = ({ sentiment = Sentiment.NEUTRAL, children }: ListItemPromptProps) => {
+export const Prompt = ({
+  sentiment = Sentiment.NEUTRAL,
+  iconLabel,
+  children,
+}: ListItemPromptProps) => {
   const { ids, props } = useContext<ListItemContextData>(ListItemContext);
   const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);
 
@@ -20,6 +24,7 @@ export const Prompt = ({ sentiment = Sentiment.NEUTRAL, children }: ListItemProm
     <InlinePrompt
       id={ids.prompt}
       sentiment={sentiment}
+      iconLabel={iconLabel}
       muted={isLongLivedMuted}
       className="wds-list-item-prompt"
     >

package/src/logo/__snapshots__/Logo.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Logo on mobile renders only fast flag 1`] = `
 <div>

package/src/nudge/Nudge.story.tsx

@@ -5,7 +5,7 @@ import { Nudge } from '..';
 
 export default {
   component: Nudge,
-  title: 'Feedback/Nudge',
+  title: 'Prompts/Nudge',
 };
 
 export const Default = () => {

package/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`OverlayHeader renders as expected 1`] = `
 <div>

package/src/popover/__snapshots__/Popover.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Popover on desktop renders when is open 1`] = `
 <div

package/src/promoCard/__snapshots__/PromoCard.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PromoCard matches snapshot 1`] = `
 <div

package/src/promoCard/__snapshots__/PromoCardGroup.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PromoCardGroup matches snapshot 1`] = `
 <div

package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx

@@ -26,7 +26,7 @@ describe('InlinePrompt', () => {
     { sentiment: Sentiment.NEGATIVE as const, acceptsMedia: false, statusIconLabel: 'Error:' },
     { sentiment: Sentiment.WARNING as const, acceptsMedia: false, statusIconLabel: 'Warning:' },
     { sentiment: Sentiment.NEUTRAL as const, acceptsMedia: false, statusIconLabel: 'Information:' },
-    { sentiment: Sentiment.POSITIVE as const, acceptsMedia: true, statusIconLabel: '' },
+    { sentiment: Sentiment.POSITIVE as const, acceptsMedia: true, statusIconLabel: 'Success:' },
     { sentiment: 'proposition' as const, acceptsMedia: true, statusIconLabel: '' },
   ].forEach(({ sentiment, statusIconLabel, acceptsMedia }) => {
     describe(sentiment, () => {
@@ -90,6 +90,34 @@ describe('InlinePrompt', () => {
           });
         }
       });
+
+      describe('iconLabel', () => {
+        const iconLabel = 'Custom icon label';
+
+        if (!statusIconLabel) {
+          it('should not have accessible name for the icon', () => {
+            const { container } = render(<InlinePrompt {...defaultProps} sentiment={sentiment} />);
+            expect(container.querySelector('svg')).not.toHaveAccessibleName();
+          });
+        } else {
+          it('should use default aria label', () => {
+            render(<InlinePrompt {...defaultProps} sentiment={sentiment} />);
+            expect(screen.getByLabelText(statusIconLabel)).toBeInTheDocument();
+          });
+        }
+
+        it('should allow for customisation of aria label', () => {
+          render(<InlinePrompt {...defaultProps} sentiment={sentiment} iconLabel={iconLabel} />);
+          expect(screen.getByLabelText(iconLabel)).toBeInTheDocument();
+        });
+
+        it('should retain custom label while muted', () => {
+          render(
+            <InlinePrompt {...defaultProps} sentiment={sentiment} iconLabel={iconLabel} muted />,
+          );
+          expect(screen.getByLabelText(iconLabel)).toBeInTheDocument();
+        });
+      });
     });
   });
 

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { action } from 'storybook/actions';
 import { Taxi, Travel } from '@transferwise/icons';
 import { lorem5 } from '../../test-utils';
 import Link from '../../link';
@@ -22,8 +23,9 @@ const withComponentGrid =
   );
 
 export default {
-  title: 'Internal/InlinePrompt',
+  title: 'Prompts/InlinePrompt',
   component: InlinePrompt,
+  tags: ['new'],
   args: {
     loading: false,
     muted: false,
@@ -158,6 +160,39 @@ export const Loading: StoryObj<PreviewStoryArgs> = {
   },
 };
 
+/**
+ * `InlinePrompt` can include a single instance of the `Link` component, which can be rendered as
+ * either HTML anchor or button. That element will spread across the whole surface of the Prompt
+ * so it's more accessible for motor–impaired and touch devices users.
+ *
+ * > ⚠️ For that reason it's crucial to only include **one** interactive element inside a prompt.
+ */
+export const Interactivity: StoryObj<PreviewStoryArgs> = {
+  argTypes: previewArgTypes,
+  args: {
+    muted: true,
+    previewMedia: false,
+  },
+  render: (args: PreviewStoryArgs) => (
+    <>
+      <InlinePrompt 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.
+      </InlinePrompt>
+
+      <InlinePrompt 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.
+      </InlinePrompt>
+    </>
+  ),
+  decorators: [withComponentGrid()],
+};
+
 /**
  * Inline prompt is usually associated with a different component, such as `Input` or `ListItem`.
  * When those components are disabled, the prompt is often used to communicate to the user why they
@@ -174,14 +209,20 @@ export const Muted: StoryObj<PreviewStoryArgs> = {
   },
   render: (args: PreviewStoryArgs) => {
     const [props, previewProps] = getPropsForPreview(args);
-    return <InlinePrompt {...props} {...previewProps} />;
+    return (
+      <InlinePrompt {...props} {...previewProps}>
+        Please <Link href="#">confirm your residential address</Link> to activate this feature.
+      </InlinePrompt>
+    );
   },
 };
 
 /**
  * While main sentiments (`warning`, `negative`, `neutral`) must retain their associated
  * `StatusIcons`, the `positive` and `proposition` ones allow for Icon overrides to bring it
- * closer to the prompt's content.
+ * closer to the prompt's content. <br /><br />
+ * It's also possible to override the default icon's accessible name announced by screen readers
+ * via `iconLabel` prop, which is especially useful for the `proposition` sentiment.
  */
 export const IconOverrides: StoryObj<PreviewStoryArgs> = {
   render: (args: PreviewStoryArgs) => {
@@ -190,7 +231,7 @@ export const IconOverrides: StoryObj<PreviewStoryArgs> = {
         <InlinePrompt {...args} media={<Travel />} sentiment="positive">
           Your travel account is set up and ready to use.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Taxi />} sentiment="proposition">
+        <InlinePrompt {...args} media={<Taxi />} sentiment="proposition" iconLabel="Taxi addon: ">
           Connect Wise with your taxi app to get exclusive discounts.
         </InlinePrompt>
         <InlinePrompt {...args} media={<Taxi />} sentiment="negative">

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -28,6 +28,11 @@ export type InlinePromptProps = {
    * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.
    */
   media?: React.ReactNode;
+  /**
+   * Override for the sentiment's-derived, default, accessible name announced by the screen readers.
+   * To be used primarily for `proposition` sentiment.
+   */
+  iconLabel?: string;
   id?: string;
   className?: string;
   'data-testid'?: string;
@@ -36,7 +41,9 @@ export type InlinePromptProps = {
 
 /**
  * Inline prompts appear alongside a specific component on the screen. They help the user stay
- * informed, fix something, or get more out of what they're doing.
+ * informed, fix something, or get more out of what they're doing. <br />
+ *
+ * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.
  */
 export const InlinePrompt = ({
   sentiment = Sentiment.POSITIVE,
@@ -45,6 +52,7 @@ export const InlinePrompt = ({
   className,
   children,
   media = null,
+  iconLabel,
   'data-testid': dataTestId,
   ...rest
 }: InlinePromptProps) => {
@@ -52,7 +60,7 @@ export const InlinePrompt = ({
 
   const renderMedia = () => {
     if (muted) {
-      return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" />;
+      return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" title={iconLabel} />;
     }
     if (loading) {
       return (
@@ -69,10 +77,10 @@ export const InlinePrompt = ({
     }
 
     if (sentiment === 'proposition') {
-      return media || <GiftBox />;
+      return media || <GiftBox title={iconLabel} />;
     }
 
-    return <StatusIcon size={16} sentiment={sentiment} />;
+    return <StatusIcon size={16} sentiment={sentiment} iconLabel={iconLabel} />;
   };
 
   return (

package/src/provider/theme/ThemeProvider.story.tsx

@@ -22,7 +22,7 @@ function ThemeProvider(props: ThemeProviderProps) {
 
 export default {
   component: ThemeProvider,
-  title: 'Other/ThemeProvider',
+  title: 'Foundations/ThemeProvider',
 } satisfies Meta<typeof ThemeProvider>;
 
 type Story = StoryObj<typeof ThemeProvider>;