@transferwise/components 0.0.0-experimental-5ac3a46 → 0.0.0-experimental-215a547

package/src/main.css

@@ -5390,69 +5390,95 @@ html:not([dir="rtl"]) .np-navigation-option {
 .tw-droppable-sm {
   min-height: 245px;
 }
-.np-upload-button-container {
-  border-style: solid;
+.np-upload-button {
+  width: 100%;
+  border: 0 !important;
+  padding: 12px 16px;
+  padding: var(--size-12) var(--size-16);
+}
+.np-upload-button.np-upload-accent {
+  color: #00a2dd;
+  color: var(--color-interactive-accent);
+}
+label.np-upload-button:not(.disabled):hover,
+label.np-upload-button:not(.disabled):focus-visible,
+label.np-upload-button:not(.disabled):active {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-theme-personal label.np-upload-button:not(.disabled):hover,
+.np-theme-personal label.np-upload-button:not(.disabled):focus-visible,
+.np-theme-personal label.np-upload-button:not(.disabled):active {
+  background-color: var(--color-background-screen-hover);
+}
+.np-theme-personal .disabled label.np-upload-button:not(.disabled):hover,
+.np-theme-personal .disabled label.np-upload-button:not(.disabled):focus-visible,
+.np-theme-personal .disabled label.np-upload-button:not(.disabled):active {
+  background-color: transparent;
+}
+.np-upload-button .np-upload-icon {
+  display: flex;
+  align-items: center;
+}
+.np-upload-button-container.droppable {
+  border: 0;
 }
 .np-upload-button-container .droppable-card-content {
   display: flex;
 }
-.np-upload-button-container.droppable-dropping {
-  border-color: #c9cbce !important;
-  border-color: var(--color-interactive-secondary) !important;
+.np-theme-personal .np-upload-button-container .droppable-card-content {
+  border-radius: calc(10px - 1px);
+  border-radius: calc(var(--radius-small) - 1px);
 }
 .np-upload-button-container input[type="file"] {
   opacity: 0;
   z-index: -1;
   position: absolute;
 }
-.np-upload-button-container .np-upload-button {
-  border: none;
-}
-.np-upload-button {
-  width: 100%;
-  padding: 16px;
-  padding: var(--padding-small);
-  border-radius: 0;
-}
-label.np-upload-button:not(.disabled):hover,
-label.np-upload-button:not(.disabled):active {
-  background-color: var(--color-background-screen-hover);
+.np-upload-button-container input[type="file"]:focus-visible + label {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
 }
-.disabled label.np-upload-button:not(.disabled):hover,
-.disabled label.np-upload-button:not(.disabled):active {
-  background-color: transparent;
+.np-upload-input {
+  border: 1px solid #c9cbce;
+  border: 1px solid var(--color-interactive-secondary);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
 }
-.np-upload-button .media {
-  align-items: flex-start;
+.np-upload-input:has(:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
 }
 .np-upload-input.form-control {
   height: auto;
   padding: 0;
   padding: initial;
 }
-.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 > 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-theme-personal .np-upload-input {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
 }
 .np-theme-personal .np-upload-input.disabled .btn {
   cursor: inherit;
 }
+.np-theme-personal .np-upload-input .np-upload-button {
+  border-radius: calc(10px - 1px);
+  border-radius: calc(var(--radius-small) - 1px);
+  padding: 16px;
+  padding: var(--padding-small);
+}
+.np-theme-personal .np-upload-input .np-upload-input--square-top {
+  border-top-right-radius: 0px;
+  border-top-left-radius: 0px;
+}
+.np-theme-personal .np-upload-input .np-upload-item__remove-button {
+  border-radius: 0;
+  border-radius: initial;
+}
 .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;
 }
@@ -5470,10 +5496,6 @@ label.np-upload-button:not(.disabled):active {
 .np-theme-personal .np-upload-input .media-body .text-negative {
   color: var(--color-sentiment-negative) !important;
 }
-.np-theme-personal .np-upload-input-errors {
-  padding-left: 0;
-  list-style-position: inside;
-}
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;
   width: var(--size-x-small);
@@ -5488,114 +5510,79 @@ label.np-upload-button:not(.disabled):active {
     height: var(--size-large);
   }
 }
-.np-upload-item {
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
-}
-.np-upload-item:first-child ~ div:before {
+.np-upload-item:not(:last-child)::after {
   display: block;
   position: relative;
-  height: 1px;
-  background-color: rgba(0,0,0,0.10196);
-  background-color: var(--color-border-neutral);
+  border-bottom: 1px solid rgba(0,0,0,0.10196);
+  border-bottom: 1px solid var(--color-border-neutral);
   content: " ";
   margin: 0 16px;
   margin: 0 var(--size-16);
 }
-.np-upload-item:first-child ~ div {
-  border-top: 0;
-}
-.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 + div:before,
-.np-upload-button-container:hover + div:before {
-  margin: 0 !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-theme-personal .np-upload-item:first-child a:hover,
+.np-theme-personal .np-upload-item:first-child a:focus-visible,
+.np-theme-personal .np-upload-item:first-child a:active {
+  border-top-left-radius: calc(10px - 1px);
+  border-top-left-radius: calc(var(--radius-small) - 1px);
 }
-.np-upload-item--single-file:focus-visible,
-.np-upload-item--link:focus-visible,
-.np-upload-button-container:has(:focus-visible) {
-  outline-width: 3px;
+.np-theme-personal .np-upload-item:first-child a:hover ~ .np-upload-item__remove-button,
+.np-theme-personal .np-upload-item:first-child a:focus-visible ~ .np-upload-item__remove-button,
+.np-theme-personal .np-upload-item:first-child a:active ~ .np-upload-item__remove-button {
+  border-top-right-radius: calc(10px - 1px);
+  border-top-right-radius: calc(var(--radius-small) - 1px);
 }
 .np-upload-item__link a {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-radius: inherit;
+  outline: none;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.np-theme-personal .np-upload-item__link a {
+  border-radius: 0;
+  border-radius: initial;
 }
-.np-upload-item__link a:focus-visible {
-  outline-offset: -2px;
+.np-upload-item__link a.np-upload-item--single-file {
+  border-bottom-left-radius: calc(10px - 1px);
+  border-bottom-left-radius: calc(var(--radius-small) - 1px);
 }
 .np-upload-item__link a:hover,
+.np-upload-item__link a:focus-visible,
 .np-upload-item__link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
+.np-upload-item__link a:hover ~ .np-upload-item__remove-button,
+.np-upload-item__link a:focus-visible ~ .np-upload-item__remove-button,
+.np-upload-item__link a:active ~ .np-upload-item__remove-button {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-upload-item__link .np-upload-item__remove-button.np-upload-item--single-file {
+  border-bottom-right-radius: calc(10px - 1px);
+  border-bottom-right-radius: calc(var(--radius-small) - 1px);
+}
 .np-upload-item__body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  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: 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);
-  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);
-    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;
+  flex-shrink: 0;
+  align-self: stretch;
+  padding: 12px 16px;
+  padding: var(--size-12) var(--size-16);
+  color: #c9cbce;
+  color: var(--color-interactive-secondary);
+  background: transparent;
 }
-.np-upload-item__remove-button:before {
-  display: block;
-  width: 44px;
-  height: 44px;
-  content: '';
-  border-radius: 50%;
-  position: absolute;
+.np-upload-item__remove-button:hover,
+.np-upload-item__remove-button:focus {
+  color: #d03238 !important;
+  color: var(--color-interactive-negative-hover) !important;
 }
 .np-progress {
   border-radius: 10px;

package/src/moneyInput/MoneyInput.story.tsx

@@ -1,9 +1,7 @@
-import { FORCE_RE_RENDER } from '@storybook/core-events';
-import { addons, useGlobals } from '@storybook/manager-api';
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, within, userEvent } from '@storybook/test';
 import { Lock } from '@transferwise/icons';
-import React, { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import MoneyInput, { CurrencyOptionItem } from '.';
 import Provider from '../provider/Provider';

package/src/phoneNumberInput/PhoneNumberInput.story.tsx

@@ -19,5 +19,6 @@ export const Basic = {
     selectProps: {
       className: 'custom-class',
     },
+    onChange: () => {},
   },
 } satisfies Story;

package/src/uploadInput/UploadInput.css

@@ -1,31 +1,43 @@
+.np-upload-input {
+  border: 1px solid #c9cbce;
+  border: 1px solid var(--color-interactive-secondary);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+}
+.np-upload-input:has(:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
 .np-upload-input.form-control {
   height: auto;
   padding: 0;
   padding: initial;
 }
-.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 > 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-theme-personal .np-upload-input {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
 }
 .np-theme-personal .np-upload-input.disabled .btn {
   cursor: inherit;
 }
+.np-theme-personal .np-upload-input .np-upload-button {
+  border-radius: calc(10px - 1px);
+  border-radius: calc(var(--radius-small) - 1px);
+  padding: 16px;
+  padding: var(--padding-small);
+}
+.np-theme-personal .np-upload-input .np-upload-input--square-top {
+  border-top-right-radius: 0px;
+  border-top-left-radius: 0px;
+}
+.np-theme-personal .np-upload-input .np-upload-item__remove-button {
+  border-radius: 0;
+  border-radius: initial;
+}
 .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;
 }
@@ -43,10 +55,6 @@
 .np-theme-personal .np-upload-input .media-body .text-negative {
   color: var(--color-sentiment-negative) !important;
 }
-.np-theme-personal .np-upload-input-errors {
-  padding-left: 0;
-  list-style-position: inside;
-}
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;
   width: var(--size-x-small);

package/src/uploadInput/UploadInput.less

@@ -3,38 +3,46 @@
 @import (reference) './uploadItem/UploadItem.less';
 
 .np-upload-input {
+  border: 1px solid var(--color-interactive-secondary);
+  border-radius: var(--radius-small);
+
+  &:has(:focus-visible) {
+    .ring();
+  }
+
   &.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 {
+    border-radius: var(--radius-small);
+
     &.disabled .btn {
       cursor: inherit;
     }
 
+    .np-upload-button {
+      border-radius: @small-border-minus-one;
+      padding: var(--padding-small);
+    }
+
+    .np-upload-input--square-top {
+      border-top-right-radius: 0px;
+      border-top-left-radius: 0px;
+    }
+
+    .np-upload-item__remove-button {
+      border-radius: unset;
+    }
+
     .np-upload-icon {
       color: var(--color-interactive-primary);
     }
 
     .media-body {
-      padding-right: var(--size-32);
       color: var(--color-content-link);
       white-space: break-spaces;
 
@@ -54,11 +62,6 @@
       }
     }
 
-    &-errors {
-      padding-left: 0;
-      list-style-position: inside;
-    }
-
     .status-circle {
       width: var(--size-x-small);
       height: var(--size-x-small);

package/src/uploadInput/UploadInput.story.tsx

@@ -1,10 +1,10 @@
 import { action } from '@storybook/addon-actions';
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 import { Status } from '../common';
 
 import UploadInput, { UploadInputProps } from './UploadInput';
-import { UploadedFile, UploadResponse } from './types';
+import { UploadResponse } from './types';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput',
@@ -14,15 +14,12 @@ const meta: Meta<typeof UploadInput> = {
 
 export default meta;
 
+type Story = StoryFn<UploadInputProps>;
+
 const files = [
   {
     id: 1,
-    filename: 'purchase-receipt-0.pdf',
-    url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
-  },
-  {
-    id: 2,
-    filename: 'purchase-receipt-1.pdf',
+    filename: 'purchase-receipt.pdf',
     url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
   },
   {
@@ -33,16 +30,14 @@ const files = [
   {
     id: 3,
     filename: 'receipt failed with error string.png',
-    status: Status.FAILED,
-    error: 'Something went wrong',
+    status: Status.SUCCEEDED,
   },
   {
     id: 4,
     filename: 'receipt failed with error object.png',
-    status: Status.FAILED,
-    error: { message: 'Something went wrong' },
+    status: Status.SUCCEEDED,
   },
-] satisfies UploadedFile[];
+];
 
 const createDelayedPromise = async ({
   successful = true,
@@ -61,89 +56,46 @@ const createDelayedPromise = async ({
   });
 
 const props = {
-  onUploadFile: async (formData: FormData) => {
+  onUploadFile: async () => {
     return createDelayedPromise();
   },
-  onDeleteFile: async (id: string | number) => {
+  onDeleteFile: async () => {
     return createDelayedPromise();
   },
 };
 
-const Template: Story<UploadInputProps> = (args: UploadInputProps) => <UploadInput {...args} />;
+const Template: Story = (args: UploadInputProps) => <UploadInput {...args} />;
 
-export const SingleFile: Story<UploadInputProps> = Template.bind({});
+export const SingleFile: Story = Template.bind({});
 SingleFile.args = { ...props };
 
-export const MultipleFiles: Story<UploadInputProps> = Template.bind({});
+export const MultipleFiles: Story = Template.bind({});
 MultipleFiles.args = { ...props, multiple: true };
 
-export const UploadInputWithDescriptionFromProps: Story<UploadInputProps> = Template.bind({});
+export const UploadInputWithDescriptionFromProps: Story = Template.bind({});
 UploadInputWithDescriptionFromProps.args = {
   ...props,
   multiple: true,
   description: 'Custom file description from prop',
 };
 
-export const Disabled: Story<UploadInputProps> = Template.bind({});
+export const Disabled: Story = Template.bind({});
 Disabled.args = { ...props, disabled: true };
 
-export const WithAnyFileType: Story<UploadInputProps> = Template.bind({});
+export const WithAnyFileType: Story = Template.bind({});
 WithAnyFileType.args = { ...props, fileTypes: '*' };
 
-export const WithSingleFileType: Story<UploadInputProps> = Template.bind({});
+export const WithSingleFileType: Story = Template.bind({});
 WithSingleFileType.args = { ...props, fileTypes: '.zip,application/zip' };
 
-export const WithMultipleExistingFiles: Story<UploadInputProps> = Template.bind({});
+export const WithMultipleExistingFiles: Story = Template.bind({});
 WithMultipleExistingFiles.args = {
   ...props,
   files,
   multiple: true,
 };
 
-export const WithFileErrors: Story<UploadInputProps> = Template.bind({});
-WithFileErrors.args = {
-  ...props,
-  files: [
-    {
-      id: 1,
-      filename: 'Error with default message.png',
-      status: Status.FAILED,
-    },
-    {
-      id: 2,
-      filename: 'Error with `string` error.png',
-      status: Status.FAILED,
-      error: 'Single string error',
-    },
-    {
-      id: 3,
-      filename: 'Error with `obj` error ({ message : `string` }).png',
-      status: Status.FAILED,
-      error: { message: 'Single obj error' },
-    },
-    {
-      id: 4,
-      filename: 'Error with single error passed in `array`.png',
-      status: Status.FAILED,
-      errors: ['Single error in array'],
-    },
-    {
-      id: 5,
-      filename: 'Error with multiple `string` errors passed in `array`.png',
-      status: Status.FAILED,
-      errors: ['Error 1', 'Error 2', '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' }],
-    },
-  ],
-  multiple: true,
-};
-
-export const WithoutDelete: Story<UploadInputProps> = Template.bind({});
+export const WithoutDelete: Story = Template.bind({});
 WithoutDelete.args = {
   ...props,
   files,
@@ -151,7 +103,7 @@ WithoutDelete.args = {
   multiple: true,
 };
 
-export const WithUploadFailed: Story<UploadInputProps> = Template.bind({});
+export const WithUploadFailed: Story = Template.bind({});
 WithUploadFailed.args = {
   ...props,
   files: files.slice(0),
@@ -159,7 +111,7 @@ WithUploadFailed.args = {
   multiple: true,
 };
 
-export const WithDeleteFailed: Story<UploadInputProps> = Template.bind({});
+export const WithDeleteFailed: Story = Template.bind({});
 WithDeleteFailed.args = {
   ...props,
   files: files.slice(0),
@@ -167,7 +119,7 @@ WithDeleteFailed.args = {
   multiple: true,
 };
 
-export const CustomConfirmMessage: Story<UploadInputProps> = Template.bind({});
+export const CustomConfirmMessage: Story = Template.bind({});
 CustomConfirmMessage.args = {
   ...props,
   files: files.slice(0),
@@ -182,21 +134,21 @@ CustomConfirmMessage.args = {
   },
 };
 
-export const withManualDownloadHandler: Story<UploadInputProps> = Template.bind({});
+export const withManualDownloadHandler: Story = Template.bind({});
 withManualDownloadHandler.args = {
   ...props,
   files,
   onDownload: action('Manual download handler'),
 };
 
-export const withFilesChangeHandler: Story<UploadInputProps> = Template.bind({});
+export const withFilesChangeHandler: Story = Template.bind({});
 withFilesChangeHandler.args = {
   ...props,
   files,
   onFilesChange: action('Files change handler'),
 };
 
-export const withMaxFilesToUploadLimit: Story<UploadInputProps> = Template.bind({});
+export const withMaxFilesToUploadLimit: Story = Template.bind({});
 withMaxFilesToUploadLimit.args = {
   ...props,
   multiple: true,
@@ -204,14 +156,14 @@ withMaxFilesToUploadLimit.args = {
   maxFilesErrorMessage: "Can't upload as maximum number of files allowed are already uploaded",
 };
 
-export const withFileSizeErrorMessage: Story<UploadInputProps> = Template.bind({});
+export const withFileSizeErrorMessage: Story = Template.bind({});
 withFileSizeErrorMessage.args = {
   ...props,
   sizeLimit: 1,
   sizeLimitErrorMessage: 'The file is oversized',
 };
 
-export const withCustomUploadButtonTitle: Story<UploadInputProps> = Template.bind({});
+export const withCustomUploadButtonTitle: Story = Template.bind({});
 withCustomUploadButtonTitle.args = {
   ...props,
   uploadButtonTitle: 'Upload the VAT receipts for FY 2022-23',