@transferwise/components 46.88.1 → 46.89.0

package/src/button/LegacyButton.tsx

@@ -30,9 +30,20 @@ type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
 /** @deprecated */
 type DeprecatedSizes = SizeExtraSmall;
 
+/**
+ * @deprecated use new button instead APIs
+ * @example
+ * ```
+ * import { Button, ButtonProps } from '@transferwise/components';
+ *
+ * <Button v2>...</Button>
+ * ```
+ */
 export type CommonProps = {
   v2?: false;
 
+  as?: 'a' | 'button';
+
   /** Makes the button take up the full width of its container */
   block?: boolean;
 
@@ -58,17 +69,28 @@ export type CommonProps = {
   htmlType?: 'submit' | 'reset' | 'button';
 };
 
-export type ButtonProps = CommonProps &
-  Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
-    as?: 'button';
-  };
+/**
+ * @deprecated use new button instead APIs
+ * @example
+ * ```
+ * import { Button, ButtonProps } from '@transferwise/components';
+ *
+ * <Button v2>...</Button>
+ * ```
+ */
+export type ButtonProps = CommonProps & Omit<React.ComponentPropsWithRef<'button'>, 'type'>;
 
-type AnchorProps = CommonProps &
-  Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
-    as?: 'a';
-    href?: string;
-  };
+type AnchorProps = CommonProps & Omit<React.ComponentPropsWithRef<'a'>, 'type'>;
 
