npm - @transferwise/components - Versions diffs - 46.37.0 → 46.38.0 - Mend

@transferwise/components 46.37.0 → 46.38.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (300) hide show

package/src/uploadInput/uploadButton/UploadButton.spec.tsx CHANGED Viewed

@@ -9,7 +9,6 @@ describe('UploadButton', () => {
   const props: UploadButtonProps = {
     onChange: jest.fn(),
-    multipleFileInputWithFilesAdded: true,
   };
   const renderComponent = (customProps = props) => render(<UploadButton {...customProps} />);

package/src/uploadInput/uploadButton/UploadButton.tsx CHANGED Viewed

@@ -1,12 +1,10 @@
 import { PlusCircle as PlusIcon, Upload as UploadIcon } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import { ChangeEvent, DragEvent, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import Body from '../../body';
 import { FileType, Typography } from '../../common';
-import { useDirection } from '../../common/hooks';
 import MESSAGES from './UploadButton.messages';
 import { DEFAULT_SIZE_LIMIT, imageFileTypes } from './defaults';
@@ -60,11 +58,6 @@ export type UploadButtonProps = {
    * Title for the upload button
    */
   uploadButtonTitle?: string;
-  /**
-   * Are there any uploaded items on a multiple-file upload? Used for calculating border radiuses
-   */
-  multipleFileInputWithFilesAdded: boolean;
 };
 export enum TEST_IDS {
@@ -87,10 +80,7 @@ const UploadButton = ({
   onChange,
   id = DEFAULT_FILE_INPUT_ID,
   uploadButtonTitle,
-  multipleFileInputWithFilesAdded,
 }: UploadButtonProps) => {
-  const { isModern } = useTheme();
-  const { isRTL } = useDirection();
   const { formatMessage } = useIntl();
   const inputReference = useRef<HTMLInputElement>(null);
@@ -167,7 +157,7 @@ const UploadButton = ({
     const areAllFilesAllowed = getFileTypesDescription() === '*';
     if (areAllFilesAllowed) {
-      return {}; //file input by default allows all files
+      return {}; // file input by default allows all files
     }
     if (Array.isArray(fileTypes)) {
@@ -179,23 +169,15 @@ const UploadButton = ({
   function renderDescription() {
     return (
-      <>
-        <Body
-          className={classNames({
-            'text-primary': !disabled,
-            small: !isModern,
-            'font-weight-normal': !isModern,
-          })}
-        >
-          {getDescription()}
-          {maxFiles && (
-            <>
-              <br />
-              {`Maximum ${maxFiles} files.`}
-            </>
-          )}
-        </Body>
-      </>
+      <Body className={classNames({ 'text-primary': !disabled })}>
+        {getDescription()}
+        {maxFiles && (
+          <>
+            <br />
+            {`Maximum ${maxFiles} files.`}
+          </>
+        )}
+      </Body>
     );
   }
@@ -226,15 +208,9 @@ const UploadButton = ({
         onChange={filesSelected}
       />
       {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-      <label
-        htmlFor={id}
-        className={classNames('btn', 'np-upload-accent', 'np-upload-button', {
-          disabled,
-          'np-upload-input--square-top': multipleFileInputWithFilesAdded,
-        })}
-      >
+      <label htmlFor={id} className={classNames('btn', 'np-upload-button')}>
         <div className="media">
-          <div className="np-upload-icon media-left">
+          <div className="np-upload-icon media-middle media-left">
             <UploadIcon size={24} className="text-link" />
           </div>
           <div className="media-body text-xs-left" data-testid={TEST_IDS.mediaBody}>
@@ -253,7 +229,6 @@ const UploadButton = ({
             'droppable-card',
             'droppable-dropping-card',
             'droppable-card-content',
-            { 'np-upload-input--square-top': multipleFileInputWithFilesAdded },
           )}
         >
           <PlusIcon className="m-x-1" size={24} />

package/src/uploadInput/uploadItem/UploadItem.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

	@@ -1 +0,0 @@
1	- {"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 DELETED Viewed

@@ -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 DELETED Viewed

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

package/src/card/index.js DELETED Viewed

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

package/src/checkbox/index.js DELETED Viewed

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

package/src/definitionList/DefinitionList.js DELETED Viewed

@@ -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 DELETED Viewed

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

package/src/drawer/index.js DELETED Viewed

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

package/src/logo/index.js DELETED Viewed

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