@transferwise/components 46.116.1 → 46.117.0

package/src/prompt/InlinePrompt/InlinePrompt.css

@@ -19,18 +19,35 @@
   position: relative;
   z-index: 1;
 }
+.wds-inline-prompt:has(a):hover,
+.wds-inline-prompt:has(button):hover {
+  background-color: var(--color-sentiment-background-surface-hover);
+}
+.wds-inline-prompt:has(a):active,
+.wds-inline-prompt:has(button):active {
+  background-color: var(--color-sentiment-background-surface-active);
+}
 .wds-inline-prompt--muted {
   opacity: 0.93;
   filter: grayscale(1);
 }
 .wds-inline-prompt a,
 .wds-inline-prompt button {
+  color: var(--color-sentiment-content-primary);
   text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
 }
+.wds-inline-prompt a:hover,
+.wds-inline-prompt button:hover {
+  color: var(--color-sentiment-content-primary-hover);
+}
+.wds-inline-prompt a:active,
+.wds-inline-prompt button:active {
+  color: var(--color-sentiment-content-primary-active);
+}
 .wds-inline-prompt a:first-of-type:before,
 .wds-inline-prompt button:first-of-type:before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
 }
@@ -44,110 +61,14 @@
 }
 .wds-inline-prompt__media-wrapper .tw-icon-tags,
 .wds-inline-prompt__media-wrapper .tw-icon-confetti {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-inline-prompt--negative {
-  background-color: var(--color-sentiment-negative-secondary);
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-inline-prompt--negative a,
-.wds-inline-prompt--negative button {
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-inline-prompt--negative a:hover,
-.wds-inline-prompt--negative button:hover {
-  color: var(--color-sentiment-negative-primary-hover);
-}
-.wds-inline-prompt--negative a:active,
-.wds-inline-prompt--negative button:active {
-  color: var(--color-sentiment-negative-primary-active);
-}
-.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
-  background-color: var(--color-sentiment-negative-secondary-hover);
-}
-.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
-  background-color: var(--color-sentiment-negative-secondary-active);
-}
-.wds-inline-prompt--positive {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-inline-prompt--positive a,
-.wds-inline-prompt--positive button {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-inline-prompt--positive a:hover,
-.wds-inline-prompt--positive button:hover {
-  color: var(--color-sentiment-positive-primary-hover);
-}
-.wds-inline-prompt--positive a:active,
-.wds-inline-prompt--positive button:active {
-  color: var(--color-sentiment-positive-primary-active);
-}
-.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
-  background-color: var(--color-sentiment-positive-secondary-hover);
-}
-.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
-  background-color: var(--color-sentiment-positive-secondary-active);
-}
-.wds-inline-prompt--proposition {
-  background-color: #D2F9F7;
-  color: var(--color-interactive-primary);
-}
-.wds-inline-prompt--proposition a,
-.wds-inline-prompt--proposition button {
-  color: var(--color-interactive-primary);
-}
-.wds-inline-prompt--proposition a:hover,
-.wds-inline-prompt--proposition button:hover {
-  color: var(--color-interactive-primary-hover);
-}
-.wds-inline-prompt--proposition a:active,
-.wds-inline-prompt--proposition button:active {
-  color: var(--color-interactive-primary-active);
-}
-.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
-  background-color: #B2F4F3;
-}
-.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
-  background-color: #91F0EE;
-}
-.wds-inline-prompt--neutral {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-inline-prompt--neutral a,
-.wds-inline-prompt--neutral button {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
-  background-color: var(--color-background-neutral-active);
-}
-.wds-inline-prompt--warning {
-  background-color: var(--color-sentiment-warning-secondary);
-  color: var(--color-sentiment-warning-content);
-}
-.wds-inline-prompt--warning a,
-.wds-inline-prompt--warning button {
-  color: var(--color-sentiment-warning-content);
-}
-.wds-inline-prompt--warning a:hover,
-.wds-inline-prompt--warning button:hover {
-  color: var(--color-sentiment-warning-content-hover);
-}
-.wds-inline-prompt--warning a:active,
-.wds-inline-prompt--warning button:active {
-  color: var(--color-sentiment-warning-content-active);
+  color: var(--color-sentiment-content-primary);
 }
-.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
+.wds-inline-prompt .wds-inline-prompt-process-indicator {
+  width: 16px;
+  width: var(--size-16);
+  height: 16px;
+  height: var(--size-16);
 }
-.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
+.wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
+  stroke: currentColor;
 }

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