@transferwise/components 45.12.0 → 45.13.0

package/src/chips/__snapshots__/Chips.spec.tsx.snap

@@ -0,0 +1,149 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Chips Choice Chips renders as expected 1`] = `
+<div>
+  <div
+    aria-label="Please select a category"
+    class="np-chips d-flex"
+    role="radiogroup"
+  >
+    <div
+      aria-checked="false"
+      class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
+      role="radio"
+      tabindex="0"
+    >
+      <span
+        aria-hidden="false"
+        class="np-chip-label"
+      >
+        Accounting
+      </span>
+    </div>
+    <div
+      aria-checked="true"
+      class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap np-chip--selected"
+      role="radio"
+      tabindex="0"
+    >
+      <span
+        aria-hidden="false"
+        class="np-chip-label"
+      >
+        Payroll
+      </span>
+    </div>
+    <div
+      aria-checked="false"
+      class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
+      role="radio"
+      tabindex="0"
+    >
+      <span
+        aria-hidden="false"
+        class="np-chip-label"
+      >
+        Reporting
+      </span>
+    </div>
+    <div
+      aria-checked="false"
+      class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
+      role="radio"
+      tabindex="0"
+    >
+      <span
+        aria-hidden="false"
+        class="np-chip-label"
+      >
+        Payments
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Chips Filter Chips renders as expected 1`] = `
+<div>
+  <div
+    aria-label="Filter by categories"
+    class="np-chips d-flex"
+  >
+    <div
+      aria-checked="false"
+      class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
+      role="button"
+      tabindex="0"
+    >
+      <span
+        aria-hidden="false"
+        class="np-chip-label"
+      >
+        Accounting
+      </span>
+    </div>
+    <div
+      aria-checked="false"
+      class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
+      role="button"
+      tabindex="0"
+    >
+      <span
+        aria-hidden="false"
+        class="np-chip-label"
+      >
+        Payroll
+      </span>
+    </div>
+    <div
+      aria-checked="false"
+      class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
+      role="button"
+      tabindex="0"
+    >
+      <span
+        aria-hidden="false"
+        class="np-chip-label"
+      >
+        Reporting
+      </span>
+    </div>
+    <div
+      aria-label="Payments"
+      class="np-chip d-flex align-items-center justify-content-between np-chip--removable text-xs-nowrap np-chip--selected p-r-1"
+      tabindex="-1"
+    >
+      <span
+        aria-hidden="false"
+        class="np-chip-label"
+      >
+        Payments
+      </span>
+      <button
+        aria-label="Clear Payments"
+        class="np-close-button close btn-link text-no-decoration btn-unstyled m-l-1"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          class="tw-icon tw-icon-cross "
+          data-testid="cross-icon"
+          role="presentation"
+        >
+          <svg
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            viewBox="0 0 24 24"
+            width="16"
+          >
+            <path
+              d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;

package/src/chips/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Chips';
+export { default as Chip } from './Chip';

package/src/circularButton/CircularButton.css

