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

package/src/moneyInput/MoneyInput.story.tsx

@@ -4,8 +4,7 @@ import { Lock } from '@transferwise/icons';
 import { useState } from 'react';
 
 import MoneyInput, { CurrencyOptionItem } from '.';
-import Provider from '../provider/Provider';
-import translations from '../i18n';
+import { Field } from '../field/Field';
 
 export default {
   component: MoneyInput,
@@ -17,14 +16,13 @@ export default {
     const handleOnCurrencyChange = (value: CurrencyOptionItem) => setSelectedCurrency(value);
 
     return (
-      <>
-        <label htmlFor={args.id}>Editable money input label</label>
+      <Field id={args.id} label="Editable money input label" required>
         <MoneyInput
           {...args}
           selectedCurrency={selectedCurrency}
           onCurrencyChange={handleOnCurrencyChange}
         />
-      </>
+      </Field>
     );
   },
   args: {
@@ -161,17 +159,19 @@ export const SmallInput: Story = {
   render: (args) => {
     return (
       <>
-        <label htmlFor={args.id}>Money inputs</label>
-        <MoneyInput {...args} {...SingleCurrency.args} />
+        <Field id={args.id} label="Money inputs" required>
+          <MoneyInput {...args} {...SingleCurrency.args} />
+        </Field>
         <br />
         <MoneyInput {...args} {...MultipleCurrencies.args} />
         <hr />
-        <div className="has-error">
-          <label htmlFor={args.id}>Error states</label>
+        <Field id={args.id} label="Error states" sentiment="negative" required>
           <MoneyInput {...args} {...SingleCurrency.args} />
-          <br />
+        </Field>
+        <br />
+        <Field sentiment="negative">
           <MoneyInput {...args} {...MultipleCurrencies.args} />
-        </div>
+        </Field>
       </>
     );
   },

package/src/radioGroup/RadioGroup.rtl.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen } from '../test-utils';
 
 import RadioGroup from '.';
 import { Field } from '../field/Field';

package/src/select/Select.rtl.spec.tsx

@@ -12,6 +12,6 @@ describe('Select', () => {
         <Select options={options} selected={options[0]} onChange={() => {}} />
       </Field>,
     );
-    expect(screen.getByLabelText('Currency')).toHaveTextContent('USD');
+    expect(screen.getByLabelText(/Currency/)).toHaveTextContent('USD');
   });
 });

package/src/switch/Switch.spec.tsx

@@ -89,6 +89,6 @@ describe('Switch', () => {
         <Switch checked onClick={props.onClick} />
       </Field>,
     );
-    expect(screen.getByLabelText('Dark mode')).toHaveAttribute('role', 'switch');
+    expect(screen.getByLabelText(/Dark mode/)).toHaveAttribute('role', 'switch');
   });
 });

