@transferwise/components 0.0.0-experimental-b9f8dc1 → 0.0.0-experimental-e1f66d5

package/src/uploadInput/uploadItem/UploadItem.css

@@ -1,165 +1,144 @@
-.np-upload-input__item {
+.np-upload-item {
+  border: 1px solid #c9cbce;
+  border: 1px solid var(--color-interactive-secondary);
   position: relative;
-  padding: 16px;
-  padding: var(--size-16);
-  display: flex;
-  align-items: flex-start;
-  border-left: var(--outerBorder);
-  border-right: var(--outerBorder);
-}
-.np-upload-input__item:first-child {
-  border-top: var(--outerBorder);
-  border-top-left-radius: 10px;
-  border-top-left-radius: var(--radius-small);
-  border-top-right-radius: 10px;
-  border-top-right-radius: var(--radius-small);
-}
-.np-upload-input__item + .np-upload-input__item:before {
-  content: " ";
+}
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
   display: block;
   position: absolute;
   height: 1px;
+  background-color: rgba(0,0,0,0.10196);
+  background-color: var(--color-border-neutral);
+  content: " ";
   left: 16px;
   left: var(--size-16);
   width: calc(100% - 2 * 16px);
   width: calc(100% - 2 * var(--size-16));
+}
+.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
+.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before {
   top: 0;
-  background: rgba(0,0,0,0.10196);
-  background: var(--color-border-neutral);
 }
-.np-upload-input__item .np-upload-input__item-content {
-  padding-right: 32px;
-  padding-right: var(--size-32);
-  flex: 1;
+.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
+  bottom: -1px;
 }
