@transferwise/components 0.0.0-experimental-a656242 → 0.0.0-experimental-887f2e6

package/src/circularButton/CircularButton.less

@@ -1,36 +1,105 @@
+@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;
 
-  &-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);
-      }
+  .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-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);
+  .np-theme-personal & {
+    /* stylelint-disable-next-line no-duplicate-selectors */
+    .tw-icon {
+      &,
+      &:hover,
+      &:active {
+        color: var(--color-interactive-control);
       }
     }
-  }
 
-  &-disabled {
-    cursor: not-allowed;
+    &.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
+  );
+}

package/src/circularButton/CircularButton.story.tsx

@@ -5,16 +5,14 @@ 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',
-    icon: <Icons.Freeze />,
+    // Needs to be cast because we're mapping icon names to components
+    icon: 'Freeze' as unknown as React.ReactElement,
   },
   argTypes: {
     icon: {
@@ -30,8 +28,8 @@ type Story = StoryObj<typeof CircularButton>;
 
 export const Basic: Story = {
   args: {
-    priority: 'primary',
-    type: 'default',
+    priority: Priority.PRIMARY,
+    type: ControlType.ACCENT,
     disabled: false,
   },
 };
@@ -43,45 +41,26 @@ export const All: Story = {
   render: (props) => {
     return (
       <>
-        <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>
+        <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>
       </>
     );
   },

package/src/circularButton/CircularButton.tsx

@@ -1,28 +1,20 @@
 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 IconButton, { IconButtonProps } from '../iconButton';
+import Circle from '../common/circle';
 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 }> | React.ReactNode;
-  onClick?: React.MouseEventHandler<HTMLInputElement> &
-    React.MouseEventHandler<HTMLButtonElement> &
-    React.MouseEventHandler<HTMLAnchorElement>;
+  icon: React.ReactElement<{ size?: unknown }>;
+  onClick?: React.MouseEventHandler<HTMLInputElement>;
   priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;
-  /**
-   * `"accent"` and `"positive"` values are **deprecated**, please use `"default"` instead
-   */
-  type?: DeprecatedTypes | 'default' | `${ControlType.NEGATIVE}`;
+  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;
 }
 
 const CircularButton = ({
@@ -30,35 +22,30 @@ const CircularButton = ({
   children,
   disabled,
   icon,
-  onClick,
   priority = Priority.PRIMARY,
-  type = 'default',
+  type = ControlType.ACCENT,
+  ...rest
 }: 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',
-        `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')}
+    <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}
         disabled={disabled}
-        onClick={onClick}
-      >
-        {icon}
-      </IconButton>
-      <Body
-        as="span"
-        className={clsx('np-circular-btn-label', { disabled })}
-        type={Typography.BODY_DEFAULT_BOLD}
-      >
+        {...rest}
+      />
+      {iconElement}
+      <Body as="span" className="np-circular-btn__label" type={Typography.BODY_DEFAULT_BOLD}>
         {children}
       </Body>
     </label>

package/src/circularButton/_button-label-states.less

@@ -0,0 +1,34 @@
+.button-label-states(@prefix, @type, @normal, @hover, @active, @isModernTheme: false) {
+  .@{prefix}.@{type} {
+    .@{prefix}__label {
+      color: @normal;
+    }
+
+    &:not(.disabled, :disabled):hover .@{prefix}__label {
+      color: @hover;
+    }
+
+    &:active .@{prefix}__label,
+    input[type="button"]:active ~ .@{prefix}__label {
+      color: @active;
+    }
+
+    &.secondary {
+      .tw-icon {
+        color: @normal;
+      }
+
+      &:not(.disabled, :disabled):hover .tw-icon,
+      input[type="button"]:active + .tw-icon {
+        color: white;
+        & when (@isModernTheme = true) {
+          color: var(--color-interactive-control);
+        }
+      }
+
+      &:active input[type="button"] + .tw-icon when (@isModernTheme = true) {
+        color: var(--color-interactive-control);
+      }
+    }
+  }
+}

package/src/definitionList/DefinitionList.spec.js

@@ -0,0 +1,91 @@
+import { shallow, mount } from 'enzyme';
+
+import { DefinitionList } from '..';
+import { Layout } from '../common';
+
+const {
+  VERTICAL_TWO_COLUMN,
+  VERTICAL_ONE_COLUMN,
+  HORIZONTAL_LEFT_ALIGNED,
+  HORIZONTAL_RIGHT_ALIGNED,
+  HORIZONTAL_JUSTIFIED,
+} = Layout;
+
+describe('DefinitionList', () => {
+  const someDefinitions = () => [{ title: 'First', value: 'first value', key: 'first' }, null];
+
+  const withLayout = (layout) =>
+    shallow(<DefinitionList layout={layout} definitions={someDefinitions()} />);
+
+  const listHasClass = (layout, className) =>
+    withLayout(layout).find('dl.tw-definition-list').hasClass(className);
+
+  const valueHasClass = (layout, className) =>
+    withLayout(layout).find('dl.tw-definition-list dd').hasClass(className);
+
+  it('applies correct flex class', () => {
+    const colClass = 'flex-column';
+
+    expect(listHasClass(VERTICAL_ONE_COLUMN, colClass)).toBe(true);
+    expect(listHasClass(VERTICAL_TWO_COLUMN, colClass)).toBe(true);
+    expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, colClass)).toBe(true);
+    expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, colClass)).toBe(true);
+    expect(listHasClass(HORIZONTAL_JUSTIFIED, colClass)).toBe(true);
+  });
+
+  it('applies correct class for vertical two-column layout', () => {
+    const colClass = 'tw-definition-list--columns flex-column flex-row--sm';
+
+    expect(listHasClass(VERTICAL_TWO_COLUMN, colClass)).toBe(true);
+    expect(listHasClass(VERTICAL_ONE_COLUMN, colClass)).toBe(false);
+    expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, colClass)).toBe(false);
+    expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, colClass)).toBe(false);
+    expect(listHasClass(HORIZONTAL_JUSTIFIED, colClass)).toBe(false);
+  });
+
+  it('applies correct class for horiztonal layouts', () => {
+    const rowClass = 'tw-definition-list--horizontal flex-column';
+
+    expect(listHasClass(VERTICAL_TWO_COLUMN, rowClass)).toBe(false);
+    expect(listHasClass(VERTICAL_ONE_COLUMN, rowClass)).toBe(false);
+    expect(listHasClass(HORIZONTAL_LEFT_ALIGNED, rowClass)).toBe(true);
+    expect(listHasClass(HORIZONTAL_RIGHT_ALIGNED, rowClass)).toBe(true);
+    expect(listHasClass(HORIZONTAL_JUSTIFIED, rowClass)).toBe(true);
+  });
+
+  it('applies correct class for alignment', () => {
+    expect(valueHasClass(VERTICAL_TWO_COLUMN, 'd-flex justify-content-between')).toBe(true);
+    expect(valueHasClass(VERTICAL_ONE_COLUMN, 'd-flex justify-content-between')).toBe(true);
+    expect(valueHasClass(HORIZONTAL_LEFT_ALIGNED, 'd-flex justify-content-between')).toBe(true);
+    expect(valueHasClass(HORIZONTAL_RIGHT_ALIGNED, 'text-sm-right')).toBe(true);
+    expect(valueHasClass(HORIZONTAL_JUSTIFIED, 'text-sm-justify')).toBe(true);
+  });
+
+  it('has muted text class on title and value when muted flag is passed', () => {
+    const muted = shallow(<DefinitionList muted definitions={someDefinitions()} />);
+    const notMuted = shallow(<DefinitionList definitions={someDefinitions()} />);
+
+    expect(muted.find('dl.tw-definition-list').hasClass('text-muted')).toBe(true);
+    expect(notMuted.find('dl.tw-definition-list').hasClass('text-muted')).toBe(false);
+  });
+
+  it('shows action button when one is passed in', () => {
+    const buttonSpy = jest.fn();
+
+    const definitionList = mount(
+      <DefinitionList
+        definitions={[
+          {
+            title: 'Name',
+            value: 'Jenkins',
+            key: '1',
+            action: { label: 'A button', onClick: buttonSpy },
+          },
+        ]}
+      />,
+    );
+
+    definitionList.find('button').simulate('click');
+    expect(buttonSpy).toHaveBeenCalledTimes(1);
+  });
+});

package/src/definitionList/DefinitionList.story.tsx

@@ -1,29 +1,19 @@
 import { action } from '@storybook/addon-actions';
+import { select, text, boolean } from '@storybook/addon-knobs';
 
 import { Layout } from '../common';
 
-import DefinitionList, { type DefinitionListLayout } from './DefinitionList';
-import { lorem10 } from '../test-utils';
-import Section from '../section';
-import Header from '../header';
+import DefinitionList from './DefinitionList';
 
 export default {
   component: DefinitionList,
   title: 'Typography/DefinitionList',
 };
 
-const layouts: DefinitionListLayout[] = [
-  Layout.VERTICAL_TWO_COLUMN,
-  Layout.VERTICAL_ONE_COLUMN,
-  Layout.HORIZONTAL_JUSTIFIED,
-  Layout.HORIZONTAL_LEFT_ALIGNED,
-  Layout.HORIZONTAL_RIGHT_ALIGNED,
-];
-
 const definitions = [
   {
-    title: 'Definition List title',
-    value: 'Definition List value',
+    title: text('title', 'Editable title'),
+    value: text('value', 'Editable value'),
     key: 'first',
   },
   {
@@ -33,57 +23,67 @@ const definitions = [
   },
   {
     title: 'Long strings will wrap',
-    value: lorem10,
+    value: 'And values with long words will eventuallybreakontothenextline',
     key: 'third',
   },
 ];
 
 export const Basic = () => {
-  return layouts.map((layout) => (
-    <Section key={layout}>
-      <Header title={`Instace of: ${layout}`} />
-      <DefinitionList layout={layout} definitions={definitions} />
-    </Section>
-  ));
+  const muted = boolean('muted', false);
+  const layout = select(
+    'layout',
+    [
+      Layout.VERTICAL_TWO_COLUMN,
+      Layout.VERTICAL_ONE_COLUMN,
+      Layout.HORIZONTAL_JUSTIFIED,
+      Layout.HORIZONTAL_LEFT_ALIGNED,
+      Layout.HORIZONTAL_RIGHT_ALIGNED,
+    ],
+    Layout.HORIZONTAL_LEFT_ALIGNED,
+  );
+
+  return <DefinitionList layout={layout} muted={muted} definitions={definitions} />;
 };
 
 export const WithActionButtons = () => {
-  return (
-    <>
-      {layouts.map((layout) => (
-        <Section key={layout}>
-          <Header title={`Instace of: ${layout}`} />
-          <DefinitionList
-            key={layout}
-            layout={layout}
-            definitions={[
-              ...definitions,
-              {
-                title: 'Action buttons are useful',
-                value: lorem10,
-                key: 'fourth',
-                action: {
-                  label: 'Epic button',
-                  onClick: action(lorem10),
-                },
-              },
-              {
-                title: 'tiny',
-                value: 'tiny',
-                key: 'fifth',
-                action: {
-                  label: 'Epic button',
-                  onClick: action(lorem10),
-                },
-              },
-            ]}
-          />
-        </Section>
-      ))}
-    </>
+  const muted = boolean('muted', false);
+  const layout = select(
+    'layout',
+    [
+      Layout.VERTICAL_TWO_COLUMN,
+      Layout.VERTICAL_ONE_COLUMN,
+      Layout.HORIZONTAL_JUSTIFIED,
+      Layout.HORIZONTAL_LEFT_ALIGNED,
+      Layout.HORIZONTAL_RIGHT_ALIGNED,
+    ],
+    Layout.HORIZONTAL_LEFT_ALIGNED,
   );
-};
 
-export const Muted = () => {
-  return <DefinitionList muted definitions={definitions} />;
+  return (
+    <DefinitionList
+      layout={layout}
+      muted={muted}
+      definitions={[
+        ...definitions,
+        {
+          title: 'Action buttons are useful',
+          value: 'You can do all kinds of neat things with actions buttons!',
+          key: 'fourth',
+          action: {
+            label: 'Epic button',
+            onClick: action('Probably the best action event you have ever seen, in the world!'),
+          },
+        },
+        {
+          title: 'tiny',
+          value: 'tiny',
+          key: 'fifth',
+          action: {
+            label: 'Epic button',
+            onClick: action('Hello from the Tiny Button :)'),
+          },
+        },
+      ]}
+    />
+  );
 };

package/src/definitionList/DefinitionList.tsx

@@ -13,7 +13,7 @@ export interface DefinitionListDefinition {
   key: string;
 }
 
-export type DefinitionListLayout =
+type DefinitionListLayout =
   `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
 
 export interface DefinitionListProps {

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -12,7 +12,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
         aria-disabled="false"
         aria-label="back to previous step"
         aria-live="off"
-        class="wds-Button np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
+        class="np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
         style="--circle-size: 40px; --circle-icon-size: 20px; --circle-font-size: 18px;"
         type="button"
       >

package/src/i18n/de.json

@@ -54,7 +54,6 @@
   "neptune.UploadButton.allFileTypes": "Alle Dateiformate",
   "neptune.UploadButton.dropFiles": "Datei zum Hochladen in dieses Feld ziehen",
   "neptune.UploadButton.instructions": "{fileTypes}, kleiner als {size} MB",
-  "neptune.UploadButton.maximumFiles": "Maximal {maxFiles} Dateien.",
   "neptune.UploadButton.uploadFile": "Datei hochladen",
   "neptune.UploadButton.uploadFiles": "Dateien hochladen",
   "neptune.UploadInput.deleteModalBody": "Wenn du diese Datei entfernst, wird sie aus unserem System gelöscht werden.",

package/src/i18n/it.json

@@ -54,7 +54,6 @@
   "neptune.UploadButton.allFileTypes": "Tutti i tipi di file",
   "neptune.UploadButton.dropFiles": "Rilascia file per iniziare a caricare",
   "neptune.UploadButton.instructions": "{fileTypes}, minore di {size}MB",
-  "neptune.UploadButton.maximumFiles": "Max {maxFiles} file.",
   "neptune.UploadButton.uploadFile": "Carica un file",
   "neptune.UploadButton.uploadFiles": "Carica i file",
   "neptune.UploadInput.deleteModalBody": "Rimuovere questo file lo cancellerà dal nostro sistema.",

package/src/i18n/th.json

@@ -54,7 +54,6 @@
   "neptune.UploadButton.allFileTypes": "ไฟล์ทุกประเภท",
   "neptune.UploadButton.dropFiles": "วางไฟล์เพื่อเริ่มการอัปโหลด",
   "neptune.UploadButton.instructions": "{fileTypes} น้อยกว่า {size} MB",
-  "neptune.UploadButton.maximumFiles": "สูงสุด {maxFiles} ไฟล์",
   "neptune.UploadButton.uploadFile": "อัปโหลดไฟล์",
   "neptune.UploadButton.uploadFiles": "อัปโหลดไฟล์",
   "neptune.UploadInput.deleteModalBody": "การลบไฟล์นี้จะลบออกจากระบบของเรา",