@transferwise/components 46.67.1 → 46.68.0

package/src/typeahead/typeaheadInput/TypeaheadInput.tsx

@@ -20,10 +20,12 @@ export type TypeaheadInputProps<T> = {
   onFocus: () => void;
   onPaste: React.ClipboardEventHandler<HTMLInputElement>;
   renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;
+  ariaActivedescendant?: string;
 } & Pick<TypeaheadProps<T>, 'id' | 'name' | 'autoFocus' | 'multiple' | 'placeholder' | 'maxHeight'>;
 
 type TypeaheadInputState = {
   inputWidth: number;
+  keyboardFocusedOptionIndex: number | null;
 };
 
 export default class TypeaheadInput<T> extends Component<
@@ -37,6 +39,7 @@ export default class TypeaheadInput<T> extends Component<
     super(props);
     this.state = {
       inputWidth: DEFAULT_INPUT_MIN_WIDTH,
+      keyboardFocusedOptionIndex: null,
     };
   }
 
@@ -76,6 +79,7 @@ export default class TypeaheadInput<T> extends Component<
       onFocus,
       onPaste,
       autoComplete,
+      ariaActivedescendant, // Declare the ariaActivedescendant variable
     } = this.props;
     const { inputWidth } = this.state;
 
@@ -86,12 +90,17 @@ export default class TypeaheadInput<T> extends Component<
         className={clsx(multiple && 'typeahead__input')}
         name={name}
         id={`input-${typeaheadId}`}
+        aria-activedescendant={
+          ariaActivedescendant
+            ? `menu-${typeaheadId} ${ariaActivedescendant}`
+            : `menu-${typeaheadId}`
+        }
         autoFocus={autoFocus}
         placeholder={hasPlaceholder ? placeholder : ''}
         aria-autocomplete="list"
         aria-expanded={dropdownOpen}
         aria-haspopup="listbox"
-        aria-controls={`menu-${typeaheadId}`}
+        aria-controls={dropdownOpen ? `menu-${typeaheadId}` : undefined}
         autoComplete={autoComplete}
         role="combobox"
         value={value}

package/src/typeahead/typeaheadOption/TypeaheadOption.spec.js

@@ -51,6 +51,14 @@ describe('Typeahead Option', () => {
     expect(component.is('.tw-dropdown-item--focused')).toBe(true);
   });
 