@@ -0,0 +1 @@
+.np-circular-btn{align-items:center;cursor:pointer;display:inline-flex;flex-direction:column;position:relative;text-align:center}.np-circular-btn input[type=button]{border-radius:50%;height:40px;height:var(--size-40);margin-bottom:8px;margin-bottom:var(--size-8);min-height:40px;min-height:var(--size-40);padding:0;width:40px;width:var(--size-40)}.np-theme-personal .np-circular-btn input[type=button]{height:56px;height:var(--size-56);min-height:56px;min-height:var(--size-56);width:56px;width:var(--size-56)}.np-circular-btn .tw-icon{color:#fff;left:0;pointer-events:none;position:absolute;top:8px;transition:color .15s ease-in-out;width:100%}[dir=rtl] .np-circular-btn .tw-icon{left:auto;right:0}.np-theme-personal .np-circular-btn .tw-icon{top:16px;top:var(--size-16)}.np-circular-btn .tw-icon>svg{margin:0 auto}.np-theme-personal .np-circular-btn .tw-icon,.np-theme-personal .np-circular-btn .tw-icon:active,.np-theme-personal .np-circular-btn .tw-icon:hover{color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.negative .tw-icon,.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled,:disabled):active .tw-icon,.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled,:disabled):hover .tw-icon{color:var(--color-contrast)!important}.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled,:disabled) .tw-icon{color:var(--color-sentiment-negative)!important}.np-circular-btn__label{font-size:.875rem;font-size:var(--font-size-14);font-weight:600;font-weight:var(--font-weight-semi-bold);transition:color .15s ease-in-out}.np-circular-btn.accent .np-circular-btn__label{color:#00a2dd;color:var(--color-interactive-accent)}.np-circular-btn.accent:not(.disabled,:disabled):hover .np-circular-btn__label{color:#008fc9;color:var(--color-interactive-accent-hover)}.np-circular-btn.accent input[type=button]:active~.np-circular-btn__label,.np-circular-btn.accent:active .np-circular-btn__label{color:#0081ba;color:var(--color-interactive-accent-active)}.np-circular-btn.accent.secondary .tw-icon{color:#00a2dd;color:var(--color-interactive-accent)}.np-circular-btn.accent.secondary input[type=button]:active+.tw-icon,.np-circular-btn.accent.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff}.np-circular-btn.positive .np-circular-btn__label{color:#2ead4b;color:var(--color-interactive-positive)}.np-circular-btn.positive:not(.disabled,:disabled):hover .np-circular-btn__label{color:#069939;color:var(--color-interactive-positive-hover)}.np-circular-btn.positive input[type=button]:active~.np-circular-btn__label,.np-circular-btn.positive:active .np-circular-btn__label{color:#008b2b;color:var(--color-interactive-positive-active)}.np-circular-btn.positive.secondary .tw-icon{color:#2ead4b;color:var(--color-interactive-positive)}.np-circular-btn.positive.secondary input[type=button]:active+.tw-icon,.np-circular-btn.positive.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff}.np-circular-btn.negative .np-circular-btn__label{color:#e74848;color:var(--color-interactive-negative)}.np-circular-btn.negative:not(.disabled,:disabled):hover .np-circular-btn__label{color:#d03238;color:var(--color-interactive-negative-hover)}.np-circular-btn.negative input[type=button]:active~.np-circular-btn__label,.np-circular-btn.negative:active .np-circular-btn__label{color:#bf1e2c;color:var(--color-interactive-negative-active)}.np-circular-btn.negative.secondary .tw-icon{color:#e74848;color:var(--color-interactive-negative)}.np-circular-btn.negative.secondary input[type=button]:active+.tw-icon,.np-circular-btn.negative.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff}.np-theme-personal .np-circular-btn.accent .np-circular-btn__label{color:var(--color-interactive-primary)}.np-theme-personal .np-circular-btn.accent:not(.disabled,:disabled):hover .np-circular-btn__label{color:var(--color-interactive-primary-hover)}.np-theme-personal .np-circular-btn.accent input[type=button]:active~.np-circular-btn__label,.np-theme-personal .np-circular-btn.accent:active .np-circular-btn__label{color:var(--color-interactive-primary-active)}.np-theme-personal .np-circular-btn.accent.secondary .tw-icon{color:var(--color-interactive-primary)}.np-theme-personal .np-circular-btn.accent.secondary input[type=button]:active+.tw-icon,.np-theme-personal .np-circular-btn.accent.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff;color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.accent.secondary:active input[type=button]+.tw-icon{color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.positive .np-circular-btn__label{color:var(--color-interactive-primary)}.np-theme-personal .np-circular-btn.positive:not(.disabled,:disabled):hover .np-circular-btn__label{color:var(--color-interactive-primary-hover)}.np-theme-personal .np-circular-btn.positive input[type=button]:active~.np-circular-btn__label,.np-theme-personal .np-circular-btn.positive:active .np-circular-btn__label{color:var(--color-interactive-primary-active)}.np-theme-personal .np-circular-btn.positive.secondary .tw-icon{color:var(--color-interactive-primary)}.np-theme-personal .np-circular-btn.positive.secondary input[type=button]:active+.tw-icon,.np-theme-personal .np-circular-btn.positive.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff;color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.positive.secondary:active input[type=button]+.tw-icon{color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.negative .np-circular-btn__label{color:var(--color-sentiment-negative)}.np-theme-personal .np-circular-btn.negative:not(.disabled,:disabled):hover .np-circular-btn__label{color:var(--color-sentiment-negative-hover)}.np-theme-personal .np-circular-btn.negative input[type=button]:active~.np-circular-btn__label,.np-theme-personal .np-circular-btn.negative:active .np-circular-btn__label{color:var(--color-sentiment-negative-active)}.np-theme-personal .np-circular-btn.negative.secondary .tw-icon{color:var(--color-sentiment-negative)}.np-theme-personal .np-circular-btn.negative.secondary input[type=button]:active+.tw-icon,.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff;color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.negative.secondary:active input[type=button]+.tw-icon{color:var(--color-interactive-control)}

package/src/circularButton/CircularButton.js

@@ -0,0 +1,57 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { cloneElement } from 'react';
+
+import Body from '../body/Body';
+import { typeClassMap, priorityClassMap } from '../button/classMap';
+import { ControlType, Priority } from '../common';
+import { Typography } from '../common';
+
+const CircularButton = ({ className, children, disabled, icon, priority, type, ...rest }) => {
+  const classes = classNames('btn np-btn', typeClassMap[type], priorityClassMap[priority]);
+
+  const iconElement = icon.props.size !== 24 ? cloneElement(icon, { size: 24 }) : icon;
+
+  return (
+    <label
+      className={classNames(
+        'np-circular-btn',
+        priority,
+        type,
+        disabled ? 'disabled' : '',
+        className,
+      )}
+    >
+      <input
+        type="button"
+        aria-label={children}
+        className={classes}
+        disabled={disabled}
+        {...rest}
+      />
+      {iconElement}
+      <Body as="span" className="np-circular-btn__label" type={Typography.BODY_DEFAULT_BOLD}>
+        {children}
+      </Body>
+    </label>
+  );
+};
+
+CircularButton.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  icon: PropTypes.element.isRequired,
+  onClick: PropTypes.func,
+  priority: PropTypes.oneOf(['primary', 'secondary']),
+  type: PropTypes.oneOf(['accent', 'positive', 'negative']),
+};
+
+CircularButton.defaultProps = {
+  className: undefined,
+  disabled: false,
+  priority: Priority.PRIMARY,
+  type: ControlType.ACCENT,
+};
+
+export default CircularButton;

