@transferwise/components 46.37.0 → 46.39.0

package/src/uploadInput/uploadItem/UploadItem.css

@@ -1,74 +1,109 @@
-.np-upload-item:not(:last-child)::after {
+.np-upload-item {
+  border: 1px solid #c9cbce;
+  border: 1px solid var(--color-interactive-secondary);
+}
+.np-upload-item:first-child ~ div:before {
   display: block;
   position: relative;
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
-  border-bottom: 1px solid var(--color-border-neutral);
+  height: 1px;
+  background-color: rgba(0,0,0,0.10196);
+  background-color: var(--color-border-neutral);
   content: " ";
   margin: 0 16px;
   margin: 0 var(--size-16);
 }
-.np-theme-personal .np-upload-item:first-child a:hover,
-.np-theme-personal .np-upload-item:first-child a:focus-visible,
-.np-theme-personal .np-upload-item:first-child a:active {
-  border-top-left-radius: calc(10px - 1px);
-  border-top-left-radius: calc(var(--radius-small) - 1px);
+.np-upload-item:first-child ~ div {
+  border-top: 0;
+}
+.np-upload-item:not(:last-child) {
+  border-bottom: 0;
+}
+.np-upload-item.np-upload-item__link:hover:before,
+.np-upload-button-container:hover:before {
+  margin: 0 !important;
+}
+.np-upload-item.np-upload-item__link:hover + div:before,
+.np-upload-button-container:hover + div:before {
+  margin: 0 !important;
+}
+.np-upload-button-container:has(:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+  border-color: transparent;
+  outline-offset: -3px;
 }
-.np-theme-personal .np-upload-item:first-child a:hover ~ .np-upload-item__remove-button,
-.np-theme-personal .np-upload-item:first-child a:focus-visible ~ .np-upload-item__remove-button,
-.np-theme-personal .np-upload-item:first-child a:active ~ .np-upload-item__remove-button {
-  border-top-right-radius: calc(10px - 1px);
-  border-top-right-radius: calc(var(--radius-small) - 1px);
+.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 {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  outline: none;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-radius: inherit;
 }
-.np-theme-personal .np-upload-item__link a {
-  border-radius: 0;
-  border-radius: initial;
-}
-.np-upload-item__link a.np-upload-item--single-file {
-  border-bottom-left-radius: calc(10px - 1px);
-  border-bottom-left-radius: calc(var(--radius-small) - 1px);
+.np-upload-item__link a:focus-visible {
+  outline-offset: -2px;
 }
 .np-upload-item__link a:hover,
-.np-upload-item__link a:focus-visible,
 .np-upload-item__link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.np-upload-item__link a:hover ~ .np-upload-item__remove-button,
-.np-upload-item__link a:focus-visible ~ .np-upload-item__remove-button,
-.np-upload-item__link a:active ~ .np-upload-item__remove-button {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-upload-item__link .np-upload-item__remove-button.np-upload-item--single-file {
-  border-bottom-right-radius: calc(10px - 1px);
-  border-bottom-right-radius: calc(var(--radius-small) - 1px);
-}
 .np-upload-item__body {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  position: relative;
+  border-radius: inherit;
 }
 .np-upload-item__remove-button {
-  flex-shrink: 0;
-  align-self: stretch;
-  padding: 12px 16px;
-  padding: var(--size-12) var(--size-16);
-  color: #c9cbce;
-  color: var(--color-interactive-secondary);
-  background: transparent;
-}
-.np-upload-item__remove-button:hover,
-.np-upload-item__remove-button:focus {
-  color: #d03238 !important;
-  color: var(--color-interactive-negative-hover) !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  position: absolute;
+  height: 24px;
+  height: var(--size-24);
+  min-height: 0;
+  width: 24px;
+  width: var(--size-24);
+  padding: 0;
+  border-radius: 50% !important;
+  outline-offset: 0 !important;
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: var(--color-interactive-primary);
+  right: 16px;
+  right: var(--size-16);
+  top: 16px;
+  top: var(--size-16);
+  transition: color, background-color 0.15s ease-in-out;
+}
+@media (max-width: 320px) {
+  .np-upload-item__remove-button {
+    top: 16px;
+    top: var(--size-16);
+    right: 16px;
+    right: var(--size-16);
+    height: 48px;
+    height: var(--size-48);
+    width: 48px;
+    width: var(--size-48);
+  }
+}
+.np-upload-item__remove-button:hover {
+  background-color: var(--color-sentiment-negative);
+  color: var(--color-contrast-overlay) !important;
+}
+.np-upload-item__remove-button:before {
+  display: block;
+  width: 44px;
+  height: 44px;
+  content: '';
+  border-radius: 50%;
+  position: absolute;
 }

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.spec.tsx

@@ -1,9 +1,9 @@
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 
 import { Status } from '../../common';
 import { render, screen } from '../../test-utils';
 
-import UploadItem, { UploadItemProps, TEST_IDS } from './UploadItem';
+import UploadItem, { UploadItemProps } from './UploadItem';
 
 describe('UploadItem', () => {
   const props: UploadItemProps = {
@@ -111,10 +111,10 @@ describe('UploadItem', () => {
   });
 
   describe('manual file download handler', () => {
-    it('calls onDownload handler provided through props', () => {
+    it('calls onDownload handler provided through props', async () => {
       const onDownload = jest.fn();
       renderComponent({ ...props, onDownload });
-      userEvent.click(screen.getAllByRole('link')[0]);
+      await userEvent.click(screen.getAllByRole('link')[0]);
       expect(onDownload).toHaveBeenCalledTimes(1);
       expect(onDownload).toHaveBeenCalledWith(props.file);
     });

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -1,5 +1,4 @@
-import { AlertCircle, CrossCircleFill } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
+import { Bin } from '@transferwise/icons';
 import classNames from 'classnames';
 import { useIntl } from 'react-intl';
 
@@ -7,7 +6,7 @@ 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';
@@ -43,18 +42,13 @@ 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 = () => {
-    if (error || status === Status.FAILED) {
-      return isModern ? (
-        <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />
-      ) : (
-        <AlertCircle size={24} className="text-negative" />
-      );
+    if (error || errors?.length || status === Status.FAILED) {
+      return <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />;
     }
 
     let processIndicator: React.ReactNode;
@@ -67,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>
       );
     }
@@ -150,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/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/flowNavigation/backButton/BackButton.js

@@ -1,32 +0,0 @@
-import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import Avatar, { AvatarType } from '../../avatar';
-
-const BackButton = ({ className, onClick, 'aria-label': ariaLabel }) => (
-  <Avatar type={AvatarType.ICON} size={40}>
-    <button
-      type="button"
-      aria-label={ariaLabel}
-      className={classNames('np-back-button', 'btn-unstyled', className)}
-      onClick={onClick}
-    >
-      <ArrowLeftIcon size={24} />
-    </button>
-  </Avatar>
-);
-
-BackButton.propTypes = {
-  'aria-label': PropTypes.string.isRequired,
-  className: PropTypes.string,
-  label: PropTypes.element,
-  onClick: PropTypes.func,
-};
-
-BackButton.defaultProps = {
-  className: undefined,
-  label: undefined,
-};
-
-export default BackButton;

package/src/flowNavigation/backButton/BackButton.spec.js

@@ -1,16 +0,0 @@
-import { render } from '../../test-utils';
-import messages from '../FlowNavigation.messages';
-
-import BackButton from '.';
-
-const props = {
-  label: <>label</>,
-  className: 'className',
-  onClick: jest.fn(),
-  'aria-label': messages.back.defaultMessage,
-};
-describe('BackButton', () => {
-  it(`renders as expected`, () => {
-    expect(render(<BackButton {...props} />).container).toMatchSnapshot();
-  });
-});

package/src/flowNavigation/backButton/__snapshots__/BackButton.spec.js.snap

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BackButton renders as expected 1`] = `
-<div>
-  <div
-    class="tw-avatar tw-avatar--40 tw-avatar--icon"
-  >
-    <div
-      class="tw-avatar__content"
-    >
-      <button
-        class="np-back-button btn-unstyled className"
-        type="button"
-      >
-        <span
-          aria-hidden="true"
-          class="tw-icon tw-icon-arrow-left "
-          data-testid="arrow-left-icon"
-          role="presentation"
-        >
-          <svg
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-          >
-            <path
-              d="M22.286 11.316H4.629l7.114-7.114-1.2-1.2-8.572 8.571a.829.829 0 0 0 0 1.2l8.572 8.572 1.2-1.2-7.114-7.114h17.657v-1.715Z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;