@transferwise/components 46.66.0 → 46.67.0

package/src/moneyInput/MoneyInput.rtl.spec.tsx

@@ -2,6 +2,7 @@ import { Field } from '../field/Field';
 import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../test-utils';
 
 import MoneyInput from './MoneyInput';
+import messages from './MoneyInput.messages';
 
 mockMatchMedia();
 mockResizeObserver();
@@ -51,6 +52,7 @@ describe('MoneyInput', () => {
   const props = {
     currencies,
     selectedCurrency: currencies[1],
+    searchPlaceholder: 'Type a currency / country',
     amount: 1000,
     onAmountChange: jest.fn(),
     onCurrencyChange: jest.fn(),
@@ -90,4 +92,49 @@ describe('MoneyInput', () => {
     );
     expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Recipient gets/);
   });
+
+  describe('ids', () => {
+    it('should guarantee id and connect the input with the selected currency via withId HoC', () => {
+      render(<MoneyInput {...props} />);
+      const input = screen.getByRole('textbox');
+      const button = screen.getByRole('combobox');
+      expect(input.getAttribute('id')).toBeTruthy();
+      expect(input).toHaveAttribute('aria-describedby', button.getAttribute('id'));
+    });
+
+    it('should have unique id for the select filter with predefined id', async () => {
+      const fieldId = 'myFieldId';
+      render(
+        <Field label="Multiple currencies" id={fieldId}>
+          <MoneyInput {...props} />
+        </Field>,
+      );
+      await userEvent.click(screen.getByRole('combobox'));
+      expect(screen.getByLabelText(props.searchPlaceholder)).toHaveAttribute(
+        'id',
+        `${fieldId}SelectedCurrencySearch`,
+      );
+    });
+
+    it('should have unique id for the select filter without predefined id', async () => {
+      render(
+        <Field label="Multiple currencies">
+          <MoneyInput {...props} />
+        </Field>,
+      );
+      await userEvent.click(screen.getByRole('combobox'));
+      expect(screen.getByLabelText(props.searchPlaceholder)).toHaveAttribute(
+        'id',
+        expect.stringMatching(/^:.*?:SelectedCurrencySearch$/),
+      );
+    });
+  });
+
+  it('should have AT label for the currency dropdown', () => {
+    render(<MoneyInput {...props} />);
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'aria-label',
+      messages.selectCurrencyLabel.defaultMessage,
+    );
+  });
 });

package/src/moneyInput/MoneyInput.spec.js

@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme';
-import { render, screen } from '@testing-library/react';
 
 import { MoneyInput, Title, Input, SelectInput } from '..';
 import { mockMatchMedia, mockResizeObserver } from '../test-utils';
@@ -818,14 +817,4 @@ describe('Money Input', () => {
       });
     });
   });
-
-  describe('withId', () => {
-    it('should guarantee id and connect the input with the selected currency', () => {
-      render(<MoneyInput {...props} />);
-      const input = screen.getByRole('textbox');
-      const button = screen.getByRole('combobox');
-      expect(input.getAttribute('id')).toBeTruthy();
-      expect(input).toHaveAttribute('aria-describedby', button.getAttribute('id'));
-    });
-  });
 });

package/src/moneyInput/MoneyInput.story.tsx

