@transferwise/components 0.0.0-experimental-7f34f59 → 0.0.0-experimental-d1c5355

package/src/uploadInput/uploadItem/UploadItem.css

@@ -1,11 +1,32 @@
-.np-upload-item {
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
+.np-upload-input__item {
   position: relative;
+  padding: 16px;
+  padding: var(--size-16);
+  display: flex;
+  align-items: flex-start;
+}
+.np-upload-input__item .np-upload-input__item-content {
+  padding-top: 2px;
+  flex: 1;
+}
+.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-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 {
+.np-upload-input__item .np-upload-input__title + .np-upload-input__text {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+  line-height: 22px;
+}
+.np-upload-input__item .np-upload-input__icon {
+  padding-right: 16px;
+  padding-right: var(--size-16);
+}
+.np-upload-input__item:not(:first-child)::before {
   display: block;
   position: absolute;
   height: 1px;
@@ -16,129 +37,75 @@
   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;
 }
-.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
-  bottom: -1px;
-}
-.np-upload-item:first-child ~ div {
-  border-top: 1px;
-}
-.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-item:not(:last-child) {
-  border-bottom: 0;
-}
-.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-button-container:hover:before,
-.np-upload-button-container.droppable-dropping:before {
-  left: 0 !important;
-  width: 100% !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-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;
-  border-top: 1px solid transparent;
-  border-radius: inherit;
-}
-.np-upload-item--link a:focus-visible {
-  outline-offset: -2px;
-}
-.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-item--link:first-of-type a {
-  border-top: 0;
-}
-.np-upload-item__body {
+.np-upload-input__item .np-upload-input__item-link,
+.np-upload-input__item .np-upload-input__item-container {
+  align-items: flex-start;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  border-radius: inherit;
+  width: 100%;
 }
-.np-upload-item__remove-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: flex-start;
+.np-upload-input__item .np-upload-input__item-action {
   position: absolute;
+  top: 18px;
+  right: 16px;
+  right: var(--size-16);
+}
+.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   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;
+  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);
-  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-item__remove-button {
-    top: 16px;
-    top: var(--size-16);
-    right: 16px;
-    right: var(--size-16);
+  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
     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-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
+  background-color: var(--color-background-neutral-hover);
 }
-.np-upload-item__remove-button:before {
-  display: block;
-  width: 44px;
-  height: 44px;
-  content: '';
-  border-radius: 50%;
-  position: absolute;
+.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:active {
+  background-color: var(--color-background-neutral-active);
+}
+.np-upload-input__item.is-interactive {
+  padding: 0;
+}
+.np-upload-input__item.is-interactive:hover + .np-upload-input__item::before,
+.np-upload-input__item.is-interactive:hover::before {
+  width: 100%;
+  left: 0;
+}
+.np-upload-input__item.is-interactive:hover + .np-upload-input__item::before {
+  top: -1px;
+}
+.np-upload-input__item.is-interactive .np-upload-input__item-link {
+  padding: 16px;
+  padding: var(--size-16);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  border-radius: inherit;
+}
+.np-upload-input__item.is-interactive .np-upload-input__item-link:focus-visible {
+  outline-offset: -3px;
+  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 {
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
 }

package/src/uploadInput/uploadItem/UploadItem.less

@@ -1,13 +1,33 @@
 @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;
+
+  .np-upload-input__item-content {
+    padding-top: 2px;
+    flex: 1;
+  }
+
+  .np-upload-input__title,
+  .np-upload-input__text {
+    margin: 0;
+    text-align-last: left;
+    color: var(--color-content-secondary);
+  }
+
+  .np-upload-input__title + .np-upload-input__text {
+    margin-top: var(--size-4);
+    line-height: 22px;
+  }
+
+  .np-upload-input__icon {
+    padding-right: var(--size-16);
+  }
 
-  &: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 {
+  &:not(:first-child)::before {
     display: block;
     position: absolute;
     height: 1px;
@@ -15,146 +35,76 @@
     content: " ";
     left: var(--size-16);
     width: calc(100% - 2 * var(--size-16));
-  }
-
-  &: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-item--link:hover .np-upload-item__link:after {
-    bottom: -1px;
-  }
-
-  &:first-child {
-    & ~ div {
-      border-top: 1px;
-    }
+  .np-upload-input__item-link,
+  .np-upload-input__item-container {
+    align-items: flex-start;
+    display: flex;
+    width: 100%;
   }
 
-  &:not(:first-child) {
-    .np-upload-item__link:hover {
-      border-top-color: var(--color-border-neutral);
-    }
-  }
+  .np-upload-input__item-action {
+    position: absolute;
+    top: 18px;
+    right: var(--size-16);
 
-  &:not(:last-child) {
-    border-bottom: 0;
-  }
+    .np-upload-input__item-button {
+      appearance: none;
+      height: var(--size-24);
+      width: var(--size-24);
+      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;
+
+      @media (--screen-400-zoom) {
+        height: var(--size-48);
+        width: var(--size-48);
+      }
 
+      &:hover {
+        background-color: var(--color-background-neutral-hover);
+      }
 
-  &.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;
+      &:active {
+        background-color: var(--color-background-neutral-active);
+      }
     }
   }
-}
 
-.np-upload-button-container {
-  &:hover:before,
-  &.droppable-dropping:before {
-    left: 0 !important;
-    width: 100% !important;
-  }
-
-  &: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 {
-    flex: 1;
-    text-decoration: none;
-    border-top: 1px solid transparent;
-    border-radius: inherit;
-
-    &:focus-visible {
-      outline-offset: -2px;
-    }
+  &.is-interactive {
+    padding: 0;
 
     &:hover {
-      &:before {
-        display: none !important;
+      + .np-upload-input__item::before,
+      &::before {
+        width: 100%;
+        left: 0;
       }
-
-      &:after {
-        left: 0 !important;
-        width: 100% !important;
+  
+      + .np-upload-input__item::before {
+        top: -1px;
       }
     }
 
-    &:hover,
-    &:active {
+    .np-upload-input__item-link {
+      padding: var(--size-16);
       text-decoration: none;
-      .np-upload-button {
-        background-color: var(--color-background-neutral);
-        border-radius: inherit;
-      }
-    }
-  }
+      border-radius: inherit;
 
-  &:first-of-type a {
-    border-top: 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-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);
-  }
-
-  &:hover {
-    background-color: var(--color-sentiment-negative);
-    color: var(--color-contrast-overlay) !important;
-  }
+      &:focus-visible {
+        outline-offset: -3px;
+        outline-width: 3px;
+      }
 
-  &:before {
-    display: block;
-    width: 44px;
-    height: 44px;
-    content: '';
-    border-radius: 50%;
-    position: absolute;
+      &:hover,
+      &:active {
+        background: var(--color-background-neutral);
+      }
+    }
   }
 }

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -85,7 +85,7 @@ const UploadItem = ({
     }
 
     return (
-      <ul className="np-upload-input-errors m-b-0">
+      <ul className="np-upload-input-errors m-b-0 p-l-2">
         {errors.map((error, index) => {
           // eslint-disable-next-line react/no-array-index-key
           return <li key={index}>{getErrorMessage(error)}</li>;
@@ -97,7 +97,7 @@ const UploadItem = ({
   const getDescription = () => {
     if (error || errors?.length || status === Status.FAILED) {
       return (
-        <Body type={Typography.BODY_DEFAULT_BOLD} className="text-negative">
+        <Body type={Typography.BODY_DEFAULT_BOLD} className="np-upload-input__text text-negative">
           {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}
         </Body>
       );
@@ -105,14 +105,18 @@ const UploadItem = ({
 
     switch (status) {
       case Status.PENDING:
-        return <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>;
+        return (
+          <Body type={Typography.BODY_DEFAULT} className="np-upload-input__text">
+            {formatMessage(MESSAGES.uploading)}
+          </Body>
+        );
       case Status.PROCESSING:
-        return <Body>{formatMessage(MESSAGES.deleting)}</Body>;
+        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="text-positive">
+          <Body type={Typography.BODY_DEFAULT_BOLD} className="np-upload-input__text">
             {formatMessage(MESSAGES.uploaded)}
           </Body>
         );
@@ -132,38 +136,34 @@ const UploadItem = ({
 
   return (
     <div
-      className={clsx('np-upload-item', { 'np-upload-item--link': isSucceeded })}
+      className={clsx('np-upload-input__item', { 'is-interactive': isSucceeded && url })}
       data-testid={TEST_IDS.uploadItem}
     >
-      <div className="np-upload-item__body">
-        <UploadItemLink
-          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 && (
+      <UploadItemLink
+        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={clsx('btn', 'np-upload-item__remove-button', 'media-left', {
-              'np-upload-item--single-file': singleFileUpload,
-            })}
+            className="np-upload-input__item-button"
             type="button"
             onClick={() => onDelete()}
           >
             <Bin size={16} />
           </button>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   );
 };

package/src/uploadInput/uploadItem/UploadItemLink.tsx

@@ -14,7 +14,7 @@ export const UploadItemLink = ({
   singleFileUpload,
 }: UploadItemLinkProps) => {
   if (!url) {
-    return <div>{children}</div>;
+    return <div className={clsx('np-upload-input__item-container')}>{children}</div>;
   }
 
   return (
@@ -23,8 +23,8 @@ export const UploadItemLink = ({
       target="_blank"
       rel="noopener noreferrer"
       className={clsx(
-        'np-upload-item__link',
-        singleFileUpload ? 'np-upload-item--single-file' : '',
+        'np-upload-input__item-link',
+        singleFileUpload ? 'np-upload-input__item-link--single-file' : '',
       )}
       onClick={onDownload}
     >