@transferwise/components 46.112.0 → 46.113.0

package/src/main.css

@@ -526,26 +526,26 @@
   background-color: var(--color-sentiment-positive-secondary-active);
 }
 .wds-inline-prompt--proposition {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
+  background-color: #D2F9F7;
+  color: var(--color-interactive-primary);
 }
 .wds-inline-prompt--proposition a,
 .wds-inline-prompt--proposition button {
-  color: var(--color-sentiment-positive-primary);
+  color: var(--color-interactive-primary);
 }
 .wds-inline-prompt--proposition a:hover,
 .wds-inline-prompt--proposition button:hover {
-  color: var(--color-sentiment-positive-primary-hover);
+  color: var(--color-interactive-primary-hover);
 }
 .wds-inline-prompt--proposition a:active,
 .wds-inline-prompt--proposition button:active {
-  color: var(--color-sentiment-positive-primary-active);
+  color: var(--color-interactive-primary-active);
 }
 .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
-  background-color: var(--color-sentiment-positive-secondary-hover);
+  background-color: #B2F4F3;
 }
 .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
-  background-color: var(--color-sentiment-positive-secondary-active);
+  background-color: #91F0EE;
 }
 .wds-inline-prompt--neutral {
   background-color: rgba(134,167,189,0.10196);
@@ -4421,6 +4421,14 @@ button.np-link {
   flex-shrink: 0;
   width: auto;
 }
+.tw-money-input .input-group-addon:not(.amount-currency-select-btn):not(.tw-money-input__fixed-currency):not(:has(~ .tw-money-input__fixed-currency)) {
+  padding-right: 0 !important;
+}
+[dir="rtl"] .tw-money-input .input-group-addon:not(.amount-currency-select-btn):not(.tw-money-input__fixed-currency):not(:has(~ .tw-money-input__fixed-currency)) {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  padding-right: initial !important;
+}
 .tw-money-input .amount-currency-select-btn {
   flex-shrink: 0;
   width: auto;
@@ -4447,6 +4455,64 @@ button.np-link {
   box-shadow: inset 0 0 0 1px #c9cbce !important;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary) !important;
 }
+.wds-amount-input-container {
+  width: 100%;
+}
+.wds-amount-input-input-container {
+  display: flex;
+  justify-content: right;
+  width: 100%;
+  transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
+  color: var(--color-interactive-primary);
+  overflow: hidden;
+  margin-bottom: 0 !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  .wds-amount-input-input-container {
+    transition: none;
+  }
+}
+.wds-amount-input-input {
+  border: none;
+  outline: none;
+  flex-grow: 1;
+  text-align: right;
+  background-color: transparent;
+}
+.wds-amount-input-input:focus-visible {
+  outline: none;
+}
+.wds-amount-input-placeholder {
+  flex-grow: 0;
+  display: flex;
+  align-items: center;
+}
+.wds-currency-selector:disabled {
+  opacity: 1 !important;
+  cursor: auto !important;
+  cursor: initial !important;
+  mix-blend-mode: initial !important;
+}
+.wds-chevron-container {
+  width: 32px;
+  width: var(--size-32);
+  overflow: hidden;
+  color: var(--color-interactive-primary);
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  transition: width 0.3s ease;
+}
+.wds-chevron-hidden {
+  width: 0;
+}
+.wds-expressive-money-input-currency-selector {
+  flex-shrink: 0;
+  margin-right: 24px;
+  margin-right: var(--size-24);
+}
+.wds-expressive-money-input-chevron {
+  transform: translateY(-5%);
+}
 .np-navigation-option {
   -webkit-text-decoration: none;
   text-decoration: none;

package/src/main.less

@@ -51,6 +51,7 @@
 @import "./logo/Logo.less";
 @import "./modal/Modal.less";
 @import "./moneyInput/MoneyInput.less";
+@import "./expressiveMoneyInput/ExpressiveMoneyInput.less";
 @import "./navigationOption/NavigationOption.less";
 @import "./navigationOptionsList/NavigationOptionsList.less";
 @import "./nudge/Nudge.less";

package/src/moneyInput/MoneyInput.css

@@ -38,6 +38,14 @@
   flex-shrink: 0;
   width: auto;
 }
+.tw-money-input .input-group-addon:not(.amount-currency-select-btn):not(.tw-money-input__fixed-currency):not(:has(~ .tw-money-input__fixed-currency)) {
+  padding-right: 0 !important;
+}
+[dir="rtl"] .tw-money-input .input-group-addon:not(.amount-currency-select-btn):not(.tw-money-input__fixed-currency):not(:has(~ .tw-money-input__fixed-currency)) {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  padding-right: initial !important;
+}
 .tw-money-input .amount-currency-select-btn {
   flex-shrink: 0;
   width: auto;

package/src/moneyInput/MoneyInput.less

@@ -32,11 +32,16 @@
 
   .input-group-addon {
     flex-shrink: 0;
+    
     &:not(.amount-currency-select-btn) {
       display: flex;
       align-items: center;
       flex-shrink: 0;
       width: auto;
+
+      &:not(.tw-money-input__fixed-currency):not(:has(~ .tw-money-input__fixed-currency)) {
+        .padding(right, 0) !important;
+      }
     }
   }
   

package/src/prompt/InlinePrompt/InlinePrompt.css

@@ -91,26 +91,26 @@
   background-color: var(--color-sentiment-positive-secondary-active);
 }
 .wds-inline-prompt--proposition {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
+  background-color: #D2F9F7;
+  color: var(--color-interactive-primary);
 }
 .wds-inline-prompt--proposition a,
 .wds-inline-prompt--proposition button {
-  color: var(--color-sentiment-positive-primary);
+  color: var(--color-interactive-primary);
 }
 .wds-inline-prompt--proposition a:hover,
 .wds-inline-prompt--proposition button:hover {
-  color: var(--color-sentiment-positive-primary-hover);
+  color: var(--color-interactive-primary-hover);
 }
 .wds-inline-prompt--proposition a:active,
 .wds-inline-prompt--proposition button:active {
-  color: var(--color-sentiment-positive-primary-active);
+  color: var(--color-interactive-primary-active);
 }
 .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
-  background-color: var(--color-sentiment-positive-secondary-hover);
+  background-color: #B2F4F3;
 }
 .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
-  background-color: var(--color-sentiment-positive-secondary-active);
+  background-color: #91F0EE;
 }
 .wds-inline-prompt--neutral {
   background-color: rgba(134,167,189,0.10196);

package/src/prompt/InlinePrompt/InlinePrompt.less

@@ -94,26 +94,26 @@
   }
 
   &--proposition {
-    background-color: var(--color-sentiment-positive-secondary);
+    background-color: #D2F9F7;
 
-    color: var(--color-sentiment-positive-primary);
+    color: var(--color-interactive-primary);
 
     a, button {
-      color: var(--color-sentiment-positive-primary);
+      color: var(--color-interactive-primary);
       &:hover {
-        color: var(--color-sentiment-positive-primary-hover);
+        color: var(--color-interactive-primary-hover);
       }
       &:active {
-        color: var(--color-sentiment-positive-primary-active);
+        color: var(--color-interactive-primary-active);
       }
     }
 
     .wds-inline-prompt&:has(a, button) {
       &:hover {
-        background-color: var(--color-sentiment-positive-secondary-hover);
+        background-color: #B2F4F3;
       }
       &:active {
-        background-color: var(--color-sentiment-positive-secondary-active);
+        background-color: #91F0EE;
       }
     }
   }

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

