@transferwise/components 46.116.1 → 46.117.0

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>
   );
 };

package/src/sentimentSurface/SentimentSurface.css

@@ -1,3 +1,10 @@
+.wds-sentiment-surface {
+  --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
+}
+.wds-sentiment-surface--hasBaseStyles {
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+}
 .np-theme-personal .wds-sentiment-surface-negative-base,
 .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
   --color-sentiment-content-primary: #CB272F;
@@ -32,7 +39,7 @@
   --color-sentiment-interactive-secondary-active: #A72027;
   --color-sentiment-interactive-secondary-neutral: #9B141B;
   --color-sentiment-interactive-secondary-neutral-hover: #831116;
-  --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
+  --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
   --color-sentiment-interactive-control: #CB272F;
   --color-sentiment-interactive-control-hover: #B8232B;
   --color-sentiment-interactive-control-active: #A72027;