@transferwise/components 46.37.0 → 46.38.0

package/src/sticky/Sticky.tsx

@@ -1,16 +1,60 @@
 import { Position } from '../common';
 import SlidingPanel from '../slidingPanel';
+import { FunctionComponent } from 'react';
 
 export interface StickyProps {
-  open?: boolean;
-  position?: `${Position.TOP | Position.BOTTOM}`;
+  /** Optional prop for children components to be rendered inside the Sticky component. */
   children?: React.ReactNode;
+
+  /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */
+  open?: boolean;
+
+  /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */
+  position?: `${Position.TOP}` | `${Position.BOTTOM}`;
+
+  /** Optional prop to specify the ID used for testing */
+  testId?: string;
 }
 
-export default function Sticky({ open = true, position = 'bottom', children }: StickyProps) {
+/**
+ * ### Sticky Component
+ *
+ * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.
+ * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,
+ * based on the `open` prop. It can be positioned at the top or bottom of the container,
+ * as specified by the `position` prop.
+ *
+ * @component
+ * @param {ReactNode} children - Children content.
+ * @param {boolean} open - Determines if the Sticky component is open or closed.
+ * @param {('top'|'bottom')} position - Specifies the position.
+ * @param {string} testId - ID used for testing.
+ * @returns {JSX.Element} The `SlidingPanel` component with applied props.
+ * @example
+ * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>
+ * <Sticky open={open} position={'bottom'}>
+ *   <div>
+ *     <Button onClick={() => setOpen(!open)}>Close Sticky</Button>
+ *   </div>
+ * </Sticky>
+ */
+const Sticky: FunctionComponent<StickyProps> = ({
+  children,
+  open = true,
+  position = Position.BOTTOM,
+  testId,
+}: StickyProps) => {
   return (
-    <SlidingPanel open={open} position={position} slidingPanelPositionFixed showSlidingPanelBorder>
+    <SlidingPanel
+      testId={testId}
+      open={open}
+      position={position}
+      slidingPanelPositionFixed
+      showSlidingPanelBorder
+    >
       {children}
     </SlidingPanel>
   );
-}
+};
+
+export default Sticky;

package/src/test-utils/Parameters.d.ts

@@ -58,4 +58,12 @@ export interface ChromaticParameters {
    * @default 0.063
    */
   diffThreshold?: number;
+
+  /**
+   * Modes for Chromatic testing.
+   *
+   * Specify the mode in which Chromatic should run tests. For example, 'light' for light mode,
+   * 'dark' for dark mode, or `rtl` for right to left content.
+   */
+  modes?: object;
 }

package/src/test-utils/story-config.ts

@@ -9,6 +9,11 @@ export const viewports = {
     styles: { height: '256px', width: '320px' },
     type: 'mobile',
   },
