@transferwise/components 46.22.1 → 46.23.0

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/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;