@transferwise/components 46.122.1 → 46.123.0

package/src/prompt/InlinePrompt/InlinePrompt.css

@@ -1,18 +1,9 @@
 .wds-inline-prompt {
+  --Prompt-gap: calc(var(--size-12) / 2);
+  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
   display: inline-flex;
-  text-align: left;
-  padding-top: calc(8px / 2);
-  padding-top: calc(var(--padding-x-small) / 2);
-  padding-bottom: calc(8px / 2);
-  padding-bottom: calc(var(--padding-x-small) / 2);
-  padding-left: calc(8px - 1px);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: 8px;
-  padding-right: var(--padding-x-small);
   border-radius: 10px;
   border-radius: var(--radius-small);
-  word-break: break-word;
-  word-wrap: break-word;
 }
 .wds-inline-prompt:has(a),
 .wds-inline-prompt:has(button) {
@@ -54,18 +45,6 @@
   position: absolute;
   inset: 0;
 }
-.wds-inline-prompt__media-wrapper {
-  padding-right: calc(12px / 2);
-  padding-right: calc(var(--size-12) / 2);
-  padding-top: calc(4px - 1px);
-  padding-top: calc(var(--size-4) - 1px);
-  padding-bottom: calc(4px - 1px);
-  padding-bottom: calc(var(--size-4) - 1px);
-}
-.wds-inline-prompt__media-wrapper .tw-icon-tags,
-.wds-inline-prompt__media-wrapper .tw-icon-confetti {
-  color: var(--color-sentiment-content-primary);
-}
 .wds-inline-prompt .wds-inline-prompt-process-indicator {
   width: 16px;
   width: var(--size-16);

package/src/prompt/InlinePrompt/InlinePrompt.less

@@ -1,13 +1,9 @@
 .wds-inline-prompt {
+  --Prompt-gap: calc(var(--size-12) / 2);
+  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
+
   display: inline-flex;
-  text-align: left;
-  padding-top: calc(var(--padding-x-small) / 2);
-  padding-bottom: calc(var(--padding-x-small) / 2);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: var(--padding-x-small);
   border-radius: var(--radius-small);
-  word-break: break-word;
-  overflow-wrap: break-word;
 
   &:has(a),
   &:has(button) {
@@ -54,17 +50,6 @@
     }
   }
 
-  &__media-wrapper {
-    padding-right: calc(var(--size-12) / 2);
-    padding-top: calc(var(--size-4) - 1px);
-    padding-bottom: calc(var(--size-4) - 1px);
-
-    .tw-icon-tags,
-    .tw-icon-confetti {
-      color: var(--color-sentiment-content-primary);
-    }
-  }
-
   .wds-inline-prompt-process-indicator {
     width: var(--size-16);
     height: var(--size-16);

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

@@ -32,8 +32,8 @@ describe('InlinePrompt', () => {
     describe(sentiment, () => {
       it('should apply correct styles', () => {
         render(<InlinePrompt {...defaultProps} sentiment={sentiment} />);
-        expect(screen.getByText('Prompt message').parentElement).toHaveClass(
-          `wds-inline-prompt--${sentiment}`,
+        expect(screen.getByText('Prompt message').parentElement?.parentElement).toHaveClass(
+          `wds-prompt--${sentiment === Sentiment.POSITIVE ? 'success' : sentiment}`,
         );
       });
 
@@ -47,7 +47,7 @@ describe('InlinePrompt', () => {
       describe('muted state', () => {
         it('should render icon and apply css', () => {
           render(<InlinePrompt {...defaultProps} muted sentiment={sentiment} />);
-          expect(screen.getByText('Prompt message').parentElement).toHaveClass(
+          expect(screen.getByText('Prompt message').parentElement?.parentElement).toHaveClass(
             'wds-inline-prompt--muted',
           );
           expect(screen.getByTestId('InlinePrompt_Muted')).toBeInTheDocument();
@@ -63,7 +63,7 @@ describe('InlinePrompt', () => {
       describe('loading state', () => {
         it('should render icon and apply css', () => {
           render(<InlinePrompt {...defaultProps} sentiment={sentiment} loading />);
-          expect(screen.getByText('Prompt message').parentElement).toHaveClass(
+          expect(screen.getByText('Prompt message').parentElement?.parentElement).toHaveClass(
             'wds-inline-prompt--loading',
           );
           expect(screen.getByTestId('InlinePrompt_ProcessIndicator')).toBeInTheDocument();
@@ -134,7 +134,7 @@ describe('InlinePrompt', () => {
       );
       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-prompt--success');
       expect(el).toHaveClass('wds-sentiment-surface');
     });
 
@@ -143,7 +143,7 @@ describe('InlinePrompt', () => {
         <InlinePrompt {...defaultProps} sentiment={Sentiment.NEGATIVE} data-testid="prompt" />,
       );
       const el = screen.getByTestId('prompt');
-      expect(el).toHaveClass('wds-inline-prompt--negative');
+      expect(el).toHaveClass('wds-prompt--negative');
       expect(el).toHaveClass('wds-sentiment-surface');
     });
   });

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -4,7 +4,7 @@ import ProcessIndicator from '../../processIndicator';
 import StatusIcon from '../../statusIcon';
 import { clsx } from 'clsx';
 import Body from '../../body';
-import SentimentSurface from '../../sentimentSurface';
+import { PrimitivePrompt } from '../PrimitivePrompt';
 
 export type InlinePromptProps = {
   /**
@@ -60,7 +60,7 @@ export const InlinePrompt = ({
   mediaLabel,
   width = 'auto',
   'data-testid': dataTestId,
-  ...rest
+  ...restProps
 }: InlinePromptProps) => {
   const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;
 
@@ -87,12 +87,12 @@ export const InlinePrompt = ({
   };
 
   return (
-    <SentimentSurface
+    <PrimitivePrompt
       sentiment={surfaceSentiment}
+      media={renderMedia()}
       data-testid={dataTestId}
       className={clsx(
         'wds-inline-prompt',
-        `wds-inline-prompt--${sentiment}`,
         {
           'wds-inline-prompt--full-width': width === 'full',
           'wds-inline-prompt--muted': muted,
@@ -100,10 +100,9 @@ export const InlinePrompt = ({
         },
         className,
       )}
-      {...rest}
+      {...restProps}
     >
-      <div className="wds-inline-prompt__media-wrapper">{renderMedia()}</div>
       <Body>{children}</Body>
-    </SentimentSurface>
+    </PrimitivePrompt>
   );
 };

package/src/prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -0,0 +1,41 @@
+.wds-prompt {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  display: flex;
+  word-wrap: break-word;
+  padding: 8px;
+  padding: var(--Prompt-padding, var(--padding-x-small));
+  text-align: left;
+  word-break: break-word;
+}
+.wds-prompt__content-wrapper {
+  display: grid;
+  grid-gap: 16px;
+  grid-gap: var(--Prompt-gap, var(--size-16));
+  gap: 16px;
+  gap: var(--Prompt-gap, var(--size-16));
+  grid-template-columns: auto 1fr;
+  width: 100%;
+}
+.wds-prompt__media-wrapper {
+  align-self: flex-start;
+  padding-top: calc(4px - 1px);
+  padding-top: calc(var(--size-4) - 1px);
+}
+.wds-prompt__media-wrapper .tw-icon-tags,
+.wds-prompt__media-wrapper .tw-icon-confetti {
+  color: var(--color-sentiment-content-primary);
+}
+.wds-prompt__actions-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  gap: var(--Prompt-actions-gap, var(--size-8));
+  grid-column-start: 2;
+}
+@media (max-width: 991px) {
+  .wds-prompt__actions-wrapper {
+    grid-column: span 2;
+    width: 100%;
+  }
+}

package/src/prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -0,0 +1,37 @@
+.wds-prompt {
+  border-radius: var(--radius-small);
+  display: flex;
+  overflow-wrap: break-word;
+  padding: var(--Prompt-padding, var(--padding-x-small));
+  text-align: left;
+  word-break: break-word;
+
+  &__content-wrapper {
+    display: grid;
+    gap: var(--Prompt-gap, var(--size-16));
+    grid-template-columns: auto 1fr;
+    width: 100%;
+  }
+
+  &__media-wrapper {
+    align-self: flex-start;
+    padding-top: calc(var(--size-4) - 1px);
+
+    .tw-icon-tags,
+    .tw-icon-confetti {
+      color: var(--color-sentiment-content-primary);
+    }
+  }
+
+  &__actions-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--Prompt-actions-gap, var(--size-8));
+    grid-column-start: 2;
+
+    @media (--screen-md-max) {
+      grid-column: span 2;
+      width: 100%;
+    }
+  }
+}

package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx

@@ -0,0 +1,70 @@
+import { Cross } from '@transferwise/icons';
+import { clsx } from 'clsx';
+import SentimentSurface, { Sentiment } from '../../sentimentSurface';
+import IconButton from '../../iconButton';
+import { useIntl } from 'react-intl';
+import closeBtnMessages from '../../common/closeButton/CloseButton.messages';
+import { ReactNode } from 'react';
+
+export type PrimitivePromptProps = {
+  /**
+   * The sentiment determines the colour scheme
+   * @default success
+   */
+  sentiment?: Sentiment;
+  /**
+   * Media to be displayed on the prompt (icon/image/etc).
+   */
+  media: ReactNode;
+  /**
+   * Any actions to be displayed on the prompt.
+   */
+  actions?: ReactNode;
+  /**
+   * Handler called when the close button is clicked. If not provided, then the close button is hidden.
+   */
+  onDismiss?: () => void;
+  id?: string;
+  className?: string;
+  'data-testid'?: string;
+  children: ReactNode;
+};
+
+/**
+ * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.
+ * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */
+export const PrimitivePrompt = ({
+  sentiment = 'success',
+  media,
+  actions,
+  onDismiss,
+  className,
+  children,
+  ...restProps
+}: PrimitivePromptProps) => {
+  const intl = useIntl();
+
+  return (
+    <SentimentSurface
+      sentiment={sentiment}
+      className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}
+      {...restProps}
+    >
+      <div className="wds-prompt__content-wrapper">
+        <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>
+        {children}
+        {actions && <div className="wds-prompt__actions-wrapper">{actions}</div>}
+      </div>
+      {onDismiss && (
+        <IconButton
+          size={24}
+          priority="secondary"
+          aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}
+          onClick={onDismiss}
+        >
+          <Cross />
+        </IconButton>
+      )}
+    </SentimentSurface>
+  );
+};

package/src/prompt/PrimitivePrompt/index.ts

@@ -0,0 +1,2 @@
+export type { PrimitivePromptProps } from './PrimitivePrompt';
+export { PrimitivePrompt } from './PrimitivePrompt';

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

@@ -6,7 +6,7 @@ import { fn } from 'storybook/test';
 const meta = {
   component: RadioGroup,
   title: 'Forms/RadioGroup/tests',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   args: {
     selectedValue: 'radio-2',
     name: 'radio-group',

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

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

package/src/snackbar/Snackbar.tests.story.tsx

@@ -13,7 +13,7 @@ export default {
   title: 'Dialogs/Snackbar/Tests',
   component: Snackbar,
   argTypes: {},
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
 };
 
 const launchSnackbar = async (canvasElement: HTMLElement) => {

package/src/stepper/Stepper.tests.story.tsx

@@ -27,6 +27,7 @@ const STEPS = [
 const meta = {
   component: Stepper,
   title: 'Navigation/Stepper/tests',
+  tags: ['!manifest'],
   argTypes: {
     activeStep: {
       control: 'radio',

package/src/summary/Summary.tests.story.tsx

@@ -5,6 +5,7 @@ import Summary, { type SummaryProps } from '.';
 export default {
   component: Summary,
   title: 'Content/Summary/tests',
+  tags: ['deprecated', '!manifest'],
 };
 
 export const LongText = () => {

package/src/title/Title.test.story.tsx

@@ -6,6 +6,7 @@ import Title from './Title';
 export default {
   component: Title,
   title: 'Typography/Title/Tests',
+  tags: ['!autodocs', '!manifest'],
   args: {
     children: lorem1000.replaceAll(' ', ''),
   },

package/src/upload/Upload.tests.story.tsx

@@ -7,6 +7,7 @@ import { Field } from '../field/Field';
 const meta = {
   component: Upload,
   title: 'Forms/Upload/Tests',
+  tags: ['!manifest'],
   argTypes: {
     maxSize: {
       control: {

package/src/uploadInput/UploadInput.tests.story.tsx

@@ -8,6 +8,7 @@ import { userEvent } from 'storybook/test';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput/Tests',
+  tags: ['!manifest'],
   component: UploadInput,
 };
 export default meta;

package/src/withId/withId.story.tsx

@@ -27,7 +27,7 @@ DescribedButton.displayName = 'DescribedButton';
 export default {
   component: DescribedButton,
   title: 'HoCs/withId',
-  tags: ['docs-only', '!manifest'],
+  tags: ['!manifest'],
 } satisfies Meta<typeof withId>;
 
 export const WithoutId: Story = {};