@transferwise/components 0.0.0-experimental-a656242 → 0.0.0-experimental-887f2e6

package/src/select/Select.tsx

@@ -573,6 +573,7 @@ export default function Select({
         aria-controls={listboxId}
         aria-expanded={open}
         onClick={handleOnClick}
+        // @ts-expect-error Spread types may only be created from object types.
         {...buttonProps}
       >
         {selected ? (

package/src/slidingPanel/SlidingPanel.spec.js

@@ -0,0 +1,56 @@
+import { shallow, mount } from 'enzyme';
+
+import SlidingPanel from './SlidingPanel';
+
+describe('SlidingPanel', () => {
+  let component;
+  const props = {
+    open: true,
+    position: 'left',
+    children: null,
+    className: undefined,
+    slidingPanelPositionFixed: false,
+    showSlidingPanelBorder: false,
+    testId: undefined,
+  };
+
+  it('renders with right props', () => {
+    component = mount(<SlidingPanel {...props} />);
+    expect(component.find(SlidingPanel)).toHaveLength(1);
+    expect(component.find(SlidingPanel).props()).toStrictEqual({ ...props });
+  });
+
+  it('renders CSSTransition with right props', () => {
+    component = shallow(<SlidingPanel {...props} />);
+
+    expect(cssTransition()).toHaveLength(1);
+
+    expect(cssTransition().props()).toEqual({
+      className: 'sliding-panel sliding-panel--open-left',
+      children: null,
+    });
+  });
+
+  it('adds fixed class', () => {
+    component = shallow(<SlidingPanel {...props} slidingPanelPositionFixed />);
+    expect(cssTransition().prop('className')).toBe(
+      'sliding-panel sliding-panel--open-left sliding-panel--fixed',
+    );
+  });
+
+  it('adds border classes if showSlidingPanelBorder is set to true', () => {
+    component = shallow(<SlidingPanel {...props} showSlidingPanelBorder />);
+    expect(cssTransition().prop('className')).toBe(
+      'sliding-panel sliding-panel--open-left sliding-panel--border-left',
+    );
+    component = shallow(<SlidingPanel {...props} showSlidingPanelBorder={false} position="left" />);
+    expect(cssTransition().prop('className')).toBe('sliding-panel sliding-panel--open-left');
+
+    component = shallow(<SlidingPanel {...props} showSlidingPanelBorder position="top" />);
+    expect(cssTransition().prop('className')).toBe(
+      'sliding-panel sliding-panel--open-top sliding-panel--border-top',
+    );
+  });
+
+  const cssTransition = () => component.find('div');
+});

package/src/button/__snapshots__/Button.spec.tsx.snap

@@ -1,309 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button by default renders a medium button of type accent and priority primary 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button by default renders an anchor tag with button styles of type accent and priority primary 1`] = `
-<div>
-  <a
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
-    href="#"
-  >
-    Send money
-  </a>
-</div>
-`;
-
-exports[`Button deprecated types renders danger as negative buttons with priority secondary and logs a warning 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button deprecated types renders link as accent buttons with priority tertiary and logs a warning 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-3"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button deprecated types renders pay as positive buttons and logs a warning 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button deprecated types renders primary as accent buttons and logs a warning 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button other states renders as block if block is true 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-block np-btn-block btn-accent btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities defaults tertiary buttons to secondary for positive buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-positive btn-priority-2"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities defaults tertiary buttons to secondary for positive buttons 2`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities renders primary buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities renders primary buttons 2`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities renders primary buttons 3`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-negative btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities renders secondary buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-2"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities renders secondary buttons 2`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-positive btn-priority-2"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities renders secondary buttons 3`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities renders tertiary buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-3"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button sizes renders large buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-lg np-btn np-btn-lg btn-accent btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button sizes renders medium buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button sizes renders small buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-sm np-btn np-btn-sm btn-accent btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button types renders accent buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button types renders negative buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-negative btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button types renders positive buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;

package/src/slidingPanel/SlidingPanel.spec.tsx

@@ -1,69 +0,0 @@
-import { render, screen } from '../test-utils';
-import SlidingPanel, { SlidingPanelProps } from './SlidingPanel';
-
-describe('SlidingPanel', () => {
-  const initialProps: SlidingPanelProps = {
-    open: true,
-    children: <div data-testid="content">Content</div>,
-    testId: 'wrapper',
-  };
-
-  const customRender = (overrides: Partial<SlidingPanelProps> = {}) =>
-    render(<SlidingPanel {...initialProps} {...overrides} />);
-
-  describe('open', () => {
-    it('should respect open=false', () => {
-      customRender({ open: false });
-      expect(screen.queryByTestId('wrapper')).not.toBeInTheDocument();
-    });
-
-    it('should respect open=true', () => {
-      customRender();
-      expect(screen.getByTestId('wrapper')).toBeInTheDocument();
-    });
-  });
-
-  describe('position', () => {
-    it(`should default to 'left'`, () => {
-      customRender();
-      expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--open-left`);
-    });
-
-    (['left', 'right', 'top', 'bottom'] as const).forEach((position) => {
-      describe(position, () => {
-        it(`should add the classname`, () => {
-          customRender({ position });
-          expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--open-${position}`);
-        });
-
-        it(`should add the classname for 'showSlidingPanelBorder'`, () => {
-          customRender({ position, showSlidingPanelBorder: true });
-          expect(screen.queryByTestId('wrapper')).toHaveClass(`sliding-panel--border-${position}`);
-        });
-      });
-    });
-  });
-
-  it('should render children', () => {
-    customRender();
-    expect(screen.getByTestId('content')).toBeInTheDocument();
-  });
-
-  it('should respect className', () => {
-    const className = 'customClass';
-    customRender({ className });
-    expect(screen.getByTestId('wrapper')).toHaveClass(className);
-  });
-
-  describe('slidingPanelPositionFixed', () => {
-    it('should not be fixed by default', () => {
-      customRender();
-      expect(screen.getByTestId('wrapper')).not.toHaveClass('sliding-panel--fixed');
-    });
-
-    it('should respect slidingPanelPositionFixed=true', () => {
-      customRender({ slidingPanelPositionFixed: true });
-      expect(screen.getByTestId('wrapper')).toHaveClass('sliding-panel--fixed');
-    });
-  });
-});