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

package/src/field/Field.story.tsx

@@ -46,6 +46,7 @@ export const Basic = (args: FieldProps) => {
           sentiment={Sentiment.NEGATIVE}
           message="Validation error, please take a look"
           messageIconLabel={args.messageIconLabel}
+          messageLoading={args.messageLoading}
         >
           <Input value={value} onChange={({ target }) => setValue(target.value)} />
         </Field>
@@ -81,6 +82,7 @@ export const Basic = (args: FieldProps) => {
           message={lorem10}
           sentiment="negative"
           messageIconLabel={args.messageIconLabel}
+          messageLoading={args.messageLoading}
         >
           <TextArea />
         </Field>
@@ -109,6 +111,17 @@ export const WithStatusMessages = (args: FieldProps) => {
         sentiment={Sentiment.POSITIVE}
         message="Positive message"
         messageIconLabel={args.messageIconLabel}
+        messageLoading={args.messageLoading}
+      >
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+
+      <Field
+        label="Text Input with Proposition Message"
+        sentiment="proposition"
+        message="Proposition message"
+        messageIconLabel={args.messageIconLabel}
+        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -118,6 +131,7 @@ export const WithStatusMessages = (args: FieldProps) => {
         sentiment={Sentiment.WARNING}
         message="Warning message"
         messageIconLabel={args.messageIconLabel}
+        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -127,6 +141,7 @@ export const WithStatusMessages = (args: FieldProps) => {
         sentiment={Sentiment.NEGATIVE}
         message="This is a required field"
         messageIconLabel={args.messageIconLabel}
+        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -138,6 +153,7 @@ export const WithStatusMessages = (args: FieldProps) => {
         sentiment={Sentiment.NEGATIVE}
         message="Validation error, please take a look"
         messageIconLabel={args.messageIconLabel}
+        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -148,6 +164,7 @@ export const WithStatusMessages = (args: FieldProps) => {
         hint="This is a helpful message"
         error="Validation error, please take a look"
         messageIconLabel={args.messageIconLabel}
+        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
@@ -157,6 +174,7 @@ export const WithStatusMessages = (args: FieldProps) => {
         label="Text Input with Info under the field"
         message="This is a helpful message"
         messageIconLabel={args.messageIconLabel}
+        messageLoading={args.messageLoading}
       >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>

package/src/field/Field.tsx

@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
 import { useId, useRef } from 'react';
 
 import { Sentiment } from '../common';
-import InlineAlert from '../inlineAlert/InlineAlert';
+import { InlinePrompt, type InlinePromptProps } from '../prompt';
 import {
   FieldLabelContextProvider,
   InputDescribedByProvider,
@@ -21,14 +21,18 @@ export type FieldProps = {
   hint?: React.ReactNode;
   message?: React.ReactNode;
   /**
-   * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)
+   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)
    * announced by the screen readers
    * */
   messageIconLabel?: string;
+  /**
+   * If true, shows a loading spinner in place of the message icon of the InlinePrompt
+   */
+  messageLoading?: boolean;
   description?: React.ReactNode;
   /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
   error?: React.ReactNode;
-  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
+  sentiment?: InlinePromptProps['sentiment'];
   className?: string;
   children?: React.ReactNode;
 };
@@ -39,6 +43,7 @@ export const Field = ({
   required = true,
   message: propMessage,
   messageIconLabel,
+  messageLoading,
   hint,
   description = hint,
   sentiment: propType = Sentiment.NEUTRAL,
@@ -104,9 +109,16 @@ export const Field = ({
               )}
 
               {message && (
-                <InlineAlert type={sentiment} id={messageId} iconLabel={messageIconLabel}>
+                <InlinePrompt
+                  sentiment={sentiment}
+                  id={messageId}
+                  mediaLabel={messageIconLabel}
+                  className="np-field__prompt"
+                  loading={messageLoading}
+                  width="full"
+                >
                   {message}
-                </InlineAlert>
+                </InlinePrompt>
               )}
             </div>
           </InputInvalidProvider>

package/src/inlineAlert/InlineAlert.story.tsx

@@ -4,9 +4,13 @@ import InlineAlert, { InlineAlertProps } from './InlineAlert';
 import { lorem10, lorem40 } from '../test-utils';
 import Link from '../link';
 
+/**
+ * > **DEPRECATED** Use [InlinePrompt](?path=/docs/prompts-inlineprompt--docs) or [Field](?path=/docs/forms-field--docs) instead.
+ */
 export default {
   component: InlineAlert,
   title: 'Prompts/InlineAlert',
+  tags: ['deprecated'],
 } as Meta<InlineAlertProps>;
 
 export const Basic = () => {

package/src/inlineAlert/InlineAlert.tsx

@@ -22,13 +22,7 @@ const iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([
 ]);
 
 /**
- * Avoid using `<InlineAlert>` component directly
- * it's for edge cases when `<Field />` isn't suitable for some reasons.
- *
- * Example:
- * ```
- * <Field sentiment={..} message={..}>..</Field>
- * ```
+ * @deprecated Use [<InlinePrompt />](https://storybook.wise.design/?path=/docs/prompts-inlineprompt--docs) of [<Field />](https://storybook.wise.design/?path=/docs/forms-field--docs) instead.
  */
 export default function InlineAlert({
   id,

package/src/main.css

@@ -949,6 +949,9 @@
 .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);
@@ -3822,10 +3825,19 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   stroke-dasharray: calc(12px * 0.5) calc(12px * 0.5);
   stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
 }
-.np-field-control {
+.np-field-control,
+.np-field__prompt {
   margin-top: 4px;
   margin-top: var(--size-4);
 }
+.np-field .form-group--typeahead[class],
+.np-field .np-checkbox-label[class] {
+  margin-bottom: 0;
+}
+.np-field:has(.wds-radio-group) .np-field__prompt {
+  margin-top: 12px;
+  margin-top: var(--size-12);
+}
 .np-input-group {
   display: inline-grid;
   width: 100%;
@@ -5052,17 +5064,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   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;
@@ -5098,6 +5099,13 @@ html:not([dir="rtl"]) .np-navigation-option {
   -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);
+}
 .np-overlay-header .np-overlay-header__content {
   min-height: 97px;
   width: 100%;
@@ -5398,6 +5406,9 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-CardGroup .np-Card.np-Card--promoCard {
   max-width: 100%;
 }
+.wds-radio-group .np-radio:last-child label {
+  margin-bottom: 0;
+}
 .np-section {
   margin-top: 32px;
   margin-top: var(--size-32);
@@ -6924,6 +6935,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding: 0;
   margin: 0;
 }
+.typeahead--prompt {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
 .typeahead-sm.typeahead--multiple .typeahead__input-container {
   min-height: 32px;
 }

package/src/main.less

@@ -61,6 +61,7 @@
 @import "./phoneNumberInput/PhoneNumberInput.less";
 @import "./popover/Popover.less";
 @import "./promoCard/PromoCard.less";
+@import "./radioGroup/RadioGroup.less";
 @import "./section/Section.less";
 @import "./slidingPanel/SlidingPanel.less";
 @import "./snackbar/Snackbar.less";

package/src/nudge/Nudge.css

@@ -158,17 +158,6 @@
   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;
@@ -204,3 +193,10 @@
   -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,7 +53,8 @@
     }
 
     &-personal-card,
-    &-business-card {
+    &-business-card
+     {
       .media-position(104px, -15px, 2px);
     }
 
@@ -68,7 +69,7 @@
     &-shopping-bag {
       .media-position(116px, -9px, 14px);
     }
-
+    
     &-flower {
       .media-position(156px, -24px, 11px);
     }
@@ -76,10 +77,6 @@
     &-backpack {
       .media-position(123px, -16px, 6px);
     }
-
-    &-gift-box {
-      .media-position(129px, -22px, 6px);
-    }
   }
 
   &-container {
@@ -88,13 +85,11 @@
     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 & {
@@ -122,6 +117,14 @@
         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,11 +1,14 @@
-import { render, fireEvent, cleanup, screen, mockMatchMedia } from '../test-utils';
+import { render, fireEvent, cleanup, screen } 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: '#',
@@ -72,7 +75,6 @@ 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();
 
@@ -90,7 +92,6 @@ 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,15 +119,6 @@ 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,12 +4,9 @@ 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';
@@ -42,7 +39,6 @@ type MediaNameType =
   | `${Assets.MULTI_CURRENCY}`
   | `${Assets.SHOPPING_BAG}`
   | `${Assets.FLOWER}`
-  | `${Assets.GIFT_BOX}`
   | `${Assets.BACKPACK}`;
 
 type BaseProps = {
@@ -83,6 +79,7 @@ export interface RequiredPersistProps extends BaseProps {
 export type Props = OptionalId | RequiredPersistProps;
 
 const Nudge = ({
+  media,
   mediaName,
   title,
   link,
@@ -95,7 +92,6 @@ const Nudge = ({
   className,
   action,
 }: Props) => {
-  const intl = useIntl();
   const [isDismissed, setIsDismissed] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
 
@@ -181,14 +177,7 @@ const Nudge = ({
           )}
         </div>
         {onDismiss || persistDismissal ? (
-          <IconButton
-            size={24}
-            priority="tertiary"
-            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}
-            onClick={handleOnDismiss}
-          >
-            <Cross />
-          </IconButton>
+          <CloseButton className="wds-nudge-control" size="sm" onClick={handleOnDismiss} />
         ) : null}
       </div>
     </div>

package/src/prompt/InlinePrompt/InlinePrompt.css

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

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

@@ -155,4 +155,21 @@ 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,6 +14,9 @@ const withComponentGrid =
         width: '100%',
         display: 'flex',
         flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        alignContent: 'flex-start',
         gap,
         maxWidth,
       }}
@@ -26,6 +29,7 @@ export default {
   title: 'Prompts/InlinePrompt',
   component: InlinePrompt,
   tags: ['new'],
+  decorators: [withComponentGrid()],
   args: {
     loading: false,
     muted: false,
@@ -243,6 +247,37 @@ 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,6 +33,11 @@ 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;
@@ -53,6 +58,7 @@ export const InlinePrompt = ({
   children,
   media = null,
   mediaLabel,
+  width = 'auto',
   'data-testid': dataTestId,
   ...rest
 }: InlinePromptProps) => {
@@ -91,6 +97,7 @@ 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/radioGroup/RadioGroup.css

@@ -0,0 +1,3 @@
+.wds-radio-group .np-radio:last-child label {
+  margin-bottom: 0;
+}

package/src/radioGroup/RadioGroup.less

@@ -0,0 +1,3 @@
+.wds-radio-group .np-radio:last-child label {
+  margin-bottom: 0;
+}

package/src/radioGroup/RadioGroup.story.tsx

@@ -66,6 +66,8 @@ export const WithinField = {
     const hasError = selectedValue === 'radio-2';
     return (
       <Field
+        label="Field label"
+        description="Field description"
         {...(hasError
           ? {
               message: 'Something went wrong',

package/src/radioGroup/RadioGroup.test.story.tsx

@@ -0,0 +1,62 @@
+import RadioGroup, { RadioGroupProps } from './RadioGroup';
+import { Field } from '../field/Field';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+
+const meta = {
+  component: RadioGroup,
+  title: 'Forms/RadioGroup/tests',
+  tags: ['!autodocs'],
+  args: {
+    selectedValue: 'radio-2',
+    name: 'radio-group',
+    radios: [
+      {
+        value: 'radio-1',
+        label: 'Radio1',
+      },
+      {
+        value: 'radio-2',
+        label: 'Radio2',
+      },
+    ],
+    onChange: fn(),
+  },
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story<T extends string | number = string> = StoryObj<RadioGroupProps<T>>;
+
+export const FieldsWithPrompt = {
+  render: function Render(args) {
+    return (
+      <>
+        {['i1', 'i2'].map((id) => (
+          <Field
+            key={id}
+            label="Field label"
+            description="Field description"
+            message="Something went great"
+            sentiment="positive"
+          >
+            <RadioGroup {...args} selectedValue="radio-2" />
+          </Field>
+        ))}
+      </>
+    );
+  },
+} satisfies Story;
+
+export const FieldsWithoutPrompt = {
+  render: function Render(args) {
+    return (
+      <>
+        {['i1', 'i2'].map((id) => (
+          <Field key={id} label="Field label" sentiment="positive">
+            <RadioGroup {...args} selectedValue="radio-2" />
+          </Field>
+        ))}
+      </>
+    );
+  },
+} satisfies Story;

package/src/radioGroup/RadioGroup.tsx

@@ -29,7 +29,12 @@ export default function RadioGroup<T extends string | number = never>({
   const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);
 
   return radios.length > 0 ? (
-    <div role="radiogroup" {...inputAttributes} {...UNSAFE_inputAttributes}>
+    <div
+      role="radiogroup"
+      {...inputAttributes}
+      {...UNSAFE_inputAttributes}
+      className="wds-radio-group"
+    >
       {radios.map(({ value = '' as T, ...restProps }, index) => (
         <Radio
           // eslint-disable-next-line react/no-array-index-key