@transferwise/components 0.0.0-experimental-0b6dfe0 → 0.0.0-experimental-6dd9117

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-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%}
+.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%}

package/src/promoCard/PromoCard.less

@@ -32,10 +32,6 @@
       right: calc(var(--size-24) * -1);
     }
   }
-
-  &-description {
-    color: var(--color-content-secondary);
-  }
   
   &-indicator {
     position: absolute;
@@ -58,8 +54,16 @@
       border-radius: 100px;
     }
     
-    &Icon .tw-icon {
+    &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"] & {
@@ -119,10 +123,6 @@
       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,7 +11,6 @@ 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,15 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { StarFill } from '@transferwise/icons';
 
-import PromoCard, { PromoCardCheckedProps, PromoCardLinkProps } from './PromoCard';
+import PromoCard from './PromoCard';
 
 const meta: Meta<typeof PromoCard> = {
   component: PromoCard,
   title: 'Layouts/PromoCard',
   tags: ['autodocs'],
-  parameters: {
-    actions: { argTypesRegex: null },
-  },
 };
 
 export default meta;
@@ -26,110 +22,54 @@ export const Default: Story = {
 
 export const Link: Story = {
   args: {
-    ...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,
+    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',
+  },
 };
 
 export const Check: Story = {
   args: {
-    ...Default.args,
+    description: 'A card that lives online and works anywhere. Easy, secure, and always on hand.',
+    title: 'Digital',
     type: 'checkbox',
-  } as PromoCardCheckedProps,
+    indicatorLabel: 'Free',
+    imageSource: 'https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp',
+  },
 };
 
 export const DefaultChecked: Story = {
   args: {
-    ...Check.args,
+    description: 'A card that lives online and works anywhere. Easy, secure, and always on hand.',
+    title: 'Digital',
+    type: 'checkbox',
+    indicatorLabel: 'Free',
     defaultChecked: true,
-  } as PromoCardCheckedProps,
+    imageSource: 'https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp',
+  },
 };
 
 export const Disabled: Story = {
   args: {
-    ...Check.args,
+    description: 'A card that lives online and works anywhere. Easy, secure, and always on hand.',
+    title: 'Digital',
+    type: 'checkbox',
     isDisabled: true,
+    indicatorLabel: 'Free',
+    imageSource: 'https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp',
   },
 };
 
 export const CustomClass: Story = {
   args: {
-    ...Link.args,
+    description: 'A card that lives online and works anywhere. Easy, secure, and always on hand.',
+    title: 'Digital',
+    href: 'https://wise.com',
     className: 'np-CustomPromoCard',
+    indicatorLabel: 'Free',
+    imageSource: 'https://wise.com/web-art/assets/illustrations/digital-card-medium@2x.webp',
   },
   decorators: [
     (Story) => (
@@ -138,8 +78,8 @@ export const CustomClass: Story = {
           {`
           .np-CustomPromoCard {
             --Card-background-color: var(--color-bright-yellow);
-            --Card-indicator-icon-background-color: var(--color-background-neutral);
-            --color-interactive-control: var(--color-primary);
+            --Card-indicator-icon-background-color: var(--color-dark-gold);
+            --Card-indicator-icon-color: var(--color-contrast);
           }
         `}
         </style>

package/src/promoCard/PromoCard.tsx

@@ -1,16 +1,15 @@
 import { Check } from '@transferwise/icons';
 import classNames from 'classnames';
-import React, { forwardRef, FunctionComponent, ReactElement, useEffect, useState } from 'react';
+import React, { forwardRef, FunctionComponent, useState, useEffect, useMemo } from 'react';
 
 import Body from '../body';
-import { Typography } from '../common';
-import Card, { CardProps } from '../common/card';
+import { Typography, generateRandomId } from '../common';
+import Card from '../common/card';
 import Display from '../display';
 import Image from '../image/Image';
-import Title from '../title';
 
 import { usePromoCardContext } from './PromoCardContext';
-import PromoCardIndicator, { PromoCardIndicatorProps } from './PromoCardIndicator';
+import PromoCardIndicator from './PromoCardIndicator';
 
 export type ReferenceType = React.Ref<HTMLInputElement>;
 export type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
@@ -50,9 +49,6 @@ 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;
 
@@ -60,7 +56,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;
@@ -73,12 +69,9 @@ 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, Omit<CardProps, 'children'> {
+export interface PromoCardLinkProps extends PromoCardCommonProps {
   /**
    * Optional prop to prompts a user to save the linked URL instead of
    * navigating to it
@@ -109,7 +102,7 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
   value?: never;
 }
 
-export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
+export interface PromoCardCheckedProps extends PromoCardCommonProps {
   /** Specify the initial checked attribute of the PromoCard */
   defaultChecked?: boolean;
 
@@ -142,21 +135,6 @@ export type PolymorphicPromoCard = (
   props: PromoCardLinkProps | PromoCardCheckedProps,
 ) => JSX.Element;
 
-/**
- * generateRandomId() function
- *
- * This function generates a random string of characters that can be used as
- * an ID.
- *
- * @returns {string} A random string of characters.
- * @example
- * const id = generateRandomId();
- * // id will be a random string of characters, such as "id-4711".
- */
-const generateRandomId = (): string => {
-  return `id-${Math.random().toString(36).slice(7)}`;
-};
-
 /**
  * PromoCard component.
  *
@@ -213,7 +191,6 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       imageClass,
       imageSource,
       indicatorLabel,
-      indicatorIcon,
       isChecked,
       isDisabled,
       onClick,
@@ -224,8 +201,6 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       title,
       type,
       value,
-      isSmall,
-      useDisplayFont = true,
       ...props
     },
     reference,
@@ -251,25 +226,7 @@ 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`.
-
-    // 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;
+    const icon = href && download ? 'download' : href ? 'arrow' : undefined;
 
     // Define all class names string based on the values of the `href`, `type`,
     // `checked`, and `className` props.
@@ -289,7 +246,6 @@ 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
@@ -327,33 +283,6 @@ 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]);
@@ -365,18 +294,27 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
             <Check size={24} aria-hidden="true" />
           </span>
         )}
-
-        {getTitle()}
-
+        <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>
         <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={getIconType()} isSmall={isSmall} />
+        <PromoCardIndicator label={indicatorLabel} icon={icon} />
       </Card>
     );
   },

package/src/promoCard/PromoCardIndicator.tsx

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