@transferwise/components 46.22.1 → 46.24.0

package/src/navigationOptionsList/NavigationOptionsList.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Children } from 'react';
+
+export interface NavigationOptionListProps {
+  children: React.ReactNode;
+}
+
+const NavigationOptionList = ({ children }: NavigationOptionListProps) => {
+  return (
+    <ul className="np-navigation-options-list">
+      {Children.map(children, (child) => (
+        <li key={child?.toString()} className="np-navigation-options-list__item">
+          {child}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default NavigationOptionList;

package/src/navigationOptionsList/index.ts

@@ -0,0 +1,2 @@
+export { default } from './NavigationOptionsList';
+export type { NavigationOptionListProps } from './NavigationOptionsList';

package/src/progress/{Progress.spec.js → Progress.spec.tsx}

@@ -1,10 +1,11 @@
 import '@testing-library/jest-dom';
-import { render, screen } from '../test-utils';
+import { render } from '../test-utils';
 
-import Progress from './Progress';
+import Progress from '.';
 
 describe('Progress', () => {
   const props = {
+    id: 'test-id',
     progress: { value: 50, max: 100 },
   };
   describe('by default', () => {
@@ -15,7 +16,7 @@ describe('Progress', () => {
     it('renders the progress', () => {
       const progress = document.querySelector('progress');
       expect(progress).toBeInTheDocument();
-      expect(progress).toHaveValue(progress.value);
+      expect(progress).toHaveValue(progress?.value);
     });
   });
 });

package/src/progress/Progress.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import { ReactElement, useEffect, useState } from 'react';
 
-type ProgressProps = {
+export type ProgressProps = {
   className?: string;
   id: string;
   progress: { value: number; max: number };

package/src/progress/index.ts

@@ -1 +1,2 @@
 export { default } from './Progress';
+export type { ProgressProps } from './Progress';

package/src/progressBar/index.ts

@@ -1 +1,2 @@
 export { default } from './ProgressBar';
+export type { ProgressBarProps } from './ProgressBar';

package/src/radio/Radio.story.tsx

@@ -44,7 +44,7 @@ export const Basic = () => {
         <Radio
           label={label}
           name="name"
-          id="id"
+          id="id1"
           checked={checked}
           disabled={disabled}
           secondary={secondary}
@@ -61,7 +61,7 @@ export const Basic = () => {
       <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
         <Checkbox
           label={label}
-          id="test"
+          id="id2"
           checked={checked}
           disabled={disabled}
           secondary={secondary}
@@ -71,10 +71,9 @@ export const Basic = () => {
       <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
         <Checkbox
           label={label}
-          id="test"
+          id="id3"
           checked={checked}
           disabled={disabled}
-          // secondary={secondary}
           onChange={() => setChecked(!checked)}
         />
       </div>

package/src/segmentedControl/SegmentedControl.tsx

@@ -101,6 +101,7 @@ const SegmentedControl = ({
         className={classNames('segmented-control__segments', {
           'segmented-control__segments--no-animate': !animate,
         })}
+        role={mode !== 'input' ? 'tablist' : undefined}
       >
         {segmentsWithRefs.map((segment) =>
           mode === 'input' ? (

package/src/slidingPanel/SlidingPanel.tsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames';
-import { forwardRef, useRef } from 'react';
-import mergeRefs from 'react-merge-refs';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import { Position } from '../common';
@@ -28,7 +27,8 @@ const SlidingPanel = forwardRef(
     }: Omit<SlidingPanelProps, 'ref'>,
     reference: React.ForwardedRef<HTMLDivElement>,
   ) => {
-    const localReference = useRef<HTMLDivElement>(null);
+    const localReference = useRef<HTMLDivElement>(null as never);
+    useImperativeHandle(reference, () => localReference.current, []);
 
     return (
       <CSSTransition
@@ -43,7 +43,7 @@ const SlidingPanel = forwardRef(
         unmountOnExit
       >
         <div
-          ref={mergeRefs([reference, localReference])}
+          ref={localReference}
           className={classNames(
             'sliding-panel',
             `sliding-panel--open-${position}`,

package/src/statusIcon/StatusIcon.spec.tsx

@@ -0,0 +1,80 @@
+import { Sentiment, Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
+import { render, cleanup, screen } from '../test-utils';
+
+import StatusIcon from '.';
+
+describe('StatusIcon', () => {
+  const renderStatusIcon = (props?: {
+    sentiment?: Sentiment;
+    size?: SizeLarge | SizeMedium | SizeSmall;
+  }) => {
+    return render(
+      <StatusIcon
+        sentiment={props?.sentiment || Sentiment.NEUTRAL}
+        size={props?.size || Size.MEDIUM}
+      />,
+    );
+  };
+
+  afterEach(cleanup);
+
+  it('renders the status icon without any props', () => {
+    renderStatusIcon();
+
+    expect(screen.getByTestId('status-icon')).toHaveClass('neutral');
+    expect(screen.getByTestId('status-icon')).toHaveClass('status-circle');
+    expect(screen.getByTestId('status-icon')).toHaveClass('status-circle-md');
+  });
+
+  it.each([
+    [Size.SMALL as const, 'status-circle-sm'],
+    [Size.MEDIUM as const, 'status-circle-md'],
+    [Size.LARGE as const, 'status-circle-lg'],
+  ])(
+    "if prop 'size' equals '%s' is passed, renders the status icon with class '%s'",
+    (size, expectedClass) => {
+      renderStatusIcon({ size: size });
+
+      expect(screen.getByTestId('status-icon')).toHaveClass(expectedClass);
+      cleanup();
+    },
+  );
+
+  it.each([
+    [Sentiment.NEGATIVE, Sentiment.NEGATIVE],
+    [Sentiment.NEUTRAL, Sentiment.NEUTRAL],
+    [Sentiment.PENDING, Sentiment.PENDING],
+    [Sentiment.POSITIVE, Sentiment.POSITIVE],
+    [Sentiment.WARNING, Sentiment.WARNING],
+  ])(
+    "if prop 'sentiment' equals '%s' is passed, renders the status icon with class '%s'",
+    (sentiment, expectedClass) => {
+      renderStatusIcon({ sentiment: sentiment });
+
+      expect(screen.getByTestId('status-icon')).toHaveClass(expectedClass);
+      cleanup();
+    },
+  );
+
+  it("'warning' and 'pending' sentiments generate 'dark' colored icons", () => {
+    renderStatusIcon({ sentiment: Sentiment.WARNING });
+    expect(screen.getByTestId('alert-icon')).toHaveClass('dark');
+    cleanup();
+
+    renderStatusIcon({ sentiment: Sentiment.PENDING });
+    expect(screen.getByTestId('clock-borderless-icon')).toHaveClass('dark');
+  });
+
+  it("'positive', 'negative', and 'neutral' sentiments generate 'light' colored icons", () => {
+    renderStatusIcon({ sentiment: Sentiment.POSITIVE });
+    expect(screen.getByTestId('check-icon')).toHaveClass('light');
+    cleanup();
+
+    renderStatusIcon({ sentiment: Sentiment.NEGATIVE });
+    expect(screen.getByTestId('cross-icon')).toHaveClass('light');
+    cleanup();
+
+    renderStatusIcon();
+    expect(screen.getByTestId('info-icon')).toHaveClass('light');
+  });
+});

package/src/statusIcon/StatusIcon.tsx

@@ -1,15 +1,14 @@
 import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';
 import classNames from 'classnames';
-import { ReactElement } from 'react';
 
-import { SizeSmall, SizeMedium, SizeLarge, Sentiment } from '../common';
+import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size } from '../common';
 
-type Props = {
+export type StatusIconProps = {
   sentiment: Sentiment;
   size: SizeSmall | SizeMedium | SizeLarge;
 };
 
-const StatusIcon = ({ sentiment = Sentiment.NEUTRAL, size }: Props): ReactElement => {
+const StatusIcon = ({ sentiment = Sentiment.NEUTRAL, size = Size.MEDIUM }: StatusIconProps) => {
   const iconTypeMap = {
     [Sentiment.POSITIVE]: Check,
     [Sentiment.NEUTRAL]: Info,

package/src/statusIcon/index.ts

@@ -0,0 +1,2 @@
+export { default } from './StatusIcon';
+export type { StatusIconProps } from './StatusIcon';

package/src/switch/Switch.story.tsx

@@ -39,6 +39,9 @@ export const Disabled = () => {
 
   return (
     <div className="d-flex flex-column">
+      <label id="labelID" htmlFor="switchId">
+        A switch with a label
+      </label>
       <Switch
         checked={checked}
         disabled
@@ -53,7 +56,7 @@ export const Disabled = () => {
         disabled
         className="a-class-name"
         aria-labelledby="labelID"
-        id="switchId"
+        id="switchId1"
         onClick={() => setCheck(!checked)}
       />
     </div>

package/src/switch/Switch.tsx

@@ -1,12 +1,12 @@
 import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
 import { useTheme } from '@wise/components-theming';
 import classnames from 'classnames';
-import { KeyboardEventHandler, MouseEvent, ReactElement } from 'react';
+import { KeyboardEventHandler, MouseEvent } from 'react';
 
 import { CommonProps } from '../common';
 import { logActionRequiredIf } from '../utilities';
 
-type Props = CommonProps & {
+export type SwitchProps = CommonProps & {
   /** Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null) */
   'aria-label'?: string;
   /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */
@@ -20,7 +20,7 @@ type Props = CommonProps & {
   onClick: (event?: MouseEvent<HTMLSpanElement>) => void;
 };
 
-const Switch = (props: Props): ReactElement => {
+const Switch = (props: SwitchProps) => {
   const { isModern } = useTheme();
   const { checked, className, id, onClick, disabled } = props;
 

package/src/switch/index.ts

@@ -1 +1,2 @@
 export { default } from './Switch';
+export type { SwitchProps } from './Switch';

package/src/switchOption/{SwitchOption.spec.js → SwitchOption.spec.tsx}

@@ -5,6 +5,8 @@ import SwitchOption from '.';
 
 describe('SwitchOption', () => {
   it('renders the option with the provided content', () => {
+    const mockOnChange = jest.fn();
+
     render(
       <SwitchOption
         media={<FastFlag data-testid="fast-flag" />}
@@ -13,7 +15,7 @@ describe('SwitchOption', () => {
         aria-label="title"
         content="content"
         checked={false}
-        onChange={() => {}}
+        onChange={mockOnChange}
       />,
     );
 
@@ -97,11 +99,11 @@ describe('SwitchOption', () => {
 
     expect(mockOnChange).toHaveBeenCalledTimes(0);
 
-    fireEvent.click(screen.queryByText('title'));
+    fireEvent.click(screen.getByText('title'));
 
     expect(mockOnChange).toHaveBeenCalledTimes(1);
 
-    fireEvent.click(screen.queryByText('content'));
+    fireEvent.click(screen.getByText('content'));
 
     expect(mockOnChange).toHaveBeenCalledTimes(2);
 
@@ -111,6 +113,8 @@ describe('SwitchOption', () => {
   });
 
   it('renders aligned with container content', () => {
+    const mockOnChange = jest.fn();
+
     render(
       <SwitchOption
         id="id"
@@ -118,6 +122,7 @@ describe('SwitchOption', () => {
         aria-label="title"
         content="content"
         isContainerAligned
+        onChange={mockOnChange}
       />,
     );
     expect(document.querySelector('.np-option__container-aligned')).toBeInTheDocument();

package/src/switchOption/SwitchOption.tsx

@@ -1,9 +1,9 @@
-import { MouseEvent, ReactChild, ReactElement } from 'react';
+import { MouseEvent, ReactChild } from 'react';
 
 import Option from '../common/Option';
 import Switch from '../switch';
 
-type Props = {
+export type SwitchOptionProps = {
   checked?: boolean;
   complex?: boolean;
   content?: ReactChild;
@@ -41,7 +41,7 @@ const SwitchOption = ({
   showMediaAtAllSizes,
   isContainerAligned,
   'aria-label': ariaLabel,
-}: Props): ReactElement => {
+}: SwitchOptionProps) => {
   const sharedProps = {
     media,
     title,

package/src/switchOption/index.ts

@@ -1 +1,2 @@
 export { default } from './SwitchOption';
+export type { SwitchOptionProps } from './SwitchOption';

package/src/tooltip/Tooltip.tsx

@@ -20,7 +20,7 @@ import {
   PositionTop,
 } from '../common/propsValues/position';
 
-type Props = PropsWithChildren<{
+export type TooltipProps = PropsWithChildren<{
   position?: PositionTop | PositionRight | PositionBottom | PositionLeft;
   label: ReactNode;
   id?: string;
@@ -33,7 +33,7 @@ const Tooltip = ({
   label,
   id,
   className,
-}: Props): ReactElement => {
+}: TooltipProps) => {
   const [open, setOpen] = useState(false);
   const anchorReference = useRef(null);
   const [arrowElement, setArrowElement] = useState(null);

package/src/tooltip/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Tooltip';
+export type { TooltipProps } from './Tooltip';

package/build/types/common/dateUtils/getDayNames/index.d.ts

@@ -1,2 +0,0 @@
-export { getDayNames } from './getDayNames';
-//# sourceMappingURL=index.d.ts.map

package/build/types/common/dateUtils/getDayNames/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/common/dateUtils/getDayNames/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/build/types/common/dateUtils/getMonthNames/index.d.ts

@@ -1,2 +0,0 @@
-export { getMonthNames } from './getMonthNames';
-//# sourceMappingURL=index.d.ts.map

package/build/types/common/dateUtils/getMonthNames/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/common/dateUtils/getMonthNames/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/build/types/common/dateUtils/isDateValid/index.d.ts

@@ -1,2 +0,0 @@
-export { isDateValid, validDateString } from './isDateValid';
-//# sourceMappingURL=index.d.ts.map

package/build/types/common/dateUtils/isDateValid/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/common/dateUtils/isDateValid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/build/types/common/dateUtils/isWithinRange/index.d.ts

@@ -1,2 +0,0 @@
-export { isWithinRange } from './isWithinRange';
-//# sourceMappingURL=index.d.ts.map

package/build/types/common/dateUtils/isWithinRange/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/common/dateUtils/isWithinRange/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/build/types/common/dateUtils/moveToWithinRange/index.d.ts

@@ -1,2 +0,0 @@
-export { moveToWithinRange } from './moveToWithinRange';
-//# sourceMappingURL=index.d.ts.map

package/build/types/common/dateUtils/moveToWithinRange/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/common/dateUtils/moveToWithinRange/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/src/common/dateUtils/getDayNames/index.ts

@@ -1 +0,0 @@
-export { getDayNames } from './getDayNames';

package/src/common/dateUtils/getMonthNames/index.ts

@@ -1 +0,0 @@
-export { getMonthNames } from './getMonthNames';

package/src/common/dateUtils/isDateValid/index.ts

@@ -1 +0,0 @@
-export { isDateValid, validDateString } from './isDateValid';

package/src/common/dateUtils/isWithinRange/index.ts

@@ -1 +0,0 @@
-export { isWithinRange } from './isWithinRange';

package/src/common/dateUtils/moveToWithinRange/index.ts

@@ -1 +0,0 @@
-export { moveToWithinRange } from './moveToWithinRange';

package/src/loader/index.js

@@ -1,3 +0,0 @@
-import Loader from './Loader';
-
-export default Loader;

package/src/money/index.js

@@ -1 +0,0 @@
-export { default } from './Money';

package/src/navigationOptionsList/NavigationOptionsList.js

@@ -1,20 +0,0 @@
-import PropTypes from 'prop-types';
-import { Children } from 'react';
-
-const NavigationOptionList = ({ children }) => {
-  return (
-    <ul className="np-navigation-options-list">
-      {Children.map(children, (child) => (
-        <li key={child.key} className="np-navigation-options-list__item">
-          {child}
-        </li>
-      ))}
-    </ul>
-  );
-};
-
-NavigationOptionList.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default NavigationOptionList;

package/src/navigationOptionsList/index.js

@@ -1 +0,0 @@
-export { default } from './NavigationOptionsList';

package/src/statusIcon/StatusIcon.spec.js

@@ -1,70 +0,0 @@
-import { Sentiment } from '../common';
-import { render, cleanup, screen } from '../test-utils';
-
-import StatusIcon from '.';
-
-describe('StatusIcon', () => {
-  const renderStatusIcon = (props = {}) => {
-    return render(<StatusIcon {...props} />);
-  };
-
-  afterEach(cleanup);
-
-  it('renders the status icon without any props', () => {
-    renderStatusIcon();
-
-    expect(screen.getByTestId('status-icon')).toHaveClass('neutral');
-    expect(screen.getByTestId('status-icon')).toHaveClass('status-circle');
-  });
-
-  it('renders the status icon small if prop is passed in', () => {
-    renderStatusIcon({ size: 'sm' });
-
-    expect(screen.getByTestId('status-icon')).toHaveClass('status-circle-sm');
-  });
-
-  it('renders the status icon medium if prop is passed in', () => {
-    renderStatusIcon({ size: 'md' });
-
-    expect(screen.getByTestId('status-icon')).toHaveClass('status-circle-md');
-  });
-
-  it('renders the status icon big if prop is passed in', () => {
-    renderStatusIcon({ size: 'lg' });
-
-    expect(screen.getByTestId('status-icon')).toHaveClass('status-circle-lg');
-  });
-
-  it('renders the status icon with different icons based on sentiment passed in', () => {
-    [
-      Sentiment.NEGATIVE,
-      Sentiment.NEUTRAL,
-      Sentiment.PENDING,
-      Sentiment.POSITIVE,
-      Sentiment.WARNING,
-    ].forEach((sentiment) => {
-      renderStatusIcon({ sentiment: sentiment });
-      expect(screen.getByTestId('status-icon')).toHaveClass(sentiment.toString());
-      cleanup();
-    });
-  });
-
-  it('warning and pending sentiments get dark colored icons', () => {
-    renderStatusIcon({ sentiment: Sentiment.WARNING });
-    expect(screen.getByTestId('alert-icon')).toHaveClass('dark');
-    cleanup();
-    renderStatusIcon({ sentiment: Sentiment.PENDING });
-    expect(screen.getByTestId('clock-borderless-icon')).toHaveClass('dark');
-  });
-
-  it('positive, negative, and neutral sentiments get light colored icons', () => {
-    renderStatusIcon({ sentiment: Sentiment.POSITIVE });
-    expect(screen.getByTestId('check-icon')).toHaveClass('light');
-    cleanup();
-    renderStatusIcon({ sentiment: Sentiment.NEGATIVE });
-    expect(screen.getByTestId('cross-icon')).toHaveClass('light');
-    cleanup();
-    renderStatusIcon({ sentiment: Sentiment.NEUTRAL });
-    expect(screen.getByTestId('info-icon')).toHaveClass('light');
-  });
-});

package/src/statusIcon/index.js

@@ -1 +0,0 @@
-export { default } from './StatusIcon';

package/src/tooltip/index.js

@@ -1,3 +0,0 @@
-import Tooltip from './Tooltip';
-
-export default Tooltip;