-@media (max-width: 320px) {
-  .np-upload-input__item .np-upload-input__item-content {
-    padding-right: 64px;
-    padding-right: var(--size-64);
-  }
+.np-upload-item:first-child ~ div {
+  border-top: 1px;
 }
-.np-upload-input__item .np-upload-input__title,
-.np-upload-input__item .np-upload-input__text {
-  margin: 0;
-  -moz-text-align-last: left;
-       text-align-last: left;
-  color: #5d7079;
-  color: var(--color-content-secondary);
-}
-.np-upload-input__item .np-upload-input__title + .np-upload-input__text {
-  margin-top: 4px;
-  margin-top: var(--size-4);
-}
-.np-upload-input__item .np-upload-input__icon {
-  padding-right: 16px;
-  padding-right: var(--size-16);
-}
-.np-upload-input__item .np-upload-input__item-link,
-.np-upload-input__item .np-upload-input__item-container {
-  align-items: flex-start;
-  display: flex;
-  width: 100%;
+.np-upload-item:not(:first-child) .np-upload-item__link:hover {
+  border-top-color: rgba(0,0,0,0.10196);
+  border-top-color: var(--color-border-neutral);
 }
-.np-upload-input__item .np-upload-input__item-action {
-  --iconSize: var(--size-24);
-  --clickAreaSize: 44px;
-  --buttonTopRightOffset: var(--size-16);
-  --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -0.5);
-  position: absolute;
-  right: 16px;
-  right: var(--buttonTopRightOffset);
-  top: 16px;
-  top: var(--buttonTopRightOffset);
+.np-upload-item:not(:last-child) {
+  border-bottom: 0;
 }
-@media (max-width: 320px) {
-  .np-upload-input__item .np-upload-input__item-action {
-    --iconSize: var(--size-48);
-    --clickAreaTopRightOffset: calc(-1 * var(--buttonTopRightOffset));
-  }
+.np-upload-item.np-upload-item--link:hover + .np-upload-item:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-item .np-upload-item__link:before,
+.np-upload-item.np-upload-item--link:hover + .np-upload-button-container .np-upload-item__link:before {
+  display: none;
 }
-.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  height: var(--iconSize);
-  width: var(--iconSize);
-  padding: 0 4px;
-  padding: 0 var(--size-4);
-  border-radius: 50%;
-  border: 0;
-  background-color: rgba(134,167,189,0.10196);
-  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;
-}
-.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
-  content: '';
-  display: block;
-  width: var(--clickAreaSize);
-  height: var(--clickAreaSize);
-  border-radius: 50%;
-  position: absolute;
-  top: var(--clickAreaTopRightOffset);
-  right: var(--clickAreaTopRightOffset);
-}
-.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
-  background-color: var(--color-sentiment-negative);
-  color: var(--color-contrast-overlay) !important;
-}
-.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:active {
-  background-color: var(--color-background-neutral-active);
+.np-upload-button-container:hover:before,
+.np-upload-button-container.droppable-dropping:before {
+  left: 0 !important;
+  width: 100% !important;
 }
-.np-upload-input__item.is-interactive {
-  padding: 0;
+.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-upload-input__item.is-interactive:hover:not(:has(.np-upload-input__item-button:hover)):before,
-.np-upload-input__item.is-interactive:hover:not(:has(.np-upload-input__item-button:hover)) + .np-upload-input__item:before {
-  width: 100%;
-  left: 0;
+.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-input__item.is-interactive .np-upload-input__item-link {
-  padding: 16px;
-  padding: var(--size-16);
+.np-upload-item--link a {
+  flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-radius: inherit;
   border-top: 1px solid transparent;
-  background-clip: padding-box;
+  border-radius: inherit;
 }
-.np-upload-input__item.is-interactive .np-upload-input__item-link:focus-visible {
+.np-upload-item--link a:focus-visible {
   outline-offset: -2px;
-  outline-width: 3px;
 }
-.np-upload-input__item.is-interactive .np-upload-input__item-link:hover,
-.np-upload-input__item.is-interactive .np-upload-input__item-link:active {
+.np-upload-item--link a:hover:before {
+  display: none !important;
+}
+.np-upload-item--link a:hover:after {
+  left: 0 !important;
+  width: 100% !important;
+}
+.np-upload-item--link a:hover,
+.np-upload-item--link a:active {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.np-upload-item--link a:hover .np-upload-button,
+.np-upload-item--link a:active .np-upload-button {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  border-radius: inherit;
 }
-.np-upload-input__item.is-interactive:first-child .np-upload-input__item-link {
-  border-top-width: 0;
-}
-.np-upload-input__item .np-upload-input-errors {
-  padding-left: 0;
-  list-style-type: "";
+.np-upload-item--link:first-of-type a {
+  border-top: 0;
 }
-.np-upload-input__item .np-upload-input-errors > li {
+.np-upload-item__body {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   position: relative;
-  padding-left: 16px;
-  padding-left: var(--size-16);
+  border-radius: inherit;
 }
-.np-upload-input__item .np-upload-input-errors > li::before {
-  content: '•';
+.np-upload-item__remove-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
   position: absolute;
-  display: block;
-  left: 0;
+  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);
+  border: none;
+  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-input__item .np-upload-input-errors > li {
-    padding-left: 32px;
-    padding-left: var(--size-32);
+  .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,172 +1,160 @@
 @import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 
-.np-upload-input__item {
+// 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);
   position: relative;
-  padding: var(--size-16);
-  display: flex;
-  align-items: flex-start;
-  border-left: var(--outerBorder);
-  border-right: var(--outerBorder);
 
-  &: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,
+  &.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));
   }
 
-  & + .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);
-    }
+  &: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-content {
-    padding-right: var(--size-32);
-    flex: 1;
+  &.np-upload-item--link:hover .np-upload-item__link:after {
+    bottom: -1px;
+  }
 
-    @media (max-width: 320px) {
-      padding-right: var(--size-64);
+  &:first-child {
+    & ~ div {
+      border-top: 1px;
     }
   }
 
-  .np-upload-input__title,
-  .np-upload-input__text {
-    margin: 0;
-    text-align-last: left;
-    color: var(--color-content-secondary);
+  &:not(:first-child) {
+    .np-upload-item__link:hover {
+      border-top-color: var(--color-border-neutral);
+    }
   }
 
-  .np-upload-input__title + .np-upload-input__text {
-    margin-top: var(--size-4);
+  &:not(:last-child) {
+    border-bottom: 0;
+  }
+
+
+  &.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);
-    --clickAreaSize: 44px;
-    --buttonTopRightOffset: var(--size-16);
-    // Offset towards the parent's top-right edge
-    // ensuring no overflow on smaller screens
-    --clickAreaTopRightOffset: calc((var(--clickAreaSize) - 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;
+}
 
-    position: absolute;
-    right: var(--buttonTopRightOffset);
-    top: var(--buttonTopRightOffset);
+.np-upload-item--link {
+  a {
+    flex: 1;
+    text-decoration: none;
+    border-top: 1px solid transparent;
+    border-radius: inherit;
 
-    @media (--screen-400-zoom) {
-      --iconSize: var(--size-48);
-      --clickAreaTopRightOffset: calc(-1 * var(--buttonTopRightOffset));
+    &:focus-visible {
+      outline-offset: -2px;
     }
 
-    .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;
-
+    &:hover {
       &:before {
-        content: '';
-        display: block;
-        width: var(--clickAreaSize);
-        height: var(--clickAreaSize);
-        border-radius: 50%;
-        position: absolute;
-        top: var(--clickAreaTopRightOffset);
-        right: var(--clickAreaTopRightOffset);
-      }
-
-      &:hover {
-        background-color: var(--color-sentiment-negative);
-        color: var(--color-contrast-overlay) !important;
+        display: none !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;
-      }
-    }
-
-    .np-upload-input__item-link {
-      padding: var(--size-16);
+    &:hover,
+    &:active {
       text-decoration: none;
-      border-radius: inherit;
-      border-top: 1px solid transparent;
-      background-clip: padding-box;
-
-      &:focus-visible {
-        outline-offset: -2px;
-        outline-width: 3px;
-      }
-
-      &:hover,
-      &:active {
+      .np-upload-button {
         background-color: var(--color-background-neutral);
+        border-radius: inherit;
       }
     }
+  }
 
-    &:first-child {
-      .np-upload-input__item-link {
-        border-top-width: 0;
-      }
-    }
+  &:first-of-type a {
+    border-top: 0;
   }
+}
 
-  .np-upload-input-errors {
-    padding-left: 0;
-    list-style-type: "";
+.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;
+}
 
-    & > li {
-      position: relative;
-      padding-left: var(--size-16);
+.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);
+  }
 
-      &::before {
-        content: '•';
-        position: absolute;
-        display: block;
-        left: 0;
-      }
+  &:hover {
+    background-color: var(--color-sentiment-negative);
+    color: var(--color-contrast-overlay) !important;
+  }
 
-      @media (max-width: 320px) {
-        padding-left: var(--size-32);
-      }
-    }
+  &:before {
+    display: block;
+    width: 44px;
+    height: 44px;
+    content: '';
+    border-radius: 50%;
+    position: absolute;
   }
 }

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -112,7 +112,7 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
     const getDescription = () => {
       if (error || errors?.length || status === Status.FAILED) {
         return (
-          <Body type={Typography.BODY_DEFAULT_BOLD} className="np-upload-input__text text-negative">
+          <Body type={Typography.BODY_DEFAULT_BOLD} className="text-negative">
             {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}
           </Body>
         );
@@ -121,17 +121,15 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
       switch (status) {
         case Status.PENDING:
           return (
-            <Body type={Typography.BODY_DEFAULT} className="np-upload-input__text">
-              {formatMessage(MESSAGES.uploading)}
-            </Body>
+            <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>
           );
         case Status.PROCESSING:
-          return <Body className="np-upload-input__text">{formatMessage(MESSAGES.deleting)}</Body>;
+          return <Body>{formatMessage(MESSAGES.deleting)}</Body>;
         case Status.SUCCEEDED:
         case Status.DONE:
         default:
           return (
-            <Body type={Typography.BODY_DEFAULT_BOLD} className="np-upload-input__text">
+            <Body type={Typography.BODY_DEFAULT_BOLD} className="text-positive">
               {formatMessage(MESSAGES.uploaded)}
             </Body>
           );
@@ -151,36 +149,40 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
 
     return (
       <div
-        className={clsx('np-upload-input__item', { 'is-interactive': isSucceeded && url })}
+        className={clsx('np-upload-item', { 'np-upload-item--link': isSucceeded })}
         data-testid={TEST_IDS.uploadItem}
       >
-        <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" data-testid={TEST_IDS.mediaBody}>
-            <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">
+        <div className="np-upload-item__body">
+          <UploadItemLink
+            ref={linkRef}
+            url={isSucceeded ? url : undefined}
+            singleFileUpload={singleFileUpload}
+            onDownload={onDownloadFile}
+          >
+            <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="np-upload-input__item-button"
+              className={clsx('btn', 'np-upload-item__remove-button', 'media-left', {
+                'np-upload-item--single-file': singleFileUpload,
+              })}
               type="button"
               onClick={() => onDelete()}
             >
               <Bin size={16} />
             </button>
-          </div>
-        )}
+          )}
+        </div>
       </div>
     );
   },

package/src/uploadInput/uploadItem/UploadItemLink.tsx

@@ -10,7 +10,7 @@ type UploadItemLinkProps = PropsWithChildren<{
 export const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, UploadItemLinkProps>(
   ({ children, url, onDownload, singleFileUpload }, ref) => {
     if (!url) {
-      return <div ref={ref as React.RefObject<HTMLDivElement>} className={clsx('np-upload-input__item-container')}>{children}</div>;
+      return <div ref={ref as React.RefObject<HTMLDivElement>}>{children}</div>;
     }
 
     return (
@@ -20,8 +20,8 @@ export const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, Upl
         target="_blank"
         rel="noopener noreferrer"
         className={clsx(
-          'np-upload-input__item-link',
-          singleFileUpload ? 'np-upload-input__item-link--single-file' : '',
+          'np-upload-item__link',
+          singleFileUpload ? 'np-upload-item--single-file' : '',
         )}
         onClick={onDownload}
       >