@transferwise/components 45.22.0 → 45.24.0

package/src/nudge/Nudge.css

@@ -1 +1 @@
-:root{--nudge-background-color:var(--color-background-neutral);--nudge-border-radius:10px;--nudge-min-height:initial;--nudge-padding:var(--size-16);--nudge-flex-gap:var(--size-16);--nudge-media-width:initial;--nudge-link-text-decoration:none;--nudge-container-padding:0;--nudge-content-flex-alignment:center;--nudge-title-color:var(--color-content-primary);--nudge-title-font-weight:var(--font-weight-semi-bold);--nudge-title-line-height:var(--line-height-title);--nudge-control-width:var(--size-16);--nudge-control-background-color:transparent}.wds-nudge{align-items:stretch;background-color:#86a7bd1a;background-color:var(--nudge-background-color);border-radius:10px;border-radius:var(--nudge-border-radius);display:flex;flex:1;gap:16px;gap:var(--nudge-flex-gap);min-height:auto;min-height:var(--nudge-min-height);overflow:hidden;padding:16px;padding:var(--nudge-padding);position:relative;width:100%}.wds-nudge-media{flex-basis:auto;flex-basis:var(--nudge-media-width);max-width:none;max-width:var(--nudge-media-width)}.wds-nudge-media-globe{margin-left:-76px;margin-top:-5px;position:absolute;width:161px}[dir=rtl] .wds-nudge-media-globe{margin-left:0;margin-right:-76px;transform:scaleX(-1)}.wds-nudge-media-lock{margin-left:-11px;margin-top:18px;position:absolute;transform:rotate(-14.86deg);width:104px}[dir=rtl] .wds-nudge-media-lock{margin-left:0;margin-right:-11px;transform:scaleX(-1)}.wds-nudge-media-wallet{margin-left:-15px;margin-top:18px;position:absolute;width:107px}[dir=rtl] .wds-nudge-media-wallet{margin-left:0;margin-right:-15px;transform:scaleX(-1)}.wds-nudge-media-gear{margin-left:-18px;margin-top:19px;position:absolute;width:111px}[dir=rtl] .wds-nudge-media-gear{margin-left:0;margin-right:-18px;transform:scaleX(-1)}.wds-nudge-media-invite-letter{margin-left:-17px;margin-top:-2px;position:absolute;width:105px}[dir=rtl] .wds-nudge-media-invite-letter{margin-left:0;margin-right:-17px;transform:scaleX(-1)}.wds-nudge-media-business-card,.wds-nudge-media-personal-card{margin-left:-15px;margin-top:2px;position:absolute;width:104px}[dir=rtl] .wds-nudge-media-business-card,[dir=rtl] .wds-nudge-media-personal-card{margin-left:0;margin-right:-15px;transform:scaleX(-1)}.wds-nudge-container{align-items:stretch;display:flex;flex:1;gap:16px;gap:var(--nudge-flex-gap);justify-content:space-between;padding:0;padding:var(--nudge-container-padding) var(--nudge-container-padding) var(--nudge-container-padding) 0;width:100%}[dir=rtl] .wds-nudge-container{padding:0;padding:var(--nudge-container-padding) 0 var(--nudge-container-padding) var(--nudge-container-padding)}.np-theme-personal .wds-nudge-container:first-child{padding-left:16px;padding-left:var(--nudge-flex-gap)}.wds-nudge-container .wds-nudge-content{align-self:center;align-self:var(--nudge-content-flex-alignment);display:flex;flex-direction:column}.wds-nudge-container .wds-nudge-content .wds-nudge-title{color:#37517e;color:var(--nudge-title-color);font-weight:600;font-weight:var(--nudge-title-font-weight);line-height:1.2;line-height:var(--nudge-title-line-height);margin:0}.wds-nudge-container .wds-nudge-content .wds-nudge-link{font-weight:600;font-weight:var(--font-weight-semi-bold);margin-top:4px;margin-top:var(--size-4);text-decoration:none;-webkit-text-decoration:var(--nudge-link-text-decoration);text-decoration:var(--nudge-link-text-decoration)}.wds-nudge-container .wds-nudge-control{background-color:transparent;background-color:var(--nudge-control-background-color);flex-basis:16px;flex-basis:var(--nudge-control-width);flex:0 0 16px;flex:0 0 var(--nudge-control-width);height:16px;height:var(--nudge-control-width);max-width:16px;max-width:var(--nudge-control-width)}.np-theme-personal{--nudge-border-radius:var(--radius-medium);--nudge-min-height:106px;--nudge-padding:0;--nudge-link-text-decoration:underline;--nudge-container-padding:var(--size-16);--nudge-media-width:104px;--nudge-control-width:var(--size-24);--nudge-control-background-color:var(--color-background-neutral)}
+.wds-nudge{--nudge-background-color:var(--color-background-neutral);--nudge-border-radius:var(--radius-medium);--nudge-min-height:106px;--nudge-padding:0;--nudge-flex-gap:var(--size-16);--nudge-media-width:104px;--nudge-link-text-decoration:underline;--nudge-container-padding:var(--size-16);--nudge-content-flex-alignment:center;--nudge-title-color:var(--color-content-primary);--nudge-title-font-weight:var(--font-weight-semi-bold);--nudge-title-line-height:var(--line-height-title);--nudge-control-width:var(--size-24);--nudge-control-background-color:var(--color-background-neutral);align-items:stretch;background-color:var(--nudge-background-color);border-radius:var(--nudge-border-radius);display:flex;flex:1;gap:var(--nudge-flex-gap);min-height:var(--nudge-min-height);overflow:hidden;padding:var(--nudge-padding);position:relative;width:100%}.wds-nudge-media{flex-basis:var(--nudge-media-width);max-width:var(--nudge-media-width)}.wds-nudge-media-globe{margin-left:-76px;margin-top:-5px;position:absolute;width:161px}[dir=rtl] .wds-nudge-media-globe{margin-left:0;margin-right:-76px;transform:scaleX(-1)}.wds-nudge-media-lock{margin-left:-11px;margin-top:18px;position:absolute;transform:rotate(-14.86deg);width:104px}[dir=rtl] .wds-nudge-media-lock{margin-left:0;margin-right:-11px;transform:scaleX(-1)}.wds-nudge-media-wallet{margin-left:-15px;margin-top:18px;position:absolute;width:107px}[dir=rtl] .wds-nudge-media-wallet{margin-left:0;margin-right:-15px;transform:scaleX(-1)}.wds-nudge-media-gear{margin-left:-18px;margin-top:19px;position:absolute;width:111px}[dir=rtl] .wds-nudge-media-gear{margin-left:0;margin-right:-18px;transform:scaleX(-1)}.wds-nudge-media-invite-letter{margin-left:-17px;margin-top:-2px;position:absolute;width:105px}[dir=rtl] .wds-nudge-media-invite-letter{margin-left:0;margin-right:-17px;transform:scaleX(-1)}.wds-nudge-media-business-card,.wds-nudge-media-personal-card{margin-left:-15px;margin-top:2px;position:absolute;width:104px}[dir=rtl] .wds-nudge-media-business-card,[dir=rtl] .wds-nudge-media-personal-card{margin-left:0;margin-right:-15px;transform:scaleX(-1)}.wds-nudge-media-heart{margin-left:-7px;margin-top:11px;position:absolute;width:95px}[dir=rtl] .wds-nudge-media-heart{margin-left:0;margin-right:-7px;transform:scaleX(-1)}.wds-nudge-media-multi-currency{margin-left:-30px;margin-top:1px;position:absolute;width:131px}[dir=rtl] .wds-nudge-media-multi-currency{margin-left:0;margin-right:-30px;transform:scaleX(-1)}.wds-nudge-media-shopping-bag{margin-left:1px;margin-top:14px;position:absolute;width:116px}[dir=rtl] .wds-nudge-media-shopping-bag{margin-left:0;margin-right:1px;transform:scaleX(-1)}.wds-nudge-container{align-items:stretch;display:flex;flex:1;gap:var(--nudge-flex-gap);justify-content:space-between;padding:var(--nudge-container-padding) var(--nudge-container-padding) var(--nudge-container-padding) 0;width:100%}[dir=rtl] .wds-nudge-container{padding:var(--nudge-container-padding) 0 var(--nudge-container-padding) var(--nudge-container-padding)}.np-theme-personal .wds-nudge-container:first-child{padding-left:var(--nudge-flex-gap)}.wds-nudge-container .wds-nudge-content{align-self:var(--nudge-content-flex-alignment);display:flex;flex-direction:column}.wds-nudge-container .wds-nudge-content .wds-nudge-title{color:var(--nudge-title-color);font-weight:var(--nudge-title-font-weight);line-height:var(--nudge-title-line-height);margin:0}.wds-nudge-container .wds-nudge-content .wds-nudge-link{font-weight:600;font-weight:var(--font-weight-semi-bold);margin-top:4px;margin-top:var(--size-4);-webkit-text-decoration:var(--nudge-link-text-decoration);text-decoration:var(--nudge-link-text-decoration)}.wds-nudge-container .wds-nudge-control{background-color:var(--nudge-control-background-color);flex-basis:var(--nudge-control-width);flex:0 0 var(--nudge-control-width);height:var(--nudge-control-width);max-width:var(--nudge-control-width)}

package/src/nudge/Nudge.less

@@ -1,21 +1,19 @@
-:root {
+.wds-nudge {
   --nudge-background-color: var(--color-background-neutral);
-  --nudge-border-radius: 10px;
-  --nudge-min-height: initial;
-  --nudge-padding: var(--size-16);
+  --nudge-border-radius: var(--radius-medium);
+  --nudge-min-height: 106px;
+  --nudge-padding: 0;
   --nudge-flex-gap: var(--size-16);
-  --nudge-media-width: initial;
-  --nudge-link-text-decoration: none;
-  --nudge-container-padding: 0;
+  --nudge-media-width: 104px;
+  --nudge-link-text-decoration: underline;
+  --nudge-container-padding: var(--size-16);
   --nudge-content-flex-alignment: center;
   --nudge-title-color: var(--color-content-primary);
   --nudge-title-font-weight: var(--font-weight-semi-bold);
   --nudge-title-line-height: var(--line-height-title);
-  --nudge-control-width: var(--size-16);
-  --nudge-control-background-color: transparent;
-}
+  --nudge-control-width: var(--size-24);
+  --nudge-control-background-color: var(--color-background-neutral);
 
-.wds-nudge {
   align-items: stretch;
   background-color: var(--nudge-background-color);
   border-radius: var(--nudge-border-radius);
@@ -58,6 +56,15 @@
      {
       .media-position(104px, -15px, 2px);
     }
+    &-heart {
+      .media-position(95px, -7px, 11px);
+    }
+    &-multi-currency {
+      .media-position(131px, -30px, 1px);
+    }
+    &-shopping-bag {
+      .media-position(116px, 1px, 14px);
+    }
   }
 
   &-container {
@@ -121,14 +128,3 @@
     margin-right: @margin-left;
   }
 }
-
-.np-theme-personal {
-  --nudge-border-radius: var(--radius-medium);
-  --nudge-min-height: 106px;
-  --nudge-padding: 0;
-  --nudge-link-text-decoration: underline;
-  --nudge-container-padding: var(--size-16);
-  --nudge-media-width: 104px;
-  --nudge-control-width: var(--size-24);
-  --nudge-control-background-color: var(--color-background-neutral);
-}

package/src/nudge/Nudge.spec.tsx

@@ -18,12 +18,6 @@ describe('Nudge', () => {
 
   afterEach(cleanup);
 
-  it('renders a media element', () => {
-    render(<Nudge {...defaultProps} />);
-    const media = screen.getByRole('img');
-    expect(media).toBeInTheDocument();
-  });
-
   it('renders a title', () => {
     render(<Nudge {...defaultProps} />);
     const title = screen.getByText('A nudge title');
@@ -51,18 +45,6 @@ describe('Nudge', () => {
     expect(defaultProps.onDismiss).toHaveBeenCalledTimes(1);
   });
 
-  it('adds the passed id to the parent container', () => {
-    render(<Nudge {...defaultProps} id="nudge-id" />);
-    const parentContainer = screen.getByRole('img').parentElement?.parentElement;
-    expect(parentContainer?.id).toBe('nudge-id');
-  });
-
-  it(`adds the passed className to the parent container's className`, () => {
-    render(<Nudge {...defaultProps} className="happy-nudge" />);
-    const parentContainer = screen.getByRole('img').parentElement?.parentElement;
-    expect(parentContainer).toHaveClass('happy-nudge');
-  });
-
   describe('Nudge persistance', () => {
     beforeEach(() => {
       jest.resetAllMocks();

package/src/nudge/Nudge.story.tsx

@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { Assets } from '@wise/art';
 
 import { Nudge } from '..';
 
@@ -73,6 +74,36 @@ export const Default = () => {
         onClick={action('action clicked')}
         onDismiss={action('dismissed')}
       />
+
+      <Nudge
+        mediaName={Assets.HEART}
+        className="m-b-2"
+        title="Text that is no longer than two lines."
+        link="Link"
+        href="#"
+        onClick={action('action clicked')}
+        onDismiss={action('dismissed')}
+      />
+
+      <Nudge
+        mediaName={Assets.MULTI_CURRENCY}
+        className="m-b-2"
+        title="Text that is no longer than two lines."
+        link="Link"
+        href="#"
+        onClick={action('action clicked')}
+        onDismiss={action('dismissed')}
+      />
+
+      <Nudge
+        mediaName={Assets.SHOPPING_BAG}
+        className="m-b-2"
+        title="Text that is no longer than two lines."
+        link="Link"
+        href="#"
+        onClick={action('action clicked')}
+        onDismiss={action('dismissed')}
+      />
     </div>
   );
 };

package/src/nudge/Nudge.tsx

@@ -1,26 +1,15 @@
-import { Illustration } from '@wise/art';
-import { useTheme } from '@wise/components-theming';
+import { Illustration, Assets, IllustrationNames } from '@wise/art';
 import classNames from 'classnames';
 import { ReactNode, useEffect, useState, MouseEvent } from 'react';
 
 import Body from '../body';
-import { Typography } from '../common';
+import { Size, Typography } from '../common';
 import { CloseButton } from '../common/closeButton';
 import Link from '../link';
 
 // WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too
 export const STORAGE_NAME = 'dismissedNudges';
 
-export const Media = {
-  GLOBE: 'globe',
-  LOCK: 'lock',
-  WALLET: 'wallet',
-  GEAR: 'gear',
-  'INVITE-LETTER': 'invite-letter',
-  'PERSONAL-CARD': 'personal-card',
-  'BUSINESS-CARD': 'business-card',
-} as const;
-
 const getLocalStorage = (): Array<string> => {
   try {
     const storageItem = localStorage.getItem(STORAGE_NAME);
@@ -38,11 +27,23 @@ const getLocalStorage = (): Array<string> => {
   return [];
 };
 
+type MediaNameType =
+  | `${Assets.GLOBE}`
+  | `${Assets.LOCK}`
+  | `${Assets.WALLET}`
+  | `${Assets.GEAR}`
+  | `${Assets.INVITE_LETTER}`
+  | `${Assets.PERSONAL_CARD}`
+  | `${Assets.BUSINESS_CARD}`
+  | `${Assets.HEART}`
+  | `${Assets.MULTI_CURRENCY}`
+  | `${Assets.SHOPPING_BAG}`;
+
 type BaseProps = {
   /** @deprecated use `mediaName` property instead */
   media?: ReactNode;
   /** Media name  */
-  mediaName?: (typeof Media)[keyof typeof Media];
+  mediaName?: MediaNameType;
   title: ReactNode;
   /** Element inside link */
   link?: ReactNode;
@@ -89,7 +90,6 @@ const Nudge = ({
   id,
   className,
 }: Props) => {
-  const { isModern } = useTheme();
   const [isDismissed, setIsDismissed] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
 
@@ -138,30 +138,22 @@ const Nudge = ({
 
   return (
     <div className={classNames('wds-nudge', className)} id={id}>
-      {isModern ? (
-        !!mediaName && (
-          <div className="wds-nudge-media">
-            <Illustration
-              name={mediaName}
-              className={classNames(`wds-nudge-media-${mediaName}`)}
-              size="small"
-              disablePadding
-              alt=""
-            />
-          </div>
-        )
-      ) : (
-        <div className="wds-nudge-media">{media}</div>
+      {!!mediaName && (
+        <div className="wds-nudge-media">
+          <Illustration
+            name={mediaName as IllustrationNames}
+            className={classNames(`wds-nudge-media-${mediaName}`)}
+            size="small"
+            disablePadding
+            alt=""
+          />
+        </div>
       )}
       <div className="wds-nudge-container">
         <div className="wds-nudge-content">
-          {isModern ? (
-            <Body type={Typography.BODY_LARGE} className={classNames('wds-nudge-body')}>
-              {title}
-            </Body>
-          ) : (
-            <div className="wds-nudge-title">{title}</div>
-          )}
+          <Body type={Typography.BODY_LARGE} className={classNames('wds-nudge-body')}>
+            {title}
+          </Body>
           {link && (
             <Link
               href={href}

package/src/title/Title.tsx

@@ -18,7 +18,7 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
     /**
      * Default value will based one `type` prop
      */
-    as?: 'span' | 'label' | 'li' | Heading;
+    as?: 'span' | 'label' | 'li' | 'legend' | Heading;
     /**
      * Default value: {@link DEFAULT_TYPE}
      */