+/**
+ * @deprecated use new button instead APIs
+ * @example
+ * ```
+ * import { Button, ButtonProps } from '@transferwise/components';
+ *
+ * <Button v2>...</Button>
+ * ```
+ */
 export type LegacyButtonProps = ButtonProps | AnchorProps;
 
 /**

package/src/carousel/Carousel.css

@@ -99,14 +99,6 @@
   padding: 24px;
   padding: var(--size-24);
 }
-.carousel__scroll-button {
-  width: 32px;
-  width: var(--size-32);
-  height: 32px;
-  height: var(--size-32);
-  align-items: center;
-  justify-content: center;
-}
 .carousel__indicators {
   display: flex;
   justify-content: center;

package/src/carousel/Carousel.less

@@ -107,13 +107,6 @@
   padding: var(--size-24);
 }
 
-.carousel__scroll-button {
-  width: var(--size-32);
-  height: var(--size-32);
-  align-items: center;
-  justify-content: center;
-}
-
 .carousel__indicators {
   display: flex;
   justify-content: center;

package/src/carousel/Carousel.spec.tsx

@@ -1,11 +1,11 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { userEvent } from '../test-utils';
+import { userEvent, fireEvent, render, screen, mockMatchMedia } from '../test-utils';
 
 import Display from '../display';
 import Title from '../title';
 
 import Carousel, { type CarouselCard } from './Carousel';
 
+mockMatchMedia();
 jest.mock('@wise/components-theming', () => ({
   ...jest.requireActual<Record<string, unknown>>('@wise/components-theming'),
   useTheme: jest.fn().mockReturnValue({ theme: 'personal' }),

package/src/carousel/Carousel.tsx

@@ -2,7 +2,7 @@ import { ChevronLeft, ChevronRight } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';
 
-import ActionButton from '../actionButton';
+import IconButton from '../iconButton';
 import Title from '../title';
 import type { PromoCardLinkProps } from '../promoCard/PromoCard';
 import PromoCard from '../promoCard/PromoCard';
@@ -169,29 +169,30 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
           header
         )}
         {areActionButtonsEnabled ? (
-          <div className="hidden-xs">
-            <ActionButton
-              className="carousel__scroll-button"
+          <div className="hidden-xs d-inline-flex">
+            <IconButton
+              size={32}
               tabIndex={-1}
-              priority="secondary"
+              priority="tertiary"
               disabled={!isLeftActionButtonEnabled}
               aria-hidden="true"
               data-testid="scroll-carousel-left"
               onClick={() => scrollCarousel('left')}
             >
               <ChevronLeft />
-            </ActionButton>
-            <ActionButton
+            </IconButton>
+            <IconButton
+              size={32}
               tabIndex={-1}
-              className="carousel__scroll-button m-l-1"
-              priority="secondary"
+              className="m-l-1"
+              priority="tertiary"
               aria-hidden="true"
               data-testid="scroll-carousel-right"
               disabled={scrollIsAtEnd}
               onClick={() => scrollCarousel()}
             >
               <ChevronRight />
-            </ActionButton>
+            </IconButton>
           </div>
         ) : null}
       </div>

package/src/common/action/Action.tsx

@@ -1,8 +1,9 @@
 import { clsx } from 'clsx';
 import Link from '../../link';
 import { Typography } from '../propsValues/typography';
-import ActionButton from '../../actionButton';
 import { Priority } from '../propsValues/control';
+import Button from '../../button';
+import { ButtonPriority, ButtonSentiment } from '../../button/Button.types';
 
 export type ActionOptions = {
   'aria-label'?: string;
@@ -13,12 +14,20 @@ export type ActionOptions = {
 };
 
 type Props = {
-  variant?: 'button' | 'action-button';
   action: ActionOptions;
   className?: string;
+  variant?: 'button' | 'action-button';
+  sentiment?: ButtonSentiment;
+  priority?: ButtonPriority;
 };
 
-export function Action({ action, className, variant = 'button' }: Props) {
+export function Action({
+  action,
+  className,
+  variant = 'button',
+  sentiment = 'default',
+  priority = Priority.SECONDARY,
+}: Props) {
   if ('href' in action) {
     return (
       <Link
@@ -34,23 +43,32 @@ export function Action({ action, className, variant = 'button' }: Props) {
     );
   }
 
-  return variant === 'button' ? (
-    <button
-      type="button"
-      aria-label={action['aria-label']}
-      className={clsx('btn-unstyled np-text-link-large', className)}
-      onClick={action.onClick}
-    >
-      {action.text}
-    </button>
-  ) : (
-    <ActionButton
-      aria-label={action['aria-label']}
-      priority={Priority.SECONDARY}
-      className={clsx(className)}
-      onClick={action.onClick}
-    >
-      {action.text}
-    </ActionButton>
-  );
+  switch (variant) {
+    case 'action-button':
+      return (
+        <Button
+          v2
+          size="sm"
+          sentiment={sentiment}
+          aria-label={action['aria-label']}
+          priority={priority}
+          className={clsx(className)}
+          onClick={action.onClick}
+        >
+          {action.text}
+        </Button>
+      );
+    case 'button':
+    default:
+      return (
+        <button
+          type="button"
+          aria-label={action['aria-label']}
+          className={clsx('btn-unstyled np-text-link-large', className)}
+          onClick={action.onClick}
+        >
+          {action.text}
+        </button>
+      );
+  }
 }

package/src/common/closeButton/CloseButton.css

@@ -39,6 +39,21 @@
     width: var(--size-64);
   }
 }
+.np-theme-personal .np-close-button--x-small {
+  height: 24px;
+  height: var(--size-24);
+  width: 24px;
+  width: var(--size-24);
+  flex-shrink: 0;
+}
+@media (max-width: 320px) {
+  .np-theme-personal .np-close-button--x-small {
+    height: 48px;
+    height: var(--size-48);
+    width: 48px;
+    width: var(--size-48);
+  }
+}
 .np-theme-personal .np-close-button--large {
   height: 40px;
   height: var(--size-40);

package/src/common/closeButton/CloseButton.less

@@ -33,6 +33,16 @@
     border-radius: var(--radius-full);
     transition: background-color 0.1s ease;
 
+    &--x-small {
+      height: var(--size-24);
+      width: var(--size-24);
+      @media (--screen-400-zoom) {
+        height: var(--size-48);
+        width: var(--size-48);
+      }
+      flex-shrink: 0;
+    }
+
     &--large {
       height: var(--size-40);
       width: var(--size-40);

package/src/common/closeButton/CloseButton.tsx

@@ -3,7 +3,7 @@ import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { useIntl } from 'react-intl';
 
-import { Size, SizeLarge, SizeMedium, SizeSmall } from '../propsValues/size';
+import { Size, SizeLarge, SizeMedium, SizeSmall, SizeExtraSmall } from '../propsValues/size';
 
 import messages from './CloseButton.messages';
 
@@ -11,7 +11,7 @@ export type CloseButtonProps = Pick<
   React.ComponentPropsWithoutRef<'button'>,
   'aria-label' | 'className' | 'onClick'
 > & {
-  size?: SizeSmall | SizeMedium | SizeLarge;
+  size?: SizeExtraSmall | SizeSmall | SizeMedium | SizeLarge;
   filled?: boolean;
   isDisabled?: boolean;
   testId?: string;
@@ -45,6 +45,7 @@ export const CloseButton = forwardRef(function CloseButton(
         'close btn-link',
         'text-no-decoration',
         {
+          'np-close-button--x-small': size === Size.EXTRA_SMALL,
           'np-close-button--large': size === Size.MEDIUM,
           'np-close-button--x-large': size === Size.LARGE,
         },
@@ -56,7 +57,7 @@ export const CloseButton = forwardRef(function CloseButton(
       data-testid={testId}
       onClick={onClick}
     >
-      <Icon size={size === Size.SMALL ? 16 : 24} />
+      <Icon size={size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24} />
     </button>
   );
 });

package/src/criticalBanner/CriticalCommsBanner.css

@@ -1,76 +1,36 @@
-div.critical-comms {
-  --critical-comms-background-color: var(--color-background-negative);
-  --critical-comms-title-color: var(--color-content-negative);
-  --critical-comms-subtitle-color: var(--color-content-secondary);
-  --critical-comms-subtitle-color-padding-left: var(--size-16);
-  --critical-comms-vertical-spacing: var(--size-8);
-  background-color: rgba(255,135,135,0.10196);
-  background-color: var(--critical-comms-background-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.np-theme-personal div.critical-comms,
-.np-theme-personal--dark div.critical-comms {
-  --critical-comms-background-color: var(--color-sentiment-negative);
-  --critical-comms-title-color: var(--color-contrast);
-  --critical-comms-subtitle-color: var(--color-contrast);
-  --critical-comms-subtitle-color-padding-left: 0;
-  --critical-comms-vertical-spacing: var(--size-16);
-  padding: 24px;
-  padding: var(--padding-medium);
-}
-.np-theme-personal div.critical-comms .tw-icon-alert-circle-fill,
-.np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill {
-  color: var(--color-contrast);
-}
-.np-theme-personal div.critical-comms .tw-icon-alert-circle-fill svg,
-.np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill svg {
-  width: 48px;
-  height: 48px;
-}
-.np-theme-personal div.critical-comms .cta-btn,
-.np-theme-personal--dark div.critical-comms .cta-btn {
-  background-color: var(--color-contrast);
-}
-.np-theme-personal div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus,
-.np-theme-personal--dark div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus {
-  outline-color: var(--color-contrast);
-}
-@media (max-width: 767px) {
-  div.critical-comms {
-    display: inline;
-    display: initial;
+.np-theme-personal .critical-comms .alert-warning {
+  color: var(--color-contrast-overlay);
+  background-color: var(--color-sentiment-negative);
+}
+.np-theme-personal .critical-comms .alert-warning .np-text-title-body {
+  color: var(--color-contrast-overlay);
+}
+.np-theme-personal .critical-comms .status-circle.warning {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+}
+.np-theme-personal .critical-comms .status-circle.warning .status-icon {
+  color: var(--color-contrast-theme);
+}
+.np-theme-personal .critical-comms .alert__message .alert__action {
+  margin-top: 16px;
+  margin-top: var(--size-16);
+}
+.np-theme-personal .critical-comms .wds-Button {
+  --Button-background: var(--color-contrast-overlay);
+  --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
+  --Button-background-active: var(--color-sentiment-negative-secondary-active);
+}
+@media (min-width: 768px) {
+  .np-theme-personal .critical-comms .alert-warning .alert__message {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
   }
-}
-div.critical-comms .critical-comms--title {
-  color: var(--critical-comms-title-color);
-}
-div.critical-comms .critical-comms--subtitle {
-  color: var(--critical-comms-subtitle-color);
-}
-div.critical-comms .critical-comms--cta {
-  padding-left: 0;
-}
-@media (max-width: 767px) {
-  div.critical-comms .critical-comms--cta {
-    padding-left: var(--critical-comms-subtitle-color-padding-left);
-    padding-top: var(--critical-comms-vertical-spacing);
-    min-width: 100%;
-  }
-}
-div.critical-comms .critical-comms-body {
-  display: flex;
-  width: 100%;
-}
-@media (max-width: 767px) {
-  div.critical-comms .critical-comms-body {
-    flex-direction: column;
-  }
-}
-@media (max-width: 767px) {
-  div.critical-comms .critical-comms-content {
-    padding-top: var(--critical-comms-vertical-spacing);
-    flex-wrap: wrap;
+  .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
+    margin-top: 0;
+    margin-left: 16px;
+    margin-left: var(--padding-small);
   }
 }

package/src/criticalBanner/CriticalCommsBanner.less

@@ -1,78 +1,51 @@
-div.critical-comms {
-  --critical-comms-background-color: var(--color-background-negative);
-  --critical-comms-title-color: var(--color-content-negative);
-  --critical-comms-subtitle-color: var(--color-content-secondary);
-  --critical-comms-subtitle-color-padding-left: var(--size-16);
-  --critical-comms-vertical-spacing: var(--size-8);
-
-  .np-theme-personal &,
-  .np-theme-personal--dark & {
-    --critical-comms-background-color: var(--color-sentiment-negative);
-    --critical-comms-title-color: var(--color-contrast);
-    --critical-comms-subtitle-color: var(--color-contrast);
-    --critical-comms-subtitle-color-padding-left: 0;
-    --critical-comms-vertical-spacing: var(--size-16);
-
-    padding: var(--padding-medium);
-
-    .tw-icon-alert-circle-fill {
-      color: var(--color-contrast);
-
-      svg {
-        width: 48px;
-        height: 48px;
+.np-theme-personal {
+  .critical-comms {
+    .alert-warning {
+      color: var(--color-contrast-overlay);
+      background-color: var(--color-sentiment-negative);
+
+      .np-text-title-body {
+        color: var(--color-contrast-overlay);
       }
     }
 
-    .cta-btn {
-      background-color: var(--color-contrast);
+    .status-circle.warning {
+      background-color: var(--color-background-screen);
 
-      &:not(.disabled,:disabled):focus {
-        outline-color: var(--color-contrast);
+      .status-icon {
+        color: var(--color-contrast-theme);
       }
     }
-  }
-
-  background-color: var(--critical-comms-background-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  @media (--screen-sm-max) {
-    display: initial;
-  }
-
-  .critical-comms--title {
-    color: var(--critical-comms-title-color);
-  }
-
-  .critical-comms--subtitle {
-    color: var(--critical-comms-subtitle-color);
-  }
 
-  .critical-comms--cta {
-    padding-left: 0;
-
-    @media (--screen-sm-max) {
-      padding-left: var(--critical-comms-subtitle-color-padding-left);
-      padding-top: var(--critical-comms-vertical-spacing);
-      min-width: 100%;
+    .alert__message {
+      .alert__action {
+        margin-top: var(--size-16);
+      }
     }
-  }
-
-  .critical-comms-body {
-    display: flex;
-    width: 100%;
 
-    @media (--screen-sm-max) {
-      flex-direction: column;
+    .wds-Button {
+      --Button-background: var(--color-contrast-overlay);
+      --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
+      --Button-background-active: var(--color-sentiment-negative-secondary-active);
     }
   }
 
-  .critical-comms-content {
-    @media (--screen-sm-max) {
-      padding-top: var(--critical-comms-vertical-spacing);
-      flex-wrap: wrap;
+
+  @media (--screen-md) {
+    .critical-comms {
+      .alert-warning {
+        .alert__message {
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          width: 100%;
+
+          .alert__action {
+            margin-top: 0;
+            margin-left: var(--padding-small);
+          }
+        }
+      }
     }
   }
-}
+}

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -1,6 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import CriticalCommsBanner from '.';
+import { storyConfig } from '../test-utils';
 
 export default {
   component: CriticalCommsBanner,
@@ -8,12 +9,33 @@ export default {
   tags: ['autodocs'],
 } satisfies Meta<typeof CriticalCommsBanner>;
 
-type Story = StoryObj<typeof CriticalCommsBanner>;
-
-export const Basic: Story = {
+export const Basic = {
   args: {
     title: 'Your account is overdrawn',
     subtitle: 'Add money within the next 30 days',
     action: { label: 'Take action', href: 'https://wise.com' },
   },
 };
+
+export const Variants = storyConfig(
+  {
+    args: {
+      title: 'Your account is overdrawn',
+      subtitle: 'Add money within the next 30 days',
+      action: { label: 'Take action', href: 'https://wise.com' },
+    },
+  },
+  { variants: ['default', 'dark', 'rtl'] },
+);
+
+export const Mobile = storyConfig(
+  {
+    tags: ['!autodocs'],
+    args: {
+      title: 'Your account is overdrawn',
+      subtitle: 'Add money within the next 30 days',
+      action: { label: 'Take action', href: 'https://wise.com' },
+    },
+  },
+  { variants: ['default', 'dark', 'rtl', 'mobile'] },
+);

package/src/criticalBanner/CriticalCommsBanner.tsx

@@ -1,13 +1,6 @@
-import { Alert as DangerIcon, AlertCircleFill } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
+import Alert from '../alert';
 import { clsx } from 'clsx';
 
-import Avatar, { AvatarType } from '../avatar';
-import Body from '../body';
-import Button from '../button';
-import { ControlType, Priority, Size, Typography } from '../common';
-import Title from '../title';
-
 export type CriticalCommsBannerProps = {
   title: string;
   subtitle?: string;
@@ -19,50 +12,15 @@ export type CriticalCommsBannerProps = {
 };
 
 function CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {
-  const { isModern } = useTheme();
   return (
     <div className={clsx('critical-comms', className)}>
-      <div className="critical-comms-body">
-        <Avatar
-          size={Size.MEDIUM}
-          type={AvatarType.ICON}
-          className={clsx(isModern ? 'm-r-2' : 'm-r-1')}
-          backgroundColor={
-            isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)'
-          }
-        >
-          {isModern ? <AlertCircleFill /> : <DangerIcon size={24} />}
-        </Avatar>
-        <div className="critical-comms-content d-flex align-items-center flex-grow-1">
-          <div className={clsx('flex-grow-1', { 'p-x-2': !isModern })}>
-            <Title
-              type={isModern ? Typography.TITLE_BODY : Typography.TITLE_GROUP}
-              className="critical-comms--title"
-            >
-              {title}
-            </Title>
-            <Body className="critical-comms--subtitle">{subtitle}</Body>
-          </div>
-          {action ? (
-            <div className="critical-comms--cta">
-              <Button
-                block={isModern}
-                size={Size.SMALL}
-                type={ControlType.NEGATIVE}
-                priority={isModern ? Priority.SECONDARY : Priority.PRIMARY}
-                className="cta-btn"
-                onClick={() => {
-                  if (action) {
-                    window.location.href = action.href;
-                  }
-                }}
-              >
-                {action.label}
-              </Button>
-            </div>
-          ) : null}
-        </div>
-      </div>
+      <Alert
+        title={title}
+        message={subtitle}
+        action={{ target: action?.href, text: action?.label }}
+        className={className}
+        type="warning"
+      />
     </div>
   );
 }

package/src/iconButton/IconButton.tsx

@@ -10,7 +10,10 @@ export type Props = {
   'data-testid'?: string;
 } & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &
   Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &
-  Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'role' | 'children' | 'aria-label'>;
+  Pick<
+    HTMLAttributes<HTMLDivElement>,
+    'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'
+  >;
 
 const IconButton = forwardRef(function IconButton(
   {