@transferwise/components 0.0.0-experimental-cc3c49d → 0.0.0-experimental-1d00fb5

package/src/nudge/Nudge.css

@@ -158,6 +158,17 @@
   margin-left: 0;
   margin-right: -16px;
 }
+.wds-nudge-media-gift-box {
+  margin-left: -22px;
+  margin-top: 6px;
+  position: absolute;
+  width: 129px;
+}
+[dir="rtl"] .wds-nudge-media-gift-box {
+  transform: scaleX(-1);
+  margin-left: 0;
+  margin-right: -22px;
+}
 .wds-nudge-container {
   align-items: stretch;
   display: flex;
@@ -193,10 +204,3 @@
   -webkit-text-decoration: var(--nudge-link-text-decoration);
           text-decoration: var(--nudge-link-text-decoration);
 }
-.wds-nudge-container .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.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>

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx

@@ -5,6 +5,7 @@ import PrimitiveAnchor from '..';
 const meta: Meta<typeof PrimitiveAnchor> = {
   component: PrimitiveAnchor,
   title: 'Primitives/Anchor',
+  tags: ['!manifest'],
   args: {
     children: 'Click me',
     href: 'https://example.com',

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx

@@ -6,6 +6,7 @@ import PrimitiveAnchor from '..';
 const meta = {
   title: 'Primitives/Anchor/Tests',
   component: PrimitiveAnchor,
+  tags: ['!manifest'],
   args: {
     children: 'Click me',
     href: 'https://example.com',

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx

@@ -5,6 +5,7 @@ import PrimitiveButton from '..';
 const meta: Meta<typeof PrimitiveButton> = {
   component: PrimitiveButton,
   title: 'Primitives/Button',
+  tags: ['!manifest'],
   args: {
     children: 'Button text',
     onClick: fn(),

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx

@@ -6,6 +6,7 @@ import PrimitiveButton from '..';
 const meta = {
   title: 'Primitives/Button/Tests',
   component: PrimitiveButton,
+  tags: ['!manifest'],
   args: {
     children: 'Button text',
   },

package/src/prompt/InlinePrompt/InlinePrompt.css

@@ -27,9 +27,6 @@
 .wds-inline-prompt:has(button):active {
   background-color: var(--color-sentiment-background-surface-active);
 }
-.wds-inline-prompt--full-width {
-  width: 100%;
-}
 .wds-inline-prompt--muted {
   opacity: 0.93;
   filter: grayscale(1);

package/src/prompt/InlinePrompt/InlinePrompt.less

@@ -23,10 +23,6 @@
     }
   }
 
-  &--full-width {
-    width: 100%;
-  }
-
   &--muted {
     opacity: 0.93;
     filter: grayscale(1);
@@ -73,6 +69,6 @@
     // styles in the CSS package, so keeping it colocated for now.
     .process-circle {
       stroke: currentColor;
-    }
+    };
   }
 }

package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx

@@ -155,21 +155,4 @@ describe('InlinePrompt', () => {
       expect(el).toHaveClass('wds-sentiment-surface');
     });
   });
-
-  describe('width', () => {
-    it('defaults to auto width (no full-width class)', () => {
-      render(<InlinePrompt {...defaultProps} data-testid="prompt" />);
-      expect(screen.getByTestId('prompt')).not.toHaveClass('wds-inline-prompt--full-width');
-    });
-
-    it('applies auto width (no full-width class) when explicitly set', () => {
-      render(<InlinePrompt {...defaultProps} width="auto" data-testid="prompt" />);
-      expect(screen.getByTestId('prompt')).not.toHaveClass('wds-inline-prompt--full-width');
-    });
-
-    it('applies full width class when set to full', () => {
-      render(<InlinePrompt {...defaultProps} width="full" data-testid="prompt" />);
-      expect(screen.getByTestId('prompt')).toHaveClass('wds-inline-prompt--full-width');
-    });
-  });
 });

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

@@ -14,9 +14,6 @@ const withComponentGrid =
         width: '100%',
         display: 'flex',
         flexDirection: 'column',
-        justifyContent: 'flex-start',
-        alignItems: 'flex-start',
-        alignContent: 'flex-start',
         gap,
         maxWidth,
       }}
