@transferwise/components 0.0.0-experimental-0400704 → 0.0.0-experimental-c09cb11

package/src/tabs/{utils.spec.ts → utils.spec.js}

@@ -5,13 +5,12 @@ import {
   getSwipeDifference,
   swipeShouldChangeTab,
   getVelocity,
-  Swipe,
 } from './utils';
 
 describe('Tabs Utility', () => {
-  let start: Swipe;
-  let end: Swipe;
-  let coords: Swipe[];
+  let start;
+  let end;
+  let coords;
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -19,8 +18,8 @@ describe('Tabs Utility', () => {
 
   describe('when the ending x axis is greater than the starting x axis', () => {
     beforeEach(() => {
-      start = { x: 0, y: 0, time: 1569538800000 };
-      end = { x: 50, y: 0, time: 1569538800300 };
+      start = { x: 0, time: 1569538800000 };
+      end = { x: 50, time: 1569538800300 };
     });
 
     it('determines that the swipe was left to right', () => {
@@ -35,8 +34,8 @@ describe('Tabs Utility', () => {
 
   describe('when the ending x axis is less than the starting x axis', () => {
     beforeEach(() => {
-      start = { x: 50, y: 0, time: 1569538800000 };
-      end = { x: 0, y: 0, time: 1569538800300 };
+      start = { x: 50, time: 1569538800000 };
+      end = { x: 0, time: 1569538800300 };
     });
 
     it('determines that the swipe was right to left', () => {
@@ -51,20 +50,20 @@ describe('Tabs Utility', () => {
 
   describe('checking if a swipe should change tabs', () => {
     it('should change tab when the difference and velocity are significant', () => {
-      start = { x: 0, y: 0, time: 1569538800000 };
-      end = { x: 100, y: 0, time: 1569538800001 };
+      start = { x: 0, time: 1569538800000 };
+      end = { x: 100, time: 1569538800001 };
       expect(swipeShouldChangeTab(start, end)).toBe(true);
     });
 
     it('should not change tab when the difference is small', () => {
-      start = { x: 0, y: 0, time: 1569538800000 };
-      end = { x: 1, y: 0, time: 1569538800001 };
+      start = { x: 0, time: 1569538800000 };
+      end = { x: 1, time: 1569538800001 };
       expect(swipeShouldChangeTab(start, end)).toBe(false);
     });
 
     it('should not change tab when the velocity is small', () => {
-      start = { x: 0, y: 0, time: 1569538800000 };
-      end = { x: 100, y: 0, time: 1569538900000 };
+      start = { x: 0, time: 1569538800000 };
+      end = { x: 100, time: 1569538900000 };
       expect(swipeShouldChangeTab(start, end)).toBe(false);
     });
   });
@@ -72,11 +71,11 @@ describe('Tabs Utility', () => {
   describe('checking for velocity against an array of touches', () => {
     beforeEach(() => {
       coords = [
-        { x: 0, y: 0, time: 1569538800000 },
-        { x: 100, y: 0, time: 1569538825000 },
-        { x: 200, y: 0, time: 1569538850000 },
-        { x: 300, y: 0, time: 1569538875000 },
-        { x: 400, y: 0, time: 1569538900000 },
+        { x: 0, time: 1569538800000 },
+        { x: 100, time: 1569538825000 },
+        { x: 200, time: 1569538850000 },
+        { x: 300, time: 1569538875000 },
+        { x: 400, time: 1569538900000 },
       ];
     });
 
@@ -85,15 +84,13 @@ describe('Tabs Utility', () => {
     });
 
     it('should only take into account the last 5 coordinates', () => {
-      coords.unshift(
-        { x: 10000, y: 0, time: 1569538800000 },
-        { x: 100000, y: 0, time: 1569538800000 },
-      );
+      coords.unshift({ x: 10000, time: 1569538800000 }, { x: 100000, time: 1569538800000 });
       expect(getVelocity(coords)).toBe(0.004);
     });
 
     it('returns a default 0 if there are any issues with the touches passed in', () => {
       expect(getVelocity([])).toBe(0);
+      expect(getVelocity([null, null, null])).toBe(0);
     });
   });
 
@@ -122,5 +119,5 @@ describe('Tabs Utility', () => {
   });
 });
 
-const getApproximateElasticDragDifference = (difference: number) =>
+const getApproximateElasticDragDifference = (difference) =>
   Math.round(getElasticDragDifference(difference));

package/src/field/Field.tests.story.tsx

@@ -1,33 +0,0 @@
-import { useState } from 'react';
-
-import { Input } from '../inputs/Input';
-import { Field } from './Field';
-import { Sentiment } from '../common';
-
-export default {
-  component: Field,
-  title: 'Field/Tests',
-};
-
-export const WithHelpAndErrorOnBlur = () => {
-  const [value, setValue] = useState('This is some text');
-  const [error, setError] = useState<string | undefined>(undefined);
-  return (
-    <Field
-      label="Phone number"
-      sentiment={error ? Sentiment.NEGATIVE : Sentiment.NEUTRAL}
-      message={error || 'Please include country code'}
-    >
-      <Input
-        value={value}
-        onChange={({ target }) => {
-          setValue(target.value);
-          setError(undefined);
-        }}
-        onBlur={() => {
-          setError('Something went wrong');
-        }}
-      />
-    </Field>
-  );
-};

package/src/tabs/Tab.tsx

@@ -1,72 +0,0 @@
-import { clsx } from 'clsx';
-import { forwardRef, useEffect, useRef } from 'react';
-import { useEffectEvent } from '../common/hooks/useEffectEvent';
-
-export interface TabProps {
-  children?: React.ReactNode;
-  disabled?: boolean;
-  selected?: boolean;
-  id: string;
-  panelId: string;
-  style?: React.CSSProperties;
-  focusTab?: () => void;
-  onKeyDown: React.KeyboardEventHandler<HTMLLIElement>;
-  onClick?: React.MouseEventHandler<HTMLLIElement>;
-}
-
-const noop = () => {};
-
-const Tab = forwardRef(function Tab(
-  {
-    children,
-    id,
-    disabled,
-    panelId,
-    selected,
-    onKeyDown,
-    onClick,
-    style,
-    focusTab = noop,
-  }: TabProps,
-  reference: React.ForwardedRef<HTMLLIElement>,
-) {
-  const handleFocusTab = useEffectEvent(focusTab);
-  const firstUpdate = useRef(true);
-  useEffect(
-    function checkFocus() {
-      if (firstUpdate.current) {
-        firstUpdate.current = false;
-        return;
-      }
-
-      if (selected) {
-        handleFocusTab();
-      }
-    },
-    [handleFocusTab, selected],
-  );
-
-  return (
-    <li
-      ref={reference}
-      className={clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {
-        'tabs__tab--selected': selected,
-        clickable: !disabled,
-        disabled,
-      })}
-      role="tab"
-      id={id}
-      aria-selected={selected ? 'true' : 'false'}
-      aria-disabled={disabled ? 'true' : 'false'}
-      aria-controls={disabled ? undefined : panelId}
-      tabIndex={0}
-      style={style}
-      onKeyDown={disabled ? undefined : onKeyDown}
-      onClick={onClick}
-    >
-      <span className="tabs__tab__content">{children}</span>
-    </li>
-  );
-});
-
-export default Tab;

package/src/tabs/TabList.tsx

@@ -1,11 +0,0 @@
-export interface TabListProps {
-  children?: React.ReactNode;
-}
-
-export default function TabList({ children }: TabListProps) {
-  return (
-    <ul className="tabs__tab-list" role="tablist">
-      {children}
-    </ul>
-  );
-}

package/src/tabs/TabPanel.tsx

@@ -1,14 +0,0 @@
-export interface TabPanelProps {
-  children?: React.ReactNode;
-  id: string;
-  tabId: string;
-  style: React.CSSProperties;
-}
-
-export default function TabPanel({ children, id, tabId, style }: TabPanelProps) {
-  return (
-    <div className="tabs__panel" role="tabpanel" id={id} aria-labelledby={tabId} style={style}>
-      {children}
-    </div>
-  );
-}

package/src/tabs/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Tabs';
-export type { TabItem, TabsProps } from './Tabs';