@transferwise/components 45.12.0 → 45.13.0

package/src/statusIcon/StatusIcon.spec.js

@@ -0,0 +1,70 @@
+import { Sentiment } from '../common';
+import { render, cleanup, screen } from '../test-utils';
+
+import StatusIcon from '.';
+
+describe('StatusIcon', () => {
+  const renderStatusIcon = (props = {}) => {
+    return render(<StatusIcon {...props} />);
+  };
+
+  afterEach(cleanup);
+
+  it('renders the status icon without any props', () => {
+    renderStatusIcon();
+
+    expect(screen.getByTestId('status-icon')).toHaveClass('neutral');
+    expect(screen.getByTestId('status-icon')).toHaveClass('status-circle');
+  });
+
+  it('renders the status icon small if prop is passed in', () => {
+    renderStatusIcon({ size: 'sm' });
+
+    expect(screen.getByTestId('status-icon')).toHaveClass('status-circle-sm');
+  });
+
+  it('renders the status icon medium if prop is passed in', () => {
+    renderStatusIcon({ size: 'md' });
+
+    expect(screen.getByTestId('status-icon')).toHaveClass('status-circle-md');
+  });
+
+  it('renders the status icon big if prop is passed in', () => {
+    renderStatusIcon({ size: 'lg' });
+
+    expect(screen.getByTestId('status-icon')).toHaveClass('status-circle-lg');
+  });
+
+  it('renders the status icon with different icons based on sentiment passed in', () => {
+    [
+      Sentiment.NEGATIVE,
+      Sentiment.NEUTRAL,
+      Sentiment.PENDING,
+      Sentiment.POSITIVE,
+      Sentiment.WARNING,
+    ].forEach((sentiment) => {
+      renderStatusIcon({ sentiment: sentiment });
+      expect(screen.getByTestId('status-icon')).toHaveClass(sentiment.toString());
+      cleanup();
+    });
+  });
+
+  it('warning and pending sentiments get dark colored icons', () => {
+    renderStatusIcon({ sentiment: Sentiment.WARNING });
+    expect(screen.getByTestId('alert-icon')).toHaveClass('dark');
+    cleanup();
+    renderStatusIcon({ sentiment: Sentiment.PENDING });
+    expect(screen.getByTestId('clock-borderless-icon')).toHaveClass('dark');
+  });
+
+  it('positive, negative, and neutral sentiments get light colored icons', () => {
+    renderStatusIcon({ sentiment: Sentiment.POSITIVE });
+    expect(screen.getByTestId('check-icon')).toHaveClass('light');
+    cleanup();
+    renderStatusIcon({ sentiment: Sentiment.NEGATIVE });
+    expect(screen.getByTestId('cross-icon')).toHaveClass('light');
+    cleanup();
+    renderStatusIcon({ sentiment: Sentiment.NEUTRAL });
+    expect(screen.getByTestId('info-icon')).toHaveClass('light');
+  });
+});

package/src/statusIcon/StatusIcon.story.tsx

@@ -0,0 +1,51 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Size, Sentiment } from '../common';
+
+import StatusIcon from './StatusIcon';
+
+export default {
+  component: StatusIcon,
+  title: 'Other/StatusIcon',
+} satisfies Meta<typeof StatusIcon>;
+
+type Story = StoryObj<typeof StatusIcon>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <span style={{ display: 'flex' }}>
+      <StatusIcon {...args} />
+    </span>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <span style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '400px' }}>
+      {[
+        Sentiment.POSITIVE,
+        Sentiment.NEGATIVE,
+        Sentiment.NEUTRAL,
+        Sentiment.WARNING,
+        Sentiment.PENDING,
+      ].map((sentiment) => {
+        return (
+          <span
+            key={sentiment}
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              flexDirection: 'column',
+              minHeight: '150px',
+              alignItems: 'center',
+            }}
+          >
+            {([Size.SMALL, Size.MEDIUM, Size.LARGE] as const).map((size) => {
+              return <StatusIcon key={size} size={size} sentiment={sentiment} />;
+            })}
+          </span>
+        );
+      })}
+    </span>
+  ),
+};

package/src/statusIcon/StatusIcon.tsx

