@transferwise/components 46.120.1 → 46.121.1

package/src/nudge/Nudge.less

@@ -53,8 +53,7 @@
     }
 
     &-personal-card,
-    &-business-card
-     {
+    &-business-card {
       .media-position(104px, -15px, 2px);
     }
 
@@ -69,7 +68,7 @@
     &-shopping-bag {
       .media-position(116px, -9px, 14px);
     }
-    
+
     &-flower {
       .media-position(156px, -24px, 11px);
     }
@@ -77,6 +76,10 @@
     &-backpack {
       .media-position(123px, -16px, 6px);
     }
+
+    &-gift-box {
+      .media-position(129px, -22px, 6px);
+    }
   }
 
   &-container {
@@ -85,11 +88,13 @@
     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;
+    padding: var(--nudge-container-padding) var(--nudge-container-padding)
+      var(--nudge-container-padding) 0;
     width: 100%;
 
     [dir="rtl"] & {
-      padding: var(--nudge-container-padding) 0 var(--nudge-container-padding) var(--nudge-container-padding);
+      padding: var(--nudge-container-padding) 0 var(--nudge-container-padding)
+        var(--nudge-container-padding);
     }
 
     .np-theme-personal & {
@@ -117,14 +122,6 @@
         text-decoration: var(--nudge-link-text-decoration);
       }
     }
-
-    .wds-nudge-control {
-      max-width: var(--nudge-control-width);
-      flex-basis: var(--nudge-control-width);
-      flex: 0 0 var(--nudge-control-width);
-      height: var(--nudge-control-width);
-      background-color: var(--nudge-control-background-color);
-    }
   }
 }
 

package/src/nudge/Nudge.spec.tsx

@@ -1,14 +1,11 @@
-import { render, fireEvent, cleanup, screen } from '../test-utils';
+import { render, fireEvent, cleanup, screen, mockMatchMedia } from '../test-utils';
 
 import Nudge from '.';
 
+mockMatchMedia();
+
 describe('Nudge', () => {
   const defaultProps = {
-    media: (
-      <span role="img" aria-label="Party popper emoji">
-        🎉
-      </span>
-    ),
     title: 'A nudge title',
     link: 'CTA',
     href: '#',
@@ -75,6 +72,7 @@ describe('Nudge', () => {
     });
 
     it('shows a nudge if localStorage has been set with a different id for a different nudge and calls is previously dismissed with FALSE', () => {
+      mockMatchMedia();
       jest.spyOn(Storage.prototype, 'getItem').mockReturnValue('["BANANA"]');
       const isPreviouslyDismissed = jest.fn();
 
@@ -92,6 +90,7 @@ describe('Nudge', () => {
     });
 
     it('calls local storage with updated dismissed nudges value', () => {
+      mockMatchMedia();
       jest.spyOn(Storage.prototype, 'getItem').mockReturnValue('["BANANA"]');
       const setItem = jest.spyOn(Storage.prototype, 'setItem');
 

package/src/nudge/Nudge.story.tsx

@@ -119,6 +119,15 @@ export const Default = () => {
         onClick={action('action clicked')}
         onDismiss={action('dismissed')}
       />
+      <Nudge
+        mediaName={Assets.GIFT_BOX}
+        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

@@ -4,9 +4,12 @@ import { ReactNode, useEffect, useState, MouseEvent } from 'react';
 
 import Body from '../body';
 import { Typography } from '../common';
-import { CloseButton } from '../common/closeButton';
 import Link from '../link';
 import type { AlertAction } from '../alert';
+import IconButton from '../iconButton';
+import { Cross } from '@transferwise/icons';
+import { useIntl } from 'react-intl';
+import closeBtnMessages from '../common/closeButton/CloseButton.messages';
 
 // 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';
@@ -39,6 +42,7 @@ type MediaNameType =
   | `${Assets.MULTI_CURRENCY}`
   | `${Assets.SHOPPING_BAG}`
   | `${Assets.FLOWER}`
+  | `${Assets.GIFT_BOX}`
   | `${Assets.BACKPACK}`;
 
 type BaseProps = {
@@ -79,7 +83,6 @@ export interface RequiredPersistProps extends BaseProps {
 export type Props = OptionalId | RequiredPersistProps;
 
 const Nudge = ({
-  media,
   mediaName,
   title,
   link,
@@ -92,6 +95,7 @@ const Nudge = ({
   className,
   action,
 }: Props) => {
+  const intl = useIntl();
   const [isDismissed, setIsDismissed] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
 
@@ -177,7 +181,14 @@ const Nudge = ({
           )}
         </div>
         {onDismiss || persistDismissal ? (
-          <CloseButton className="wds-nudge-control" size="sm" onClick={handleOnDismiss} />
+          <IconButton
+            size={24}
+            priority="tertiary"
+            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}
+            onClick={handleOnDismiss}
+          >
+            <Cross />
+          </IconButton>
         ) : null}
       </div>
     </div>