@transferwise/components 46.116.1 → 46.117.1

package/src/prompt/InlinePrompt/InlinePrompt.less

@@ -1,6 +1,3 @@
-/// @FIXME all tokens here need to be adjusted after
-///        the new sentiment tokens land
-
 .wds-inline-prompt {
   display: inline-flex;
   text-align: left;
@@ -16,18 +13,37 @@
   &:has(button) {
     position: relative;
     z-index: 1;
+
+    &:hover {
+      background-color: var(--color-sentiment-background-surface-hover);
+    }
+
+    &:active {
+      background-color: var(--color-sentiment-background-surface-active);
+    }
   }
 
   &--muted {
-    opacity: .93;
+    opacity: 0.93;
     filter: grayscale(1);
   }
 
-  a, button {
+  a,
+  button {
+    color: var(--color-sentiment-content-primary);
     text-underline-offset: calc(var(--size-4) / 2);
+
+    &:hover {
+      color: var(--color-sentiment-content-primary-hover);
+    }
+
+    &:active {
+      color: var(--color-sentiment-content-primary-active);
+    }
+
     &:first-of-type {
       &:before {
-        content: '';
+        content: "";
         position: absolute;
         inset: 0;
       }
@@ -41,122 +57,18 @@
 
     .tw-icon-tags,
     .tw-icon-confetti {
-      color: var(--color-sentiment-positive-primary);
-    }
-  }
-
-  &--negative {
-    background-color: var(--color-sentiment-negative-secondary);
-    color: var(--color-sentiment-negative-primary);
-
-    a, button {
-      color: var(--color-sentiment-negative-primary);
-
-      &:hover {
-        color: var(--color-sentiment-negative-primary-hover);
-      }
-
-      &:active {
-        color: var(--color-sentiment-negative-primary-active);
-      }
-    }
-
-    .wds-inline-prompt&:has(a, button) {
-      &:hover {
-        background-color: var(--color-sentiment-negative-secondary-hover);
-      }
-      &:active {
-        background-color: var(--color-sentiment-negative-secondary-active);
-      }
-    }
-  }
-
-  &--positive {
-    background-color: var(--color-sentiment-positive-secondary);
-    color: var(--color-sentiment-positive-primary);
-    a, button {
-      color: var(--color-sentiment-positive-primary);
-      &:hover {
-        color: var(--color-sentiment-positive-primary-hover);
-      }
-      &:active {
-        color: var(--color-sentiment-positive-primary-active);
-      }
-    }
-    .wds-inline-prompt&:has(a, button) {
-      &:hover {
-        background-color: var(--color-sentiment-positive-secondary-hover);
-      }
-      &:active {
-        background-color: var(--color-sentiment-positive-secondary-active);
-      }
-    }
-  }
-
-  &--proposition {
-    background-color: #D2F9F7;
-
-    color: var(--color-interactive-primary);
-
-    a, button {
-      color: var(--color-interactive-primary);
-      &:hover {
-        color: var(--color-interactive-primary-hover);
-      }
-      &:active {
-        color: var(--color-interactive-primary-active);
-      }
-    }
-
-    .wds-inline-prompt&:has(a, button) {
-      &:hover {
-        background-color: #B2F4F3;
-      }
-      &:active {
-        background-color: #91F0EE;
-      }
-    }
-  }
-
-  &--neutral {
-    background-color: var(--color-background-neutral);
-    color: var(--color-content-primary);
-
-    a, button {
-      color: var(--color-content-primary);
-    }
-
-    .wds-inline-prompt&:has(a, button) {
-      &:hover {
-        background-color: var(--color-background-neutral-hover);
-      }
-      &:active {
-        background-color: var(--color-background-neutral-active);
-      }
+      color: var(--color-sentiment-content-primary);
     }
   }
 
-  &--warning {
-    background-color: var(--color-sentiment-warning-secondary);
-    color: var(--color-sentiment-warning-content);
+  .wds-inline-prompt-process-indicator {
+    width: var(--size-16);
+    height: var(--size-16);
 
-    a, button {
-      color: var(--color-sentiment-warning-content);
-      &:hover {
-        color: var(--color-sentiment-warning-content-hover);
-      }
-      &:active {
-        color: var(--color-sentiment-warning-content-active);
-      }
-    }
-
-    .wds-inline-prompt&:has(a, button) {
-      &:hover {
-        background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
-      }
-      &:active {
-        background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
-      }
-    }
+    // This belongs in ProcessIndicator but there are many conflicting
+    // styles in the CSS package, so keeping it colocated for now.
+    .process-circle {
+      stroke: currentColor;
+    };
   }
 }

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

@@ -1,10 +1,11 @@
-import React from 'react';
 import { mockMatchMedia, render, screen } from '../../test-utils';
 import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
 import { Sentiment } from '../../common';
 
 mockMatchMedia();
 
+const MEDIA = <span data-testid="custom-media">Custom Media</span>;
+
 describe('InlinePrompt', () => {
   const defaultProps: InlinePromptProps = {
     children: 'Prompt message',
@@ -21,39 +22,75 @@ describe('InlinePrompt', () => {
     expect(screen.getByTestId('gift-box-icon')).toBeInTheDocument();
   });
 
-  describe('renders with each sentiment', () => {
-    it.each([Sentiment.POSITIVE, Sentiment.NEUTRAL, Sentiment.NEGATIVE, Sentiment.WARNING])(
-      'renders with sentiment %s',
-      (sentiment) => {
-        render(
-          <InlinePrompt
-            {...defaultProps}
-            sentiment={sentiment as InlinePromptProps['sentiment']}
-          />,
-        );
+  [
+    { sentiment: Sentiment.NEGATIVE as const, acceptsMedia: false, statusIconLabel: 'Error:' },
+    { sentiment: Sentiment.WARNING as const, acceptsMedia: false, statusIconLabel: 'Warning:' },
+    { sentiment: Sentiment.NEUTRAL as const, acceptsMedia: false, statusIconLabel: 'Information:' },
+    { sentiment: Sentiment.POSITIVE as const, acceptsMedia: true, statusIconLabel: '' },
+    { sentiment: 'proposition' as const, acceptsMedia: true, statusIconLabel: '' },
+  ].forEach(({ sentiment, statusIconLabel, acceptsMedia }) => {
+    describe(sentiment, () => {
+      it('should apply correct styles', () => {
+        render(<InlinePrompt {...defaultProps} sentiment={sentiment} />);
         expect(screen.getByText('Prompt message').parentElement).toHaveClass(
           `wds-inline-prompt--${sentiment}`,
         );
-      },
-    );
-  });
+      });
 
-  it('renders muted state', () => {
-    render(<InlinePrompt {...defaultProps} muted />);
-    screen.debug(undefined, 99999999);
-    expect(screen.getByText('Prompt message').parentElement).toHaveClass(
-      'wds-inline-prompt--muted',
-    );
-    expect(screen.getByTestId('InlinePrompt_Muted')).toBeInTheDocument();
-  });
+      if (statusIconLabel) {
+        it('should render StatusIcon', () => {
+          render(<InlinePrompt {...defaultProps} sentiment={sentiment} />);
+          expect(screen.getByLabelText(statusIconLabel)).toBeInTheDocument();
+        });
+      }
 
-  it('renders loading state', () => {
-    render(<InlinePrompt {...defaultProps} loading />);
-    screen.debug(undefined, 99999999);
-    expect(screen.getByText('Prompt message').parentElement).toHaveClass(
-      'wds-inline-prompt--loading',
-    );
-    expect(screen.getByTestId('InlinePrompt_ProcessIndicator')).toBeInTheDocument();
+      describe('muted state', () => {
+        it('should render icon and apply css', () => {
+          render(<InlinePrompt {...defaultProps} muted sentiment={sentiment} />);
+          expect(screen.getByText('Prompt message').parentElement).toHaveClass(
+            'wds-inline-prompt--muted',
+          );
+          expect(screen.getByTestId('InlinePrompt_Muted')).toBeInTheDocument();
+        });
+
+        it('should trump `media`', () => {
+          render(<InlinePrompt {...defaultProps} muted sentiment={sentiment} media={MEDIA} />);
+          expect(screen.getByTestId('InlinePrompt_Muted')).toBeInTheDocument();
+          expect(screen.queryByTestId('custom-media')).not.toBeInTheDocument();
+        });
+      });
+
+      describe('loading state', () => {
+        it('should render icon and apply css', () => {
+          render(<InlinePrompt {...defaultProps} sentiment={sentiment} loading />);
+          expect(screen.getByText('Prompt message').parentElement).toHaveClass(
+            'wds-inline-prompt--loading',
+          );
+          expect(screen.getByTestId('InlinePrompt_ProcessIndicator')).toBeInTheDocument();
+        });
+
+        it('should trump `media`', () => {
+          render(<InlinePrompt {...defaultProps} sentiment={sentiment} loading media={MEDIA} />);
+          expect(screen.getByTestId('InlinePrompt_ProcessIndicator')).toBeInTheDocument();
+          expect(screen.queryByTestId('custom-media')).not.toBeInTheDocument();
+        });
+      });
+
+      describe('custom media', () => {
+        if (acceptsMedia) {
+          it('should respect `media`', () => {
+            render(<InlinePrompt {...defaultProps} sentiment={sentiment} media={MEDIA} />);
+            expect(screen.getByTestId('custom-media')).toBeInTheDocument();
+          });
+        } else {
+          it('should ignore `media`', () => {
+            render(<InlinePrompt {...defaultProps} sentiment={sentiment} media={MEDIA} />);
+            expect(screen.getByLabelText(statusIconLabel)).toBeInTheDocument();
+            expect(screen.queryByTestId('custom-media')).not.toBeInTheDocument();
+          });
+        }
+      });
+    });
   });
 
   it('applies custom className, id, and data-testid', () => {
@@ -69,4 +106,25 @@ describe('InlinePrompt', () => {
     expect(el).toHaveClass('custom-class');
     expect(el).toHaveAttribute('id', 'custom-id');
   });
+
+  describe('SentimentSurface integration', () => {
+    it('maps positive sentiment to success for SentimentSurface', () => {
+      render(
+        <InlinePrompt {...defaultProps} sentiment={Sentiment.POSITIVE} data-testid="prompt" />,
+      );
+      const el = screen.getByTestId('prompt');
+      // The component should have both the original class and the SentimentSurface class
+      expect(el).toHaveClass('wds-inline-prompt--positive');
+      expect(el).toHaveClass('wds-sentiment-surface');
+    });
+
+    it('passes through other sentiments unchanged', () => {
+      render(
+        <InlinePrompt {...defaultProps} sentiment={Sentiment.NEGATIVE} data-testid="prompt" />,
+      );
+      const el = screen.getByTestId('prompt');
+      expect(el).toHaveClass('wds-inline-prompt--negative');
+      expect(el).toHaveClass('wds-sentiment-surface');
+    });
+  });
 });

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

@@ -1,39 +1,231 @@
-import { lorem10, lorem5 } from '../../test-utils';
-import { InlinePrompt } from './InlinePrompt';
-import { CardWise, Rewards } from '@transferwise/icons';
+import type { ReactElement } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Taxi, Travel } from '@transferwise/icons';
+import { lorem5 } from '../../test-utils';
+import Link from '../../link';
+import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
 
-export default {
-  title: 'Internal/InlinePrompt',
-  component: InlinePrompt,
-};
-
-export const AllVariants = () => {
-  return (
+const withComponentGrid =
+  ({ maxWidth = 'auto', gap = '1rem' } = {}) =>
+  (Story: () => ReactElement) => (
     <div
       style={{
-        display: 'grid',
-        gridAutoFlow: 'row',
-        rowGap: 'var(--size-12)',
-        justifyItems: 'start',
-        width: 'fit-content',
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        gap,
+        maxWidth,
       }}
     >
-      <InlinePrompt sentiment="positive">{lorem5}</InlinePrompt>
-      <InlinePrompt media={<Rewards />} sentiment="positive">
-        {lorem10}
-      </InlinePrompt>
-      <InlinePrompt sentiment="negative">{lorem5}</InlinePrompt>
-      <InlinePrompt sentiment="negative">{lorem10}</InlinePrompt>
-      <InlinePrompt sentiment="neutral">{lorem5}</InlinePrompt>
-      <InlinePrompt sentiment="neutral">{lorem10}</InlinePrompt>
-      <InlinePrompt sentiment="warning">{lorem5}</InlinePrompt>
-      <InlinePrompt sentiment="warning">{lorem10}</InlinePrompt>
-      <InlinePrompt sentiment="proposition">{lorem5}</InlinePrompt>
-      <InlinePrompt sentiment="proposition">{lorem10}</InlinePrompt>
-      <InlinePrompt sentiment="proposition" media={<CardWise />}>
-        {lorem10}
-      </InlinePrompt>
-      <InlinePrompt>{lorem5}</InlinePrompt>
+      <Story />
     </div>
   );
+
+export default {
+  title: 'Internal/InlinePrompt',
+  component: InlinePrompt,
+  args: {
+    loading: false,
+    muted: false,
+    children: lorem5,
+  },
+  argTypes: {
+    sentiment: {
+      control: 'select',
+      options: ['positive', 'negative', 'neutral', 'warning', 'proposition'],
+    },
+    loading: {
+      control: 'boolean',
+    },
+    muted: {
+      control: 'boolean',
+    },
+    children: {
+      control: 'text',
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+} satisfies Meta<InlinePromptProps>;
+
+/**
+ * Convenience controls for previewing rich markup,
+ * not otherwise possible via Storybook
+ */
+type PreviewStoryArgs = InlinePromptProps & {
+  previewMedia: InlinePromptProps['media'];
+};
+
+const previewArgGroup = {
+  category: 'Storybook Preview options',
+  type: {
+    summary: undefined,
+  },
+};
+
+const previewArgTypes = {
+  previewMedia: {
+    name: 'Preview with `media`',
+    control: 'boolean',
+    mapping: {
+      false: undefined,
+      true: <Taxi />,
+    },
+    table: previewArgGroup,
+  },
+} as const;
+
+const getPropsForPreview = (
+  args: PreviewStoryArgs,
+): [InlinePromptProps, Partial<InlinePromptProps>] => {
+  const { previewMedia, ...props } = args;
+
+  return [
+    props,
+    {
+      media: previewMedia,
+    },
+  ];
+};
+
+export const Playground: StoryObj<PreviewStoryArgs> = {
+  tags: ['!autodocs'],
+  argTypes: previewArgTypes,
+  args: {
+    previewMedia: false,
+  },
+  render: (args: PreviewStoryArgs) => {
+    const [props, previewProps] = getPropsForPreview(args);
+    return <InlinePrompt {...props} {...previewProps} />;
+  },
+};
+
+/**
+ * Aside from the known `neutral`, `negative`, `warning` and `positive` sentiments, `InlinePrompt` is the first of the prompts to introduce a new `proposition` sentiment, which can be used to encourage the user to take an action that might benefit them.
+ *
+ * By default, its associated icon for the prompt is `GiftBox`.
+ */
+export const Sentiments: StoryObj<PreviewStoryArgs> = {
+  argTypes: previewArgTypes,
+  args: {
+    previewMedia: false,
+  },
+  render: (args: PreviewStoryArgs) => {
+    const [props, previewProps] = getPropsForPreview(args);
+    return (
+      <>
+        <InlinePrompt {...props} {...previewProps} sentiment="neutral">
+          This is a neutral prompt.
+        </InlinePrompt>
+        <InlinePrompt {...props} {...previewProps} sentiment="negative">
+          This is a negative prompt.
+        </InlinePrompt>
+        <InlinePrompt {...props} {...previewProps} sentiment="warning">
+          This is a warning prompt.
+        </InlinePrompt>
+        <InlinePrompt {...props} {...previewProps} sentiment="positive">
+          This is a positive prompt.
+        </InlinePrompt>
+        <InlinePrompt {...props} {...previewProps} sentiment="proposition">
+          This is a proposition prompt.
+        </InlinePrompt>
+      </>
+    );
+  },
+  decorators: [withComponentGrid()],
+};
+
+/**
+ * Inline prompts are also used when forms need to check something in the background, like
+ * verifying an account number is real. Turning on the loading state will replace the icon with
+ * a spinner while waiting for the check to finish.
+ */
+export const Loading: StoryObj<PreviewStoryArgs> = {
+  argTypes: previewArgTypes,
+  args: {
+    loading: true,
+    previewMedia: false,
+  },
+  render: (args: PreviewStoryArgs) => {
+    const [props, previewProps] = getPropsForPreview(args);
+    return <InlinePrompt {...props} {...previewProps} />;
+  },
+};
+
+/**
+ * Inline prompt is usually associated with a different component, such as `Input` or `ListItem`.
+ * When those components are disabled, the prompt is often used to communicate to the user why they
+ * cannot interact with them. For that reason, the prompt cannot inherit the usual disabled visual
+ * style, and it must retain its interactivity. To bring these 2 components visually closer to each
+ * other, `muted` prop introduces slightly reduced opacity and luminosity as well as a special
+ * backslash circle icon.
+ */
+export const Muted: StoryObj<PreviewStoryArgs> = {
+  argTypes: previewArgTypes,
+  args: {
+    muted: true,
+    previewMedia: false,
+  },
+  render: (args: PreviewStoryArgs) => {
+    const [props, previewProps] = getPropsForPreview(args);
+    return <InlinePrompt {...props} {...previewProps} />;
+  },
+};
+
+/**
+ * While main sentiments (`warning`, `negative`, `neutral`) must retain their associated
+ * `StatusIcons`, the `positive` and `proposition` ones allow for Icon overrides to bring it
+ * closer to the prompt's content.
+ */
+export const IconOverrides: StoryObj<PreviewStoryArgs> = {
+  render: (args: PreviewStoryArgs) => {
+    return (
+      <>
+        <InlinePrompt {...args} media={<Travel />} sentiment="positive">
+          Your travel account is set up and ready to use.
+        </InlinePrompt>
+        <InlinePrompt {...args} media={<Taxi />} sentiment="proposition">
+          Connect Wise with your taxi app to get exclusive discounts.
+        </InlinePrompt>
+        <InlinePrompt {...args} media={<Taxi />} sentiment="negative">
+          This icon override is ignored.
+        </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`.
+ */
+export const SentimentAwareness: StoryObj<PreviewStoryArgs> = {
+  argTypes: previewArgTypes,
+  args: {
+    previewMedia: false,
+  },
+  render: (args: PreviewStoryArgs) => {
+    const [props, previewProps] = getPropsForPreview(args);
+
+    return (
+      <>
+        <InlinePrompt {...props} {...previewProps} sentiment="negative">
+          This is a negative prompt with an <Link href="#">inline link</Link>.
+        </InlinePrompt>
+        <InlinePrompt {...props} {...previewProps} sentiment="positive">
+          This is a positive prompt with an <Link href="#">inline link</Link>.
+        </InlinePrompt>
+        <InlinePrompt {...props} {...previewProps} sentiment="proposition">
+          This is a proposition prompt with an <Link href="#">inline link</Link>.
+        </InlinePrompt>
+      </>
+    );
+  },
+  decorators: [withComponentGrid()],
 };

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -4,23 +4,40 @@ import ProcessIndicator from '../../processIndicator';
 import StatusIcon from '../../statusIcon';
 import { clsx } from 'clsx';
 import Body from '../../body';
+import SentimentSurface from '../../sentimentSurface';
 
 export type InlinePromptProps = {
+  /**
+   * The sentiment determines the colour scheme
+   */
   sentiment?:
     | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`
     | 'proposition';
+  /**
+   * Replaces the icon with a spinner while waiting for the short-lived action to finish.
+   * @default false
+   */
   loading?: boolean;
   /**
-   * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)
+   * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled
+   * they are associated with actually disabled component (e.g. a disabled list item or input).
+   * @default false
    */
   muted?: boolean;
+  /**
+   * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.
+   */
+  media?: React.ReactNode;
   id?: string;
   className?: string;
   'data-testid'?: string;
   children: React.ReactNode;
-  media?: React.ReactNode;
 };
 
+/**
+ * Inline prompts appear alongside a specific component on the screen. They help the user stay
+ * informed, fix something, or get more out of what they're doing.
+ */
 export const InlinePrompt = ({
   sentiment = Sentiment.POSITIVE,
   muted = false,
@@ -28,26 +45,40 @@ export const InlinePrompt = ({
   className,
   children,
   media = null,
+  'data-testid': dataTestId,
   ...rest
 }: InlinePromptProps) => {
+  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;
+
   const renderMedia = () => {
-    if (media && ['proposition', 'positive'].includes(sentiment)) {
-      return media;
-    }
-    if (sentiment === 'proposition') {
-      return <GiftBox />;
-    }
     if (muted) {
       return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" />;
     }
     if (loading) {
-      return <ProcessIndicator data-testid="InlinePrompt_ProcessIndicator" size="xxs" />;
+      return (
+        <ProcessIndicator
+          data-testid="InlinePrompt_ProcessIndicator"
+          size="xxs"
+          className="wds-inline-prompt-process-indicator"
+        />
+      );
+    }
+
+    if (sentiment === 'positive' && media) {
+      return media;
     }
+
+    if (sentiment === 'proposition') {
+      return media || <GiftBox />;
+    }
+
     return <StatusIcon size={16} sentiment={sentiment} />;
   };
 
   return (
-    <div
+    <SentimentSurface
+      sentiment={surfaceSentiment}
+      data-testid={dataTestId}
       className={clsx(
         'wds-inline-prompt',
         `wds-inline-prompt--${sentiment}`,
@@ -61,6 +92,6 @@ export const InlinePrompt = ({
     >
       <div className="wds-inline-prompt__media-wrapper">{renderMedia()}</div>
       <Body>{children}</Body>
-    </div>
+    </SentimentSurface>
   );
 };