@@ -0,0 +1,37 @@
+import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';
+import classNames from 'classnames';
+import { ReactElement } from 'react';
+
+import { SizeSmall, SizeMedium, SizeLarge, Sentiment } from '../common';
+
+type Props = {
+  sentiment: Sentiment;
+  size: SizeSmall | SizeMedium | SizeLarge;
+};
+
+const StatusIcon = ({ sentiment = Sentiment.NEUTRAL, size }: Props): ReactElement => {
+  const iconTypeMap = {
+    [Sentiment.POSITIVE]: Check,
+    [Sentiment.NEUTRAL]: Info,
+    [Sentiment.WARNING]: Alert,
+    [Sentiment.NEGATIVE]: Cross,
+    [Sentiment.PENDING]: ClockBorderless,
+    [Sentiment.INFO]: Info,
+    [Sentiment.ERROR]: Cross,
+    [Sentiment.SUCCESS]: Check,
+  };
+
+  const iconColor = [Sentiment.WARNING, Sentiment.PENDING].includes(sentiment) ? 'dark' : 'light';
+  const Icon = iconTypeMap[sentiment];
+
+  return (
+    <span
+      data-testid="status-icon"
+      className={classNames('status-circle', 'status-circle-' + size, sentiment)}
+    >
+      <Icon className={classNames('status-icon', iconColor)} />
+    </span>
+  );
+};
+
+export default StatusIcon;

package/src/statusIcon/index.js

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

package/src/stepper/Stepper.css