@@ -15,6 +15,12 @@ describe('InlinePrompt', () => {
     expect(screen.getByText('Hello world')).toBeInTheDocument();
   });
 
+  it('renders with GiftBox icon as default for `proposition` sentiment', () => {
+    render(<InlinePrompt {...defaultProps} sentiment="proposition" />);
+    expect(screen.getByText('Prompt message')).toBeInTheDocument();
+    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',

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

@@ -0,0 +1,39 @@
+import { lorem10, lorem5 } from '../../test-utils';
+import { InlinePrompt } from './InlinePrompt';
+import { CardWise, Rewards } from '@transferwise/icons';
+
+export default {
+  title: 'Internal/InlinePrompt',
+  component: InlinePrompt,
+};
+
+export const AllVariants = () => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridAutoFlow: 'row',
+        rowGap: 'var(--size-12)',
+        justifyItems: 'start',
+        width: 'fit-content',
+      }}
+    >
+      <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>
+    </div>
+  );
+};

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -1,12 +1,14 @@
 import { Sentiment } from '../../common';
-import { BackslashCircle } from '@transferwise/icons';
+import { BackslashCircle, GiftBox } from '@transferwise/icons';
 import ProcessIndicator from '../../processIndicator';
 import StatusIcon from '../../statusIcon';
 import { clsx } from 'clsx';
 import Body from '../../body';
 
 export type InlinePromptProps = {
-  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;
+  sentiment?:
+    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`
+    | 'proposition';
   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)
@@ -16,6 +18,7 @@ export type InlinePromptProps = {
   className?: string;
   'data-testid'?: string;
   children: React.ReactNode;
+  media?: React.ReactNode;
 };
 
 export const InlinePrompt = ({
@@ -24,9 +27,16 @@ export const InlinePrompt = ({
   loading = false,
   className,
   children,
+  media = null,
   ...rest
 }: InlinePromptProps) => {
   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" />;
     }

package/src/ssr.spec.tsx

@@ -92,6 +92,7 @@ describe('Server side rendering', () => {
   // stick all possible properties we might need to render all components in here
   const allProps: Record<string, unknown> = {
     currencies: [],
+    currencySelector: { options: [] },
     steps: [],
     stepper: {
       steps: [],

package/src/withDisplayFormat/WithDisplayFormat.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { userEvent, render, screen, waitFor } from '../test-utils';
+import { userEvent, render, screen, waitFor, fireEvent } from '../test-utils';
 import { Input } from '../inputs/Input';
 import WithDisplayFormat from '.';
 
@@ -22,6 +22,10 @@ describe('InputWithTextFormat (React Testing Library)', () => {
     onBlur: jest.fn(),
   };
 
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   [
     { value: '123', expectedValue: '12-3', displayPattern: '**-**-**' },
     { value: '1234', expectedValue: '12-34', displayPattern: '**-**-**' },
@@ -170,4 +174,27 @@ describe('InputWithTextFormat (React Testing Library)', () => {
 
     expect(input).toHaveValue('14-5');
   });
+
+  it('calls onFocus when input is focused', () => {
+    const onFocus = jest.fn();
+    setup({ ...initialProps, onFocus });
+
+    const input = screen.getByRole('textbox');
+    fireEvent.focus(input);
+
+    expect(initialProps.onBlur).not.toHaveBeenCalled();
+    expect(initialProps.onChange).not.toHaveBeenCalled();
+    expect(onFocus).toHaveBeenCalled();
+  });
+
+  it('calls onBlur when input is blurred', () => {
+    setup(initialProps);
+
+    const input = screen.getByRole('textbox');
+    fireEvent.blur(input);
+
+    expect(initialProps.onFocus).not.toHaveBeenCalled();
+    expect(initialProps.onChange).not.toHaveBeenCalled();
+    expect(initialProps.onBlur).toHaveBeenCalled();
+  });
 });

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -237,7 +237,6 @@ class WithDisplayFormat<T extends TextElementProps> extends React.Component<
   handleOnFocus: React.FocusEventHandler<HTMLTextElement> = (event) => {
     const { displayPattern, onFocus } = this.props;
     if (onFocus) {
-      this.handleOnChange(event);
       onFocus(unformatWithPattern(event.target.value, displayPattern));
     }
   };