@transferwise/components 46.52.3 → 46.53.0

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

@@ -1,36 +1,42 @@
 const MIN_SWIPE_DISTANCE = 50;
 const MIN_SWIPE_VELOCITY = 0.1;
 
-const swipedSignificantDistance = (difference) => Math.abs(difference) > MIN_SWIPE_DISTANCE;
+const swipedSignificantDistance = (difference: number) => Math.abs(difference) > MIN_SWIPE_DISTANCE;
 
-const swipedWithSignificantVelocity = (velocity) => velocity > MIN_SWIPE_VELOCITY;
+const swipedWithSignificantVelocity = (velocity: number) => velocity > MIN_SWIPE_VELOCITY;
 
-export const getSwipeVelocity = (start, end) => {
+export interface Swipe {
+  x: number;
+  y: number;
+  time: number;
+}
+
+export const getSwipeVelocity = (start: Swipe, end: Swipe) => {
   const timePassed = end.time - start.time;
 
   return getSwipeDifference(start, end) / timePassed;
 };
 
-export const getSwipeDifference = (start, end, axis = 'x') => {
+export const getSwipeDifference = (start: Swipe, end: Swipe, axis: 'x' | 'y' = 'x') => {
   return Math.abs(start[axis] - end[axis]);
 };
 
-export const swipedLeftToRight = (start, end) => {
+export const swipedLeftToRight = (start: Swipe, end: Swipe) => {
   return end.x > start.x;
 };
 
-export const swipedRightToLeft = (start, end) => {
+export const swipedRightToLeft = (start: Swipe, end: Swipe) => {
   return start.x > end.x;
 };
 
-export const swipeShouldChangeTab = (start, end) => {
+export const swipeShouldChangeTab = (start: Swipe, end: Swipe) => {
   const difference = getSwipeDifference(start, end);
   const velocity = getSwipeVelocity(start, end);
 
   return swipedSignificantDistance(difference) && swipedWithSignificantVelocity(velocity);
 };
 
-export function getVelocity(coords) {
+export function getVelocity(coords: Swipe[]) {
   try {
     const relevant = coords.slice(Math.max(coords.length - 5, 1));
     const first = relevant[0];
@@ -47,5 +53,5 @@ export function getVelocity(coords) {
   `1 - Math.E ** (-0.005 * difference)` provides a % value of how far we want to translate (0.005 being the rate)
   `Math.min(150, window.innerWidth / 3)` provides the maximum translate value
 */
-export const getElasticDragDifference = (difference) =>
+export const getElasticDragDifference = (difference: number) =>
   Math.min(150, window.innerWidth / 3) * (1 - Math.E ** (-0.005 * 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.js

@@ -1,71 +0,0 @@
-import { clsx } from 'clsx';
-import PropTypes from 'prop-types';
-import { forwardRef, useEffect, useRef } from 'react';
-
-const Tab = forwardRef(
-  (
-    { children, id, disabled, panelId, selected, onKeyDown, onClick, style, focusTab },
-    reference,
-  ) => {
-    const firstUpdate = useRef(true);
-
-    const checkFocus = () => {
-      if (firstUpdate.current) {
-        firstUpdate.current = false;
-        return;
-      }
-
-      if (selected && focusTab) {
-        focusTab();
-      }
-    };
-
-    useEffect(() => {
-      checkFocus();
-    }, [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 ? null : panelId}
-        tabIndex="0"
-        style={style}
-        onKeyDown={disabled ? null : onKeyDown}
-        onClick={onClick}
-      >
-        <span className="tabs__tab__content">{children}</span>
-      </li>
-    );
-  },
-);
-
-Tab.defaultProps = {
-  disabled: false,
-  selected: false,
-  onClick: null,
-  style: null,
-  focusTab: null,
-};
-
-Tab.propTypes = {
-  children: PropTypes.node.isRequired,
-  disabled: PropTypes.bool,
-  selected: PropTypes.bool,
-  id: PropTypes.string.isRequired,
-  panelId: PropTypes.string.isRequired,
-  style: PropTypes.shape({ width: PropTypes.string }),
-  focusTab: PropTypes.func,
-  onKeyDown: PropTypes.func.isRequired,
-  onClick: PropTypes.func,
-};
-
-export default Tab;

package/src/tabs/TabList.js

@@ -1,15 +0,0 @@
-import PropTypes from 'prop-types';
-
-const TabList = ({ children }) => {
-  return (
-    <ul className="tabs__tab-list" role="tablist">
-      {children}
-    </ul>
-  );
-};
-
-TabList.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
-};
-
-export default TabList;

package/src/tabs/TabPanel.js

@@ -1,20 +0,0 @@
-import PropTypes from 'prop-types';
-
-const TabPanel = ({ children, id, tabId, style }) => {
-  return (
-    <div className="tabs__panel" role="tabpanel" id={id} aria-labelledby={tabId} style={style}>
-      {children}
-    </div>
-  );
-};
-
-TabPanel.propTypes = {
-  children: PropTypes.node.isRequired,
-  id: PropTypes.string.isRequired,
-  tabId: PropTypes.string.isRequired,
-  style: PropTypes.shape({
-    width: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-export default TabPanel;

package/src/tabs/index.js

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