@transferwise/components 46.36.1 → 46.38.0

package/src/uploadInput/uploadItem/UploadItem.less

@@ -1,77 +1,112 @@
-@small-border-minus-one: calc(var(--radius-small) - 1px);
+@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 
 .np-upload-item {
-  &:not(:last-child)::after {
+  border: 1px solid var(--color-interactive-secondary);
+
+  &:first-child ~ div:before {
     display: block;
     position: relative;
-    border-bottom: 1px solid var(--color-border-neutral);
+    height: 1px;
+    background-color: var(--color-border-neutral);
     content: " ";
     margin: 0 var(--size-16);
   }
+
   &:first-child {
-    .np-theme-personal & {
-      a {
-        &:hover,
-        &:focus-visible,
-        &:active {
-          border-top-left-radius: @small-border-minus-one;
+    & ~ div {
+      border-top: 0;
+    }
+  }
 
-          ~ .np-upload-item__remove-button {
-            border-top-right-radius: @small-border-minus-one;
-          }
-        }
-      }
+  &:not(:last-child) {
+    border-bottom: 0;
   }
+}
+
+.np-upload-item.np-upload-item__link:hover,
+.np-upload-button-container:hover {
+  &:before {
+    margin: 0 !important;
   }
+  & + div:before {
+    margin: 0 !important;
+  }
+}
+
+.np-upload-button-container:has(:focus-visible) {
+  .ring();
+  border-color: transparent;
+  outline-offset: -3px;
+}
+
+.np-upload-item--single-file:focus-visible,
+.np-upload-item--link:focus-visible,
+.np-upload-button-container:has(:focus-visible) {
+  outline-width: 3px;
 }
 
 .np-upload-item__link {
   a {
-    .np-theme-personal & {
-      border-radius: unset;
-    }
     flex: 1;
     text-decoration: none;
-    outline: none;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-
-    &.np-upload-item--single-file {
-      border-bottom-left-radius: @small-border-minus-one;
+    border-radius: inherit;
+    &:focus-visible {
+      outline-offset: -2px;
     }
 
     &:hover,
-    &:focus-visible,
     &:active {
       text-decoration: none;
       background-color: var(--color-background-neutral);
-
-      ~ .np-upload-item__remove-button {
-        background-color: var(--color-background-neutral);
-      }
     }
   }
-  
-  .np-upload-item__remove-button.np-upload-item--single-file {
-    border-bottom-right-radius: @small-border-minus-one;
-  }
 }
 
 .np-upload-item__body {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  // We should have the `relative` position for the body, because we have `absolute` position for `np-upload-item__remove-button` to achieve appropriate `hover` effects
+  position: relative;
+  border-radius: inherit;
 }
 
 .np-upload-item__remove-button {
-  flex-shrink: 0;
-  align-self: stretch;
-  padding: var(--size-12) var(--size-16);
-  color: var(--color-interactive-secondary);
-  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  position: absolute;
+  height: var(--size-24);
+  min-height: 0;
+  width: var(--size-24);
+  padding: 0;
+  border-radius: 50% !important;
+  outline-offset: 0 !important;
+  background-color: var(--color-background-neutral);
+  color: var(--color-interactive-primary);
+  right: var(--size-16);
+  top: var(--size-16);
+  transition: color, background-color 0.15s ease-in-out;
 
-  &:hover,
-  &:focus {
-    color: var(--color-interactive-negative-hover) !important; // Override btn:hover color
+  @media (--screen-400-zoom) {
+    top: var(--size-16);
+    right: var(--size-16);
+    height: var(--size-48);
+    width: var(--size-48);
+  }
+
+  &:hover {
+    background-color: var(--color-sentiment-negative);
+    color: var(--color-contrast-overlay) !important;
+  }
+
+  &:before {
+    display: block;
+    width: 44px;
+    height: 44px;
+    content: '';
+    border-radius: 50%;
+    position: absolute;
   }
 }

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -1,14 +1,12 @@
-import { AlertCircle, CrossCircleFill } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
+import { Bin } from '@transferwise/icons';
 import classNames from 'classnames';
-import { ReactElement, MouseEvent } from 'react';
 import { useIntl } from 'react-intl';
 
 import Body from '../../body';
 import { Size, Status, Typography, Sentiment } from '../../common';
 import ProcessIndicator from '../../processIndicator/ProcessIndicator';
 import StatusIcon from '../../statusIcon/StatusIcon';
-import { UploadedFile } from '../types';
+import { UploadedFile, UploadError } from '../types';
 
 import MESSAGES from './UploadItem.messages';
 import { UploadItemBody } from './UploadItemBody';
@@ -44,21 +42,16 @@ const UploadItem = ({
   singleFileUpload,
 }: UploadItemProps) => {
   const { formatMessage } = useIntl();
-  const { status, filename, error, url } = file;
-  const { isModern } = useTheme();
+  const { status, filename, error, errors, url } = file;
 
   const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
 
-  const getIcon = (): ReactElement => {
-    if (error || status === Status.FAILED) {
-      return isModern ? (
-        <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />
-      ) : (
-        <AlertCircle size={24} className="text-negative" />
-      );
+  const getIcon = () => {
+    if (error || errors?.length || status === Status.FAILED) {
+      return <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />;
     }
 
-    let processIndicator: ReactElement;
+    let processIndicator: React.ReactNode;
 
     switch (status) {
       case Status.PROCESSING:
@@ -68,28 +61,39 @@ const UploadItem = ({
       case Status.SUCCEEDED:
       case Status.DONE:
       default:
-        processIndicator = isModern ? (
-          <StatusIcon size={Size.SMALL} sentiment={Sentiment.POSITIVE} />
-        ) : (
-          <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.SUCCEEDED} />
-        );
+        processIndicator = <StatusIcon size={Size.SMALL} sentiment={Sentiment.POSITIVE} />;
     }
 
-    if (isModern) {
-      return processIndicator;
-    }
-
-    return <span style={{ transform: 'scale(0.8335)' }}>{processIndicator}</span>; // Scale down ProcessIndicator to be 20px*20px to match `icons`
+    return processIndicator;
   };
 
-  const getErrorMessage = () =>
+  const getErrorMessage = (error?: UploadError) =>
     typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
 
+  const getMultipleErrors = (errors?: UploadError[]) => {
+    if (!errors?.length) {
+      return null;
+    }
+
+    if (errors?.length === 1) {
+      return getErrorMessage(errors[0]);
+    }
+
+    return (
+      <ul className="np-upload-input-errors m-b-0">
+        {errors.map((error, index) => {
+          // eslint-disable-next-line react/no-array-index-key
+          return <li key={index}>{getErrorMessage(error)}</li>;
+        })}
+      </ul>
+    );
+  };
+
   const getDescription = () => {
-    if (error || status === Status.FAILED) {
+    if (error || errors?.length || status === Status.FAILED) {
       return (
         <Body type={Typography.BODY_DEFAULT_BOLD} className="text-negative">
-          {getErrorMessage()}
+          {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}
         </Body>
       );
     }
@@ -114,7 +118,7 @@ const UploadItem = ({
     return filename || formatMessage(MESSAGES.uploadedFile);
   };
 
-  const onDownloadFile = (event: MouseEvent): void => {
+  const onDownloadFile = (event: React.MouseEvent): void => {
     if (onDownload) {
       event.preventDefault();
       onDownload(file);
@@ -151,7 +155,7 @@ const UploadItem = ({
             type="button"
             onClick={() => onDelete()}
           >
-            <CrossCircleFill size={16} />
+            <Bin size={16} />
           </button>
         )}
       </div>

package/src/uploadInput/uploadItem/UploadItemBody.tsx

@@ -21,7 +21,7 @@ export const UploadItemBody = ({
       href={url}
       target="_blank"
       rel="noopener noreferrer"
-      className={singleFileUpload ? 'np-upload-item--single-file' : ''}
+      className={singleFileUpload ? 'np-upload-item--single-file' : 'np-upload-item--link'}
       onClick={onDownload}
     >
       {children}

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import * as React from 'react';
 
 import { HistoryNavigator } from '../common';
 import {
@@ -61,10 +61,10 @@ export interface WithDisplayFormatProps<T extends TextElementProps = TextElement
   onChange?: (value: string) => void;
   onBlur?: (value: string) => void;
   onFocus?: (value: string) => void;
-  render: (renderProps: T) => JSX.Element;
+  render: (renderProps: T) => React.JSX.Element;
 }
 
-class WithDisplayFormat<T extends TextElementProps> extends Component<
+class WithDisplayFormat<T extends TextElementProps> extends React.Component<
   WithDisplayFormatProps<T>,
   WithDisplayFormatState
 > {

package/build/types/logo/logoTypes.d.ts

@@ -1,6 +0,0 @@
-export declare enum LogoType {
-    WISE = "WISE",
-    WISE_BUSINESS = "WISE_BUSINESS",
-    WISE_PLATFORM = "WISE_PLATFORM"
-}
-//# sourceMappingURL=logoTypes.d.ts.map

package/build/types/logo/logoTypes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"logoTypes.d.ts","sourceRoot":"","sources":["../../../src/logo/logoTypes.ts"],"names":[],"mappings":"AACA,oBAAY,QAAQ;IAClB,IAAI,SAAS;IACb,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC"}

package/src/alert/inlineMarkdown/InlineMarkdown.js

@@ -1,21 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { MarkdownNodeType } from '../../common';
-import Markdown from '../../markdown';
-
-const allowList = [MarkdownNodeType.STRONG];
-
-const InlineMarkdown = (props) => {
-  return <Markdown {...props} as="span" allowList={allowList} blockList={undefined} />;
-};
-
-InlineMarkdown.propTypes = {
-  children: PropTypes.string.isRequired,
-  className: PropTypes.string,
-};
-
-InlineMarkdown.defaultProps = {
-  className: undefined,
-};
-
-export default InlineMarkdown;

package/src/alert/inlineMarkdown/index.js

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

package/src/card/index.js

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

package/src/checkbox/index.js

@@ -1,3 +0,0 @@
-import Checkbox from './Checkbox';
-
-export default Checkbox;

package/src/definitionList/DefinitionList.js

@@ -1,100 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import ActionButton from '../actionButton';
-import { Layout } from '../common';
-
-const isLayoutHorizontal = (layout) =>
-  [
-    Layout.HORIZONTAL_LEFT_ALIGNED,
-    Layout.HORIZONTAL_RIGHT_ALIGNED,
-    Layout.HORIZONTAL_JUSTIFIED,
-  ].includes(layout);
-
-const getAlignmentClasses = (layout, action) => {
-  let classes = ['d-flex'];
-
-  if (action) {
-    if (isLayoutHorizontal(layout)) {
-      classes.push('align-items-center');
-    } else {
-      classes.push('align-items-start');
-    }
-  }
-
-  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {
-    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');
-  } else {
-    classes.push('justify-content-between');
-  }
-
-  if (layout === Layout.HORIZONTAL_JUSTIFIED) {
-    classes.push('text-sm-justify');
-  }
-
-  return classes;
-};
-
-const DefinitionList = ({ definitions, layout, muted }) => (
-  <dl
-    className={classNames('tw-definition-list d-flex ', {
-      'text-muted': muted,
-      'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,
-      'tw-definition-list--columns flex-column flex-row--sm': layout === Layout.VERTICAL_TWO_COLUMN,
-      'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),
-    })}
-  >
-    {definitions
-      .filter((definition) => definition)
-      .map(({ action, title, value, key }) => (
-        <div key={key} className="tw-definition-list__item">
-          <dt>{title}</dt>
-          <dd className={classNames(...getAlignmentClasses(layout, action))}>
-            <div>{value}</div>
-            {action ? (
-              <div
-                className={classNames(
-                  isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',
-                  'tw-definition-list__action',
-                )}
-              >
-                <ActionButton className="tw-definition-list__button" onClick={action.onClick}>
-                  {action.label}
-                </ActionButton>
-              </div>
-            ) : null}
-          </dd>
-        </div>
-      ))}
-  </dl>
-);
-
-DefinitionList.propTypes = {
-  definitions: PropTypes.arrayOf(
-    PropTypes.shape({
-      action: PropTypes.shape({
-        label: PropTypes.string.isRequired,
-        onClick: PropTypes.func,
-      }),
-      title: PropTypes.node.isRequired,
-      value: PropTypes.node.isRequired,
-      key: PropTypes.string.isRequired,
-    }),
-  ),
-  layout: PropTypes.oneOf([
-    'VERTICAL_TWO_COLUMN',
-    'VERTICAL_ONE_COLUMN',
-    'HORIZONTAL_JUSTIFIED',
-    'HORIZONTAL_LEFT_ALIGNED',
-    'HORIZONTAL_RIGHT_ALIGNED',
-  ]),
-  muted: PropTypes.bool,
-};
-
-DefinitionList.defaultProps = {
-  definitions: [],
-  layout: Layout.VERTICAL_TWO_COLUMN,
-  muted: false,
-};
-
-export default DefinitionList;

package/src/definitionList/index.js

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

package/src/drawer/index.js

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

package/src/logo/index.js

@@ -1,2 +0,0 @@
-export { LogoType } from './logoTypes';
-export { default } from './Logo';

package/src/logo/logoTypes.ts

@@ -1,6 +0,0 @@
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-export enum LogoType {
-  WISE = 'WISE',
-  WISE_BUSINESS = 'WISE_BUSINESS',
-  WISE_PLATFORM = 'WISE_PLATFORM',
-}

package/src/snackbar/Snackbar.spec.js

@@ -1,112 +0,0 @@
-import { mount } from 'enzyme';
-import ReactDOM from 'react-dom';
-
-import SnackbarAppendingToBody, { Snackbar } from './Snackbar';
-import { SnackbarConsumer } from './SnackbarContext';
-import SnackbarProvider from './SnackbarProvider';
-import { act } from 'react';
-
-describe('Snackbar', () => {
-  const timeout = 1000;
-  let props;
-  let component;
-  let snackbar;
-  let buttonTrigger;
-
-  beforeEach(() => {
-    jest.useFakeTimers();
-    props = {
-      text: 'hello, i am a snack',
-      timestamp: Date.now(),
-      timeout,
-    };
-
-    const Container = () => (
-      <SnackbarConsumer>
-        {({ createSnackbar }) => (
-          <button type="button" className="button-trigger" onClick={() => createSnackbar(props)}>
-            Trigger
-          </button>
-        )}
-      </SnackbarConsumer>
-    );
-
-    component = mount(
-      <SnackbarProvider timeout={timeout}>
-        <Container />
-      </SnackbarProvider>,
-    );
-    snackbar = () => component.find(Snackbar);
-    buttonTrigger = () => component.find('.button-trigger');
-  });
-
-  it('is appended to body', async () => {
-    const createPortal = jest.spyOn(ReactDOM, 'createPortal');
-    expect(createPortal).not.toHaveBeenCalled();
-    mount(<SnackbarAppendingToBody {...props} />);
-
-    expect(createPortal).toHaveBeenCalledTimes(1);
-    jest.clearAllMocks();
-  });
-
-  it('accepts element as text', async () => {
-    const componentWithNode = mount(
-      <SnackbarProvider timeout={timeout}>
-        <SnackbarConsumer>
-          {({ createSnackbar }) => (
-            <button
-              type="button"
-              className="button-trigger"
-              onClick={() => createSnackbar({ text: <span>test</span> })}
-            >
-              Trigger
-            </button>
-          )}
-        </SnackbarConsumer>
-      </SnackbarProvider>,
-    );
-    const snackbarWithNode = () => componentWithNode.find(Snackbar);
-    componentWithNode.find('.button-trigger').simulate('click');
-    expect(snackbarWithNode().text()).toContain('test');
-  });
-
-  it('displays a single snack for the given duration with the given text', async () => {
-    expect(snackbar().text()).not.toContain(props.text);
-    buttonTrigger().simulate('click');
-    buttonTrigger().simulate('click');
-    buttonTrigger().simulate('click');
-    buttonTrigger().simulate('click');
-    expect(snackbar().text()).toContain(props.text);
-    expect(snackbar()).toHaveLength(1);
-
-    await act(async () => {
-      await jest.runOnlyPendingTimersAsync();
-    });
-    await act(async () => {
-      await jest.runOnlyPendingTimersAsync();
-    });
-
-    expect(snackbar().text()).not.toContain(props.text);
-  });
-
-  it('adjusts the theme if passed', async () => {
-    const componentWithNode = mount(
-      <SnackbarProvider timeout={timeout}>
-        <SnackbarConsumer>
-          {({ createSnackbar }) => (
-            <button
-              type="button"
-              className="button-trigger"
-              onClick={() => createSnackbar({ text: <span>test</span>, theme: 'dark' })}
-            >
-              Trigger
-            </button>
-          )}
-        </SnackbarConsumer>
-      </SnackbarProvider>,
-    );
-    const snackbarWithNode = () => componentWithNode.find(Snackbar);
-    componentWithNode.find('.button-trigger').simulate('click');
-    expect(snackbarWithNode().prop('theme')).toBe('dark');
-  });
-});

package/src/sticky/Sticky.spec.js

@@ -1,34 +0,0 @@
-import { shallow, mount } from 'enzyme';
-
-import Sticky from './Sticky';
-
-describe('Sticky', () => {
-  let component;
-  const props = {
-    open: true,
-    children: null,
-    stickyPositionFixed: true,
-    position: 'bottom',
-  };
-
-  it('renders with right props', () => {
-    component = mount(<Sticky {...props} />);
-    expect(component.find(Sticky)).toHaveLength(1);
-    expect(component.find(Sticky).props()).toStrictEqual({ ...props });
-  });
-
-  it('renders SlidingPanel with right props', () => {
-    component = shallow(<Sticky {...props} />);
-
-    const slidingPanel = component.find('ForwardRef');
-    expect(slidingPanel).toHaveLength(1);
-
-    expect(slidingPanel.props()).toStrictEqual({
-      children: null,
-      open: true,
-      position: 'bottom',
-      showSlidingPanelBorder: true,
-      slidingPanelPositionFixed: true,
-    });
-  });
-});