@transferwise/components 0.0.0-experimental-438bbba → 0.0.0-experimental-cf33ac7

package/src/uploadInput/uploadItem/UploadItem.less

@@ -1,160 +1,171 @@
 @import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 
-// Be aware of touching styles related to :before/:after pseudo-elements in this file, delimiters between items build by using them
-.np-upload-item {
-  border: 1px solid var(--color-interactive-secondary);
+.np-upload-input__item {
   position: relative;
+  padding: var(--size-16);
+  display: flex;
+  align-items: flex-start;
+  border-left: var(--outerBorder);
+  border-right: var(--outerBorder);
 
-  &:first-child ~ div:not(.np-upload-item--link):before,
-  &:not(:first-child).np-upload-item--link .np-upload-item__link:before,
-  &.np-upload-item--link:hover .np-upload-item__link:after {
-    display: block;
-    position: absolute;
-    height: 1px;
-    background-color: var(--color-border-neutral);
-    content: " ";
-    left: var(--size-16);
-    width: calc(100% - 2 * var(--size-16));
+  &:first-child {
+    border-top: var(--outerBorder);
+    border-top-left-radius: var(--radius-small);
+    border-top-right-radius: var(--radius-small);
   }
 
-  &:first-child ~ div:not(.np-upload-item--link):before,
-  &:not(:first-child).np-upload-item--link .np-upload-item__link:before {
-    top: 0;
+  & + .np-upload-input__item {
+    &:before {
+      content: " ";
+      display: block;
+      position: absolute;
+      height: 1px;
+      left: var(--size-16);
+      width: calc(100% - 2 * var(--size-16));
+      top: 0;
+      background: var(--color-border-neutral);
+    }
   }
 
-  &.np-upload-item--link:hover .np-upload-item__link:after {
-    bottom: -1px;
-  }
+  .np-upload-input__item-content {
+    padding-right: var(--size-32);
+    flex: 1;
 
-  &:first-child {
-    & ~ div {
-      border-top: 1px;
+    @media (max-width: 320px) {
+      padding-right: var(--size-64);
     }
   }
 
-  &:not(:first-child) {
-    .np-upload-item__link:hover {
-      border-top-color: var(--color-border-neutral);
-    }
+  .np-upload-input__title,
+  .np-upload-input__text {
+    margin: 0;
+    text-align-last: left;
+    color: var(--color-content-secondary);
   }
 
-  &:not(:last-child) {
-    border-bottom: 0;
+  .np-upload-input__title + .np-upload-input__text {
+    margin-top: var(--size-4);
   }
 
-
-  &.np-upload-item--link:hover + .np-upload-item,
-  &.np-upload-item--link:hover + .np-upload-button-container {
-    &:before,
-    .np-upload-item__link:before {
-      display: none;
-    }
+  .np-upload-input__icon {
+    padding-right: var(--size-16);
   }
-}
 
-.np-upload-button-container {
-  &:hover:before,
-  &.droppable-dropping:before {
-    left: 0 !important;
-    width: 100% !important;
+  .np-upload-input__item-link,
+  .np-upload-input__item-container {
+    align-items: flex-start;
+    display: flex;
+    width: 100%;
   }
 
-  &:has(:focus-visible) {
-    .ring();
-    border-color: transparent;
-    outline-offset: -3px;
-  }
-}
+  .np-upload-input__item-action {
+    --iconSize: var(--size-24);
+    --clickArea: 44px;
+    --buttonTopRightOffset: var(--size-16);
+    // Offset towards the parent's top-right edge
+    // ensuring no overflow on smaller screens
+    --clickAreaTopRightOffset: calc((var(--clickArea) - var(--iconSize)) * -.5);
 
-.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;
-    text-decoration: none;
-    border-top: 1px solid transparent;
-    border-radius: inherit;
+    position: absolute;
+    right: var(--buttonTopRightOffset);
+    top: var(--buttonTopRightOffset);
 
-    &:focus-visible {
-      outline-offset: -2px;
+    @media (--screen-400-zoom) {
+      --iconSize: var(--size-48);
+      --clickAreaTopRightOffset: calc(-1 * var(--buttonTopRightOffset));
     }
 
-    &:hover {
+    .np-upload-input__item-button {
+      appearance: none;
+      height: var(--iconSize);
+      width: var(--iconSize);
+      padding: 0 var(--size-4);
+      border-radius: 50%;
+      border: 0;
+      background-color: var(--color-background-neutral);
+      color: var(--color-interactive-primary);
+      transition: color, background-color 0.15s ease-in-out;
+      outline-offset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
       &:before {
-        display: none !important;
+        content: '';
+        display: block;
+        width: var(--clickArea);
+        height: var(--clickArea);
+        border-radius: 50%;
+        position: absolute;
+        top: var(--clickAreaTopRightOffset);
+        right: var(--clickAreaTopRightOffset);
+      }
+
+      &:hover {
+        background-color: var(--color-sentiment-negative);
+        color: var(--color-contrast-overlay) !important;
+      }
+
+      &:active {
+        background-color: var(--color-background-neutral-active);
       }
+    }
+  }
 
-      &:after {
-        left: 0 !important;
-        width: 100% !important;
+  &.is-interactive {
+    padding: 0;
+
+    &:hover:not(:has(.np-upload-input__item-button:hover)) {
+      &:before,
+      & + .np-upload-input__item:before {
+        width: 100%;
+        left: 0;
       }
     }
 
-    &:hover,
-    &:active {
+    .np-upload-input__item-link {
+      padding: var(--size-16);
       text-decoration: none;
-      .np-upload-button {
+      border-radius: inherit;
+      border-top: 1px solid transparent;
+      background-clip: padding-box;
+
+      &:focus-visible {
+        outline-offset: -2px;
+        outline-width: 3px;
+      }
+
+      &:hover,
+      &:active {
         background-color: var(--color-background-neutral);
-        border-radius: inherit;
       }
     }
-  }
 
-  &:first-of-type a {
-    border-top: 0;
+    &:first-child {
+      .np-upload-input__item-link {
+        border-top-width: 0;
+      }
+    }
   }
-}
 
-.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-input-errors {
+    padding-left: 0;
+    list-style-type: "";
 
-.np-upload-item__remove-button {
-  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);
-  border: none;
-  color: var(--color-interactive-primary);
-  right: var(--size-16);
-  top: var(--size-16);
-  transition: color, background-color 0.15s ease-in-out;
-
-  @media (--screen-400-zoom) {
-    top: var(--size-16);
-    right: var(--size-16);
-    height: var(--size-48);
-    width: var(--size-48);
-  }
+    & > li {
+      position: relative;
+      padding-left: var(--size-16);
 
-  &:hover {
-    background-color: var(--color-sentiment-negative);
-    color: var(--color-contrast-overlay) !important;
-  }
+      &::before {
+        content: '•';
+        position: absolute;
+        display: block;
+        left: 0;
+      }
 
-  &:before {
-    display: block;
-    width: 44px;
-    height: 44px;
-    content: '';
-    border-radius: 50%;
-    position: absolute;
+      @media (max-width: 320px) {
+        padding-left: var(--size-32);
+      }
+    }
   }
 }

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -1,6 +1,5 @@
 import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useIntl } from 'react-intl';
 
 import Body from '../../body';
@@ -28,167 +27,145 @@ export type UploadItemProps = React.JSX.IntrinsicAttributes & {
    * @param file
    */
   onDownload?: (file: UploadedFile) => void;
-  ref?: React.Ref<UploadItemRef>;
 };
 
-interface UploadItemRef {
-  focus: () => void;
-}
-
 export enum TEST_IDS {
   uploadItem = 'uploadItem',
   mediaBody = 'mediaBody',
 }
 
-const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
-  ({ file, canDelete, onDelete, onDownload, singleFileUpload }, ref) => {
-    const { formatMessage } = useIntl();
-    const { status, filename, error, errors, url } = file;
-    const linkRef = useRef<HTMLAnchorElement>(null);
-    const buttonRef = useRef<HTMLButtonElement>(null);
-
-    useImperativeHandle<UploadItemRef, UploadItemRef>(ref, () => ({
-      focus: () => {
-        if (linkRef.current) {
-          linkRef.current.focus();
-        } else if (buttonRef.current) {
-          buttonRef.current.focus();
-        }
-      },
-    }));
-
-    const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
-
-    /**
-     * We're temporarily reverting to the regular icon components,
-     * until the StatusIcon receives 24px sizing. Some misalignment
-     * to be expected.
-     */
-    const getIcon = () => {
-      if (error || errors?.length || status === Status.FAILED) {
-        return <CrossCircleFill size={24} className="emphasis--negative" />;
-      }
-
-      let processIndicator: React.ReactNode;
-
-      switch (status) {
-        case Status.PROCESSING:
-        case Status.PENDING:
-          processIndicator = (
-            <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />
-          );
-          break;
-        case Status.SUCCEEDED:
-        case Status.DONE:
-        default:
-          processIndicator = <CheckCircleFill size={24} className="emphasis--positive" />;
-      }
-
-      return processIndicator;
-    };
-
-    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]);
-      }
+const UploadItem = ({
+  file,
+  canDelete,
+  onDelete,
+  onDownload,
+  singleFileUpload,
+}: UploadItemProps) => {
+  const { formatMessage } = useIntl();
+  const { status, filename, error, errors, url } = file;
+
+  const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
+
+  /**
+   * We're temporarily reverting to the regular icon components,
+   * until the StatusIcon receives 24px sizing. Some misalignment
+   * to be expected.
+   */
+  const getIcon = () => {
+    if (error || errors?.length || status === Status.FAILED) {
+      return <CrossCircleFill size={24} className="emphasis--negative" />;
+    }
+
+    let processIndicator: React.ReactNode;
+
+    switch (status) {
+      case Status.PROCESSING:
+      case Status.PENDING:
+        processIndicator = <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />;
+        break;
+      case Status.SUCCEEDED:
+      case Status.DONE:
+      default:
+        processIndicator = <CheckCircleFill size={24} className="emphasis--positive" />;
+    }
+
+    return processIndicator;
+  };
+
+  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 || errors?.length || status === Status.FAILED) {
       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>
+        <Body type={Typography.BODY_DEFAULT_BOLD} className="np-upload-input__text text-negative">
+          {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}
+        </Body>
       );
-    };
+    }
 
-    const getDescription = () => {
-      if (error || errors?.length || status === Status.FAILED) {
+    switch (status) {
+      case Status.PENDING:
         return (
-          <Body type={Typography.BODY_DEFAULT_BOLD} className="text-negative">
-            {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}
+          <Body type={Typography.BODY_DEFAULT} className="np-upload-input__text">
+            {formatMessage(MESSAGES.uploading)}
           </Body>
         );
-      }
-
-      switch (status) {
-        case Status.PENDING:
-          return (
-            <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>
-          );
-        case Status.PROCESSING:
-          return <Body>{formatMessage(MESSAGES.deleting)}</Body>;
-        case Status.SUCCEEDED:
-        case Status.DONE:
-        default:
-          return (
-            <Body type={Typography.BODY_DEFAULT_BOLD} className="text-positive">
-              {formatMessage(MESSAGES.uploaded)}
-            </Body>
-          );
-      }
-    };
-
-    const getTitle = () => {
-      return filename || formatMessage(MESSAGES.uploadedFile);
-    };
-
-    const onDownloadFile = (event: React.MouseEvent): void => {
-      if (onDownload) {
-        event.preventDefault();
-        onDownload(file);
-      }
-    };
-
-    return (
-      <div
-        className={clsx('np-upload-item', { 'np-upload-item--link': isSucceeded })}
-        data-testid={TEST_IDS.uploadItem}
+      case Status.PROCESSING:
+        return <Body className="np-upload-input__text">{formatMessage(MESSAGES.deleting)}</Body>;
+      case Status.SUCCEEDED:
+      case Status.DONE:
+      default:
+        return (
+          <Body type={Typography.BODY_DEFAULT_BOLD} className="np-upload-input__text">
+            {formatMessage(MESSAGES.uploaded)}
+          </Body>
+        );
+    }
+  };
+
+  const getTitle = () => {
+    return filename || formatMessage(MESSAGES.uploadedFile);
+  };
+
+  const onDownloadFile = (event: React.MouseEvent): void => {
+    if (onDownload) {
+      event.preventDefault();
+      onDownload(file);
+    }
+  };
+
+  return (
+    <div
+      className={clsx('np-upload-input__item', { 'is-interactive': isSucceeded && url })}
+      data-testid={TEST_IDS.uploadItem}
+    >
+      <UploadItemLink
+        url={isSucceeded ? url : undefined}
+        singleFileUpload={singleFileUpload}
+        onDownload={onDownloadFile}
       >
-        <div className="np-upload-item__body">
-          <UploadItemLink
-            ref={linkRef}
-            url={isSucceeded ? url : undefined}
-            singleFileUpload={singleFileUpload}
-            onDownload={onDownloadFile}
+        <span className="np-upload-input__icon">{getIcon()}</span>
+        <div className="np-upload-input__item-content">
+          <Body type={Typography.BODY_LARGE} className="np-upload-input__title text-word-break">
+            {getTitle()}
+          </Body>
+          {getDescription()}
+        </div>
+      </UploadItemLink>
+      {canDelete && (
+        <div className="np-upload-input__item-action">
+          <button
+            aria-label={formatMessage(MESSAGES.removeFile, { filename })}
+            className="np-upload-input__item-button"
+            type="button"
+            onClick={() => onDelete()}
           >
-            <div className="np-upload-button" aria-live="polite">
-              <div className="media">
-                <div className="np-upload-icon media-left">{getIcon()}</div>
-                <div className="media-body text-xs-left" data-testid={TEST_IDS.mediaBody}>
-                  <Body className="text-word-break d-block text-primary">{getTitle()}</Body>
-                  {getDescription()}
-                </div>
-              </div>
-            </div>
-          </UploadItemLink>
-          {canDelete && (
-            <button
-              ref={buttonRef}
-              aria-label={formatMessage(MESSAGES.removeFile, { filename })}
-              className={clsx('btn', 'np-upload-item__remove-button', 'media-left', {
-                'np-upload-item--single-file': singleFileUpload,
-              })}
-              type="button"
-              tabIndex={0}
-              onClick={() => onDelete()}
-            >
-              <Bin size={16} />
-            </button>
-          )}
+            <Bin size={16} />
+          </button>
         </div>
-      </div>
-    );
-  },
-);
-
-UploadItem.displayName = 'UploadItem';
+      )}
+    </div>
+  );
+};
 
 export default UploadItem;

package/src/uploadInput/uploadItem/UploadItemLink.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, MouseEvent, forwardRef } from 'react';
+import { PropsWithChildren, MouseEvent } from 'react';
 import { clsx } from 'clsx';
 
 type UploadItemLinkProps = PropsWithChildren<{
@@ -7,26 +7,28 @@ type UploadItemLinkProps = PropsWithChildren<{
   singleFileUpload: boolean;
 }>;
 
-export const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, UploadItemLinkProps>(
-  ({ children, url, onDownload, singleFileUpload }, ref) => {
-    if (!url) {
-      return <div ref={ref as React.RefObject<HTMLDivElement>}>{children}</div>;
-    }
+export const UploadItemLink = ({
+  children,
+  url,
+  onDownload,
+  singleFileUpload,
+}: UploadItemLinkProps) => {
+  if (!url) {
+    return <div className={clsx('np-upload-input__item-container')}>{children}</div>;
+  }
 
-    return (
-      <a
-        ref={ref as React.RefObject<HTMLAnchorElement>}
-        href={url}
-        target="_blank"
-        rel="noopener noreferrer"
-        className={clsx(
-          'np-upload-item__link',
-          singleFileUpload ? 'np-upload-item--single-file' : '',
-        )}
-        onClick={onDownload}
-      >
-        {children}
-      </a>
-    );
-  },
-);
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={clsx(
+        'np-upload-input__item-link',
+        singleFileUpload ? 'np-upload-input__item-link--single-file' : '',
+      )}
+      onClick={onDownload}
+    >
+      {children}
+    </a>
+  );
+};