@transferwise/components 46.127.1 → 46.128.1

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

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
-import { Clock, Id, Taxi, Travel } from '@transferwise/icons';
+import { Clock, Taxi, Travel } from '@transferwise/icons';
 import { lorem5 } from '../../test-utils';
 import Link from '../../link';
 import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
@@ -144,7 +144,6 @@ export const Sentiments: StoryObj<PreviewStoryArgs> = {
       </>
     );
   },
-  decorators: [withComponentGrid()],
 };
 
 /**
@@ -164,6 +163,30 @@ export const Loading: StoryObj<PreviewStoryArgs> = {
   },
 };
 
+/**
+ * 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}>
+        Please <Link href="#">confirm your residential address</Link> to activate this feature.
+      </InlinePrompt>
+    );
+  },
+};
+
 /**
  * `InlinePrompt` can include a single instance of the `Link` component, which can be rendered as
  * either HTML anchor or button. That element will spread across the whole surface of the Prompt
@@ -194,31 +217,6 @@ export const Interactivity: StoryObj<PreviewStoryArgs> = {
       </InlinePrompt>
     </>
   ),
-  decorators: [withComponentGrid()],
-};
-
-/**
- * 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}>
-        Please <Link href="#">confirm your residential address</Link> to activate this feature.
-      </InlinePrompt>
-    );
-  },
 };
 
 /**
@@ -250,7 +248,6 @@ export const IconOverrides: StoryObj<PreviewStoryArgs> = {
       </>
     );
   },
-  decorators: [withComponentGrid()],
 };
 
 /**
@@ -281,7 +278,6 @@ export const SizingStrategies: StoryObj<PreviewStoryArgs> = {
       </>
     );
   },
-  decorators: [withComponentGrid()],
 };
 
 /**
@@ -309,5 +305,4 @@ export const SentimentAwareness: StoryObj<PreviewStoryArgs> = {
       </>
     );
   },
-  decorators: [withComponentGrid()],
 };

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

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react-webpack5';
+import { Travel } from '@transferwise/icons';
+import { InlinePrompt } from './InlinePrompt';
+import { withVariantConfig } from '../../../.storybook/helpers';
+
+export default {
+  title: 'Prompts/InlinePrompt/Tests',
+  component: InlinePrompt,
+  tags: ['!autodocs'],
+};
+
+type Story = StoryObj<typeof InlinePrompt>;
+
+export const TinyScreen: Story = {
+  render: () => (
+    <InlinePrompt sentiment="positive" media={<Travel />}>
+      Your travel money account is now active and ready to use for international transactions.
+    </InlinePrompt>
+  ),
+  ...withVariantConfig(['400%']),
+};

package/src/prompt/InlinePrompt/InlinePrompt.test.tsx

@@ -136,9 +136,16 @@ describe('InlinePrompt', () => {
       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');
+    describe('width', () => {
+      it('applies auto width class by default', () => {
+        render(<InlinePrompt {...defaultProps} data-testid="prompt" />);
+        expect(screen.getByTestId('prompt')).toHaveClass('wds-inline-prompt--auto-width');
+      });
+
+      it('strips the class if `width` is set to `full`', () => {
+        render(<InlinePrompt {...defaultProps} width="full" data-testid="prompt" />);
+        expect(screen.getByTestId('prompt')).not.toHaveClass('wds-inline-prompt--auto-width');
+      });
     });
   });
 });

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -94,7 +94,7 @@ export const InlinePrompt = ({
       className={clsx(
         'wds-inline-prompt',
         {
-          'wds-inline-prompt--full-width': width === 'full',
+          'wds-inline-prompt--auto-width': width !== 'full',
           'wds-inline-prompt--muted': muted,
           'wds-inline-prompt--loading': loading,
         },

package/src/prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -9,6 +9,7 @@
   padding: var(--Prompt-padding, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
+  width: 100%;
 }
 .wds-prompt__content-wrapper {
   display: grid;

package/src/prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -6,6 +6,7 @@
   padding: var(--Prompt-padding, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
+  width: 100%;
 
   &__content-wrapper {
     display: grid;
@@ -44,4 +45,4 @@
       }
     }
   }
-}
+}

package/src/sentimentSurface/SentimentSurface.docs.mdx

@@ -1,7 +1,7 @@
 import { Meta, Source, Canvas } from '@storybook/addon-docs/blocks';
 import * as stories from './SentimentSurface.story';
 
-<Meta title="Content/SentimentSurface/Developer Guide" />
+<Meta title="Foundations/SentimentSurface/Developer Guide" />
 
 # Developer Guide
 

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -31,7 +31,7 @@ const withComponentGrid = (Story: () => JSX.Element) => (
  */
 const meta: Meta<typeof SentimentSurface> = {
   component: SentimentSurface,
-  title: 'Content/SentimentSurface',
+  title: 'Foundations/SentimentSurface',
   argTypes: {
     sentiment: {
       control: 'select',

package/src/sentimentSurface/SentimentSurface.test.story.tsx

@@ -21,7 +21,7 @@ const screenModes: Theming['screenMode'][] = ['light', 'dark'];
 
 export default {
   component: SentimentSurface,
-  title: 'Content/SentimentSurface/Tests',
+  title: 'Foundations/SentimentSurface/Tests',
   tags: ['!autodocs', '!manifest'],
 } satisfies Meta<typeof SentimentSurface>;