package/src/switch/Switch.story.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import Switch from './Switch';
+import { Field } from '../field/Field';
 
 export default {
   component: Switch,
@@ -13,16 +14,14 @@ export const Basic = () => {
 
   return (
     <div className="d-flex flex-column">
-      <label id="labelID" htmlFor="switchId">
-        A switch with a label
-      </label>
-      <Switch
-        checked={checked1}
-        className="a-class-name"
-        aria-labelledby="labelID"
-        id="switchId"
-        onClick={() => setCheck1(!checked1)}
-      />
+      <Field id="switchId" label="A switch with a label" required>
+        <Switch
+          checked={checked1}
+          className="a-class-name"
+          id="switchId"
+          onClick={() => setCheck1(!checked1)}
+        />
+      </Field>
 
       <Switch
         checked={checked2}
@@ -39,17 +38,16 @@ 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
-        className="a-class-name"
-        aria-labelledby="labelID"
-        id="switchId"
-        onClick={() => setCheck(!checked)}
-      />
+      <Field id="switchId" label="A switch with a label" required>
+        <Switch
+          checked={checked}
+          disabled
+          className="a-class-name"
+          aria-labelledby="labelID"
+          id="switchId"
+          onClick={() => setCheck(!checked)}
+        />
+      </Field>
 
       <Switch
         checked={!checked}

package/src/tabs/Tab.js

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,20 @@
+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/{Tabs.tsx → Tabs.js}

@@ -1,6 +1,8 @@
-import { Spring, animated } from '@react-spring/web';
+/* eslint-disable react/forbid-dom-props */
+import { Spring, SpringValue, animated } from '@react-spring/web';
 import { clsx } from 'clsx';
 import clamp from 'lodash.clamp';
+import PropTypes from 'prop-types';
 import { Component, createRef, Fragment } from 'react';
 
 import { Size, Width, Direction } from '../common';
@@ -16,69 +18,19 @@ import {
   swipedRightToLeft,
   swipeShouldChangeTab,
   getVelocity,
-  Swipe,
 } from './utils';
 
 const MIN_INDEX = 0;
 
-export interface TabItem {
-  title: string;
-  content: React.ReactNode;
-  disabled: boolean;
-}
-
-type TabsTransitionSpacing =
-  | 'default'
-  | `${Size.EXTRA_SMALL | Size.SMALL | Size.MEDIUM | Size.LARGE}`;
-
-export interface TabsProps {
-  tabs: TabItem[];
-  selected: number;
-  name: string;
-  animatePanelsOnClick?: boolean;
-  changeTabOnSwipe?: boolean;
-  className?: string;
-  transitionSpacing?: TabsTransitionSpacing;
-  headerWidth?: `${Width}`;
-  id?: string;
-  onTabSelect: (index: number) => void;
-}
-
-interface TabsState {
-  start: Swipe | null;
-  translateX: number;
-  translateFrom: number;
-  translateTo: number;
-  translateLineX: string | null;
-  isAnimating: boolean;
-  isSwiping: boolean;
-  isScrolling: boolean;
-  lastSwipeVelocity: number;
-  fullWidthTabs: boolean;
-  currentSwipe: Swipe[];
-  selectedTabIndex: number;
-}
-
-const SpacerWidth = {
-  default: 0,
-  xs: 8,
-  sm: 16,
-  md: 24,
-  lg: 32,
-} satisfies Record<TabsTransitionSpacing, number>;
+const enabledTabsFilter = (tab) => !tab.disabled;
 
-export default class Tabs extends Component<TabsProps, TabsState> {
-  declare props: TabsProps & Required<Pick<TabsProps, keyof typeof Tabs.defaultProps>>;
+const SpacerWidth = { default: 0, xs: 8, sm: 16, md: 24, lg: 32 };
 
-  static defaultProps = {
-    changeTabOnSwipe: true,
-    transitionSpacing: 'default',
-    headerWidth: Width.BLOCK,
-  } satisfies Partial<TabsProps>;
+class Tabs extends Component {
+  /** @type {React.RefObject<HTMLDivElement | null>} */
+  containerReference = createRef();
 
-  containerReference = createRef<HTMLDivElement>();
-
-  constructor(props: Tabs['props']) {
+  constructor(props) {
     super(props);
     this.state = {
       start: null,
@@ -91,19 +43,17 @@ export default class Tabs extends Component<TabsProps, TabsState> {
       isScrolling: false,
       lastSwipeVelocity: 0,
       fullWidthTabs: props.headerWidth === Width.BLOCK,
-      currentSwipe: [],
-      selectedTabIndex: props.selected,
     };
   }
 
-  container: HTMLDivElement | null = null;
+  container = null;
 
   containerWidth = 0;
 
-  tabRefs: (HTMLLIElement | null)[] = [];
+  tabRefs = [];
 
   get filteredTabsLength() {
-    return this.props.tabs.filter((tab) => !tab.disabled).length;
+    return this.props.tabs.filter(enabledTabsFilter).length;
   }
 
   get MAX_INDEX() {
@@ -121,17 +71,17 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     window.addEventListener('resize', this.handleResize);
   }
 
-  componentDidUpdate(previousProps: TabsProps, previousState: TabsState) {
+  componentDidUpdate(previousProps, previousState) {
     const currentSelected = this.props.selected;
     const previousSelected = previousProps.selected;
     const currentSelectedTab = this.props.tabs[currentSelected];
-    const currentSelectedTabIsDisabled = currentSelectedTab?.disabled;
+    const currentSelectedTabIsDisabled = currentSelectedTab && currentSelectedTab.disabled;
     const previousSelectedTab = previousProps.tabs[previousSelected];
-    const previousSelectedTabIsDisabled = previousSelectedTab?.disabled;
+    const previousSelectedTabIsDisabled = previousSelectedTab && previousSelectedTab.disabled;
     const currentTabsLength = this.props.tabs.length;
     const previousTabsLength = previousProps.tabs.length;
-    const currentDisabledTabsLength = this.props.tabs.filter((tab) => !tab.disabled).length;
-    const previousDisabledTabsLength = previousProps.tabs.filter((tab) => !tab.disabled).length;
+    const currentDisabledTabsLength = this.props.tabs.filter(enabledTabsFilter).length;
+    const previousDisabledTabsLength = previousProps.tabs.filter(enabledTabsFilter).length;
     const currentHeaderWidth = this.props.headerWidth;
     const previousFullHeaderWidth = previousProps.headerWidth;
     const { animatePanelsOnClick } = this.props;
@@ -170,12 +120,12 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     }));
   };
 
-  setContainerRefAndWidth = (node: HTMLDivElement | null) => {
+  setContainerRefAndWidth = (node) => {
     this.container = node;
     this.setContainerWidth(node);
   };
 
-  setContainerWidth = (node: HTMLDivElement | null) => {
+  setContainerWidth = (node) => {
     if (!node) {
       return;
     }
@@ -185,10 +135,10 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     this.containerWidth = width;
   };
 
-  isTabDisabled = (index: number) => {
+  isTabDisabled = (index) => {
     const { tabs } = this.props;
 
-    return tabs[index]?.disabled ?? false;
+    return tabs[index] && tabs[index].disabled;
   };
 
   getAllTabsWidth = () => {
@@ -199,7 +149,7 @@ export default class Tabs extends Component<TabsProps, TabsState> {
       .reduce((a, b) => a + b, 0);
   };
 
-  getDistanceToSelectedTab = (selectedTabIndex: number) => {
+  getDistanceToSelectedTab = (selectedTabIndex) => {
     return this.tabRefs
       .filter((_, idx) => idx < selectedTabIndex)
       .map((reference) => (reference ? reference.getBoundingClientRect().width : 0))
@@ -240,7 +190,7 @@ export default class Tabs extends Component<TabsProps, TabsState> {
    * Gets the next tab that should be selected based on the swipe direction
    * and the current selected tab (is called recursively to account for disabled tabs).
    */
-  getTabToSelect = (selected: number, start: Swipe, end: Swipe): number => {
+  getTabToSelect = (selected, start, end) => {
     let nextSelected = selected;
 
     if (swipedLeftToRight(start, end)) {
@@ -270,19 +220,9 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     return nextSelected;
   };
 
-  swipedOverHalfOfContainer = (difference: number) => difference / this.containerWidth >= 0.5;
-
-  calculateApplicableDragDifference = ({
-    currentSelected,
-    nextSelected,
-    start,
-    end,
-  }: {
-    currentSelected: number;
-    nextSelected: number;
-    start: Swipe;
-    end: Swipe;
-  }) => {
+  swipedOverHalfOfContainer = (difference) => difference / this.containerWidth >= 0.5;
+
+  calculateApplicableDragDifference = ({ currentSelected, nextSelected, start, end }) => {
     const difference = getSwipeDifference(start, end);
     const elasticDrag = getElasticDragDifference(difference);
 
@@ -302,22 +242,22 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     return false;
   };
 
-  switchTab = (index: number) => {
+  switchTab = (index) => {
     const { onTabSelect } = this.props;
     onTabSelect(index);
   };
 
-  getTabIndexWithoutDisabledTabs(index: number) {
-    return index - this.props.tabs.slice(0, index).filter((tab) => tab.disabled).length;
+  getTabIndexWithoutDisabledTabs(index) {
+    return index - this.props.tabs.slice(0, index).filter((tab) => !enabledTabsFilter(tab)).length;
   }
 
-  animateToTab = (index: number, instant?: boolean) => {
+  animateToTab = (index, instant) => {
     this.animateLine(index);
 
     this.animatePanel(this.getTabIndexWithoutDisabledTabs(index), instant);
   };
 
-  animateLine = (index: number) => {
+  animateLine = (index) => {
     this.setState((previousState) => ({
       translateLineX: previousState.fullWidthTabs
         ? `${index * 100}%`
@@ -326,7 +266,7 @@ export default class Tabs extends Component<TabsProps, TabsState> {
   };
 
   // Pass `instant` to set the `translateX` to the new panel with no transition
-  animatePanel = (index: number, instant = false) => {
+  animatePanel = (index, instant = false) => {
     const { translateTo: currentTranslateTo } = this.state;
 
     const translateFrom = currentTranslateTo;
@@ -340,7 +280,7 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     });
   };
 
-  disableScroll = (event: Event) => {
+  disableScroll = (event) => {
     const { isSwiping } = this.state;
 
     if (isSwiping) {
@@ -348,17 +288,17 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     }
   };
 
-  handleTabClick = (index: number) => () => {
+  handleTabClick = (index) => () => {
     this.switchTab(index);
   };
 
-  onKeyDown = (index: number) => (event: React.KeyboardEvent<HTMLLIElement>) => {
+  onKeyDown = (index) => (event) => {
     if (event && event.key === 'Enter') {
       this.switchTab(index);
     }
   };
 
-  handleTouchStart: React.TouchEventHandler<HTMLDivElement> = (event) => {
+  handleTouchStart = (event) => {
     const start = {
       x: event.nativeEvent.touches[0].clientX,
       y: event.nativeEvent.touches[0].clientY,
@@ -372,15 +312,11 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     event.persist();
   };
 
-  handleTouchMove: React.TouchEventHandler<HTMLDivElement> = (event) => {
+  handleTouchMove = (event) => {
     const { start } = this.state;
-    if (start == null) {
-      return;
-    }
-
     const { selected: currentSelectedFromProps } = this.props;
     const selected = this.getTabIndexWithoutDisabledTabs(currentSelectedFromProps);
-    const end: Swipe = {
+    const end = {
       x: event.nativeEvent.changedTouches[0].clientX,
       y: event.nativeEvent.changedTouches[0].clientY,
       time: Date.now(),
@@ -427,14 +363,10 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     }
   };
 
-  handleTouchEnd: React.TouchEventHandler<HTMLDivElement> = (event) => {
+  handleTouchEnd = (event) => {
     const { start, isSwiping } = this.state;
-    if (start == null) {
-      return;
-    }
-
     const { selected } = this.props;
-    const end: Swipe = {
+    const end = {
       x: event.nativeEvent.changedTouches[0].clientX,
       y: event.nativeEvent.changedTouches[0].clientY,
       time: Date.now(),
@@ -501,7 +433,7 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     const sliderWidth = tabsLength * this.containerWidth + spacer * 2;
 
     // Uses `props.panelTransitionSpacing` to add a spacer in-between the `TabPanel` you're transitioning to/from
-    const Spacer = ({ id }: { id: string }) =>
+    const Spacer = ({ id }) =>
       spacer > 0 && (
         <div
           key={id}
@@ -540,10 +472,10 @@ export default class Tabs extends Component<TabsProps, TabsState> {
                       disabled={disabled}
                       focusTab={() => {
                         if (this.containerReference.current?.contains(document.activeElement)) {
-                          this.tabRefs[index]?.focus();
+                          this.tabRefs[index].focus();
                         }
                       }}
-                      onClick={disabled ? undefined : this.handleTabClick(index)}
+                      onClick={disabled ? null : this.handleTabClick(index)}
                       onKeyDown={this.onKeyDown(index)}
                       {...(fullWidthTabs
                         ? { style: { width: `${(1 / tabs.length) * 100}%` } }
@@ -632,3 +564,34 @@ export default class Tabs extends Component<TabsProps, TabsState> {
     );
   }
 }
+
+const SpacerSizes = { ...Size, NONE: 'default' };
+
+Tabs.propTypes = {
+  tabs: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      content: PropTypes.node.isRequired,
+      disabled: PropTypes.bool.isRequired,
+    }),
+  ).isRequired,
+  selected: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  animatePanelsOnClick: PropTypes.bool,
+  changeTabOnSwipe: PropTypes.bool,
+  className: PropTypes.string,
+  transitionSpacing: PropTypes.oneOf(['default', 'xs', 'sm', 'md', 'lg']),
+  headerWidth: PropTypes.oneOf(['auto', 'block']),
+  id: PropTypes.string,
+  onTabSelect: PropTypes.func.isRequired,
+};
+
+Tabs.defaultProps = {
+  animatePanelsOnClick: false,
+  changeTabOnSwipe: true,
+  className: '',
+  transitionSpacing: SpacerSizes.NONE,
+  headerWidth: Width.BLOCK,
+};
+
+export default Tabs;

package/src/tabs/{Tabs.story.tsx → Tabs.story.js}

@@ -97,7 +97,7 @@ export const NoPanelAnimation = () => {
   const [selected, setSelected] = useState(0);
   return (
     <Tabs
-      animatePanelsOnClick={false}
+      animatePanels={false}
       className="tabs-custom-class"
       name="tabs-docs"
       transitionSpacing={Size.MEDIUM}

package/src/tabs/index.js

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

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

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