@transferwise/components 0.0.0-experimental-58ab0d7 → 0.0.0-experimental-4530892

package/src/circularButton/CircularButton.css

@@ -2,173 +2,32 @@
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  text-align: center;
   cursor: pointer;
-  position: relative;
 }
-.np-circular-btn .tw-icon {
-  position: absolute;
-  top: 16px;
-  top: var(--size-16);
-  pointer-events: none;
-  color: white;
-  transition: color 0.15s ease-in-out;
-  width: 100%;
-  left: 0;
-}
-[dir="rtl"] .np-circular-btn .tw-icon {
-  right: 0;
-  left: auto;
-  left: initial;
-}
-@media (max-width: 320px) {
-  .np-circular-btn .tw-icon {
-    top: 12px;
-    top: var(--size-12);
-  }
-}
-.np-circular-btn .tw-icon > svg {
-  margin: 0 auto;
-}
-.np-theme-personal .np-circular-btn {
-  /* stylelint-disable-next-line no-duplicate-selectors */
-}
-.np-theme-personal .np-circular-btn .tw-icon,
-.np-theme-personal .np-circular-btn .tw-icon:hover,
-.np-theme-personal .np-circular-btn .tw-icon:active {
-  color: var(--color-interactive-control);
-}
-.np-theme-personal .np-circular-btn.negative .tw-icon,
-.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):active .tw-icon {
-  color: var(--color-contrast) !important;
-}
-.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled) .tw-icon {
-  color: var(--color-sentiment-negative) !important;
-}
-.np-circular-btn.accent .np-circular-btn__label {
-  color: #00a2dd;
-  color: var(--color-interactive-accent);
-}
-.np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: #008fc9;
-  color: var(--color-interactive-accent-hover);
-}
-.np-circular-btn.accent:active .np-circular-btn__label,
-.np-circular-btn.accent input[type="button"]: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:not(.disabled):not(:disabled):hover .tw-icon,
-.np-circular-btn.accent.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-}
-.np-circular-btn.positive .np-circular-btn__label {
-  color: #2ead4b;
-  color: var(--color-interactive-positive);
-}
-.np-circular-btn.positive:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: #069939;
-  color: var(--color-interactive-positive-hover);
-}
-.np-circular-btn.positive:active .np-circular-btn__label,
-.np-circular-btn.positive input[type="button"]: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:not(.disabled):not(:disabled):hover .tw-icon,
-.np-circular-btn.positive.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-}
-.np-circular-btn.negative .np-circular-btn__label {
-  color: #e74848;
-  color: var(--color-interactive-negative);
-}
-.np-circular-btn.negative:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: #d03238;
-  color: var(--color-interactive-negative-hover);
-}
-.np-circular-btn.negative:active .np-circular-btn__label,
-.np-circular-btn.negative input[type="button"]: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:not(.disabled):not(:disabled):hover .tw-icon,
-.np-circular-btn.negative.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-}
-.np-theme-personal .np-circular-btn.accent .np-circular-btn__label {
+.np-circular-btn-primary-default .np-circular-btn-label,
+.np-circular-btn-secondary-default .np-circular-btn-label {
   color: var(--color-interactive-primary);
 }
-.np-theme-personal .np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+.np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,
+.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover {
   color: var(--color-interactive-primary-hover);
 }
-.np-theme-personal .np-circular-btn.accent:active .np-circular-btn__label,
-.np-theme-personal .np-circular-btn.accent input[type="button"]:active ~ .np-circular-btn__label {
+.np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):active,
+.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):active {
   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:not(.disabled):not(:disabled):hover .tw-icon,
-.np-theme-personal .np-circular-btn.accent.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-  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):not(:disabled):hover .np-circular-btn__label {
-  color: var(--color-interactive-primary-hover);
-}
-.np-theme-personal .np-circular-btn.positive:active .np-circular-btn__label,
-.np-theme-personal .np-circular-btn.positive input[type="button"]: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:not(.disabled):not(:disabled):hover .tw-icon,
-.np-theme-personal .np-circular-btn.positive.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-  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):not(:disabled):hover .np-circular-btn__label {
-  color: var(--color-sentiment-negative-hover);
-}
-.np-theme-personal .np-circular-btn.negative:active .np-circular-btn__label,
-.np-theme-personal .np-circular-btn.negative input[type="button"]:active ~ .np-circular-btn__label {
-  color: var(--color-sentiment-negative-active);
+.np-circular-btn-primary-negative .np-circular-btn-label,
+.np-circular-btn-secondary-negative .np-circular-btn-label {
+  color: var(--color-sentiment-negative-primary);
 }
-.np-theme-personal .np-circular-btn.negative.secondary .tw-icon {
-  color: var(--color-sentiment-negative);
+.np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover,
+.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover {
+  color: var(--color-sentiment-negative-primary-hover);
 }
-.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-theme-personal .np-circular-btn.negative.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-  color: var(--color-interactive-control);
+.np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active,
+.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active {
+  color: var(--color-sentiment-negative-primary-active);
 }
-.np-theme-personal .np-circular-btn.negative.secondary:active input[type="button"] + .tw-icon {
-  color: var(--color-interactive-control);
+.np-circular-btn-disabled {
+  cursor: not-allowed;
 }

package/src/circularButton/CircularButton.less

@@ -1,105 +1,36 @@
-@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;
-
-  .tw-icon {
-    position: absolute;
-    top: var(--size-16);
-    pointer-events: none;
-    color: white;
-    transition: color 0.15s ease-in-out;
-    width: 100%;
-    .left(0);
 
-    @media (--screen-400-zoom) {
-      top: var(--size-12);
-    }
-
-    > svg {
-      margin: 0 auto;
+  &-primary-default,
+  &-secondary-default {
+    .np-circular-btn-label {
+      color: var(--color-interactive-primary);
+      &:not(.disabled, :disabled):hover {
+        color: var(--color-interactive-primary-hover);
+      }
+      &:not(.disabled, :disabled):active {
+        color: var(--color-interactive-primary-active);
+      }
     }
   }
 
-  .np-theme-personal & {
-    /* stylelint-disable-next-line no-duplicate-selectors */
-    .tw-icon {
-      &,
-      &:hover,
-      &:active {
-        color: var(--color-interactive-control);
+  &-primary-negative,
+  &-secondary-negative {
+    .np-circular-btn-label {
+      color: var(--color-sentiment-negative-primary);
+      &:not(.disabled, :disabled):hover {
+        color: var(--color-sentiment-negative-primary-hover);
+      }
+      &:not(.disabled, :disabled):active {
+        color: var(--color-sentiment-negative-primary-active);
       }
-    }
-
-    &.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;
     }
   }
-}
-
-.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
-  );
+  &-disabled {
+    cursor: not-allowed;
+  }
 }

package/src/circularButton/CircularButton.story.tsx

@@ -5,14 +5,16 @@ import { ControlType, Priority } from '../common';
 import { Meta, StoryObj } from '@storybook/react';
 import CircularButton from './CircularButton';
 import { storyConfig } from '../test-utils';
+import Title from '../title';
+import Body from '../body';
 
 export default {
   component: CircularButton,
   title: 'Actions/CircularButton',
+  tags: ['autodocs'],
   args: {
     children: 'Button text',
-    // Needs to be cast because we're mapping icon names to components
-    icon: 'Freeze' as unknown as React.ReactElement,
+    icon: <Icons.Freeze />,
   },
   argTypes: {
     icon: {
@@ -28,8 +30,8 @@ type Story = StoryObj<typeof CircularButton>;
 
 export const Basic: Story = {
   args: {
-    priority: Priority.PRIMARY,
-    type: ControlType.ACCENT,
+    priority: 'primary',
+    type: 'default',
     disabled: false,
   },
 };
@@ -41,26 +43,45 @@ export const All: Story = {
   render: (props) => {
     return (
       <>
-        <div className="m-b-2">
-          <div className="title-4 m-b-1">Accent</div>
-          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.ACCENT} />
-          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.ACCENT} />
-        </div>
-        <div className="m-b-2">
-          <div className="title-4 m-b-1">Positive</div>
-          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.POSITIVE} />
-          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.POSITIVE} />
-        </div>
-        <div className="m-b-2">
-          <div className="title-4 m-b-1">Negative</div>
-          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
-          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
-        </div>
-        <div className="m-b-2">
-          <div className="title-4 m-b-1">Disabled</div>
-          <CircularButton {...props} disabled />
-          <CircularButton {...props} priority={Priority.SECONDARY} disabled />
-        </div>
+        <Title type="title-subsection" className="m-y-2">
+          Default (Primary and secondary)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="default" />
+          <CircularButton {...props} priority="secondary" type="default" />
+          <CircularButton {...props} priority="primary" type="default" disabled />
+          <CircularButton {...props} priority="secondary" type="default" disabled />
+        </Body>
+
+        <Title type="title-subsection" className="m-y-2">
+          Negative (Primary and secondary)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="negative" />
+          <CircularButton {...props} priority="secondary" type="negative" />
+          <CircularButton {...props} priority="primary" type="negative" disabled />
+          <CircularButton {...props} priority="secondary" type="negative" disabled />
+        </Body>
+
+        <Title type="title-body" className="m-y-2">
+          Accent (Deprecated)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="accent" />
+          <CircularButton {...props} priority="secondary" type="accent" />
+          <CircularButton {...props} priority="primary" type="accent" disabled />
+          <CircularButton {...props} priority="secondary" type="accent" disabled />
+        </Body>
+
+        <Title type="title-body" className="m-y-2">
+          Positive (Deprecated)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="positive" />
+          <CircularButton {...props} priority="secondary" type="positive" />
+          <CircularButton {...props} priority="primary" type="positive" disabled />
+          <CircularButton {...props} priority="secondary" type="positive" disabled />
+        </Body>
       </>
     );
   },

package/src/circularButton/CircularButton.tsx

@@ -1,20 +1,28 @@
 import { clsx } from 'clsx';
-import { cloneElement } from 'react';
 
 import Body from '../body/Body';
-import { typeClassMap, priorityClassMap } from '../button/classMap';
 import { Breakpoint, ControlType, Priority, Typography } from '../common';
-import Circle from '../common/circle';
+import IconButton, { IconButtonProps } from '../iconButton';
 import { useMedia } from '../common/hooks/useMedia';
 
+/**
+ * @deprecated use `'default'` instead
+ */
+type DeprecatedTypes = `${ControlType.ACCENT | ControlType.POSITIVE}`;
+
 export interface CircularButtonProps {
   className?: string;
   children: string;
   disabled?: boolean;
-  icon: React.ReactElement<{ size?: unknown }>;
-  onClick?: React.MouseEventHandler<HTMLInputElement>;
+  icon: React.ReactElement<{ size?: unknown }> | React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLInputElement> &
+    React.MouseEventHandler<HTMLButtonElement> &
+    React.MouseEventHandler<HTMLAnchorElement>;
   priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;
-  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;
+  /**
+   * `"accent"` and `"positive"` values are **deprecated**, please use `"default"` instead
+   */
+  type?: DeprecatedTypes | 'default' | `${ControlType.NEGATIVE}`;
 }
 
 const CircularButton = ({
@@ -22,30 +30,35 @@ const CircularButton = ({
   children,
   disabled,
   icon,
+  onClick,
   priority = Priority.PRIMARY,
-  type = ControlType.ACCENT,
-  ...rest
+  type = 'default',
 }: CircularButtonProps) => {
-  const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);
-
-  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;
-
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
-
   return (
-    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>
-      <Circle
-        as="input"
-        // @ts-expect-error it's input[type=button] element
-        type="button"
-        size={isTinyViewport ? 72 : 56}
-        aria-label={children}
-        className={classes}
+    <label
+      className={clsx(
+        'np-circular-btn',
+        `np-circular-btn-${priority}-${type}`,
+        { 'np-circular-btn-disabled': disabled },
+        className,
+      )}
+    >
+      <IconButton
+        size={isTinyViewport ? 32 : 56}
+        priority={priority}
+        type={['accent', 'positive'].includes(type) ? 'default' : (type as IconButtonProps['type'])}
+        className={clsx('m-b-1')}
         disabled={disabled}
-        {...rest}
-      />
-      {iconElement}
-      <Body as="span" className="np-circular-btn__label" type={Typography.BODY_DEFAULT_BOLD}>
+        onClick={onClick}
+      >
+        {icon}
+      </IconButton>
+      <Body
+        as="span"
+        className={clsx('np-circular-btn-label', { disabled })}
+        type={Typography.BODY_DEFAULT_BOLD}
+      >
         {children}
       </Body>
     </label>

package/src/dateInput/DateInput.spec.tsx

@@ -1,19 +1,17 @@
-import { screen, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import { DateInput, DateInputProps, Field } from '..';
-import { mockMatchMedia, mockResizeObserver, render } from '../test-utils';
+import { mockMatchMedia, mockResizeObserver, render, userEvent, screen } from '../test-utils';
 
-describe('Date Input Component', () => {
-  const props: DateInputProps = { onChange: jest.fn() };
+mockMatchMedia();
+mockResizeObserver();
 
-  beforeEach(() => {
-    mockMatchMedia();
-    mockResizeObserver();
-  });
+describe('Date Input Component', () => {
+  const props: DateInputProps = {
+    onChange: jest.fn(),
+    onFocus: jest.fn(),
+    onBlur: jest.fn(),
+  };
 
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
+  afterEach(jest.clearAllMocks);
 
   describe('when initialised without a model', () => {
     it('sets day field to empty', () => {
@@ -104,7 +102,7 @@ describe('Date Input Component', () => {
       await userEvent.click(monthSelect);
       await userEvent.click(screen.getByRole('option', { name: /January/ }));
       expect(props.onChange).toHaveBeenCalledWith(null);
-    });
+    }, 10_000);
 
     it('calls the onChange callback with null when changing the year but nothing else is filled out', async () => {
       render(<DateInput {...props} />);
@@ -126,7 +124,7 @@ describe('Date Input Component', () => {
       await userEvent.click(monthSelect);
       await userEvent.click(screen.getByRole('option', { name: /January/ }));
       expect(props.onChange).toHaveBeenCalledWith('2022-01-01');
-    });
+    }, 10_000);
 
     it('calls the onChange callback with the correct value when changing the year', async () => {
       render(<DateInput {...props} value="0122-12-1" />);
@@ -178,19 +176,40 @@ describe('Date Input Component', () => {
     });
   });
 
-  describe('when switching from day input to year input', () => {
-    it('does not call onBlur nor onFocus', () => {
-      const onFocus = jest.fn();
-      const onBlur = jest.fn();
+  describe('propagating focus and blur callbacks', () => {
+    it('should propagate if focusing from or blurring to external component', async () => {
+      render(
+        <>
+          <button type="button">starting point</button>
+          <DateInput {...props} />
+        </>,
+      );
+      await userEvent.tab();
+      await userEvent.tab();
+      await userEvent.tab({ shift: true });
+      expect(props.onFocus).toHaveBeenCalledTimes(1);
+      expect(props.onBlur).toHaveBeenCalledTimes(1);
+    });
 
-      render(<DateInput {...props} />);
-      const dayInput = screen.getByRole('textbox', { name: /day/i });
-      const yearInput = screen.getByRole('textbox', { name: /year/i });
-      fireEvent.focus(dayInput);
-      fireEvent.blur(dayInput);
-      fireEvent.focus(yearInput);
-      expect(onFocus).not.toHaveBeenCalled();
-      expect(onBlur).not.toHaveBeenCalled();
+    it('should not propagate if switching between internals', async () => {
+      render(
+        <>
+          <button type="button">external button</button>
+          <DateInput {...props} />
+        </>,
+      );
+      const externalButton = screen.getByRole('button', { name: 'external button' });
+
+      await userEvent.click(externalButton);
+      await userEvent.click(screen.getByRole('textbox', { name: /day/i }));
+      await userEvent.click(screen.getByRole('textbox', { name: /year/i }));
+      await userEvent.click(externalButton);
+
+      // 1 call is caused by the initial switch to the component,
+      // as reflected in `should propagate if focusing from or
+      // blurring to external component` test
+      expect(props.onFocus).toHaveBeenCalledTimes(1);
+      expect(props.onBlur).toHaveBeenCalledTimes(1);
     });
   });