@transferwise/components 46.40.0 → 46.41.1

package/src/uploadInput/UploadInput.css

@@ -50,8 +50,25 @@
   color: var(--color-sentiment-negative) !important;
 }
 .np-theme-personal .np-upload-input-errors {
+  list-style: none;
   padding-left: 0;
-  list-style-position: inside;
+}
+.np-theme-personal .np-upload-input-errors li {
+  position: relative;
+  padding-left: 16px;
+  padding-left: var(--size-16);
+}
+@media (max-width: 320px) {
+  .np-theme-personal .np-upload-input-errors li {
+    padding-left: 32px;
+    padding-left: var(--size-32);
+  }
+}
+.np-theme-personal .np-upload-input-errors li:before {
+  content: '•';
+  position: absolute;
+  display: block;
+  left: 0;
 }
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;

package/src/uploadInput/UploadInput.less

@@ -59,8 +59,24 @@
     }
 
     &-errors {
+      list-style: none;
       padding-left: 0;
-      list-style-position: inside;
+
+      li {
+        position: relative;
+        padding-left: var(--size-16);
+
+        @media (--screen-400-zoom) {
+          padding-left: var(--size-32);
+        }
+
+        &:before {
+          content: '•';
+          position: absolute;
+          display: block;
+          left: 0;
+        }
+      }
     }
 
     .status-circle {

package/src/uploadInput/UploadInput.tests.story.tsx

@@ -125,13 +125,24 @@ WithFileErrors.args = {
       id: 5,
       filename: 'Error with multiple `string` errors passed in `array`.png',
       status: Status.FAILED,
-      errors: ['Error 1', 'Error 2', 'Error 3'],
+      errors: [
+        'Error 1',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        'Error 3',
+      ],
     },
     {
       id: 6,
       filename: 'Error with multiple `obj` errors passed in `array`.png',
       status: Status.FAILED,
-      errors: [{ message: 'Error 1' }, { message: 'Error 2' }, { message: 'Error 3' }],
+      errors: [
+        { message: 'Error 1' },
+        {
+          message:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        },
+        { message: 'Error 3' },
+      ],
     },
   ],
   multiple: true,

package/src/uploadInput/uploadButton/UploadButton.css

@@ -8,6 +8,9 @@
   border-color: #c9cbce !important;
   border-color: var(--color-interactive-secondary) !important;
 }
+.np-upload-button-container.droppable-dropping:before {
+  z-index: 2;
+}
 .np-upload-button-container input[type="file"] {
   opacity: 0;
   z-index: -1;
@@ -18,6 +21,7 @@
 }
 .np-upload-button {
   width: 100%;
+  border-top: 1px solid transparent;
   padding: 16px;
   padding: var(--padding-small);
   border-radius: 0;

package/src/uploadInput/uploadButton/UploadButton.less

@@ -7,6 +7,10 @@
 
   &.droppable-dropping {
     border-color: var(--color-interactive-secondary) !important;
+
+    &:before {
+      z-index: 2;
+    }
   }
 
   input[type="file"] {
@@ -22,6 +26,7 @@
 
 .np-upload-button {
   width: 100%;
+  border-top: 1px solid transparent;
   padding: var(--padding-small);
   border-radius: 0;
 

package/src/uploadInput/uploadItem/UploadItem.css

@@ -1,30 +1,49 @@
 .np-upload-item {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
+  position: relative;
 }
-.np-upload-item:first-child ~ div:before {
+.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: relative;
+  position: absolute;
   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);
+  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;
+}
+.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+  bottom: -1px;
 }
 .np-upload-item:first-child ~ div {
-  border-top: 0;
+  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:before,
-.np-upload-button-container:hover:before {
-  margin: 0 !important;
+.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-item.np-upload-item__link:hover + div:before,
-.np-upload-button-container:hover + div:before {
-  margin: 0 !important;
+.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);
@@ -41,17 +60,29 @@
   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__body {
   display: flex;
@@ -76,6 +107,7 @@
   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);

package/src/uploadInput/uploadItem/UploadItem.less

@@ -1,42 +1,69 @@
 @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);
+  position: relative;
 
-  &:first-child ~ div:before {
+  &: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: relative;
+    position: absolute;
     height: 1px;
     background-color: var(--color-border-neutral);
     content: " ";
-    margin: 0 var(--size-16);
+    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: 0;
+      border-top: 1px;
+    }
+  }
+
+  &:not(:first-child) {
+    .np-upload-item--link:hover {
+      border-top-color: var(--color-border-neutral);
     }
   }
 
   &: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-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-button-container:has(:focus-visible) {
-  .ring();
-  border-color: transparent;
-  outline-offset: -3px;
+.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,
@@ -49,15 +76,31 @@
   a {
     flex: 1;
     text-decoration: none;
+    border-top: 1px solid transparent;
     border-radius: inherit;
+
     &:focus-visible {
       outline-offset: -2px;
     }
 
+    &:hover {
+      &:before {
+        display: none !important;
+      }
+
+      &:after {
+        left: 0 !important;
+        width: 100% !important;
+      }
+    }
+
     &:hover,
     &:active {
       text-decoration: none;
-      background-color: var(--color-background-neutral);
+      .np-upload-button {
+        background-color: var(--color-background-neutral);
+        border-radius: inherit;
+      }
     }
   }
 }
@@ -84,6 +127,7 @@
   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);

package/src/dateInput/DateInput.rtl.spec.tsx

@@ -1,17 +0,0 @@
-import { Field } from '../field/Field';
-import { mockMatchMedia, mockResizeObserver, render, screen } from '../test-utils';
-import DateInput from './DateInput';
-
-mockMatchMedia();
-mockResizeObserver();
-
-describe('DateInput', () => {
-  it('supports `Field` for labeling', () => {
-    render(
-      <Field label="Date of birth">
-        <DateInput onChange={() => {}} />
-      </Field>,
-    );
-    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Date of birth/);
-  });
-});