+  desktop: {
+    name: 'Desktop',
+    styles: { height: '1024px', width: '1280px' },
+    type: 'desktop',
+  },
 };
 
 interface StoryConfig {

package/src/tile/{Tile.spec.js → Tile.spec.tsx}

@@ -9,7 +9,7 @@ describe(Tile, () => {
     description: 'Receive money from friends and family like a local',
     href: '#href',
     media: <svg data-testid="illustration" />,
-    onClick: () => onClick(),
+    onClick,
     title: 'Receive money',
   };
 

package/src/tile/{Tile.js → Tile.tsx}

@@ -1,11 +1,26 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
 import Body from '../body';
 import { Size, Typography } from '../common';
 import Title from '../title';
 
-export const Tile = ({
+export interface TileProps {
+  /** Classes to apply to the Tile container */
+  className?: string;
+  description?: React.ReactNode;
+  disabled?: boolean;
+  href?: string;
+  target?: React.HTMLAttributeAnchorTarget;
+  /** Accepts only Avatar and images */
+  media: React.ReactNode;
+  /** Function called onClick or onKeyDown */
+  onClick?: (event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+  /** The size applied to Tile */
+  size?: `${Size.SMALL | Size.MEDIUM}`;
+  title: React.ReactNode;
+}
+
+export default function Tile({
   className,
   description,
   disabled,
@@ -13,10 +28,10 @@ export const Tile = ({
   target,
   media,
   onClick,
-  size,
+  size = 'md',
   title,
-}) => {
-  const isSmall = size === Size.SMALL;
+}: TileProps) {
+  const isSmall = size === 'sm';
   const Element = href ? 'a' : 'button';
 
   return (
@@ -36,13 +51,13 @@ export const Tile = ({
       )}
       href={href}
       target={target}
-      onClick={disabled ? null : onClick}
+      onClick={disabled ? undefined : onClick}
       onKeyDown={
         disabled
-          ? null
+          ? undefined
           : ({ key }) => {
               if (key === 'Enter' || key === ' ') {
-                onClick();
+                onClick?.();
               }
             }
       }
@@ -58,30 +73,4 @@ export const Tile = ({
       ) : null}
     </Element>
   );
-};
-
-Tile.propTypes = {
-  /** Classes to apply to the Tile container */
-  className: PropTypes.string,
-  description: PropTypes.node,
-  disabled: PropTypes.bool,
-  href: PropTypes.string,
-  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
-  /** Accepts only Avatar and images */
-  media: PropTypes.node.isRequired,
-  /** Function called onClick or onKeyDown */
-  onClick: PropTypes.func,
-  /** The size applied to Tile */
-  size: PropTypes.oneOf(['sm', 'md']),
-  title: PropTypes.node.isRequired,
-};
-
-Tile.defaultProps = {
-  className: '',
-  description: null,
-  disabled: false,
-  size: Size.MEDIUM,
-  target: undefined,
-};
-
-export default Tile;
+}

package/src/uploadInput/UploadInput.css

@@ -1,46 +1,40 @@
-.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-theme-personal .np-upload-input {
-  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 > 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.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;
 }
+@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;
@@ -55,6 +49,10 @@
 .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,49 +3,45 @@
 @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;
 
+      @media (--screen-400-zoom) {
+        padding-right: var(--size-64);
+      }
+
       .np-text-body-large-bold {
         text-decoration: underline;
         .link-underline();
@@ -62,6 +58,11 @@
       }
     }
 
+    &-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

@@ -4,7 +4,7 @@ import { Story, Meta } from '@storybook/react';
 import { Status } from '../common';
 
 import UploadInput, { UploadInputProps } from './UploadInput';
-import { UploadResponse } from './types';
+import { UploadedFile, UploadResponse } from './types';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput',
@@ -17,7 +17,12 @@ export default meta;
 const files = [
   {
     id: 1,
-    filename: 'purchase-receipt.pdf',
+    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',
     url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
   },
   {
@@ -28,16 +33,18 @@ const files = [
   {
     id: 3,
     filename: 'receipt failed with error string.png',
-    status: Status.SUCCEEDED,
+    status: Status.FAILED,
+    error: 'Something went wrong',
   },
   {
     id: 4,
     filename: 'receipt failed with error object.png',
-    status: Status.SUCCEEDED,
+    status: Status.FAILED,
+    error: { message: 'Something went wrong' },
   },
-];
+] satisfies UploadedFile[];
 
-const createDelayedPromise = ({
+const createDelayedPromise = async ({
   successful = true,
   delaySeconds = 3,
   response = { id: Math.round(Math.random() * 10000), url: '#' },
@@ -54,10 +61,10 @@ const createDelayedPromise = ({
   });
 
 const props = {
-  onUploadFile: (formData: FormData) => {
+  onUploadFile: async (formData: FormData) => {
     return createDelayedPromise();
   },
-  onDeleteFile: (id: string | number) => {
+  onDeleteFile: async (id: string | number) => {
     return createDelayedPromise();
   },
 };
@@ -93,6 +100,49 @@ WithMultipleExistingFiles.args = {
   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({});
 WithoutDelete.args = {
   ...props,
@@ -105,7 +155,7 @@ export const WithUploadFailed: Story<UploadInputProps> = Template.bind({});
 WithUploadFailed.args = {
   ...props,
   files: files.slice(0),
-  onUploadFile: () => createDelayedPromise({ successful: false }),
+  onUploadFile: async () => createDelayedPromise({ successful: false }),
   multiple: true,
 };
 
@@ -113,7 +163,7 @@ export const WithDeleteFailed: Story<UploadInputProps> = Template.bind({});
 WithDeleteFailed.args = {
   ...props,
   files: files.slice(0),
-  onDeleteFile: () => createDelayedPromise({ successful: false }),
+  onDeleteFile: async () => createDelayedPromise({ successful: false }),
   multiple: true,
 };
 

package/src/uploadInput/UploadInput.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
@@ -128,7 +127,6 @@ const UploadInput = ({
   sizeLimitErrorMessage,
   uploadButtonTitle,
 }: UploadInputProps) => {
-  const { isModern } = useTheme();
   const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);
   const [mounted, setMounted] = useState(false);
   const { formatMessage } = useIntl();
@@ -301,7 +299,7 @@ const UploadInput = ({
 
   return (
     <>
-      <div className={classNames('np-upload-input', className, { disabled: isModern && disabled })}>
+      <div className={classNames('np-upload-input', className, { disabled })}>
         {uploadedFiles.map((file) => (
           <UploadItem
             key={file.id}
@@ -329,7 +327,6 @@ const UploadInput = ({
             sizeLimit={sizeLimit}
             description={description}
             maxFiles={maxFiles}
-            multipleFileInputWithFilesAdded={multiple && uploadedFiles.length > 0}
             onChange={addFiles}
           />
         )}

package/src/uploadInput/types.ts

@@ -19,9 +19,14 @@ export type UploadResponse = {
   url?: string;
 
   /**
-   * Optionally set a translated error message when file was rejected
+   * Optionally sets translated error message when a file gets rejected
    */
   error?: UploadError;
+
+  /**
+   * Optionally sets translated error messages when a file gets rejected
+   */
+  errors?: UploadError[];
   [key: string]: any;
 };
 
@@ -46,6 +51,11 @@ export type UploadedFile = {
    */
   error?: UploadError;
 
+  /**
+   * Any API errors array. The messages should be localized.
+   */
+  errors?: UploadError[];
+
   /**
    * Optional. An external URL where the file can be opened from.
    */

package/src/uploadInput/uploadButton/UploadButton.css

@@ -1,49 +1,35 @@
-.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 {
+  border-style: solid;
 }
 .np-upload-button-container .droppable-card-content {
   display: flex;
 }
-.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.droppable-dropping {
+  border-color: #c9cbce !important;
+  border-color: var(--color-interactive-secondary) !important;
 }
 .np-upload-button-container input[type="file"] {
   opacity: 0;
   z-index: -1;
   position: absolute;
 }
-.np-upload-button-container input[type="file"]:focus-visible + label {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
+.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);
+}
+.disabled label.np-upload-button:not(.disabled):hover,
+.disabled label.np-upload-button:not(.disabled):active {
+  background-color: transparent;
+}
+.np-upload-button .media {
+  align-items: flex-start;
 }

package/src/uploadInput/uploadButton/UploadButton.less

@@ -1,57 +1,44 @@
-@import (reference) '../uploadItem/UploadItem.less';
+.np-upload-button-container {
+  border-style: solid;
 
-.np-upload-button {
-  width: 100%;
-  border: 0 !important; // Remove from btn
-  padding: var(--size-12) var(--size-16);
+  .droppable-card-content {
+    display: flex;
+  }
 
-  &.np-upload-accent {
-    color: var(--color-interactive-accent);
+  &.droppable-dropping {
+    border-color: var(--color-interactive-secondary) !important;
   }
 
+  input[type="file"] {
+    opacity: 0;
+    z-index: -1;
+    position: absolute;
+  }
+
+  .np-upload-button {
+    border: none;
+  }
+}
+
+.np-upload-button {
+  width: 100%;
+  padding: var(--padding-small);
+  border-radius: 0;
+
   label& {
     &:not(.disabled) {
       &:hover,
-      &:focus-visible,
       &:active {
-        background-color: var(--color-background-neutral);
-
-        .np-theme-personal & {
-          background-color: var(--color-background-screen-hover);
-        }
+        background-color: var(--color-background-screen-hover);
 
-        .np-theme-personal .disabled & {
+        .disabled & {
           background-color: transparent;
         }
       }
     }
   }
 
-  .np-upload-icon {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.np-upload-button-container {
-  &.droppable {
-    border: 0;
-  }
-
-  .droppable-card-content {
-    display: flex;
-    .np-theme-personal & {
-      border-radius: @small-border-minus-one;
-    }
-  }
-
-  input[type="file"] {
-    opacity: 0;
-    z-index: -1;
-    position: absolute;
-
-    &:focus-visible + label {
-      background-color: var(--color-background-neutral); // Tab focus style
-    }
+  .media {
+    align-items: flex-start;
   }
 }