+  it('expect aria-selected to be true', () => {
+    component.setProps({
+      selected: true,
+    });
+
+    expect(component.prop('aria-selected')).toBe('true');
+  });
+
   it('calls onClick when clicked', () => {
     const onClick = jest.fn();
     component.setProps({

package/src/typeahead/typeaheadOption/TypeaheadOption.tsx

@@ -1,5 +1,5 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import { clsx } from 'clsx';
+import { forwardRef } from 'react';
 
 import { TypeaheadOption } from '../Typeahead';
 import highlight from '../util/highlight';
@@ -9,21 +9,24 @@ export type TypeaheadOptionProps<T> = {
   selected?: boolean;
   onClick?: React.MouseEventHandler;
   query?: string;
+  id?: string;
 };
 
-const Option = <T,>(props: TypeaheadOptionProps<T>) => {
-  const { option, selected = false, onClick = () => {}, query = '' } = props;
+const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {
+  const { option, selected = false, onClick = () => {}, query = '', id } = props;
   const { label, note, secondary } = option;
 
   return (
     <li
+      ref={ref}
       role="option"
-      aria-selected="false"
+      aria-selected={selected ? 'true' : 'false'}
+      id={`option-${id}`}
       className={clsx('typeahead__option tw-dropdown-item clickable', {
         'tw-dropdown-item--focused': selected,
       })}
     >
-      <a className="dropdown-item" href="#" tabIndex={-1} onClick={onClick}>
+      <a className="dropdown-item" href="#" tabIndex={0} onClick={onClick}>
         <span>{highlight(label, query)}</span>
         {note && <span className="np-text-body-default m-l-1">{note}</span>}
         {secondary && (
@@ -32,6 +35,6 @@ const Option = <T,>(props: TypeaheadOptionProps<T>) => {
       </a>
     </li>
   );
-};
+});
 
 export default Option;

package/src/uploadInput/UploadInput.css

@@ -1,86 +1,18 @@
-.np-upload-input.form-control {
-  height: auto;
-  padding: 0;
-  padding: initial;
+.np-upload-input {
+  --outerBorder: 1px solid var(--color-interactive-secondary);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
 }
-.np-upload-input > div:first-child,
-.np-upload-input > div:first-child .np-upload-item--single-file,
-.np-upload-input > div:first-child .np-upload-item--link {
-  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 .np-upload-input__section {
+  margin: 0;
 }
-.np-upload-input > div:last-child {
-  border-bottom-left-radius: 10px;
-  border-bottom-left-radius: var(--radius-small);
-  border-bottom-right-radius: 10px;
-  border-bottom-right-radius: var(--radius-small);
+.np-upload-input .np-upload-input__section:only-child .np-upload-input__item {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  border-bottom: var(--outerBorder);
 }
-.np-theme-personal .np-upload-input.disabled .btn {
-  cursor: inherit;
-}
-.np-theme-personal .np-upload-input .np-upload-icon {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-upload-input .media-body {
-  padding-right: 32px;
-  padding-right: var(--size-32);
-  color: var(--color-content-link);
-  white-space: break-spaces;
-}
-@media (max-width: 320px) {
-  .np-theme-personal .np-upload-input .media-body {
-    padding-right: 64px;
-    padding-right: var(--size-64);
-  }
-}
-.np-theme-personal .np-upload-input .media-body .np-text-body-large-bold {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-underline-offset: 0.3em;
-}
-.np-theme-personal .np-upload-input .media-body .np-text-body-default,
-.np-theme-personal .np-upload-input .media-body .np-upload-description,
-.np-theme-personal .np-upload-input .media-body .text-positive {
-  color: #5d7079 !important;
-  color: var(--color-content-secondary) !important;
-}
-.np-theme-personal .np-upload-input .media-body .text-negative {
-  color: var(--color-sentiment-negative) !important;
-}
-.np-theme-personal .np-upload-input-errors {
-  list-style: none;
-  padding-left: 0;
-}
-.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;
+.np-upload-input .np-upload-input__section:has(.np-upload-input__item:last-child.is-interactive:hover):not(:has(.np-upload-input__item-button:hover)) + .np-upload-input__section--uploader .np-upload-input__upload-button::before {
   left: 0;
-}
-.np-theme-personal .np-upload-input .status-circle {
-  width: 24px;
-  width: var(--size-x-small);
-  height: 24px;
-  height: var(--size-x-small);
-}
-@media (max-width: 320px) {
-  .np-theme-personal .np-upload-input .status-circle {
-    width: 48px;
-    width: var(--size-large);
-    height: 48px;
-    height: var(--size-large);
-  }
+  width: 100%;
+  top: 0;
 }

package/src/uploadInput/UploadInput.less

@@ -3,90 +3,28 @@
 @import (reference) './uploadItem/UploadItem.less';
 
 .np-upload-input {
-  &.form-control {
-    height: auto;
-    padding: initial;
-  }
-
-  & > div {
-    &:first-child,
-    &:first-child .np-upload-item--single-file,
-    &:first-child .np-upload-item--link {
-      border-top-left-radius: var(--radius-small);
-      border-top-right-radius: var(--radius-small);
-    }
-
-    &:last-child {
-      border-bottom-left-radius: var(--radius-small);
-      border-bottom-right-radius: var(--radius-small);
-    }
-  }
-}
-
-.np-theme-personal {
-  .np-upload-input {
-    &.disabled .btn {
-      cursor: inherit;
-    }
-
-    .np-upload-icon {
-      color: var(--color-interactive-primary);
-    }
-
-    .media-body {
-      padding-right: var(--size-32);
-      color: var(--color-content-link);
-      white-space: break-spaces;
-
-      @media (--screen-400-zoom) {
-        padding-right: var(--size-64);
-      }
-
-      .np-text-body-large-bold {
-        text-decoration: underline;
-        .link-underline();
-      }
-
-      .np-text-body-default,
-      .np-upload-description,
-      .text-positive {
-        color: var(--color-content-secondary) !important;
-      }
-
-      .text-negative {
-        color: var(--color-sentiment-negative) !important;
-      }
-    }
-
-    &-errors {
-      list-style: none;
-      padding-left: 0;
+  --outerBorder: 1px solid var(--color-interactive-secondary);
+  border-radius: var(--radius-small);
 
-      li {
-        position: relative;
-        padding-left: var(--size-16);
+  .np-upload-input__section {
+    margin: 0;
 
-        @media (--screen-400-zoom) {
-          padding-left: var(--size-32);
-        }
-
-        &:before {
-          content: '•';
-          position: absolute;
-          display: block;
-          left: 0;
-        }
+    // only 1 file allowed and already uploaded (no UploadButton shown)
+    &:only-child {
+      .np-upload-input__item {
+        border-radius: var(--radius-small);
+        border-bottom: var(--outerBorder);
       }
     }
 
-    .status-circle {
-      width: var(--size-x-small);
-      height: var(--size-x-small);
-
-      @media (--screen-400-zoom) {
-        width: var(--size-large);
-        height: var(--size-large);
-      }
+    // if the last item in the file list is interactive (not an error)
+    // and the user is hovering over it, then we need to adjust the
+    // bottom separator, which happens to be in .np-upload-input__section--uploader
+    &:has(.np-upload-input__item:last-child.is-interactive:hover):not(:has(.np-upload-input__item-button:hover))
+    + .np-upload-input__section--uploader .np-upload-input__upload-button::before {
+      left: 0;
+      width: 100%;
+      top: 0;
     }
   }
-}
+}

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

@@ -25,23 +25,23 @@ const files = [
     filename: 'purchase-receipt-1.pdf',
   },
   {
-    id: 6,
-    filename: 'purchase-receipt-1.pdf',
+    id: 3,
+    filename: 'purchase-receipt-2.pdf',
     url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
   },
   {
-    id: 3,
+    id: 4,
     filename: 'receipt failed.png',
     status: Status.FAILED,
   },
   {
-    id: 4,
+    id: 5,
     filename: 'receipt failed With error string.png',
     status: Status.FAILED,
     error: 'Something went wrong',
   },
   {
-    id: 5,
+    id: 6,
     filename: 'receipt failed With error object.png',
     status: Status.FAILED,
     error: { message: 'Something went wrong' },

package/src/uploadInput/UploadInput.tsx

@@ -345,39 +345,50 @@ const UploadInput = ({
         className={clsx('np-upload-input', className, { disabled })}
         {...inputAttributes}
       >
-        {uploadedFiles.map((file, index) => (
-          <UploadItem
-            key={file.id}
-            ref={(el: UploadItemRef | null) => {
-              itemRefs.current[index] = el;
-            }}
-            file={file}
-            singleFileUpload={!multiple}
-            canDelete={
-              (!!onDeleteFile || file.status === Status.FAILED) &&
-              (!file.status || !PROGRESS_STATUSES.has(file.status))
-            }
-            onDelete={
-              file.status === Status.FAILED
-                ? () => removeFile(file)
-                : () => setMarkedFileForDelete(file)
-            }
-            onDownload={onDownload}
-          />
-        ))}
+        <div
+          className="np-upload-input__section"
+          aria-live="polite"
+          aria-relevant="all"
+          role="region"
+        >
+          {uploadedFiles.map((file, index) => (
+            <UploadItem
+              key={file.id}
+              ref={(el: UploadItemRef | null) => {
+                itemRefs.current[index] = el;
+              }}
+              file={file}
+              singleFileUpload={!multiple}
+              canDelete={
+                (!!onDeleteFile || file.status === Status.FAILED) &&
+                (!file.status || !PROGRESS_STATUSES.has(file.status))
+              }
+              onDelete={
+                file.status === Status.FAILED
+                  ? () => removeFile(file)
+                  : () => setMarkedFileForDelete(file)
+              }
+              onDownload={onDownload}
+            />
+          ))}
+        </div>
         {(multiple || (!multiple && !uploadedFiles.length)) && (
-          <UploadButton
-            ref={uploadInputRef}
-            id={id}
-            uploadButtonTitle={uploadButtonTitle}
-            disabled={areMaximumFilesUploadedAlready() || disabled}
-            multiple={multiple}
-            fileTypes={fileTypes}
-            sizeLimit={sizeLimit}
-            description={description}
-            maxFiles={maxFiles}
-            onChange={addFiles}
-          />
+          <div className="np-upload-input__section np-upload-input__section--uploader">
+            <UploadButton
+              ref={uploadInputRef}
+              id={id}
+              uploadButtonTitle={uploadButtonTitle}
+              disabled={areMaximumFilesUploadedAlready() || disabled}
+              multiple={multiple}
+              fileTypes={fileTypes}
+              sizeLimit={sizeLimit}
+              description={description}
+              maxFiles={maxFiles}
+              withEntries={Boolean(uploadedFiles.length)}
+              onChange={addFiles}
+
+            />
+          </div>
         )}
       </div>
       <Modal

package/src/uploadInput/uploadButton/UploadButton.css

@@ -1,44 +1,90 @@
-.np-upload-button-container {
-  border-style: solid;
-}
-.np-upload-button-container .droppable-card-content {
+.np-upload-input__upload-button {
+  position: relative;
+  padding: 16px;
+  padding: var(--size-16);
   display: flex;
+  align-items: center;
+  margin: 0;
+  border-bottom-left-radius: 10px;
+  border-bottom-left-radius: var(--radius-small);
+  border-bottom-right-radius: 10px;
+  border-bottom-right-radius: var(--radius-small);
+  border: var(--outerBorder);
+  cursor: pointer;
+}
+.np-upload-input__upload-button .np-upload-input__title {
+  color: var(--color-content-link);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-underline-offset: 0.3em;
+}
+.np-upload-input__upload-button .np-upload-input__title + .np-upload-input__text {
+  margin-top: 4px;
+  margin-top: var(--size-4);
 }
-.np-upload-button-container.droppable-dropping {
-  border-color: #c9cbce !important;
-  border-color: var(--color-interactive-secondary) !important;
+.np-upload-input__upload-button .np-upload-input__icon {
+  padding-right: 16px;
+  padding-right: var(--size-16);
+  color: var(--color-interactive-primary);
 }
-.np-upload-button-container.droppable-dropping:before {
-  z-index: 2;
+.np-upload-input__upload-button.is-dropping .np-upload-input__icon,
+.np-upload-input__upload-button.is-dropping .np-upload-input__item-content {
+  display: none;
 }
-.np-upload-button-container input[type="file"] {
+.np-upload-input__upload-button:focus-within,
+.np-upload-input__upload-button:focus-visible {
+  outline: var(--ring-outline-color) solid 3px;
+  outline-offset: -3px;
+}
+.np-upload-input__upload-button-input {
+  position: absolute;
   opacity: 0;
   z-index: -1;
-  position: absolute;
 }
-.np-upload-button-container .np-upload-button {
-  border: none;
+.np-upload-input__upload-button-input:focus {
+  outline: none;
 }
-.np-upload-button {
-  width: 100%;
-  border-top: 1px solid transparent;
-  padding: 16px;
-  padding: var(--padding-small);
-  border-radius: 0;
+.np-upload-input__upload-button .np-upload-input__drop-file-overlay {
+  display: flex;
+  flex: 1;
+  padding: 13px 0 !important;
+  background-color: transparent;
+  transition: transform 0.3s ease;
+  position: relative;
 }
-label.np-upload-button:not(.disabled):hover,
-label.np-upload-button:not(.disabled):active {
-  background-color: var(--color-background-screen-hover);
+.np-upload-input__upload-button--with-entries {
+  border-top-width: 0;
 }
-.disabled label.np-upload-button:not(.disabled):hover,
-.disabled label.np-upload-button:not(.disabled):active {
-  background-color: transparent;
+.np-upload-input__upload-button--with-entries:before {
+  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));
+  top: 0;
+}
+.np-upload-input__upload-button--without-entries {
+  border-top: var(--outerBorder);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
 }
-.np-upload-button .media {
-  align-items: flex-start;
+.np-upload-input__upload-button--enabled.is-dropping,
+.np-upload-input__upload-button--enabled:hover,
+.np-upload-input__upload-button--enabled:active {
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
+}
+.np-upload-input__upload-button--enabled.is-dropping:before,
+.np-upload-input__upload-button--enabled:hover:before,
+.np-upload-input__upload-button--enabled:active:before {
+  width: 100%;
+  left: 0;
 }
-@media (max-width: 320px) {
-  .np-upload-icon {
-    padding-left: 0;
-  }
+.np-upload-input__upload-button--disabled {
+  cursor: inherit;
 }

package/src/uploadInput/uploadButton/UploadButton.less

@@ -1,55 +1,97 @@
-.np-upload-button-container {
-  border-style: solid;
+.np-upload-input__upload-button {
+  position: relative;
+  padding: var(--size-16);
+  display: flex;
+  align-items: center;
+  margin: 0;
+  border-bottom-left-radius: var(--radius-small);
+  border-bottom-right-radius: var(--radius-small);
+  border: var(--outerBorder);
+  cursor: pointer;
 
-  .droppable-card-content {
-    display: flex;
+  .np-upload-input__title {
+    color: var(--color-content-link);
+    text-decoration: underline;
+    text-underline-offset: 0.3em;
+
+    & + .np-upload-input__text {
+      margin-top: var(--size-4);
+    }
   }
 
-  &.droppable-dropping {
-    border-color: var(--color-interactive-secondary) !important;
+  .np-upload-input__icon {
+    padding-right: var(--size-16);
+    color: var(--color-interactive-primary);
+  }
 
-    &:before {
-      z-index: 2;
+  &.is-dropping {
+    .np-upload-input__icon,
+    .np-upload-input__item-content {
+      display: none;
     }
   }
 
-  input[type="file"] {
+  &:focus-within,
+  &:focus-visible {
+    outline: var(--ring-outline-color) solid 3px;
+    outline-offset: -3px;
+  }
+
+  &-input {
+    position: absolute;
     opacity: 0;
     z-index: -1;
-    position: absolute;
+
+    &:focus {
+      outline: none;
+    }
   }
 
-  .np-upload-button {
-    border: none;
+  .np-upload-input__drop-file-overlay {
+    display: flex;
+    flex: 1;
+    padding: 13px 0 !important;
+    background-color: transparent;
+    transition: transform 0.3s ease;
+    position: relative;
   }
 }
 
-.np-upload-button {
-  width: 100%;
-  border-top: 1px solid transparent;
-  padding: var(--padding-small);
-  border-radius: 0;
-
-  label& {
-    &:not(.disabled) {
-      &:hover,
-      &:active {
-        background-color: var(--color-background-screen-hover);
-
-        .disabled & {
-          background-color: transparent;
-        }
-      }
-    }
-  }
+// at least 1 file uploaded or 1 error visible
+.np-upload-input__upload-button--with-entries {
+  border-top-width: 0;
 
-  .media {
-    align-items: flex-start;
+  &:before {
+    display: block;
+    position: absolute;
+    height: 1px;
+    background-color: var(--color-border-neutral);
+    content: " ";
+    left: var(--size-16);
+    width: calc(100% - 2 * var(--size-16));
+    top: 0;
   }
 }
 
-.np-upload-icon{
-  @media (max-width: 320px) {
-    padding-left: 0;
+// no files uploaded (only button shown)
+.np-upload-input__upload-button--without-entries {
+  border-top: var(--outerBorder);
+  border-radius: var(--radius-small);
+}
+
+.np-upload-input__upload-button--enabled {
+  &.is-dropping,
+  &:hover,
+  &:active {
+    background: var(--color-background-neutral);
+
+    &:before {
+      width: 100%;
+      left: 0;
+    }
   }
 }
+
+.np-upload-input__upload-button--disabled {
+  cursor: inherit;
+}