@@ -0,0 +1 @@
+.tw-stepper{padding-bottom:24px;width:100%}@media only screen and (max-width:575px){.tw-stepper{padding-bottom:0}}.tw-stepper__step{list-style-type:none;position:absolute;top:0}.tw-stepper__step--active .tw-stepper__step-label{color:#37517e;color:var(--color-content-primary);cursor:default;font-weight:600}.np-theme-personal .tw-stepper__step--active~li:not(.tw-stepper__step--has-tooltip:hover) .tw-stepper__step-label:not(:active,:focus){opacity:.45}.tw-stepper__step--clickable .tw-stepper__step-label{border-radius:2px;color:#0097c7;color:var(--color-content-accent);line-height:0;transition:color .15s ease-in-out}.np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);top:0}.tw-stepper__step--has-tooltip:hover{cursor:pointer}@media screen and (min-width:576px) and (max-width:991px){.tw-stepper__step:first-child .tooltip-inner{transform:translateX(calc(50% - 32px))}.tw-stepper__step:last-child .tooltip-inner{transform:translateX(calc(-50% + 32px))}}.tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);font-weight:600;font-weight:var(--font-weight-semi-bold);position:absolute;top:0;transform:translateX(-50%);transition:color .6s ease-in-out;white-space:nowrap}[dir=rtl] .tw-stepper__step-label{transform:translateX(50%)}.tw-stepper .tooltip{top:24px!important;white-space:nowrap}.tw-stepper .tooltip .tooltip-inner{max-width:100%}.tw-stepper .tw-tooltip-container{display:block}.tw-stepper-steps{padding:0;position:relative}[dir=rtl] .tw-stepper-steps{padding:0}.progress-bar{-webkit-backface-visibility:hidden;background-color:var(--color-interactive-primary);border-bottom-left-radius:1px;border-top-left-radius:1px;float:left;height:100%;transition:width .6s ease-in-out;will-change:width}[dir=rtl] .progress-bar{float:right}.progress-bar:after{border-radius:4px;content:"";float:right;height:8px;margin-right:-4px;margin-top:-3px;width:8px}[dir=rtl] .progress-bar:after{float:left;margin-left:-4px;margin-right:0}.btn-unstyled{background:none;border:none;display:block;margin:0;padding:0}

package/src/stepper/Stepper.less

@@ -0,0 +1,118 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+
+.tw-stepper {
+  padding-bottom: 24px;
+  width: 100%;
+
+  @media only screen and (--screen-xs-max) {
+    padding-bottom: 0;
+  }
+
+  &__step {
+    position: absolute;
+    top: 0;
+    list-style-type: none;
+
+    &--active {
+      .tw-stepper__step-label {
+        cursor: default;
+        color: var(--color-content-primary);
+        font-weight: 600;
+      }
+
+      .np-theme-personal & ~ li:not(.tw-stepper__step--has-tooltip:hover) {
+        .tw-stepper__step-label:not(:active,:focus) {
+          opacity: 0.45;
+        }
+      }
+    }
+
+    &--clickable .tw-stepper__step-label {
+      color: var(--color-content-accent);
+      transition: color 0.15s ease-in-out;
+      line-height: 0;
+      border-radius: 2px;
+
+      .np-theme-personal & {
+        color: var(--color-content-secondary);
+        top: 0;
+      }
+    }
+
+    &--has-tooltip:hover {
+      cursor: pointer;
+    }
+
+    @media screen and (--screen-sm) and (--screen-md-max) {
+      &:first-child .tooltip-inner {
+        transform: translateX(~"calc(50% - 32px)");
+      }
+
+      &:last-child .tooltip-inner {
+        transform: translateX(~"calc(-50% + 32px)");
+      }
+    }
+  }
+
+  &__step-label {
+    position: absolute;
+    top: 0;
+    color: var(--color-content-secondary);
+    transition: color 0.6s ease-in-out;
+    white-space: nowrap;
+    font-weight: var(--font-weight-semi-bold);
+    .translateX(-50%);
+  }
+
+  & .tooltip {
+    top: 24px !important;
+    white-space: nowrap;
+
+    & .tooltip-inner {
+      max-width: 100%;
+    }
+  }
+
+  & .tw-tooltip-container {
+    display: block;
+  }
+}
+
+.tw-stepper-steps {
+  position: relative;
+  .padding-shorthand(0);
+}
+
+.progress-bar {
+  .float(left);
+  
+  -webkit-backface-visibility: hidden;
+  height: 100%;
+  background-color: var(--color-interactive-primary);
+  border-top-left-radius: 1px;
+  border-bottom-left-radius: 1px;
+  transition: width 0.6s ease-in-out;
+  will-change: width;
+  
+  &::after {
+    .float(right);
+
+    width: 8px;
+    height: 8px;
+    margin-top: -3px;
+    .margin(right, -4px);
+
+    content: "";
+    border-radius: 4px;
+  }
+}
+
+.btn-unstyled {
+  background: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+}

package/src/stepper/Stepper.spec.js

@@ -0,0 +1,211 @@
+import { shallow } from 'enzyme';
+
+import { Tooltip, Body } from '..';
+
+import Stepper from './Stepper';
+
+jest.mock('./deviceDetection', () => ({
+  isTouchDevice: jest.fn(() => false),
+}));
+
+describe('Stepper', () => {
+  let props;
+  let component;
+  let fakeDeviceDetection;
+
+  beforeEach(() => {
+    fakeDeviceDetection = require('./deviceDetection');
+    props = {
+      activeStep: 0,
+      steps: ['one', 'two', 'three'].map((label) => ({ label })),
+    };
+    component = shallow(<Stepper {...props} />);
+  });
+
+  const activeStep = (step) => component.setProps({ activeStep: step });
+  const steps = (howMany) =>
+    component.setProps({
+      steps: new Array(...new Array(howMany)).map((_, index) => ({ label: index.toString() })),
+    });
+
+  describe('progress bar', () => {
+    const totalWidth = () => component.find('.progress-bar').prop('style').width;
+
+    describe('when no steps are passed in', () => {
+      it('renders nothing', () => {
+        component.setProps({ steps: [] });
+
+        expect(component.isEmptyRender()).toBe(true);
+      });
+    });
+
+    it('sets the widths of the progress bar to match where you are in the flow', () => {
+      expect(totalWidth()).toStrictEqual('0%');
+      activeStep(2);
+      expect(totalWidth()).toStrictEqual('100%');
+      steps(5);
+      expect(totalWidth()).toStrictEqual('50%');
+      activeStep(10000);
+      expect(totalWidth()).toStrictEqual('100%');
+      activeStep(-10);
+      expect(totalWidth()).toStrictEqual('0%');
+    });
+  });
+
+  describe('steps', () => {
+    it('have rendered labels', () => {
+      steps(5);
+      [0, 1, 2, 3, 4].forEach((label, index) => {
+        expect(
+          component.find('.tw-stepper__step').at(index).find(Body).props().children,
+        ).toStrictEqual(`${label}`);
+      });
+    });
+
+    it('are active when clickable and completed', () => {
+      const stepActive = (index) =>
+        component.find('.tw-stepper__step').at(index).hasClass('tw-stepper__step--clickable');
+
+      component.setProps({
+        steps: [
+          { label: '0' },
+          { label: '1', onClick: () => null },
+          { label: '2', onClick: () => null },
+        ],
+        activeStep: 0,
+      });
+
+      expect(stepActive(0)).toBe(false);
+      activeStep(1);
+      expect(stepActive(0)).toBe(false);
+      expect(stepActive(1)).toBe(false);
+      activeStep(2);
+      expect(stepActive(0)).toBe(false);
+      expect(stepActive(1)).toBe(true);
+      expect(stepActive(2)).toBe(false);
+    });
+
+    it('are not clickable when active', () => {
+      const clickOnStep = (index) => {
+        const buttonReference = component.find('.tw-stepper__step').at(index).find('button');
+        if (buttonReference.exists()) {
+          buttonReference.simulate('click');
+        }
+      };
+      const buttonDisabled = (index) =>
+        !component.find('.tw-stepper__step').at(index).find('button').exists();
+      const clickedOnFirstStep = jest.fn();
+      const clickedOnSecondStep = jest.fn();
+      component.setProps({
+        steps: [
+          { label: '0', onClick: clickedOnFirstStep },
+          { label: '1', onClick: clickedOnSecondStep },
+        ],
+        activeStep: 0,
+      });
+      clickOnStep(0);
+      expect(buttonDisabled(0)).toBe(true);
+      expect(clickedOnFirstStep).not.toHaveBeenCalled();
+      activeStep(1);
+      expect(buttonDisabled(0)).toBe(false);
+      clickOnStep(0);
+      expect(clickedOnFirstStep).toHaveBeenCalledTimes(1);
+      clickOnStep(1);
+      expect(clickedOnSecondStep).not.toHaveBeenCalled();
+    });
+
+    it('are active when they are the currently active step', () => {
+      const stepActive = (index) =>
+        component.find('.tw-stepper__step').at(index).hasClass('tw-stepper__step--active');
+      steps(4);
+      activeStep(1);
+      expect(stepActive(0)).toBe(false);
+      expect(stepActive(1)).toBe(true);
+      expect(stepActive(2)).toBe(false);
+      expect(stepActive(3)).toBe(false);
+      activeStep(2);
+      expect(stepActive(0)).toBe(false);
+      expect(stepActive(1)).toBe(false);
+      expect(stepActive(2)).toBe(true);
+      expect(stepActive(3)).toBe(false);
+    });
+
+    it('are marked as visited when active index is less than or equals to current index', () => {
+      const step = (index) => {
+        const buttonStates = ['tw-stepper__step--active', 'tw-stepper__step--clickable'];
+        const stepElement = component.find('.tw-stepper__step').at(index);
+        return {
+          active: stepElement.hasClass(buttonStates[0]),
+          clickable: stepElement.hasClass(buttonStates[1]),
+          clickableAndActive: buttonStates.every((c) => stepElement.hasClass(c)),
+          disabled: !stepElement.find('button').exists(),
+        };
+      };
+
+      component.setProps({
+        steps: [
+          { label: '0', onClick: () => {} },
+          { label: '1', onClick: () => {} },
+          { label: '2', onClick: () => {} },
+        ],
+        activeStep: 0,
+      });
+
+      expect(step(0).active).toBe(true);
+      expect(step(0).disabled).toBe(true);
+      expect(step(1).clickableAndActive).toBe(false);
+      expect(step(2).clickableAndActive).toBe(false);
+
+      activeStep(2);
+      activeStep(0);
+
+      expect(step(1).clickable).toBe(true);
+      expect(step(2).clickable).toBe(true);
+    });
+  });
+
+  describe('hover labels', () => {
+    const step = (index) => component.find('.tw-stepper__step').at(index);
+    it('will be rendered when provided', () => {
+      component.setProps({
+        steps: [{ hoverLabel: 'hover', label: 'label' }, { label: 'label 2' }],
+      });
+      const firstStepHoverLabel = step(0).children();
+      expect(firstStepHoverLabel.type()).toBe(Tooltip);
+      expect(firstStepHoverLabel.children().render().text()).toStrictEqual('label');
+      expect(step(1).find(Body).props().children).toStrictEqual('label 2');
+    });
+
+    it('renders jsx', () => {
+      component.setProps({
+        steps: [
+          {
+            hoverLabel: (
+              <>
+                hover <p>label</p>
+              </>
+            ),
+            label: '1',
+          },
+        ],
+      });
+
+      expect(step(0).children().prop('label')).toStrictEqual(
+        <>
+          hover <p>label</p>
+        </>,
+      );
+    });
+
+    it('will not be rendered if the user is on a touch device', () => {
+      jest.spyOn(fakeDeviceDetection, 'isTouchDevice').mockImplementation(() => true);
+      component.setProps({
+        steps: [{ hoverLabel: 'hover', label: 'label' }, { label: 'label 2' }],
+      });
+      const firstStepHoverLabel = step(0).children();
+      expect(firstStepHoverLabel.type()).toBe(Body);
+      expect(firstStepHoverLabel.props().children).toStrictEqual('label');
+      expect(step(1).children().props().children).toStrictEqual('label 2');
+    });
+  });
+});

package/src/stepper/Stepper.story.js

@@ -0,0 +1,40 @@
+import { action } from '@storybook/addon-actions';
+import { select } from '@storybook/addon-knobs';
+
+import Stepper from './Stepper';
+
+export default {
+  component: Stepper,
+  title: 'Navigation/Stepper',
+};
+
+export const Basic = () => {
+  const activeStep = select('activeStep', [0, 1, 2, 3, 4], 0);
+  return (
+    <Stepper
+      activeStep={activeStep}
+      steps={[
+        {
+          label: 'One',
+          onClick() {
+            action('You clicked on step 1, which triggered this function, which alerted you.');
+          },
+        },
+        {
+          label: 'Two',
+          hoverLabel: (
+            <>
+              <div>
+                <strong>Diana Jaramillo</strong>
+              </div>
+              dianajarm123@gmail.com
+            </>
+          ),
+        },
+        { label: 'Recipient' },
+        { label: 'Smellification' },
+        { label: 'Battle' },
+      ]}
+    />
+  );
+};

package/src/stepper/Stepper.tsx

@@ -0,0 +1,94 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+import Body from '../body/Body';
+import { Position } from '../common';
+import { useDirection } from '../common/hooks';
+import Tooltip from '../tooltip';
+
+import { isTouchDevice } from './deviceDetection';
+
+function clamp(from: number, to: number, value: number) {
+  return Math.max(Math.min(to, value), from);
+}
+
+export interface Step {
+  label: React.ReactNode;
+  onClick?: () => void;
+  hoverLabel?: React.ReactNode;
+}
+
+export interface StepperProps {
+  steps: Step[];
+  activeStep?: number;
+  className?: string;
+}
+
+/* eslint-disable react/no-array-index-key */
+const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
+  const { isRTL } = useDirection();
+
+  if (steps.length === 0) {
+    return null;
+  }
+
+  const activeStepIndex = clamp(0, steps.length - 1, activeStep);
+  const stepPercentage = 1 / (steps.length - 1);
+  const percentageCompleted = activeStepIndex / (steps.length - 1);
+
+  const renderStep = (step: Step, index: number) => {
+    const active = index === activeStepIndex;
+    const clickable = step.onClick && !active;
+
+    const labelButton = clickable ? (
+      <button
+        type="button"
+        className="btn-unstyled tw-stepper__step-label"
+        onClick={() => clickable && step.onClick?.()}
+      >
+        <small>{step.label}</small>
+      </button>
+    ) : (
+      <Body as="span" className="tw-stepper__step-label small">
+        {step.label}
+      </Body>
+    );
+    return (
+      <li
+        key={index}
+        className={classNames(
+          'hidden-xs',
+          'tw-stepper__step',
+          active && 'tw-stepper__step--active',
+          clickable && 'tw-stepper__step--clickable',
+          step.hoverLabel && 'tw-stepper__step--has-tooltip',
+        )}
+        style={
+          isRTL
+            ? { right: `${index * stepPercentage * 100}%` }
+            : { left: `${index * stepPercentage * 100}%` }
+        }
+      >
+        {step.hoverLabel && !isTouchDevice() ? (
+          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>
+            {labelButton}
+          </Tooltip>
+        ) : (
+          labelButton
+        )}
+      </li>
+    );
+  };
+
+  return (
+    <div className={classNames('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>
+    </div>
+  );
+};
+/* eslint-enable react/no-array-index-key */
+
+export default Stepper;

package/src/stepper/deviceDetection.js

@@ -0,0 +1,31 @@
+function supportsTouchEvents() {
+  const onTouchStartIsDefined = typeof window !== 'undefined' && window.ontouchstart !== undefined;
+  // eslint-disable-next-line compat/compat
+  const maxTouchPointsIsDefined = typeof navigator !== 'undefined' && navigator.maxTouchPoints;
+  const documentTouchIsDefined =
+    typeof window !== 'undefined' &&
+    window.DocumentTouch &&
+    document instanceof window.DocumentTouch;
+
+  return !!(onTouchStartIsDefined || maxTouchPointsIsDefined || documentTouchIsDefined);
+}
+
+function userAgentSuggestsTouchDevice() {
+  const sampleTouchDevices = [
+    'android',
+    'iemobile',
+    'iphone',
+    'ipad',
+    'ipod',
+    'blackberry',
+    'bada',
+  ];
+  const matchString = sampleTouchDevices.map((device) => `(${device})`).join('|');
+  const regex = new RegExp(matchString, 'ig');
+  return typeof navigator !== 'undefined' && !!navigator.userAgent.match(regex);
+}
+// Important: this is not fool-proof! It gives false positives and negatives, and will be outdated.
+// Only use this for small vanity changes where it still works either way.
+export function isTouchDevice() {
+  return supportsTouchEvents() || userAgentSuggestsTouchDevice();
+}