@transferwise/components 46.84.1 → 46.86.0

package/src/stepper/Stepper.tests.story.tsx

@@ -0,0 +1,89 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { fn, within, expect, screen } from '@storybook/test';
+import Stepper from './Stepper';
+
+const STEPS = [
+  {
+    label: 'One',
+    onClick: fn(),
+  },
+  {
+    label: 'Two',
+    hoverLabel: (
+      <>
+        <div>
+          <strong>Diana Jaramillo</strong>
+        </div>
+        dianajarm123@gmail.com
+      </>
+    ),
+    onClick: fn(),
+  },
+  { label: 'Three', onClick: fn() },
+  { label: 'Four', onClick: fn() },
+  { label: 'Five', onClick: fn() },
+];
+
+const meta = {
+  component: Stepper,
+  title: 'Navigation/Stepper/tests',
+  argTypes: {
+    activeStep: {
+      control: 'radio',
+      options: [...Array(STEPS.length).keys()],
+    },
+  },
+} satisfies Meta<typeof Stepper>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ProgressbarWidth: Story = {
+  play: async ({ step }) => {
+    const getBarBaseWidth = (stepIndex: number) => {
+      const instance = screen.getByTestId(`stepper${stepIndex}`);
+      return within(instance).getByTestId('progress-bar')?.style.width;
+    };
+
+    await step('activeStep: -10 (negative) ▸ width should be 0', async () => {
+      await expect(getBarBaseWidth(-10)).toBe(`0%`);
+    });
+
+    await step('activeStep: 0 ▸ width should be 0', async () => {
+      await expect(getBarBaseWidth(0)).toBe(`0%`);
+    });
+
+    const WIDTHS = [0, 25, 50, 75, 100];
+    // eslint-disable-next-line no-plusplus
+    for (let stepIndex = 1; stepIndex < STEPS.length; stepIndex++) {
+      await step(
+        `activeStep: ${stepIndex} ▸ base width should be ${WIDTHS[stepIndex]}%`,
+        async () => {
+          await expect(getBarBaseWidth(stepIndex)).toMatch(
+            new RegExp(`^calc\\(${WIDTHS[stepIndex]}%.*?`),
+          );
+        },
+      );
+    }
+
+    await step('activeStep: 1000 ▸ base width should be 100%', async () => {
+      await expect(getBarBaseWidth(1000)).toMatch(/^calc\(100%.*?/);
+    });
+  },
+  render: function Render() {
+    return (
+      <>
+        <Stepper steps={STEPS} activeStep={0} testId="stepper-10" />
+        <Stepper steps={STEPS} activeStep={0} testId="stepper0" />
+        <Stepper steps={STEPS} activeStep={1} testId="stepper1" />
+        <Stepper steps={STEPS} activeStep={2} testId="stepper2" />
+        <Stepper steps={STEPS} activeStep={3} testId="stepper3" />
+        <Stepper steps={STEPS} activeStep={4} testId="stepper4" />
+        <Stepper steps={STEPS} activeStep={4} testId="stepper1000" />
+      </>
+    );
+  },
+  args: {
+    steps: STEPS,
+  },
+};

package/src/stepper/Stepper.tsx

@@ -21,13 +21,14 @@ export interface StepperProps {
   steps: readonly Step[];
   activeStep?: number;
   className?: string;
+  testId?: string;
 }
 
 /**
  * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.
  * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants
  */
-const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
+const Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {
   const { isRTL } = useDirection();
 
   if (steps.length === 0) {
@@ -40,7 +41,7 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
 
   const getProgressWidth = (): string => {
     if (percentageCompleted === 0) {
-      return '0px';
+      return '0%';
     }
     /**
      * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders
@@ -95,9 +96,13 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
   };
 
   return (
-    <div className={clsx('tw-stepper', className)}>
+    <div className={clsx('tw-stepper', className)} data-testid={testId}>
       <div className="progress">
-        <div className="progress-bar" style={{ width: getProgressWidth() }} />
+        <div
+          className="progress-bar"
+          style={{ width: getProgressWidth() }}
+          data-testid="progress-bar"
+        />
       </div>
       <ol className="tw-stepper-steps p-t-1 m-b-0">{steps.map(renderStep)}</ol>
     </div>

package/src/stepper/{deviceDetection.spec.js → deviceDetection.spec.ts}

@@ -1,14 +1,14 @@
 import { isTouchDevice } from './deviceDetection';
 
 describe('Device detection', () => {
-  function fakeUserAgent(userAgent) {
+  function fakeUserAgent(userAgent: string) {
     Object.defineProperty(navigator, 'userAgent', {
       value: userAgent,
       configurable: true,
     });
   }
 
-  function fakeMaxTouchPoints(maxTouchPoints) {
+  function fakeMaxTouchPoints(maxTouchPoints: number | undefined) {
     Object.defineProperty(navigator, 'maxTouchPoints', {
       value: maxTouchPoints,
       configurable: true,
@@ -24,7 +24,10 @@ describe('Device detection', () => {
 
   it('recognizes touch devices via window events', () => {
     expect(isTouchDevice()).toBe(false);
-    window.ontouchstart = {};
+    Object.defineProperty(window, 'ontouchstart', {
+      value: () => {},
+      writable: true,
+    });
     expect(isTouchDevice()).toBe(true);
   });
 

package/src/uploadInput/uploadButton/UploadButton.messages.ts

@@ -19,6 +19,13 @@ export default defineMessages({
     description: 'Description about filetypes and size limit for uploading files',
   },
 
+  maximumFiles: {
+    id: 'neptune.UploadButton.maximumFiles',
+    defaultMessage: 'Maximum {maxFiles} files.',
+    description:
+      'When number of files to be uploaded is restricted, this information is displayed within the upload button.',
+  },
+
   allFileTypes: {
     id: 'neptune.UploadButton.allFileTypes',
     defaultMessage: 'All file types',

package/src/uploadInput/uploadButton/UploadButton.tsx

@@ -200,7 +200,7 @@ const UploadButton = forwardRef<HTMLInputElement | null, UploadButtonProps>(
           {maxFiles && (
             <>
               <br />
-              {`Maximum ${maxFiles} files.`}
+              {formatMessage(MESSAGES.maximumFiles, { maxFiles })}
             </>
           )}
         </Body>

package/src/circularButton/_button-label-states.less

@@ -1,34 +0,0 @@
-.button-label-states(@prefix, @type, @normal, @hover, @active, @isModernTheme: false) {
-  .@{prefix}.@{type} {
-    .@{prefix}__label {
-      color: @normal;
-    }
-
-    &:not(.disabled, :disabled):hover .@{prefix}__label {
-      color: @hover;
-    }
-
-    &:active .@{prefix}__label,
-    input[type="button"]:active ~ .@{prefix}__label {
-      color: @active;
-    }
-
-    &.secondary {
-      .tw-icon {
-        color: @normal;
-      }
-
-      &:not(.disabled, :disabled):hover .tw-icon,
-      input[type="button"]:active + .tw-icon {
-        color: white;
-        & when (@isModernTheme = true) {
-          color: var(--color-interactive-control);
-        }
-      }
-
-      &:active input[type="button"] + .tw-icon when (@isModernTheme = true) {
-        color: var(--color-interactive-control);
-      }
-    }
-  }
-}

package/src/definitionList/DefinitionList.spec.js

@@ -1,91 +0,0 @@
-import { shallow, mount } from 'enzyme';
-
-import { DefinitionList } from '..';
-import { Layout } from '../common';
-
-const {
-  VERTICAL_TWO_COLUMN,
-  VERTICAL_ONE_COLUMN,
-  HORIZONTAL_LEFT_ALIGNED,
-  HORIZONTAL_RIGHT_ALIGNED,
-  HORIZONTAL_JUSTIFIED,
-} = Layout;
-
-describe('DefinitionList', () => {
-  const someDefinitions = () => [{ title: 'First', value: 'first value', key: 'first' }, null];
-
-  const withLayout = (layout) =>
-    shallow(<DefinitionList layout={layout} definitions={someDefinitions()} />);
-
-  const listHasClass = (layout, className) =>
-    withLayout(layout).find('dl.tw-definition-list').hasClass(className);
-
-  const valueHasClass = (layout, className) =>
-    withLayout(layout).find('dl.tw-definition-list dd').hasClass(className);
-
-  it('applies correct flex class', () => {
-    const colClass = 'flex-column';
-
-    expect(listHasClass(VERTICAL_ONE_COLUMN, colClass)).toBe(true);
-    expect(listHasClass(VERTICAL_TWO_COLUMN, colClass)).toBe(true);
-    expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, colClass)).toBe(true);
-    expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, colClass)).toBe(true);
-    expect(listHasClass(HORIZONTAL_JUSTIFIED, colClass)).toBe(true);
-  });
-
-  it('applies correct class for vertical two-column layout', () => {
-    const colClass = 'tw-definition-list--columns flex-column flex-row--sm';
-
-    expect(listHasClass(VERTICAL_TWO_COLUMN, colClass)).toBe(true);
-    expect(listHasClass(VERTICAL_ONE_COLUMN, colClass)).toBe(false);
-    expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, colClass)).toBe(false);
-    expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, colClass)).toBe(false);
-    expect(listHasClass(HORIZONTAL_JUSTIFIED, colClass)).toBe(false);
-  });
-
-  it('applies correct class for horiztonal layouts', () => {
-    const rowClass = 'tw-definition-list--horizontal flex-column';
-
-    expect(listHasClass(VERTICAL_TWO_COLUMN, rowClass)).toBe(false);
-    expect(listHasClass(VERTICAL_ONE_COLUMN, rowClass)).toBe(false);
-    expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, rowClass)).toBe(true);
-    expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, rowClass)).toBe(true);
-    expect(listHasClass(HORIZONTAL_JUSTIFIED, rowClass)).toBe(true);
-  });
-
-  it('applies correct class for alignment', () => {
-    expect(valueHasClass(VERTICAL_TWO_COLUMN, 'd-flex justify-content-between')).toBe(true);
-    expect(valueHasClass(VERTICAL_ONE_COLUMN, 'd-flex justify-content-between')).toBe(true);
-    expect(valueHasClass(HORIZONTAL_LEFT_ALIGNED, 'd-flex justify-content-between')).toBe(true);
-    expect(valueHasClass(HORIZONTAL_RIGHT_ALIGNED, 'text-sm-right')).toBe(true);
-    expect(valueHasClass(HORIZONTAL_JUSTIFIED, 'text-sm-justify')).toBe(true);
-  });
-
-  it('has muted text class on title and value when muted flag is passed', () => {
-    const muted = shallow(<DefinitionList muted definitions={someDefinitions()} />);
-    const notMuted = shallow(<DefinitionList definitions={someDefinitions()} />);
-
-    expect(muted.find('dl.tw-definition-list').hasClass('text-muted')).toBe(true);
-    expect(notMuted.find('dl.tw-definition-list').hasClass('text-muted')).toBe(false);
-  });
-
-  it('shows action button when one is passed in', () => {
-    const buttonSpy = jest.fn();
-
-    const definitionList = mount(
-      <DefinitionList
-        definitions={[
-          {
-            title: 'Name',
-            value: 'Jenkins',
-            key: '1',
-            action: { label: 'A button', onClick: buttonSpy },
-          },
-        ]}
-      />,
-    );
-
-    definitionList.find('button').simulate('click');
-    expect(buttonSpy).toHaveBeenCalledTimes(1);
-  });
-});

package/src/dimmer/Dimmer.spec.js

@@ -1,87 +0,0 @@
-import { shallow, mount } from 'enzyme';
-import ReactDOM from 'react-dom';
-
-import DimmerAppendingToBody, { Dimmer } from './Dimmer';
-
-jest.mock('react-dom');
-
-describe('Dimmer', () => {
-  let component;
-  const props = {
-    open: true,
-    fadeContentOnExit: false,
-    fadeContentOnEnter: false,
-    onClick: jest.fn(),
-    children: <div />,
-    className: undefined,
-    onClose: undefined,
-    onExited: jest.fn(),
-  };
-
-  beforeEach(() => {
-    jest.spyOn(ReactDOM, 'createPortal').mockImplementation();
-    ReactDOM.createPortal.mockReturnValue(<Dimmer {...props} />);
-    component = shallow(<Dimmer {...props} />);
-  });
-
-  afterEach(() => {
-    ReactDOM.createPortal.mockClear();
-    jest.clearAllMocks();
-  });
-
-  it('is appended to body', () => {
-    expect(ReactDOM.createPortal).not.toHaveBeenCalled();
-    mount(<DimmerAppendingToBody {...props} />);
-
-    expect(ReactDOM.createPortal).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders with right props', () => {
-    component = mount(
-      <Dimmer {...props} disableClickToClose={false} transparent={false} scrollable={false} />,
-    );
-    expect(component.find(Dimmer)).toHaveLength(1);
-    expect(component.find(Dimmer).props()).toStrictEqual({
-      ...props,
-      disableClickToClose: false,
-      transparent: false,
-      scrollable: false,
-    });
-  });
-
-  it('do not make Dimmer auto scrollable if scrollable=false', () => {
-    expect(component.find('.dimmer').hasClass('dimmer--scrollable')).toBe(false);
-  });
-
-  it('makes Dimmer auto scrollable if scrollable=true', () => {
-    component.setProps({ scrollable: true });
-    expect(component.find('.dimmer').hasClass('dimmer--scrollable')).toBe(true);
-  });
-
-  it('fade content on enter if fadeContentOnEnter is true', () => {
-    component.setProps({ fadeContentOnEnter: true });
-    const cssTransition = component.find('CSSTransition');
-    expect(cssTransition.prop('classNames')).toStrictEqual({
-      enter: 'dimmer--enter-fade',
-      enterDone: 'dimmer--enter-done dimmer--enter-fade',
-      exit: 'dimmer--exit',
-    });
-  });
-
-  it('fade content on exit if fadeContentOnExit is true', () => {
-    component.setProps({ fadeContentOnExit: true });
-    const cssTransition = component.find('CSSTransition');
-    expect(cssTransition.prop('classNames')).toStrictEqual({
-      enter: '',
-      enterDone: 'dimmer--enter-done',
-      exit: 'dimmer--exit dimmer--exit-fade',
-    });
-  });
-
-  it('calls onExited when the exit animation is finished', () => {
-    component.setProps({ fadeContentOnExit: true });
-    const transition = component.find('CSSTransition');
-    transition.prop('onExited')();
-    expect(props.onExited).toHaveBeenCalled();
-  });
-});

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

@@ -1,149 +0,0 @@
-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();
-
-describe('MoneyInput', () => {
-  const currencies = [
-    {
-      header: 'Popular currencies',
-    },
-    {
-      value: 'EUR',
-      label: 'EUR',
-      note: 'Euro',
-      currency: 'eur',
-      searchable: 'Spain, Germany, France, Austria, Estonia',
-    },
-    {
-      value: 'USD',
-      label: 'USD',
-      note: 'United States dollar',
-      currency: 'usd',
-      searchable: 'Hong Kong, Saudi Arabia',
-    },
-    {
-      value: 'GBP',
-      label: 'GBP',
-      note: 'British pound',
-      currency: 'gbp',
-      searchable: 'England, Scotland, Wales',
-    },
-    {
-      header: 'Some other currencies',
-    },
-    {
-      value: 'CAD',
-      label: 'CAD',
-      note: 'Canadian dollar',
-      currency: 'cad',
-    },
-    {
-      value: 'AUD',
-      label: 'AUD',
-      note: 'Australian dollar',
-      currency: 'aud',
-    },
-  ] as const;
-  const props = {
-    currencies,
-    selectedCurrency: currencies[1],
-    searchPlaceholder: 'Type a currency / country',
-    amount: 1000,
-    onAmountChange: jest.fn(),
-    onCurrencyChange: jest.fn(),
-  };
-  it.each([
-    ['asd', ''],
-    ['1a2s3d', '123'],
-    ['±!@#$^*_+?><', ''],
-    ['1±!@#$^*,_+?><2', '1,2'],
-    ['12,3', '12,3'],
-    ['12.3', '12.3'],
-  ])("ignores the letters when typed '%s' and shows '%s'", async (testValue, expectedValue) => {
-    render(<MoneyInput {...props} amount={null} />);
-
-    const input = screen.getByRole('textbox');
-    await userEvent.type(input, testValue);
-    expect(input).toHaveValue(expectedValue);
-  });
-
-  it('supports custom `aria-labelledby` attribute', () => {
-    render(
-      <>
-        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-        <label id="prioritized-label">Prioritized label</label>
-        <MoneyInput {...props} aria-labelledby="prioritized-label" />
-      </>,
-    );
-
-    expect(screen.getAllByLabelText('Prioritized label')[0]).toHaveClass('input-group');
-  });
-
-  it('supports `Field` for labeling', () => {
-    render(
-      <Field label="Recipient gets">
-        <MoneyInput {...props} />
-      </Field>,
-    );
-    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,
-    );
-  });
-
-  it('should have a listbox label', async () => {
-    render(<MoneyInput {...props} />);
-    const trigger = screen.getByRole('combobox');
-    await userEvent.click(trigger);
-    const triggerLabel = trigger.getAttribute('aria-label');
-    expect(triggerLabel).toBeTruthy();
-    expect(screen.getByRole('listbox', { name: triggerLabel ?? '' })).toBeInTheDocument();
-  });
-});