@transferwise/components 45.15.0 → 45.16.0

package/src/phoneNumberInput/PhoneNumberInput.js

@@ -157,6 +157,7 @@ const PhoneNumberInput = (props) => {
         <div className={`input-group input-group-${size}`}>
           <input
             id={id}
+            autoComplete="tel-national"
             name="phoneNumber"
             inputMode="numeric"
             value={internalValue.suffix}

package/src/popover/Popover.css

@@ -1 +1 @@
-.np-theme-personal .np-popover__container{border-radius:16px;border-radius:var(--radius-medium)}.np-popover__container .np-popover__content{color:#5d7079;color:var(--color-content-secondary);font-size:.875rem;font-size:var(--font-size-14)}.np-popover__container .np-popover__content p:last-child{margin-bottom:0}.np-popover__container.np-panel .np-popover__content{max-width:276px;padding:16px 24px;padding:var(--size-16) var(--size-24)}.np-theme-personal .np-popover__container.np-panel .np-popover__content{padding:24px;padding:var(--size-24)}.np-popover__container.np-bottom-sheet .np-popover__title{color:#37517e;color:var(--color-content-primary);font-size:1.625rem;font-size:var(--font-size-26);font-weight:600;font-weight:var(--font-weight-semi-bold);letter-spacing:0;letter-spacing:-.02em;line-height:1.2;line-height:var(--line-height-title);line-height:122%;margin:0}.np-popover__container.np-bottom-sheet .np-popover__title+p{margin-top:8px;margin-top:var(--size-8)}.np-popover__container.np-bottom-sheet .np-popover__content{padding:32px 24px;padding:var(--size-32) var(--size-24)}
+.np-theme-personal .np-popover__container{border-radius:16px;border-radius:var(--radius-medium)}.np-popover__container .np-popover__content{color:#5d7079;color:var(--color-content-secondary);font-size:.875rem;font-size:var(--font-size-14)}.np-popover__container .np-popover__content p:last-child{margin-bottom:0}.np-popover__container.np-panel .np-popover__content{max-width:276px;padding:16px 24px;padding:var(--size-16) var(--size-24)}.np-theme-personal .np-popover__container.np-panel .np-popover__content{padding:24px;padding:var(--size-24)}.np-popover__container.np-bottom-sheet .np-popover__title{color:#37517e;color:var(--color-content-primary);font-size:1.625rem;font-size:var(--font-size-26);font-weight:600;font-weight:var(--font-weight-semi-bold);letter-spacing:0;letter-spacing:-.02em;line-height:1.2;line-height:var(--line-height-title);line-height:122%;margin:0}.np-popover__container.np-bottom-sheet .np-popover__title+ol:not(.list-unstyled),.np-popover__container.np-bottom-sheet .np-popover__title+p,.np-popover__container.np-bottom-sheet .np-popover__title+ul:not(.list-unstyled){margin-top:8px;margin-top:var(--size-8)}.np-popover__container.np-bottom-sheet .np-popover__content{padding:32px 24px;padding:var(--size-32) var(--size-24)}

package/src/promoCard/PromoCard.css

@@ -1 +1 @@
-.np-Card{--Card-image-scale:1;--Card-image-translate:0;--Card-indicator-text-background-color:var(--color-background-neutral);--Card-indicator-icon-background-color:var(--color-interactive-accent);--Card-indicator-icon-color:var(--color-interactive-control);--Card-check-background-color:var(--color-interactive-primary);--Card-check-color:var(--color-interactive-control)}.np-Card--promoCard{--Card-max-width:358px}.np-Card--promoCard.is-disabled{filter:grayscale(1);opacity:.45}.np-Card-image{height:auto;left:-24px;left:calc(var(--size-24)*-1);margin:0 auto;position:relative;transform:scale(var(--Card-image-scale)) translateY(var(--Card-image-translate));transition:transform .5s ease-in-out;width:100%;width:calc(100% + 48px);width:calc(100% + var(--size-48))}[dir=rtl] .np-Card-image{left:auto;right:-24px;right:calc(var(--size-24)*-1)}.np-Card-indicator{bottom:8px;bottom:var(--size-8);display:flex;gap:4px;gap:var(--size-4);position:absolute;right:8px;right:var(--size-8)}[dir=rtl] .np-Card-indicator{left:8px;left:var(--size-8);right:auto}.np-Card-indicatorText{background:var(--Card-indicator-text-background-color);border-radius:100px;display:inline-block;padding:16px;padding:var(--size-16);text-align:left;vertical-align:middle}.np-Card-indicatorIcon{align-items:center;background:var(--Card-indicator-icon-background-color);border-radius:9999px;border-radius:var(--radius-full);color:var(--Card-indicator-icon-color);display:inline-block;display:flex;height:56px;height:var(--size-56);justify-content:center;width:56px;width:var(--size-56)}[dir=rtl] .np-Card-indicatorIcon{transform:scaleX(-1)}.np-Card--checked,.np-Card--link{box-shadow:none;color:currentColor;cursor:pointer;transform:scale(1);transition:box-shadow .2s ease-in-out,transform .5s ease-in-out}.np-theme-personal:not(.np-theme-personal--dark,.np-theme-personal--bright-green,.np-theme-personal--forest-green) .np-Card--checked,.np-theme-personal:not(.np-theme-personal--dark,.np-theme-personal--bright-green,.np-theme-personal--forest-green) .np-Card--link{--Card-box-shadow:0px 20px var(--size-40) 0px var(--color-background-neutral);--Card-check-color:var(--color-interactive-accent)}.np-Card--checked.is-disabled,.np-Card--link.is-disabled{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.np-Card--checked,.np-Card--link{transition:none}}.np-Card--checked:hover:not(.is-disabled,:disabled,.is-checked,:focus-within),.np-Card--link:hover:not(.is-disabled,:disabled,.is-checked,:focus-within){--Card-image-scale:1.1;box-shadow:var(--Card-box-shadow)}.np-Card--checked:active:not(.is-disabled,:disabled,.is-checked),.np-Card--link:active:not(.is-disabled,:disabled,.is-checked){--Card-background-color:var(--color-background-neutral-active);--Card-image-scale:1.1;--Card-image-translate:var(--size-8);box-shadow:var(--Card-box-shadow);transform:scale(98%)}.np-theme-personal--bright-green .np-Card--checked:active:not(.is-disabled,:disabled,.is-checked),.np-theme-personal--bright-green .np-Card--link:active:not(.is-disabled,:disabled,.is-checked){--Card-background-color:var(--color-background-neutral)}.np-Card--checked:focus-visible:not(.is-disabled,:disabled),.np-Card--checked:has(:focus-visible):not(.np-Card--checked),.np-Card--link:focus-visible:not(.is-disabled,:disabled),.np-Card--link:has(:focus-visible):not(.np-Card--checked){--Card-image-scale:1.1;box-shadow:var(--Card-box-shadow);outline:var(--ring-outline-color) solid 4px;outline:var(--ring-outline-color) solid var(--size-4);outline-offset:4px;outline-offset:var(--size-4)}.np-Card--link .np-Card-titleLink{color:#37517e;color:var(--color-content-primary);text-decoration:none}.np-Card--link .np-Card-titleLink:focus-visible{outline:none}.np-Card--link .np-Card-titleLink:after{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:10}.np-Card--checked.is-checked{box-shadow:0 0 0 4px var(--color-interactive-primary);box-shadow:0 0 0 var(--size-4) var(--color-interactive-primary)}.np-Card--checked.is-checked .np-Card-check{align-items:center;background:var(--Card-check-background-color);border-radius:9999px;border-radius:var(--radius-full);color:var(--Card-check-color);display:flex;height:40px;height:var(--size-40);justify-content:center;position:absolute;right:8px;right:var(--size-8);top:8px;top:var(--size-8);width:40px;width:var(--size-40)}[dir=rtl] .np-Card--checked.is-checked .np-Card-check{left:8px;left:var(--size-8);right:auto}.np-Card--checked.is-checked:focus-visible:not(.is-disabled,:disabled){box-shadow:none}.np-CardGroup{display:flex;flex-direction:column;gap:24px;gap:var(--size-24);width:100%}@media (min-width:768px){.np-CardGroup{flex-direction:row}}.np-CardGroup .np-Card.np-Card--promoCard{max-width:100%}
+.np-Card{--Card-image-scale:1;--Card-image-translate:0;--Card-indicator-text-background-color:var(--color-background-neutral);--Card-indicator-icon-background-color:var(--color-interactive-accent);--Card-indicator-icon-color:var(--color-interactive-control);--Card-check-background-color:var(--color-interactive-primary);--Card-check-color:var(--color-interactive-control)}.np-Card--promoCard{--Card-max-width:358px}.np-Card--promoCard.is-disabled{filter:grayscale(1);opacity:.45}.np-Card-image{height:auto;left:-24px;left:calc(var(--size-24)*-1);margin:0 auto;position:relative;transform:scale(var(--Card-image-scale)) translateY(var(--Card-image-translate));transition:transform .5s ease-in-out;width:100%;width:calc(100% + 48px);width:calc(100% + var(--size-48))}[dir=rtl] .np-Card-image{left:auto;right:-24px;right:calc(var(--size-24)*-1)}.np-Card-description{color:#5d7079;color:var(--color-content-secondary)}.np-Card-indicator{bottom:8px;bottom:var(--size-8);display:flex;gap:4px;gap:var(--size-4);position:absolute;right:8px;right:var(--size-8)}[dir=rtl] .np-Card-indicator{left:8px;left:var(--size-8);right:auto}.np-Card-indicatorText{background:var(--Card-indicator-text-background-color);border-radius:100px;display:inline-block;padding:16px;padding:var(--size-16);text-align:left;vertical-align:middle}.np-Card-indicatorIcon .tw-icon{color:var(--Card-indicator-icon-color)}[dir=rtl] .np-Card-indicatorIcon .tw-icon{transform:scaleX(-1)}.np-Card--checked,.np-Card--link{box-shadow:none;color:currentColor;cursor:pointer;transform:scale(1);transition:box-shadow .2s ease-in-out,transform .5s ease-in-out}.np-theme-personal:not(.np-theme-personal--dark,.np-theme-personal--bright-green,.np-theme-personal--forest-green) .np-Card--checked,.np-theme-personal:not(.np-theme-personal--dark,.np-theme-personal--bright-green,.np-theme-personal--forest-green) .np-Card--link{--Card-box-shadow:0px 20px var(--size-40) 0px var(--color-background-neutral);--Card-check-color:var(--color-interactive-accent)}.np-Card--checked.is-disabled,.np-Card--link.is-disabled{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.np-Card--checked,.np-Card--link{transition:none}}.np-Card--checked:hover:not(.is-disabled,:disabled,.is-checked,:focus-within),.np-Card--link:hover:not(.is-disabled,:disabled,.is-checked,:focus-within){--Card-image-scale:1.1;box-shadow:var(--Card-box-shadow)}.np-Card--checked:active:not(.is-disabled,:disabled,.is-checked),.np-Card--link:active:not(.is-disabled,:disabled,.is-checked){--Card-background-color:var(--color-background-neutral-active);--Card-image-scale:1.1;--Card-image-translate:var(--size-8);box-shadow:var(--Card-box-shadow);transform:scale(98%)}.np-theme-personal--bright-green .np-Card--checked:active:not(.is-disabled,:disabled,.is-checked),.np-theme-personal--bright-green .np-Card--link:active:not(.is-disabled,:disabled,.is-checked){--Card-background-color:var(--color-background-neutral)}.np-Card--checked:focus-visible:not(.is-disabled,:disabled),.np-Card--checked:has(:focus-visible):not(.np-Card--checked),.np-Card--link:focus-visible:not(.is-disabled,:disabled),.np-Card--link:has(:focus-visible):not(.np-Card--checked){--Card-image-scale:1.1;box-shadow:var(--Card-box-shadow);outline:var(--ring-outline-color) solid 4px;outline:var(--ring-outline-color) solid var(--size-4);outline-offset:4px;outline-offset:var(--size-4)}.np-Card--checked:has(.np-Card-closeButton:focus-visible),.np-Card--link:has(.np-Card-closeButton:focus-visible){outline:none}.np-Card--link .np-Card-titleLink{color:#37517e;color:var(--color-content-primary);text-decoration:none}.np-Card--link .np-Card-titleLink:focus-visible{outline:none}.np-Card--link .np-Card-titleLink:after{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:10}.np-Card--checked.is-checked{box-shadow:0 0 0 4px var(--color-interactive-primary);box-shadow:0 0 0 var(--size-4) var(--color-interactive-primary)}.np-Card--checked.is-checked .np-Card-check{align-items:center;background:var(--Card-check-background-color);border-radius:9999px;border-radius:var(--radius-full);color:var(--Card-check-color);display:flex;height:40px;height:var(--size-40);justify-content:center;position:absolute;right:8px;right:var(--size-8);top:8px;top:var(--size-8);width:40px;width:var(--size-40)}[dir=rtl] .np-Card--checked.is-checked .np-Card-check{left:8px;left:var(--size-8);right:auto}.np-Card--checked.is-checked:focus-visible:not(.is-disabled,:disabled){box-shadow:none}.np-CardGroup{display:flex;flex-direction:column;gap:24px;gap:var(--size-24);width:100%}@media (min-width:768px){.np-CardGroup{flex-direction:row}}.np-CardGroup .np-Card.np-Card--promoCard{max-width:100%}

package/src/promoCard/PromoCard.less

@@ -32,6 +32,10 @@
       right: calc(var(--size-24) * -1);
     }
   }
+
+  &-description {
+    color: var(--color-content-secondary);
+  }
   
   &-indicator {
     position: absolute;
@@ -54,16 +58,8 @@
       border-radius: 100px;
     }
     
-    &Icon {
+    &Icon .tw-icon {
       color: var(--Card-indicator-icon-color);
-      width: var(--size-56);
-      height: var(--size-56);
-      display: inline-block;
-      background: var(--Card-indicator-icon-background-color);
-      border-radius: var(--radius-full);
-      display: flex;
-      justify-content: center;
-      align-items: center;
 
       // Flips icon for right to left content
       [dir="rtl"] & {
@@ -123,6 +119,10 @@
       outline-offset: var(--size-4);
       box-shadow: var(--Card-box-shadow);
     }
+
+    &:has(.np-Card-closeButton:focus-visible) {
+      outline: none;
+    }
   }
 
   &--link {

package/src/promoCard/PromoCard.spec.tsx

@@ -11,6 +11,7 @@ describe('PromoCard', () => {
     description: 'Test Description',
     indicatorLabel: 'Test Indicator Label',
     testId: 'test-promo-card',
+    children: 'Test Content',
   };
 
   let rerenderPromoCard: (props?: PromoCardProps) => void;

package/src/promoCard/PromoCard.story.tsx

@@ -1,11 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { StarFill } from '@transferwise/icons';
 
-import PromoCard from './PromoCard';
+import PromoCard, { PromoCardCheckedProps, PromoCardLinkProps } from './PromoCard';
 
 const meta: Meta<typeof PromoCard> = {
   component: PromoCard,
   title: 'Layouts/PromoCard',
   tags: ['autodocs'],
+  parameters: {
+    actions: { argTypesRegex: null },
+  },
 };
 
 export default meta;
@@ -22,54 +26,110 @@ export const Default: Story = {
 
 export const Link: Story = {
   args: {
-    description: 'A card that lives online and works anywhere. Easy, secure, and always on hand.',
-    title: 'Digital',
-    href: 'https://wise.com',
-    indicatorLabel: 'Free',
-    imageSource: 'https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp',
-  },
+    ...Default.args,
+    href: '#',
+  } as PromoCardLinkProps,
+};
+
+export const TaskCard: Story = {
+  args: {
+    ...Link.args,
+    title: 'Add money for when you need it',
+    description: 'Get ready to send and spend.',
+    indicatorLabel: undefined,
+    imageSource: undefined,
+    onDismiss: () => {
+      alert('Dismissed!');
+    },
+    onClick: () => {
+      alert('Clicked!');
+    },
+    isSmall: true,
+    useDisplayFont: false,
+    className: 'taskCard',
+  } as PromoCardLinkProps,
+  decorators: [
+    (Story) => (
+      <div>
+        <style>
+          {`
+          .storybook-container {
+            background-color: var(--color-background-neutral);
+          }
+          
+          .taskCard {
+            background-color: var(--color-background-screen);
+            position: relative;
+            width: 208px;
+            height: 268px;
+          }
+          
+          .taskCard .np-Card-title {
+            margin-top: var(--size-24);
+          }
+          
+          
+          .taskCard.np-Card--link:hover:not(.is-disabled, :disabled, :focus-within) {
+            box-shadow: none;
+            background-color: var(--color-background-screen-hover);
+          }
+  
+          .taskCard.np-Card--link:active:not(.is-disabled, :disabled) {
+            box-shadow: none;
+            background-color: var(--color-background-screen-hover);
+          }
+        `}
+        </style>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const TaskCardWithCustomIcon: Story = {
+  args: {
+    ...TaskCard.args,
+    indicatorIcon: <StarFill size={24} aria-hidden="true" />,
+  } as PromoCardLinkProps,
+  decorators: TaskCard.decorators,
+};
+
+export const TaskCardCompleted: Story = {
+  args: {
+    ...TaskCard.args,
+    onDismiss: undefined,
+    href: undefined,
+    indicatorIcon: 'check',
+    className: 'taskCard taskCard--completed np-theme--personal np-theme-personal--forest-green',
+  } as PromoCardLinkProps,
+  decorators: TaskCard.decorators,
 };
 
 export const Check: Story = {
   args: {
-    description: 'A card that lives online and works anywhere. Easy, secure, and always on hand.',
-    title: 'Digital',
+    ...Default.args,
     type: 'checkbox',
-    indicatorLabel: 'Free',
-    imageSource: 'https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp',
-  },
+  } as PromoCardCheckedProps,
 };
 
 export const DefaultChecked: Story = {
   args: {
-    description: 'A card that lives online and works anywhere. Easy, secure, and always on hand.',
-    title: 'Digital',
-    type: 'checkbox',
-    indicatorLabel: 'Free',
+    ...Check.args,
     defaultChecked: true,
-    imageSource: 'https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp',
-  },
+  } as PromoCardCheckedProps,
 };
 
 export const Disabled: Story = {
   args: {
-    description: 'A card that lives online and works anywhere. Easy, secure, and always on hand.',
-    title: 'Digital',
-    type: 'checkbox',
+    ...Check.args,
     isDisabled: true,
-    indicatorLabel: 'Free',
-    imageSource: 'https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp',
   },
 };
 
 export const CustomClass: Story = {
   args: {
-    description: 'A card that lives online and works anywhere. Easy, secure, and always on hand.',
-    title: 'Digital',
-    href: 'https://wise.com',
+    ...Link.args,
     className: 'np-CustomPromoCard',
-    indicatorLabel: 'Free',
-    imageSource: 'https://wise.com/web-art/assets/illustrations/digital-card-medium@2x.webp',
   },
   decorators: [
     (Story) => (
@@ -78,8 +138,8 @@ export const CustomClass: Story = {
           {`
           .np-CustomPromoCard {
             --Card-background-color: var(--color-bright-yellow);
-            --Card-indicator-icon-background-color: var(--color-dark-gold);
-            --Card-indicator-icon-color: var(--color-contrast);
+            --Card-indicator-icon-background-color: var(--color-background-neutral);
+            --color-interactive-control: var(--color-primary);
           }
         `}
         </style>

package/src/promoCard/PromoCard.tsx

@@ -1,15 +1,16 @@
 import { Check } from '@transferwise/icons';
 import classNames from 'classnames';
-import React, { forwardRef, FunctionComponent, useState, useEffect, useMemo } from 'react';
+import React, { forwardRef, FunctionComponent, ReactElement, useEffect, useState } from 'react';
 
 import Body from '../body';
 import { Typography } from '../common';
-import Card from '../common/card';
+import Card, { CardProps } from '../common/card';
 import Display from '../display';
 import Image from '../image/Image';
+import Title from '../title';
 
 import { usePromoCardContext } from './PromoCardContext';
-import PromoCardIndicator from './PromoCardIndicator';
+import PromoCardIndicator, { PromoCardIndicatorProps } from './PromoCardIndicator';
 
 export type ReferenceType = React.Ref<HTMLInputElement>;
 export type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
@@ -49,6 +50,9 @@ export interface PromoCardCommonProps {
   /** Optional prop to specify text for the indicator label of the PromoCard */
   indicatorLabel?: string;
 
+  /** Optional prop to specify the icon for the indicator icon of the PromoCard */
+  indicatorIcon?: PromoCardIndicatorProps['icon'];
+
   /** Optional prop to specify an image alt text  */
   imageAlt?: string;
 
@@ -56,7 +60,7 @@ export interface PromoCardCommonProps {
   imageClass?: string;
 
   /** Optional prop to specify an image source url  */
-  imageSource: string;
+  imageSource?: string;
 
   /** Specify whether the PromoCard is disabled, or not */
   isDisabled?: boolean;
@@ -69,9 +73,12 @@ export interface PromoCardCommonProps {
 
   /** Required prop to specify the title text of the PromoCard  */
   title: string;
+
+  /** Set to false to use body font style for the title   */
+  useDisplayFont?: boolean;
 }
 
-export interface PromoCardLinkProps extends PromoCardCommonProps {
+export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
   /**
    * Optional prop to prompts a user to save the linked URL instead of
    * navigating to it
@@ -102,7 +109,7 @@ export interface PromoCardLinkProps extends PromoCardCommonProps {
   value?: never;
 }
 
-export interface PromoCardCheckedProps extends PromoCardCommonProps {
+export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
   /** Specify the initial checked attribute of the PromoCard */
   defaultChecked?: boolean;
 
@@ -206,6 +213,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       imageClass,
       imageSource,
       indicatorLabel,
+      indicatorIcon,
       isChecked,
       isDisabled,
       onClick,
@@ -216,6 +224,8 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       title,
       type,
       value,
+      isSmall,
+      useDisplayFont = true,
       ...props
     },
     reference,
@@ -241,7 +251,25 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
     // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
     // `'download'` if `download` is truthy. If neither condition is true, set
     // `icon` to `undefined`.
-    const icon = href && download ? 'download' : href ? 'arrow' : undefined;
+
+    // Create a function to get icon type
+    const getIconType = () => {
+      if (indicatorIcon) {
+        return indicatorIcon;
+      }
+
+      if (download) {
+        return 'download';
+      }
+
+      if (href && !type) {
+        return 'arrow';
+      }
+
+      return undefined;
+    };
+
+    const CardTitle = useDisplayFont ? Display : Title;
 
     // Define all class names string based on the values of the `href`, `type`,
     // `checked`, and `className` props.
@@ -261,6 +289,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       onClick,
       ref: reference,
       'data-testid': testId,
+      isSmall,
     };
 
     // Object with Anchor props that will be passed to the `a` element. These
@@ -298,6 +327,33 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
           }
         : {};
 
+    const getTitle = () => {
+      const titleContent =
+        href && !type ? (
+          <a className="np-Card-titleLink" {...anchorProps}>
+            {title}
+          </a>
+        ) : (
+          title
+        );
+
+      const titleProps = {
+        id: `${componentId}-title`,
+        as: headingLevel,
+        className: 'np-Card-title',
+      };
+
+      return useDisplayFont ? (
+        <Display type={Typography.DISPLAY_SMALL} {...titleProps}>
+          {titleContent}
+        </Display>
+      ) : (
+        <Title type={Typography.TITLE_SUBSECTION} {...titleProps}>
+          {titleContent}
+        </Title>
+      );
+    };
+
     useEffect(() => {
       setChecked(defaultChecked ?? isChecked ?? false);
     }, [defaultChecked, isChecked]);
@@ -309,27 +365,18 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
             <Check size={24} aria-hidden="true" />
           </span>
         )}
-        <Display
-          id={`${componentId}-title`}
-          as={headingLevel}
-          className="np-Card-title"
-          type={Typography.DISPLAY_SMALL}
-        >
-          {href && !type ? (
-            <a className="np-Card-titleLink" {...anchorProps}>
-              {title}
-            </a>
-          ) : (
-            title
-          )}
-        </Display>
+
+        {getTitle()}
+
         <Body className="np-Card-description">{description}</Body>
+
         {imageSource && (
           <div className={classNames('np-Card-image', { imageClass })}>
             <Image src={imageSource} alt={imageAlt || ''} loading="lazy" />
           </div>
         )}
-        <PromoCardIndicator label={indicatorLabel} icon={icon} />
+
+        <PromoCardIndicator label={indicatorLabel} icon={getIconType()} isSmall={isSmall} />
       </Card>
     );
   },

package/src/promoCard/PromoCardIndicator.tsx

@@ -1,7 +1,8 @@
 import { ArrowRight, Check, Download } from '@transferwise/icons';
 import classNames from 'classnames';
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
+import Avatar, { AvatarType } from '../avatar';
 import Body from '../body';
 import { Typography } from '../common';
 
@@ -13,7 +14,10 @@ export type PromoCardIndicatorProps = {
   label?: string;
 
   /** Optional icon to display in the indicator. */
-  icon?: 'check' | 'arrow' | 'download';
+  icon?: 'check' | 'arrow' | 'download' | ReactElement;
+
+  /** Optional prop to specify whether the indicator is sized small or not. */
+  isSmall?: boolean;
 
   /** Optional ID to add to the indicator container for testing purposes. */
   testid?: string;
@@ -31,7 +35,7 @@ export type PromoCardIndicatorProps = {
  *
  * @param {string} className - Optional class name(s) to add to the indicator container.
  * @param {string} label - Optional label to display next to the indicator.
- * @param {string} icon - Optional icon to display in the indicator.
+ * @param {string | ReactElement} icon - Optional icon to display in the indicator.
  * @param {string} testid - Optional ID to add to the indicator container for testing purposes.
  * @param {ReactNode} children - Optional children to display inside the indicator.
  * @returns {JSX.Element} - The PromoCardIndicator component.
@@ -43,11 +47,14 @@ const PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({
   children,
   label,
   icon,
+  isSmall = false,
   testid,
   ...rest
 }) => {
+  const isIconString = icon && typeof icon === 'string';
+
   const IconComponent =
-    icon &&
+    isIconString &&
     {
       check: Check,
       arrow: ArrowRight,
@@ -61,10 +68,15 @@ const PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({
           {label}
         </Body>
       )}
-      {IconComponent && (
-        <span className="np-Card-indicatorIcon">
-          <IconComponent size={24} aria-hidden="true" />
-        </span>
+      {icon && (
+        <Avatar
+          type={AvatarType.ICON}
+          size={isSmall ? 40 : 56}
+          backgroundColor="var(--Card-indicator-icon-background-color)"
+          className="np-Card-indicatorIcon"
+        >
+          {IconComponent ? <IconComponent size={24} aria-hidden="true" /> : icon}
+        </Avatar>
       )}
       {children}
     </div>

package/src/snackbar/Snackbar.js

@@ -91,7 +91,12 @@ export class Snackbar extends Component {
           }}
           unmountOnExit
         >
-          <Body ref={this.bodyRef} as="span" className={`snackbar__text snackbar__text--${theme}`}>
+          <Body
+            ref={this.bodyRef}
+            as="span"
+            className={`snackbar__text snackbar__text--${theme}`}
+            aria-live="polite"
+          >
             {text}
             {action ? (
               <ActionButton className="snackbar__text__action" onClick={action.onClick}>

package/src/snackbar/Snackbar.spec.js

@@ -71,8 +71,6 @@ describe('Snackbar', () => {
     const snackbarWithNode = () => componentWithNode.find(Snackbar);
     componentWithNode.find('.button-trigger').simulate('click');
     expect(snackbarWithNode().text()).toContain('test');
-
-    expect(snackbarWithNode().html()).toMatchSnapshot();
   });
 
   it('displays a single snack for the given duration with the given text', async () => {
@@ -107,6 +105,6 @@ describe('Snackbar', () => {
     );
     const snackbarWithNode = () => componentWithNode.find(Snackbar);
     componentWithNode.find('.button-trigger').simulate('click');
-    expect(snackbarWithNode().html()).toMatchSnapshot();
+    expect(snackbarWithNode().prop('theme')).toBe('dark');
   });
 });

package/src/tabs/Tabs.js

@@ -488,7 +488,8 @@ class Tabs extends Component {
                 })}
                 {translateLineX ? (
                   <li
-                    className={classNames('tabs__line')}
+                    role="none"
+                    className="tabs__line"
                     style={{
                       width: this.getTabLineWidth(),
                       transform: isRTL

package/src/upload/Upload.js

@@ -344,7 +344,7 @@ class Upload extends Component {
           />
         )}
         {!isProcessing && (
-          <div className="droppable-dropping-card droppable-card">
+          <div className="droppable-dropping-card droppable-card" aria-live="polite">
             <div className="droppable-card-content">
               <div className="circle circle-sm text-primary">
                 <PlusIcon size="16" />

package/src/upload/steps/completeStep/completeStep.js

@@ -26,7 +26,10 @@ const CompleteStep = (props) => {
   return (
     <div className="droppable-complete-card droppable-card" aria-hidden={!isComplete}>
       <div className="droppable-card-content">
-        <div className="droppable-card-content d-flex flex-column align-items-center">
+        <div
+          className="droppable-card-content d-flex flex-column align-items-center"
+          aria-live="polite"
+        >
           {isError ? (
             <>
               {isModern ? (

package/src/upload/steps/processingStep/processingStep.js

@@ -45,6 +45,7 @@ const ProcessingStep = (props) => {
             'm-b-2': isModern,
           })}
           type={Typography.TITLE_BODY}
+          aria-live="polite"
         >
           {psProcessingText}
         </Title>

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -134,7 +134,7 @@ const UploadItem = ({
           singleFileUpload={singleFileUpload}
           onDownload={onDownloadFile}
         >
-          <div className="np-upload-button">
+          <div className="np-upload-button" aria-live="polite">
             <div className="media">
               <div className="np-upload-icon media-left">{getIcon()}</div>
               <div className="media-body text-xs-left" data-testid={TEST_IDS.mediaBody}>

package/build/types/common/focusBoundary/utils/getFocusableElements.d.ts

@@ -1,2 +0,0 @@
-export function getFocusableElements(focusBoundaryContainer: Node): object;
-//# sourceMappingURL=getFocusableElements.d.ts.map

package/build/types/common/focusBoundary/utils/getFocusableElements.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getFocusableElements.d.ts","sourceRoot":"","sources":["../../../../../src/common/focusBoundary/utils/getFocusableElements.js"],"names":[],"mappings":"AAOO,6DAJI,IAAI,GACF,MAAM,CAoBlB"}

package/build/types/common/focusBoundary/utils/index.d.ts

@@ -1,3 +0,0 @@
-export { getFocusableElements } from "./getFocusableElements";
-export { resetFocus } from "./resetFocus";
-//# sourceMappingURL=index.d.ts.map

package/build/types/common/focusBoundary/utils/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/common/focusBoundary/utils/index.js"],"names":[],"mappings":""}

package/build/types/common/focusBoundary/utils/resetFocus.d.ts

@@ -1,2 +0,0 @@
-export function resetFocus({ focusableEls: { first, last }, event }: object): void;
-//# sourceMappingURL=resetFocus.d.ts.map

package/build/types/common/focusBoundary/utils/resetFocus.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"resetFocus.d.ts","sourceRoot":"","sources":["../../../../../src/common/focusBoundary/utils/resetFocus.js"],"names":[],"mappings":"AAOO,qEAJI,MAAM,QAmBhB"}