@@ -29,7 +26,6 @@ export default {
   title: 'Prompts/InlinePrompt',
   component: InlinePrompt,
   tags: ['new'],
-  decorators: [withComponentGrid()],
   args: {
     loading: false,
     muted: false,
@@ -247,37 +243,6 @@ export const IconOverrides: StoryObj<PreviewStoryArgs> = {
   decorators: [withComponentGrid()],
 };
 
-/**
- * `InlinePrompt` can either hug its content or take the full width of its container,
- * depending on the `width` prop.
- * Components like `ListItem`, `ExpressiveMoneyInput` or similar will often set it to
- * `auto`, while plain inputs will prefer `full` to visually match their boundaries.
- *
- * **NB**: `InlinePrompt` in its default – `auto` – width will expand to the full width of its container when the content spans across multiple lines.
- */
-export const SizingStrategies: StoryObj<PreviewStoryArgs> = {
-  render: (args: PreviewStoryArgs) => {
-    return (
-      <>
-        <InlinePrompt {...args} media={<Travel />} sentiment="positive" width="full">
-          This prompt will take the full width of its container.
-        </InlinePrompt>
-        <InlinePrompt {...args} media={<Travel />} sentiment="positive">
-          This prompt will hug its content.
-        </InlinePrompt>
-        <InlinePrompt {...args} media={<Travel />} sentiment="positive">
-          This prompt is configured to hug its content, but since the content is long enough to span
-          across multiple lines, it will expand to the full width of its container. And no, you
-          should not put pages of text here in the first place, but we recognise that some
-          translations are longer than others, and people also use accessibility features that
-          increase font size.
-        </InlinePrompt>
-      </>
-    );
-  },
-  decorators: [withComponentGrid()],
-};
-
 /**
  * When configured with any of the supported sentiments, the colour scheme of the component will propagate to all of its supported descendants, such as instances of a `Link`, `Icon`, and `StatusIcon`.
  */

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -33,11 +33,6 @@ export type InlinePromptProps = {
    * To be used primarily for `proposition` sentiment.
    */
   mediaLabel?: string;
-  /**
-   * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.
-   * @default auto
-   */
-  width?: 'auto' | 'full';
   id?: string;
   className?: string;
   'data-testid'?: string;
@@ -58,7 +53,6 @@ export const InlinePrompt = ({
   children,
   media = null,
   mediaLabel,
-  width = 'auto',
   'data-testid': dataTestId,
   ...rest
 }: InlinePromptProps) => {
@@ -97,7 +91,6 @@ export const InlinePrompt = ({
         'wds-inline-prompt',
         `wds-inline-prompt--${sentiment}`,
         {
-          'wds-inline-prompt--full-width': width === 'full',
           'wds-inline-prompt--muted': muted,
           'wds-inline-prompt--loading': loading,
         },

package/src/segmentedControl/SegmentedControl.story.tsx

@@ -1,4 +1,4 @@
-import { StoryFn } from '@storybook/react-webpack5';
+import { StoryFn, StoryObj } from '@storybook/react-webpack5';
 import React from 'react';
 
 import Button from '../button';
@@ -10,83 +10,87 @@ export default {
   title: 'Forms/SegmentedControl',
 };
 
-const Template: StoryFn = (args) => {
-  const [segments, setSegments] = React.useState([
-    { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes' },
-    { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake' },
-    { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake' },
-  ]);
+type Story = StoryObj<typeof SegmentedControl>;
 
-  const [segmentsWithControls, setSegmentsWithControls] = React.useState([
-    { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes', controls: 'aControlId' },
-    { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake', controls: 'aControlId' },
-    { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake', controls: 'aControlId' },
-  ]);
+const Template: Story = {
+  render: (args) => {
+    const [segments, setSegments] = React.useState([
+      { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes' },
+      { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake' },
+      { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake' },
+    ]);
 
-  const [value, setValue] = React.useState(segments[0].value);
+    const [segmentsWithControls, setSegmentsWithControls] = React.useState([
+      { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes', controls: 'aControlId' },
+      { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake', controls: 'aControlId' },
+      { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake', controls: 'aControlId' },
+    ]);
 
-  console.log('render: segments.length', segments.length);
-  return (
-    <div className="p-a-2">
-      <SegmentedControl
-        name="aSegmentedControl"
-        value={value}
-        onChange={setValue}
-        {...(args.mode === 'view'
-          ? { segments: segmentsWithControls, mode: 'view', controls: 'aControlId' }
-          : { segments, mode: 'input' })}
-      />
-      <div className="m-a-2" id="aControlId">
-        <p>Selected value: {value}</p>
-      </div>
-      <div className="m-a-2">
-        <p>
-          Force the <b>selectedValue</b> to be one of the following:
-          <ul>
-            {segments.map((segment) => (
-              <li key={segment.id}>
-                <a
-                  href="/"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    setValue(segment.value);
-                  }}
-                >
-                  {segment.label}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </p>
-      </div>
-      <div className="m-a-2">
-        <Button
-          priority="secondary"
-          type="danger"
-          size="sm"
-          disabled={segments.length < 2}
-          onClick={() => {
-            const index = segments.findIndex((s) => s.value !== value);
-            setSegments((prev) => prev.filter((_, i) => i !== index));
-            setSegmentsWithControls((prev) => prev.filter((_, i) => i !== index));
-          }}
-        >
-          Remove one segment
-        </Button>
+    const [value, setValue] = React.useState(segments[0].value);
+
+    console.log('render: segments.length', segments.length);
+    return (
+      <div className="p-a-2">
+        <SegmentedControl
+          name="aSegmentedControl"
+          value={value}
+          onChange={setValue}
+          {...(args.mode === 'view'
+            ? { segments: segmentsWithControls, mode: 'view', controls: 'aControlId' }
+            : { segments, mode: 'input' })}
+        />
+        <div className="m-a-2" id="aControlId">
+          <p>Selected value: {value}</p>
+        </div>
+        <div className="m-a-2">
+          <p>
+            Force the <b>selectedValue</b> to be one of the following:
+            <ul>
+              {segments.map((segment) => (
+                <li key={segment.id}>
+                  <a
+                    href="/"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setValue(segment.value);
+                    }}
+                  >
+                    {segment.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </p>
+        </div>
+        <div className="m-a-2">
+          <Button
+            priority="secondary"
+            type="danger"
+            size="sm"
+            disabled={segments.length < 2}
+            onClick={() => {
+              const index = segments.findIndex((s) => s.value !== value);
+              setSegments((prev) => prev.filter((_, i) => i !== index));
+              setSegmentsWithControls((prev) => prev.filter((_, i) => i !== index));
+            }}
+          >
+            Remove one segment
+          </Button>
+        </div>
       </div>
-    </div>
-  );
+    );
+  },
 };
 
-export const SegmentedControlDefault = {
-  render: Template,
+export const SegmentedControlDefault: Story = {
+  ...Template,
   args: {
     mode: 'input',
   },
 };
 
-export const SegmentedControlView = {
-  render: Template,
+export const SegmentedControlView: Story = {
+  ...Template,
   args: {
     mode: 'view',
   },