package/src/circularButton/CircularButton.less

@@ -0,0 +1,126 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import "./_button-label-states.less";
+
+.np-circular-btn {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  cursor: pointer;
+  position: relative;
+
+  input[type="button"] {
+    min-height: var(--size-40);
+    width: var(--size-40);
+    height: var(--size-40);
+    padding: 0;
+    border-radius: 50%;
+    margin-bottom: var(--size-8);
+
+    .np-theme-personal & {
+      min-height: var(--size-56);
+      width: var(--size-56);
+      height: var(--size-56);
+    }
+  }
+
+  .tw-icon {
+    position: absolute;
+    top: 8px;
+    pointer-events: none;
+    color: white;
+    transition: color 0.15s ease-in-out;
+    width: 100%;
+    .left(0);
+
+    .np-theme-personal & {
+      top: var(--size-16);
+    }
+
+    > svg {
+      margin: 0 auto;
+    }
+  }
+
+  .np-theme-personal & {
+    /* stylelint-disable-next-line no-duplicate-selectors */
+    .tw-icon {
+      &,
+      &:hover,
+      &:active {
+        color: var(--color-interactive-control);
+      }
+    }
+
+    &.negative .tw-icon,
+    &.negative.secondary:not(.disabled, :disabled):hover .tw-icon,
+    &.negative.secondary:not(.disabled, :disabled):active .tw-icon {
+      // TODO, this will need to be removed when we update our CSS architecture
+      color: var(--color-contrast) !important;
+    }
+
+    &.negative.secondary:not(.disabled, :disabled) .tw-icon {
+      // TODO, this will need to be removed when we update our CSS architecture
+      color: var(--color-sentiment-negative) !important;
+    }
+  }
+}
+
+.np-circular-btn__label {
+  transition: color 0.15s ease-in-out;
+  font-size: var(--font-size-14);
+  font-weight: var(--font-weight-semi-bold);
+}
+
+.button-label-states(
+  np-circular-btn,
+  accent,
+  var(--color-interactive-accent),
+  var(--color-interactive-accent-hover),
+  var(--color-interactive-accent-active)
+);
+
+.button-label-states(
+  np-circular-btn,
+  positive,
+  var(--color-interactive-positive),
+  var(--color-interactive-positive-hover),
+  var(--color-interactive-positive-active)
+);
+
+.button-label-states(
+  np-circular-btn,
+  negative,
+  var(--color-interactive-negative),
+  var(--color-interactive-negative-hover),
+  var(--color-interactive-negative-active)
+);
+
+.np-theme-personal {
+  .button-label-states(
+    np-circular-btn,
+    accent,
+    var(--color-interactive-primary),
+    var(--color-interactive-primary-hover),
+    var(--color-interactive-primary-active),
+    true
+  );
+
+  .button-label-states(
+    np-circular-btn,
+    positive,
+    var(--color-interactive-primary),
+    var(--color-interactive-primary-hover),
+    var(--color-interactive-primary-active),
+    true
+  );
+
+  .button-label-states(
+    np-circular-btn,
+    negative,
+    var(--color-sentiment-negative),
+    var(--color-sentiment-negative-hover),
+    var(--color-sentiment-negative-active),
+    true
+  );
+}

