@transferwise/components 0.0.0-experimental-358e009 → 0.0.0-experimental-220b657

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/tabs/Tabs.spec.tsx

@@ -1,3 +1,4 @@
+import { Globals } from '@react-spring/web';
 import { render, screen, userEvent } from '../test-utils';
 import Tabs, { TabsProps } from './Tabs';
 
@@ -17,13 +18,21 @@ function generateTabs(tabsStatus = defaultTabsStatus) {
   }));
 }
 
+beforeAll(() => {
+  Globals.assign({
+    skipAnimation: true,
+  });
+});
+
 describe('Tabs', () => {
   const initialProps: TabsProps = {
+    animatePanelsOnClick: true,
     tabs: generateTabs(),
     changeTabOnSwipe: true,
     name: 'testName',
     headerWidth: 'block',
     selected: 0,
+    transitionSpacing: 'default',
     onTabSelect: jest.fn(),
     className: 'custom-class-name',
   };
@@ -56,6 +65,19 @@ describe('Tabs', () => {
     expect(screen.getByRole('tabpanel')).toHaveAttribute('id', controlsTarget);
   });
 
+  describe('transitionSpacing', () => {
+    test.each([
+      ['default', '100%'],
+      ['xs', '8px'],
+      ['sm', '16px'],
+      ['md', '24px'],
+      ['lg', '32px'],
+    ] as const)('should respect `%s`', (input, width) => {
+      render(<Tabs {...initialProps} transitionSpacing={input} />);
+      expect(screen.getByRole('tabpanel').nextSibling).toHaveStyle({ width });
+    });
+  });
+
   it('should render correct number of tabs', () => {
     render(<Tabs {...initialProps} />);
     expect(screen.getAllByRole('tab')).toHaveLength(defaultTabsStatus.length);

package/src/tabs/Tabs.story.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Width } from '../common';
+import { Size, Width } from '../common';
 
 import Tabs from './Tabs';
 
@@ -15,6 +15,7 @@ export const Basic = () => {
     <Tabs
       className="tabs-custom-class"
       name="tabs-docs"
+      transitionSpacing={Size.MEDIUM}
       tabs={[
         {
           title: 'Title 1',
@@ -43,6 +44,7 @@ export const Basic = () => {
         },
       ]}
       selected={selected}
+      animatePanelsOnClick
       onTabSelect={(index) => setSelected(index)}
     />
   );
@@ -54,6 +56,7 @@ export const AutoTabHeaderWidth = () => {
     <Tabs
       className="tabs-custom-class"
       name="tabs-docs"
+      transitionSpacing={Size.MEDIUM}
       headerWidth={Width.AUTO}
       tabs={[
         {
@@ -89,3 +92,44 @@ export const AutoTabHeaderWidth = () => {
     />
   );
 };
+
+export const NoPanelAnimation = () => {
+  const [selected, setSelected] = useState(0);
+  return (
+    <Tabs
+      animatePanelsOnClick={false}
+      className="tabs-custom-class"
+      name="tabs-docs"
+      transitionSpacing={Size.MEDIUM}
+      tabs={[
+        {
+          title: 'Title 1',
+          disabled: false,
+          content: (
+            <div className="p-a-2">
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
+            </div>
+          ),
+        },
+        {
+          title: 'Title 2',
+          disabled: false,
+          content: (
+            <div className="p-a-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
+          ),
+        },
+        {
+          title: 'Title 3',
+          disabled: true,
+          content: (
+            <div className="p-a-2">
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
+            </div>
+          ),
+        },
+      ]}
+      selected={selected}
+      onTabSelect={(index) => setSelected(index)}
+    />
+  );
+};