@transferwise/components 0.0.0-experimental-4ba8514 → 0.0.0-experimental-11855a1

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

@@ -2,7 +2,6 @@ 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();
@@ -52,7 +51,6 @@ describe('MoneyInput', () => {
   const props = {
     currencies,
     selectedCurrency: currencies[1],
-    searchPlaceholder: 'Type a currency / country',
     amount: 1000,
     onAmountChange: jest.fn(),
     onCurrencyChange: jest.fn(),
@@ -92,49 +90,4 @@ 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,4 +1,5 @@
 import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { MoneyInput, Title, Input, SelectInput } from '..';
 import { mockMatchMedia, mockResizeObserver } from '../test-utils';
@@ -817,4 +818,14 @@ 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({ id, ...args }) {
+  render: function Render(args) {
     const [selectedCurrency, setSelectedCurrency] = useState(args.selectedCurrency);
 
     const handleOnCurrencyChange = (value: CurrencyOptionItem) => setSelectedCurrency(value);
 
     return (
-      <Field label="Editable money input label" required id={id}>
+      <Field label="Editable money input label" required>
         <MoneyInput
           {...args}
           selectedCurrency={selectedCurrency}
@@ -129,7 +129,6 @@ export const MultipleCurrencies: Story = {
     },
     selectedCurrency: exampleCurrency.usd,
     searchPlaceholder: 'Type a currency / country',
-    id: 'moneyInput',
   },
 };
 
@@ -156,22 +155,20 @@ export const OpenedInput: Story = {
 };
 
 export const SmallInput: Story = {
-  render: ({ id, ...args }) => {
+  render: (args) => {
     return (
       <>
-        <Field label="Money inputs" required>
+        <Field id={args.id} label="Money inputs" required>
           <MoneyInput {...args} {...SingleCurrency.args} />
         </Field>
         <br />
-        <Field label="Multiple currencies">
-          <MoneyInput {...args} {...MultipleCurrencies.args} />
-        </Field>
+        <MoneyInput {...args} {...MultipleCurrencies.args} />
         <hr />
-        <Field label="Error state" sentiment="negative" required>
+        <Field id={args.id} label="Error states" sentiment="negative" required>
           <MoneyInput {...args} {...SingleCurrency.args} />
         </Field>
         <br />
-        <Field label="Multiple currencies: error state" sentiment="negative">
+        <Field 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 = `${inputAttributes?.id ?? amountInputId}SelectedCurrency`;
+    const selectedCurrencyElementId = `${amountInputId}SelectedCurrency`;
 
     return (
       <div
@@ -387,13 +387,6 @@ 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,7 +24,6 @@ DescribedButton.displayName = 'DescribedButton';
 
 export default {
   component: DescribedButton,
-  tags: ['docs-only'],
 } satisfies Meta<typeof withId>;
 
 export const WithoutId: Story = {};

package/src/moneyInput/MoneyInput.docs.mdx

@@ -1,34 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Forms/MoneyInput/Known issues" />
-
-# Known accessibility issues
-
-There are few issues reported by Axe that are not fixable or safe to ignore at this point in time.
-
-## Form elements should have a visible label / Form elements must have labels
-
-While this requirement is normally considered as very serious, it's missing the fact that the input is wrapped by a labelled element with `role="group"`. We’ve tested it in NVDA on Windows and VoiceOver on MacOS, and discovered that if we were to satisfy Axe’s requirements, the screen reader would read out the label twice, something similar to `{Label Text} group, {Label Text} editable` (depending on the SR and the browser) which would result in an unnecessary noise. While the rule is valid, in this particular case the group label seems sufficient.
-
-#### Further resources
-
-- [Deque reference 1](https://dequeuniversity.com/rules/axe/4.9/label?application=axeAPI)
-- [Deque reference 2](https://dequeuniversity.com/rules/axe/4.9/label-title-only?application=axeAPI)
-- ['Group Labels Do Not Guarantee… Uniquity?' by Adrian Roselli](https://adrianroselli.com/2019/06/group-labels-do-not-guarantee-uniquity.html)
-
-## Buttons must have discernible text
-
-This affects HTML buttons with `role="combobox"` and deeply nested label text, not being discoverable by Axe. It is a known false-positive.
-
-#### Further resources
-
-- [Deque reference](https://dequeuniversity.com/rules/axe/4.9/button-name?application=axeAPI)
-- [axe-core github issue](https://github.com/dequelabs/axe-core/issues/4472)
-
-## ARIA hidden element must not be focusable or contain focusable elements
-
-This is a genuine problem – according to the accessibility guidelines, no element with `aria-hidden="true"` should have any focusable children. This issue is caused by the `SelectInput`'s third party dependency (`Headless UI`) and, by extension, is visible in few other places. Work is planned to address it.
-
-#### Further resources
-
-- [Deque reference](https://dequeuniversity.com/rules/axe/4.9/aria-hidden-focus?application=axeAPI)