package/src/circularButton/CircularButton.spec.js

@@ -0,0 +1,103 @@
+import '@testing-library/jest-dom';
+import { Plus } from '@transferwise/icons';
+
+import { ControlType, Priority } from '../common';
+import { render, screen, userEvent } from '../test-utils';
+
+import CircularButton from './CircularButton';
+
+const { ACCENT, POSITIVE, NEGATIVE } = ControlType;
+const { PRIMARY, SECONDARY } = Priority;
+
+describe('CircularButton', () => {
+  const props = {
+    children: 'Add money',
+    icon: <Plus />,
+    onClick: jest.fn(),
+  };
+
+  describe('defaults', () => {
+    beforeEach(() => {
+      render(<CircularButton {...props} />);
+    });
+
+    it('renders the text', () => {
+      expect(screen.getByText('Add money')).toBeInTheDocument();
+    });
+
+    it('renders the provided icon', () => {
+      const icon = document.querySelector('.tw-icon');
+      expect(icon).toBeInTheDocument();
+    });
+
+    it('is not disabled', () => {
+      expect(screen.getByRole('button')).toBeEnabled();
+    });
+
+    it('renders a button of type accent and priority primary', () => {
+      expect(render(<CircularButton {...props} />).container).toMatchSnapshot();
+    });
+  });
+
+  describe('button attributes', () => {
+    it('disables the button if disabled', () => {
+      render(<CircularButton {...props} disabled />);
+      expect(screen.getByRole('button')).toBeDisabled();
+    });
+
+    it('passes through custom classes if set', () => {
+      render(<CircularButton {...props} className="have-a-nice-day-:)" />);
+      const label = document.querySelector('label');
+
+      expect(label).toHaveClass('have-a-nice-day-:)');
+    });
+  });
+
+  describe('onClick', () => {
+    it('calls onClick when clicked', () => {
+      const onClick = jest.fn();
+      render(<CircularButton {...props} onClick={onClick} />);
+      userEvent.click(screen.getByRole('button'));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onClick when clicked if disabled', () => {
+      const onClick = jest.fn();
+      render(<CircularButton {...props} disabled onClick={onClick} />);
+      userEvent.click(screen.getByRole('button'));
+      expect(onClick).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  describe('types', () => {
+    it('renders accent buttons', () => {
+      expect(render(<CircularButton {...props} type={ACCENT} />).container).toMatchSnapshot();
+    });
+
+    it('renders positive buttons', () => {
+      expect(render(<CircularButton {...props} type={POSITIVE} />).container).toMatchSnapshot();
+    });
+
+    it('renders negative buttons', () => {
+      expect(render(<CircularButton {...props} type={NEGATIVE} />).container).toMatchSnapshot();
+    });
+  });
+
+  describe('priorities', () => {
+    it('renders primary buttons', () => {
+      [ACCENT, POSITIVE, NEGATIVE].forEach((type) =>
+        expect(
+          render(<CircularButton {...props} priority={PRIMARY} type={type} />).container,
+        ).toMatchSnapshot(),
+      );
+    });
+
+    it('renders secondary buttons', () => {
+      [ACCENT, POSITIVE, NEGATIVE].forEach((type) =>
+        expect(
+          render(<CircularButton {...props} priority={SECONDARY} type={type} />).container,
+        ).toMatchSnapshot(),
+      );
+    });
+  });
+});

package/src/circularButton/CircularButton.story.js

@@ -0,0 +1,97 @@
+import { action } from '@storybook/addon-actions';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import { Freeze, Plus, Whatsapp } from '@transferwise/icons';
+
+import { Priority, ControlType } from '../common';
+
+import CircularButton from './CircularButton';
+
+export default {
+  component: CircularButton,
+  title: 'Actions/CircularButton',
+};
+
+const icons = {
+  plus: <Plus />,
+  freeze: <Freeze />,
+  whatsapp: <Whatsapp />,
+};
+
+export const Basic = () => {
+  const icon = select('icon', ['freeze', 'plus', 'whatsapp'], 'freeze');
+  const priority = select('priority', Object.values(Priority));
+  const type = select('type', Object.values(ControlType), ControlType.PRIMARY);
+  const disabled = boolean('disabled', false);
+  const label = text('label', 'Button text');
+  const background = select('theme', ['light', 'blue'], 'light');
+  return (
+    <div className={background === 'blue' ? 'bg--dark p-a-3' : ''}>
+      <CircularButton
+        icon={icons[icon]}
+        priority={priority}
+        type={type}
+        disabled={disabled}
+        onClick={action('Button Clicked')}
+      >
+        {label}
+      </CircularButton>
+    </div>
+  );
+};
+
+export const deprecated = () => {
+  const icon = select('icon', ['freeze', 'plus', 'whatsapp'], 'freeze');
+  const disabled = boolean('disabled', false);
+  const label = text('label', 'Button text');
+  const background = select('theme', ['light', 'blue'], 'light');
+
+  const commonProps = {
+    label,
+    className: 'm-r-2',
+    disabled,
+    icon: icons[icon],
+    onClick: action('Button Clicked'),
+  };
+
+  return (
+    <div className={background === 'blue' ? 'bg--dark p-a-3' : ''}>
+      <div className="m-b-2">
+        <div className="title-4 m-b-1">Accent</div>
+        <CircularButton priority={Priority.PRIMARY} type={ControlType.ACCENT} {...commonProps}>
+          {label}
+        </CircularButton>
+        <CircularButton priority={Priority.SECONDARY} type={ControlType.ACCENT} {...commonProps}>
+          {label}
+        </CircularButton>
+      </div>
+      <div className="m-b-2">
+        <div className="title-4 m-b-1">Positive</div>
+        <CircularButton priority={Priority.PRIMARY} type={ControlType.POSITIVE} {...commonProps}>
+          {label}
+        </CircularButton>
+
+        <CircularButton priority={Priority.SECONDARY} type={ControlType.POSITIVE} {...commonProps}>
+          {label}
+        </CircularButton>
+      </div>
+      <div className="m-b-2">
+        <div className="title-4 m-b-1">Negative</div>
+        <CircularButton priority={Priority.PRIMARY} type={ControlType.NEGATIVE} {...commonProps}>
+          {label}
+        </CircularButton>
+        <CircularButton priority={Priority.SECONDARY} type={ControlType.NEGATIVE} {...commonProps}>
+          {label}
+        </CircularButton>
+      </div>
+      <div className="m-b-2">
+        <div className="title-4 m-b-1">Disabled</div>
+        <CircularButton {...commonProps} disabled>
+          {label}
+        </CircularButton>
+        <CircularButton {...commonProps} priority={Priority.SECONDARY} disabled>
+          {label}
+        </CircularButton>
+      </div>
+    </div>
+  );
+};