@transferwise/components 46.50.0 → 46.51.0

package/src/segmentedControl/SegmentedControl.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { createRef, useEffect, useRef, useState } from 'react';
 
 import Body from '../body';
@@ -87,12 +87,12 @@ const SegmentedControl = ({
     <div
       ref={segmentsRef}
       data-testid="segmented-control"
-      className={classNames('segmented-control', {
+      className={clsx('segmented-control', {
         'segmented-control--input': mode === 'input',
       })}
     >
       <div
-        className={classNames('segmented-control__segments', {
+        className={clsx('segmented-control__segments', {
           'segmented-control__segments--no-animate': !animate,
         })}
         role={mode !== 'input' ? 'tablist' : undefined}
@@ -107,7 +107,7 @@ const SegmentedControl = ({
               ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}
               key={segment.id}
               htmlFor={segment.id}
-              className={classNames('segmented-control__segment', {
+              className={clsx('segmented-control__segment', {
                 'segmented-control__selected-segment': value === segment.value,
               })}
             >
@@ -139,7 +139,7 @@ const SegmentedControl = ({
               id={segment.id}
               aria-controls={segment.controls}
               aria-selected={value === segment.value}
-              className={classNames('segmented-control__segment', 'segmented-control__button', {
+              className={clsx('segmented-control__segment', 'segmented-control__button', {
                 'segmented-control__selected-segment': value === segment.value,
               })}
               onClick={onSelect}

package/src/select/Select.js

@@ -1,5 +1,5 @@
 import { useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import PropTypes from 'prop-types';
 import { useState, useEffect, useRef, useMemo, useId } from 'react';
 import { useIntl } from 'react-intl';
@@ -321,7 +321,7 @@ export default function Select({
   }
 
   function renderOptionsList({ className } = {}) {
-    const dropdownClass = classNames(
+    const dropdownClass = clsx(
       s('np-dropdown-menu'),
       {
         [s('np-dropdown-menu-desktop')]: !isMobile,
@@ -369,7 +369,7 @@ export default function Select({
     return (
       /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
       <li
-        className={classNames(s('clickable'), s('border-bottom'), s('show-more'))}
+        className={clsx(s('clickable'), s('border-bottom'), s('show-more'))}
         onClick={handleOnClick}
         onKeyPress={handleOnClick}
       >
@@ -384,7 +384,7 @@ export default function Select({
     return (
       /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
       <li
-        className={classNames(s('clickable'), s('border-bottom'))}
+        className={clsx(s('clickable'), s('border-bottom'))}
         onClick={createSelectHandlerForOption(placeholderOption)}
         onKeyPress={createSelectHandlerForOption(placeholderOption)}
       >
@@ -403,7 +403,7 @@ export default function Select({
   function HeaderOption({ children }) {
     return (
       <li // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
-        className={classNames(s('np-dropdown-header'), s('np-text-title-group'))}
+        className={clsx(s('np-dropdown-header'), s('np-text-title-group'))}
         onClick={stopPropagation}
         onKeyPress={stopPropagation}
       >
@@ -432,7 +432,7 @@ export default function Select({
       !selectOption.disabled &&
       keyboardFocusedOptionIndex === getIndexWithoutHeadersForIndexWithHeaders(index);
 
-    const className = classNames(
+    const className = clsx(
       s('np-dropdown-item'),
       selectOption.disabled ? [s('disabled')] : s('clickable'),
       {
@@ -489,7 +489,7 @@ export default function Select({
   return (
     <div // eslint-disable-line jsx-a11y/no-static-element-interactions
       ref={selectReference}
-      className={classNames(s('np-select'), block ? s('btn-block') : null, s('btn-group'))}
+      className={clsx(s('np-select'), block ? s('btn-block') : null, s('btn-group'))}
       onKeyDown={handleKeyDown}
       onTouchMove={handleTouchStart}
       onFocus={handleOnFocus}
@@ -502,7 +502,7 @@ export default function Select({
         block={block}
         size={size}
         htmlType="button"
-        className={classNames(
+        className={clsx(
           s('np-dropdown-toggle'),
           s('np-text-body-large'),
           inverse ? s('np-dropdown-toggle-navy') : null,
@@ -523,7 +523,7 @@ export default function Select({
         )}
         <Chevron
           // disabled={disabled}
-          className={classNames(
+          className={clsx(
             s('tw-icon'),
             s('tw-chevron-up-icon'),
             s('tw-chevron'),

package/src/select/option/Option.tsx

@@ -1,6 +1,6 @@
 import { IdIconProps } from '@transferwise/icons';
 import { Flag } from '@wise/art';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { cloneElement, ReactElement, ReactNode } from 'react';
 
 import Body from '../../body';
@@ -45,7 +45,7 @@ function Option<T>({
   );
 
   const secondaryElement = secondary && (
-    <Body className={classNames(selected && 'text-ellipsis')}>{secondary}</Body>
+    <Body className={clsx(selected && 'text-ellipsis')}>{secondary}</Body>
   );
 
   return iconElement ? (

package/src/select/searchBox/SearchBox.tsx

@@ -1,5 +1,5 @@
 import { Search as SearchIcon } from '@transferwise/icons';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, InputHTMLAttributes } from 'react';
 
 import { Input } from '../../inputs/Input';
@@ -28,18 +28,15 @@ const SearchBox = forwardRef<HTMLInputElement, Props>(
       <li className={style('border-bottom')}>
         <a className={`${style('np-select-filter-link')} ${style('p-a-0')}`}>
           <div className={style('input-group')}>
-            <span className={classnames('input-group-addon', 'input-group-addon--search')}>
-              <SearchIcon
-                className={classnames(style('tw-icon'), style('tw-icon-search'))}
-                size={24}
-              />
+            <span className={clsx('input-group-addon', 'input-group-addon--search')}>
+              <SearchIcon className={clsx(style('tw-icon'), style('tw-icon-search'))} size={24} />
             </span>
             <Input
               ref={reference}
               id={id}
               role="searchbox"
               inputMode="search"
-              className={classnames(style('np-select-filter'))}
+              className={clsx(style('np-select-filter'))}
               placeholder={placeholder}
               value={value}
               spellCheck="false"

package/src/selectOption/SelectOption.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import { ActionButtonProps } from '../actionButton';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import Option from '../common/Option';
 import type { OptionProps } from '../common/Option/Option';
 import { Breakpoint, Position } from '../common';
@@ -75,9 +75,9 @@ export default function SelectOption<T>({
 
   function getOptions(isLargeScreen = false) {
     return (
-      <div className={classNames({ 'np-select-option-list': isLargeScreen })}>
+      <div className={clsx({ 'np-select-option-list': isLargeScreen })}>
         {options.map((optionsSection, index) => (
-          <Section key={index} className={classNames({ 'p-x-2 p-y-1': isLargeScreen })}>
+          <Section key={index} className={clsx({ 'p-x-2 p-y-1': isLargeScreen })}>
             {optionsSection.title && <Header title={optionsSection.title} />}
             <NavigationOptionsList>
               {optionsSection.options.map((option, index) => {
@@ -107,10 +107,10 @@ export default function SelectOption<T>({
         showMediaAtAllSizes
         disabled={disabled}
         decision={false}
-        media={hasSelected ? selected.media : placeholder.media ?? <Plus size={24} />}
+        media={hasSelected ? selected.media : (placeholder.media ?? <Plus size={24} />)}
         title={(hasSelected ? selected : placeholder).title}
         content={(hasSelected ? selected : placeholder).content}
-        className={classNames(
+        className={clsx(
           'np-select-option',
           'clickable',
           hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder',

package/src/slidingPanel/SlidingPanel.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
@@ -47,7 +47,7 @@ const SlidingPanel = forwardRef(
         <div
           ref={localReference}
           data-testid={testId}
-          className={classNames(
+          className={clsx(
             'sliding-panel',
             `sliding-panel--open-${position}`,
             showSlidingPanelBorder && `sliding-panel--border-${position}`,

package/src/statusIcon/StatusIcon.tsx

@@ -1,5 +1,5 @@
 import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 import { SizeSmall, SizeMedium, SizeLarge, Sentiment } from '../common';
 
@@ -26,9 +26,9 @@ const StatusIcon = ({ sentiment = 'neutral', size = 'md' }: StatusIconProps) =>
   return (
     <span
       data-testid="status-icon"
-      className={classNames('status-circle', `status-circle-${size}`, sentiment)}
+      className={clsx('status-circle', `status-circle-${size}`, sentiment)}
     >
-      <Icon className={classNames('status-icon', iconColor)} />
+      <Icon className={clsx('status-icon', iconColor)} />
     </span>
   );
 };

package/src/stepper/Stepper.less

@@ -79,7 +79,7 @@
 
 .progress-bar {
   .float(left);
-  
+
   -webkit-backface-visibility: hidden;
   height: 100%;
   background-color: var(--color-interactive-primary);
@@ -87,7 +87,7 @@
   border-bottom-left-radius: 1px;
   transition: width 0.6s ease-in-out;
   will-change: width;
-  
+
   &::after {
     .float(right);
 

package/src/stepper/Stepper.story.tsx

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import Stepper from './Stepper';
+
+const STEPS = [
+  {
+    label: 'One',
+    onClick: fn(),
+  },
+  {
+    label: 'Two',
+    hoverLabel: (
+      <>
+        <div>
+          <strong>Diana Jaramillo</strong>
+        </div>
+        dianajarm123@gmail.com
+      </>
+    ),
+    onClick: fn(),
+  },
+  { label: 'Recipient', onClick: fn() },
+  { label: 'Smellification', onClick: fn() },
+  { label: 'Battle', onClick: fn() },
+];
+
+export default {
+  component: Stepper,
+  title: 'Navigation/Stepper',
+  argTypes: {
+    activeStep: {
+      control: 'radio',
+      options: [...Array(STEPS.length).keys()],
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Stepper>;
+
+type Story = StoryObj<typeof Stepper>;
+
+export const Basic: Story = {
+  render: ({ activeStep, steps }) => {
+    return <Stepper activeStep={activeStep} steps={steps} />;
+  },
+  args: {
+    activeStep: 2,
+    steps: STEPS,
+  },
+};

package/src/stepper/Stepper.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 
 import { Position } from '../common';
@@ -23,7 +23,10 @@ export interface StepperProps {
   className?: string;
 }
 
-/* eslint-disable react/no-array-index-key */
+/**
+ * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.
+ * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants
+ */
 const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
   const { isRTL } = useDirection();
 
@@ -50,10 +53,11 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
     ) : (
       <span className="tw-stepper__step-label">{step.label}</span>
     );
+
     return (
       <li
         key={index}
-        className={classNames(
+        className={clsx(
           'hidden-xs',
           'tw-stepper__step',
           active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',
@@ -79,14 +83,14 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
   };
 
   return (
-    <div className={classNames('tw-stepper', className)}>
+    <div className={clsx('tw-stepper', className)}>
       <div className="progress">
         <div className="progress-bar" style={{ width: `${percentageCompleted * 100}%` }} />
       </div>
-      <ul className="tw-stepper-steps p-t-1 m-b-0">{steps.map(renderStep)}</ul>
+
+      <ol className="tw-stepper-steps p-t-1 m-b-0">{steps.map(renderStep)}</ol>
     </div>
   );
 };
-/* eslint-enable react/no-array-index-key */
 
 export default Stepper;

package/src/summary/Summary.tsx

@@ -3,7 +3,7 @@ import {
   CheckCircleFill as CheckCircleIcon,
   ClockFill as PendingCircleIcon,
 } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { ElementType, cloneElement, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 
@@ -120,7 +120,7 @@ const Summary = ({
 
   return (
     <Element
-      className={classNames('np-summary d-flex align-items-start', className)}
+      className={clsx('np-summary d-flex align-items-start', className)}
       // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`
       aria-label={status && intl.formatMessage(messages[statusLabels[status]])}
     >

package/src/switch/Switch.tsx

@@ -1,6 +1,6 @@
 import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
 import { useTheme } from '@wise/components-theming';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import type { KeyboardEventHandler, MouseEvent } from 'react';
 
 import type { CommonProps } from '../common';
@@ -68,7 +68,7 @@ const Switch = (props: SwitchProps) => {
 
   return (
     <span
-      className={classnames(
+      className={clsx(
         'np-switch',
 
         {

package/src/tabs/Tab.js

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import PropTypes from 'prop-types';
 import { forwardRef, useEffect, useRef } from 'react';
 
@@ -27,15 +27,11 @@ const Tab = forwardRef(
     return (
       <li
         ref={reference}
-        className={classNames(
-          'tabs__tab',
-          selected ? 'np-text-body-large-bold' : 'np-text-body-large',
-          {
-            'tabs__tab--selected': selected,
-            clickable: !disabled,
-            disabled: disabled,
-          },
-        )}
+        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'}
@@ -66,10 +62,10 @@ Tab.propTypes = {
   selected: PropTypes.bool,
   id: PropTypes.string.isRequired,
   panelId: PropTypes.string.isRequired,
-  onKeyDown: PropTypes.func.isRequired,
-  onClick: PropTypes.func,
   style: PropTypes.shape({ width: PropTypes.string }),
   focusTab: PropTypes.func,
+  onKeyDown: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
 };
 
 export default Tab;

package/src/tabs/Tabs.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/forbid-dom-props */
 import { Spring, SpringValue, animated } from '@react-spring/web';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import clamp from 'lodash.clamp';
 import PropTypes from 'prop-types';
 import { Component, createRef, Fragment } from 'react';
@@ -451,7 +451,7 @@ class Tabs extends Component {
           return (
             <div
               ref={this.containerReference}
-              className={classNames('tabs', className, {
+              className={clsx('tabs', className, {
                 'tabs--auto-width': headerWidth === Width.AUTO,
               })}
               onTouchStart={changeTabOnSwipe ? this.handleTouchStart : undefined}

package/src/tile/Tile.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 import Body from '../body';
 import { Size, Typography } from '../common';
@@ -36,7 +36,7 @@ export default function Tile({
 
   return (
     <Element
-      className={classNames(
+      className={clsx(
         'decision',
         'flex-column',
         'np-tile',
@@ -63,7 +63,7 @@ export default function Tile({
       }
     >
       <div className="np-tile__media d-flex justify-content-center">{media}</div>
-      <Title type={Typography.TITLE_SUBSECTION} className={classNames(isSmall ? 'm-t-1' : 'm-t-2')}>
+      <Title type={Typography.TITLE_SUBSECTION} className={clsx(isSmall ? 'm-t-1' : 'm-t-2')}>
         {title}
       </Title>
       {description ? (

package/src/title/Title.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { LabelHTMLAttributes, LiHTMLAttributes, ReactHTML } from 'react';
 
 import { TitleTypes, Typography, Heading } from '../common';
@@ -30,10 +30,10 @@ function Title({ as, type = DEFAULT_TYPE, className, ...props }: Props) {
   const isTypeSupported = mapping !== undefined;
   if (isTypeSupported) {
     const HeaderTag = as ?? mapping;
-    return <HeaderTag {...props} className={classNames(`np-text-${type}`, className)} />;
+    return <HeaderTag {...props} className={clsx(`np-text-${type}`, className)} />;
   }
   const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
-  return <HeaderTag {...props} className={classNames(`np-text-${DEFAULT_TYPE}`, className)} />;
+  return <HeaderTag {...props} className={clsx(`np-text-${DEFAULT_TYPE}`, className)} />;
 }
 
 export default Title;

package/src/tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import {
   AriaAttributes,
   PropsWithChildren,
@@ -92,7 +92,7 @@ const Tooltip = ({
       <div
         // @ts-expect-error
         ref={setPopperElement}
-        className={classNames(
+        className={clsx(
           'np-tooltip',
           'np-panel',
           open ? `np-panel--open np-tooltip--open` : null,
@@ -110,7 +110,7 @@ const Tooltip = ({
           <div
             // @ts-expect-error
             ref={setArrowElement}
-            className={classNames('np-panel__arrow')}
+            className={clsx('np-panel__arrow')}
             // eslint-disable-next-line react/forbid-dom-props
             style={styles.arrow}
           />

package/src/typeahead/Typeahead.tsx

@@ -3,7 +3,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
 import { Cross as CrossIcon } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { DebouncedFunc } from 'lodash';
 import clamp from 'lodash.clamp';
 import debounce from 'lodash.debounce';
@@ -359,7 +359,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       <Chip
         key={idx}
         label={option.label}
-        className={classNames('m-t-1', {
+        className={clsx('m-t-1', {
           'has-error': !valid,
           'np-chip--valid': valid,
         })}
@@ -397,7 +397,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
     }
     return (
       <div
-        className={classNames('dropdown btn-group btn-block', { open: dropdownOpen })}
+        className={clsx('dropdown btn-group btn-block', { open: dropdownOpen })}
         id={`menu-${id}`}
       >
         <ul className="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
@@ -468,7 +468,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
         role="group"
         {...inputAttributes}
         id={id}
-        className={classNames('typeahead', `typeahead-${size}`, {
+        className={clsx('typeahead', `typeahead-${size}`, {
           'typeahead--has-value': selected.length > 0,
           'typeahead--empty': selected.length === 0,
           'typeahead--multiple': multiple,
@@ -477,14 +477,14 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
         onClick={stopPropagation}
       >
         <div
-          className={classNames('form-group', {
+          className={clsx('form-group', {
             'has-error': hasError,
             'has-warning': hasWarning,
             'has-info': hasInfo,
           })}
         >
           <div
-            className={classNames(`input-group input-group-${size}`, {
+            className={clsx(`input-group input-group-${size}`, {
               'input-group--has-error': hasError,
             })}
           >

package/src/typeahead/typeaheadInput/TypeaheadInput.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-autofocus */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { Component, createRef, ReactNode } from 'react';
 
 import { Input } from '../../inputs/Input';
@@ -83,7 +83,7 @@ export default class TypeaheadInput<T> extends Component<
     return (
       <Input
         ref={this.inputRef}
-        className={classnames(multiple && 'typeahead__input')}
+        className={clsx(multiple && 'typeahead__input')}
         name={name}
         id={`input-${typeaheadId}`}
         autoFocus={autoFocus}

package/src/typeahead/typeaheadOption/TypeaheadOption.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 import { TypeaheadOption } from '../Typeahead';
 import highlight from '../util/highlight';
@@ -19,7 +19,7 @@ const Option = <T,>(props: TypeaheadOptionProps<T>) => {
     <li
       role="option"
       aria-selected="false"
-      className={classNames('typeahead__option tw-dropdown-item clickable', {
+      className={clsx('typeahead__option tw-dropdown-item clickable', {
         'tw-dropdown-item--focused': selected,
       })}
     >

package/src/upload/Upload.tsx

@@ -1,5 +1,5 @@
 import { Plus as PlusIcon } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { Component } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
 
@@ -352,7 +352,7 @@ export class Upload extends Component<UploadProps, UploadState> {
 
     return (
       <div
-        className={classNames('droppable-area', {
+        className={clsx('droppable-area', {
           droppable: true,
           'tw-droppable-sm droppable-sm': size === 'sm',
           'tw-droppable-md droppable-md': size === 'md' || !size,

package/src/uploadInput/UploadInput.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 
@@ -304,7 +304,7 @@ const UploadInput = ({
     <>
       <div
         role="group"
-        className={classNames('np-upload-input', className, { disabled })}
+        className={clsx('np-upload-input', className, { disabled })}
         {...inputAttributes}
       >
         {uploadedFiles.map((file) => (