@transferwise/components 0.0.0-experimental-e95c8a5 → 0.0.0-experimental-39ab3ec

package/src/main.less

@@ -30,12 +30,8 @@
 @import "./header/Header.less";
 @import "./image/Image.less";
 @import "./info/Info.less";
-@import "./inputs/_BottomSheet.less";
-@import "./inputs/_ButtonInput.less";
-@import "./inputs/_Popover.less";
 @import "./inputs/Input.less";
 @import "./inputs/InputGroup.less";
-@import "./inputs/SelectInput.less";
 @import "./inputs/TextArea.less";
 @import "./instructionsList/InstructionsList.less";
 @import "./link/Link.less";

package/src/navigationOption/NavigationOption.story.js

@@ -7,7 +7,7 @@ import {
   Profile,
   UpwardGraph as UpwardGraphIcon,
 } from '@transferwise/icons';
-import { Illustration, Assets } from '@wise/art';
+import { Illustration, Assets, Flag } from '@wise/art';
 
 import { Badge, Nudge, Avatar, Header } from '..';
 
@@ -203,7 +203,7 @@ export const BalanceContent = () => (
     showMediaCircle={false}
     media={
       <Avatar type="icon">
-        <img src="https://wise.com/web-art/assets/flags/gbp.svg" alt="" />
+        <Flag code="GBP" />
       </Avatar>
     }
   />
@@ -229,9 +229,7 @@ export const ExistingContactContent = () => (
     content="EUR account ending in 1111"
     showMediaCircle={false}
     media={
-      <Badge
-        badge={<img src="https://wise.com/public-resources/assets/flags/square/eur.svg" alt="" />}
-      >
+      <Badge badge={<Flag code="EUR" />}>
         <Avatar type="initials" size="md">
           <span aria-hidden>WS</span>
         </Avatar>

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:50%;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,107 @@ 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',
+    ...Default.args,
     href: 'https://wise.com',
-    indicatorLabel: 'Free',
-    imageSource: 'https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp',
-  },
+  } 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!');
+    },
+    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 +135,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/radio/Radio.story.js

@@ -1,5 +1,6 @@
 import { boolean, text } from '@storybook/addon-knobs';
 import { Check } from '@transferwise/icons';
+import { Flag } from '@wise/art';
 import { useState } from 'react';
 
 import Avatar, { AvatarType } from '../avatar';
@@ -33,7 +34,7 @@ export const Basic = () => {
           avatar={
             showAvatar ? (
               <Avatar type={AvatarType.THUMBNAIL}>
-                <img src="https://wise.com/web-art/assets/flags/imp.svg" alt="" />
+                <Flag code="IMP" />
               </Avatar>
             ) : null
           }
@@ -51,7 +52,7 @@ export const Basic = () => {
           avatar={
             showAvatar ? (
               <Avatar type={AvatarType.THUMBNAIL}>
-                <img src="https://wise.com/web-art/assets/flags/kes.svg" alt="" />
+                <Flag code="KES" />
               </Avatar>
             ) : null
           }

package/src/radioGroup/RadioGroup.story.js

@@ -1,5 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
+import { Flag } from '@wise/art';
 
 import Avatar, { AvatarType } from '../avatar';
 
@@ -16,7 +17,7 @@ export const Basic = () => {
 
   const avatar = showAvatars ? (
     <Avatar type={AvatarType.THUMBNAIL}>
-      <img src="https://wise.com/web-art/assets/flags/nzd.svg" alt="" />
+      <Flag code="NZD" />
     </Avatar>
   ) : undefined;
 

package/src/select/searchBox/__snapshots__/SearchBox.spec.js.snap

@@ -34,7 +34,7 @@ exports[`SearchBox renders 1`] = `
           </span>
         </span>
         <input
-          class="np-select-filter form-control np-form-control np-form-control--size-auto np-text-body-large np-input np-input--shape-rectangle"
+          class="np-select-filter form-control np-form-control np-form-control--size-auto np-text-body-large np-form-control--shape-rectangle"
           placeholder="placeholder"
           spellcheck="false"
           value="value"

package/src/ssr.spec.js

@@ -48,10 +48,6 @@ const excluded = new Set([
   'Typography',
 
   // types
-  'SearchInputProps',
-  'SelectInputItem',
-  'SelectInputOptionContentProps',
-  'SelectInputProps',
   'UploadedFile',
   'UploadError',
   'UploadResponse',
@@ -183,9 +179,6 @@ describe('Server side rendering', () => {
       Input: {
         children: undefined,
       },
-      SearchInput: {
-        children: undefined,
-      },
       TextArea: {
         children: undefined,
       },

package/build/styles/inputs/SelectInput.css

@@ -1 +0,0 @@
-.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8);padding-top:0}@media (min-width:576px){.np-select-input-query-container{padding-top:8px;padding-top:var(--size-8)}}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16)}.np-select-input-option-container--active{background-color:var(--color-background-screen-hover)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--not-compact{align-self:flex-start}.np-select-input-option-content-text{display:flex;flex:1;flex-direction:column;overflow:hidden}.np-select-input-option-content-text-secondary{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-option-content-text-compact{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-option-content-text-line-1>:not([hidden])~:not([hidden]){margin-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:32px;height:var(--size-32);justify-content:center;width:32px;width:var(--size-32)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.np-select-input-addon--interactive:hover{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-select-input-addon--interactive:focus{outline:none}.np-select-input-addon--interactive:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-select-input-addon-separator{border-inline-start-width:1px;height:24px;height:var(--size-24)}

package/build/types/common/hooks/useMedia.d.ts

@@ -1,2 +0,0 @@
-export declare function useMedia(query: string): boolean | undefined;
-//# sourceMappingURL=useMedia.d.ts.map

package/build/types/common/hooks/useMedia.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMedia.d.ts","sourceRoot":"","sources":["../../../../src/common/hooks/useMedia.ts"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,uBAYrC"}

package/build/types/common/hooks/useScreenSize.d.ts

@@ -1,3 +0,0 @@
-import { Breakpoint } from '../propsValues/breakpoint';
-export declare function useScreenSize(size: Breakpoint): boolean | undefined;
-//# sourceMappingURL=useScreenSize.d.ts.map

package/build/types/common/hooks/useScreenSize.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useScreenSize.d.ts","sourceRoot":"","sources":["../../../../src/common/hooks/useScreenSize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAIvD,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,uBAE7C"}

package/build/types/common/preventScroll/PreventScroll.d.ts

@@ -1,2 +0,0 @@
-export declare function PreventScroll(): null;
-//# sourceMappingURL=PreventScroll.d.ts.map

package/build/types/common/preventScroll/PreventScroll.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PreventScroll.d.ts","sourceRoot":"","sources":["../../../../src/common/preventScroll/PreventScroll.tsx"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,SAG5B"}

package/build/types/inputs/SearchInput.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { Merge } from '../utils';
-export interface SearchInputProps extends Merge<React.ComponentPropsWithRef<'input'>, {
-    size?: 'sm' | 'md';
-    shape?: 'rectangle' | 'pill';
-    'aria-invalid'?: boolean;
-}> {
-}
-export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<SearchInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-//# sourceMappingURL=SearchInput.d.ts.map

package/build/types/inputs/SearchInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SearchInput.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,MAAM,WAAW,gBACf,SAAQ,KAAK,CACX,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACpC;IACE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF;CAAG;AAEN,eAAO,MAAM,WAAW,4HAgBtB,CAAC"}