@@ -9,13 +9,13 @@ import { Field } from '../field/Field';
 export default {
   component: MoneyInput,
   title: 'Forms/MoneyInput',
-  render: function Render(args) {
+  render: function Render({ id, ...args }) {
     const [selectedCurrency, setSelectedCurrency] = useState(args.selectedCurrency);
 
     const handleOnCurrencyChange = (value: CurrencyOptionItem) => setSelectedCurrency(value);
 
     return (
-      <Field label="Editable money input label" required>
+      <Field label="Editable money input label" required id={id}>
         <MoneyInput
           {...args}
           selectedCurrency={selectedCurrency}
@@ -129,6 +129,7 @@ export const MultipleCurrencies: Story = {
     },
     selectedCurrency: exampleCurrency.usd,
     searchPlaceholder: 'Type a currency / country',
+    id: 'moneyInput',
   },
 };
 
@@ -155,20 +156,22 @@ export const OpenedInput: Story = {
 };
 
 export const SmallInput: Story = {
-  render: (args) => {
+  render: ({ id, ...args }) => {
     return (
       <>
-        <Field id={args.id} label="Money inputs" required>
+        <Field label="Money inputs" required>
           <MoneyInput {...args} {...SingleCurrency.args} />
         </Field>
         <br />
-        <MoneyInput {...args} {...MultipleCurrencies.args} />
+        <Field label="Multiple currencies">
+          <MoneyInput {...args} {...MultipleCurrencies.args} />
+        </Field>
         <hr />
-        <Field id={args.id} label="Error states" sentiment="negative" required>
+        <Field label="Error state" sentiment="negative" required>
           <MoneyInput {...args} {...SingleCurrency.args} />
         </Field>
         <br />
-        <Field sentiment="negative">
+        <Field label="Multiple currencies: error state" sentiment="negative">
           <MoneyInput {...args} {...MultipleCurrencies.args} />
         </Field>
       </>

package/src/moneyInput/MoneyInput.tsx

@@ -314,7 +314,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
 
     const isFixedCurrency = (!this.state.searchQuery && hasSingleCurrency()) || !onCurrencyChange;
     const disabled = !this.props.onAmountChange;
-    const selectedCurrencyElementId = `${amountInputId}SelectedCurrency`;
+    const selectedCurrencyElementId = `${inputAttributes?.id ?? amountInputId}SelectedCurrency`;
 
     return (
       <div
@@ -387,6 +387,13 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
             )}
           >
             <SelectInput
+              UNSAFE_triggerButtonProps={{
+                id: undefined,
+                'aria-labelledby': undefined,
+                'aria-describedby': undefined,
+                'aria-invalid': undefined,
+                'aria-label': this.props.intl.formatMessage(messages.selectCurrencyLabel),
+              }}
               id={selectedCurrencyElementId}
               items={selectOptions}
               value={selectedCurrency}

package/src/stepper/Stepper.css

@@ -70,35 +70,11 @@
   padding: 0   ;
 }
 .progress-bar {
-  float: left;
   -webkit-backface-visibility: hidden;
-  height: 100%;
   background-color: var(--color-interactive-primary);
-  border-top-left-radius: 1px;
-  border-bottom-left-radius: 1px;
   transition: width 0.6s ease-in-out;
   will-change: width;
 }
-[dir="rtl"] .progress-bar {
-  float: right;
-}
-.progress-bar::after {
-  float: right;
-  width: 8px;
-  height: 8px;
-  margin-top: -3px;
-  margin-right: -4px;
-  content: "";
-  border-radius: 4px;
-}
-[dir="rtl"] .progress-bar::after {
-  float: left;
-}
-[dir="rtl"] .progress-bar::after {
-  margin-left: -4px;
-  margin-right: 0;
-  margin-right: initial;
-}
 .btn-unstyled {
   background: none;
   border: none;

package/src/stepper/Stepper.less

@@ -78,27 +78,10 @@
 }
 
 .progress-bar {
-  .float(left);
-
   -webkit-backface-visibility: hidden;
-  height: 100%;
   background-color: var(--color-interactive-primary);
-  border-top-left-radius: 1px;
-  border-bottom-left-radius: 1px;
   transition: width 0.6s ease-in-out;
   will-change: width;
-
-  &::after {
-    .float(right);
-
-    width: 8px;
-    height: 8px;
-    margin-top: -3px;
-    .margin(right, -4px);
-
-    content: "";
-    border-radius: 4px;
-  }
 }
 
 .btn-unstyled {

package/src/stepper/Stepper.spec.js

@@ -40,15 +40,21 @@ describe('Stepper', () => {
     });
 
     it('sets the widths of the progress bar to match where you are in the flow', () => {
-      expect(totalWidth()).toBe('0%');
+      expect(totalWidth()).toBe('0px');
       activeStep(2);
-      expect(totalWidth()).toBe('100%');
+      expect(totalWidth()).toBe(
+        'calc(100% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))',
+      );
       steps(5);
-      expect(totalWidth()).toBe('50%');
+      expect(totalWidth()).toBe(
+        'calc(50% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))',
+      );
       activeStep(10000);
-      expect(totalWidth()).toBe('100%');
+      expect(totalWidth()).toBe(
+        'calc(100% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))',
+      );
       activeStep(-10);
-      expect(totalWidth()).toBe('0%');
+      expect(totalWidth()).toBe('0px');
     });
   });
 

package/src/stepper/Stepper.tsx

@@ -38,6 +38,18 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
   const stepPercentage = 1 / (steps.length - 1);
   const percentageCompleted = activeStepIndex / (steps.length - 1);
 
+  const getProgressWidth = (): string => {
+    if (percentageCompleted === 0) {
+      return '0px';
+    }
+    /**
+     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders
+     * which are used for progress vertical delimiter.
+     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.
+     */
+    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;
+  };
+
   const renderStep = (step: Step, index: number) => {
     const active = index === activeStepIndex;
     const clickable = step.onClick && !active;
@@ -85,9 +97,8 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
   return (
     <div className={clsx('tw-stepper', className)}>
       <div className="progress">
-        <div className="progress-bar" style={{ width: `${percentageCompleted * 100}%` }} />
+        <div className="progress-bar" style={{ width: getProgressWidth() }} />
       </div>
-
       <ol className="tw-stepper-steps p-t-1 m-b-0">{steps.map(renderStep)}</ol>
     </div>
   );

package/src/withId/withId.story.tsx

@@ -24,6 +24,7 @@ DescribedButton.displayName = 'DescribedButton';
 
 export default {
   component: DescribedButton,
+  tags: ['docs-only'],
 } satisfies Meta<typeof withId>;
 
 export const WithoutId: Story = {};