@transferwise/components 0.0.0-experimental-4fd9ff3 → 0.0.0-experimental-2015f7e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-4fd9ff3",
+  "version": "0.0.0-experimental-2015f7e",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -95,9 +95,9 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.1",
-    "@wise/wds-configs": "0.0.0",
     "@transferwise/neptune-css": "14.24.4",
-    "@wise/components-theming": "1.6.2"
+    "@wise/components-theming": "1.6.2",
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.21.0",

package/src/upload/Upload.spec.tsx

@@ -76,6 +76,11 @@ describe('Upload Component', () => {
         dispatchEvent: jest.fn(),
       })),
     });
+    props.onStart.mockReset();
+    props.onSuccess.mockReset();
+    props.onFailure.mockReset();
+    props.onCancel.mockReset();
+    props.onChange.mockReset();
   });
 
   afterEach(async () => {
@@ -292,4 +297,66 @@ describe('Upload Component', () => {
     const errorIcon = await screen.findByLabelText(/Custom error label/i);
     expect(errorIcon).toBeInTheDocument();
   });
+
+  test('should respect the animationDelay prop', async () => {
+    const shortDelay = 50;
+    const longDelay = 500;
+
+    (asyncFileRead as jest.Mock).mockResolvedValue('mockBase64Image');
+    (postData as jest.Mock).mockResolvedValue('mockSuccessResponse');
+
+    const { container, unmount } = render(<Upload {...props} animationDelay={shortDelay} />);
+
+    await act(async () => {
+      const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(TEST_FILE);
+      fireEvent.drop(droppableElement!, { dataTransfer });
+    });
+
+    await act(async () => {
+      jest.advanceTimersByTime(shortDelay + 10);
+    });
+
+    expect(container.querySelector('.droppable-complete')).toBeInTheDocument();
+    unmount();
+
+    const { container: container2 } = render(<Upload {...props} animationDelay={longDelay} />);
+
+    await act(async () => {
+      const droppableElement = await waitFor(() => container2.querySelector('.droppable-area'));
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(TEST_FILE);
+      fireEvent.drop(droppableElement!, { dataTransfer });
+    });
+
+    await act(async () => {
+      jest.advanceTimersByTime(longDelay / 2);
+    });
+
+    expect(container2.querySelector('.droppable-processing')).toBeInTheDocument();
+    expect(container2.querySelector('.droppable-complete')).not.toBeInTheDocument();
+
+    await act(async () => {
+      jest.advanceTimersByTime(longDelay / 2 + 10);
+    });
+
+    expect(container2.querySelector('.droppable-complete')).toBeInTheDocument();
+    expect(container2.querySelector('.droppable-processing')).not.toBeInTheDocument();
+  });
+
+  test('should handle disabled state correctly', async () => {
+    const { container } = render(<Upload {...props} usDisabled />);
+    const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
+
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(TEST_FILE);
+
+    await act(async () => {
+      fireEvent.drop(droppableElement!, { dataTransfer });
+    });
+
+    expect(container.querySelector('.droppable-processing')).not.toBeInTheDocument();
+    expect(props.onStart).not.toHaveBeenCalled();
+  });
 });

package/src/upload/Upload.story.tsx

@@ -38,54 +38,3 @@ export const Basic = {
     onCancel: fn(),
   },
 } satisfies Story;
-
-export const MaxSizes = () => {
-  const bKB = 1024;
-  const bMB = 1024 * bKB;
-
-  const dKB = 1000;
-  const dMB = 1000 * dKB;
-
-  const binarySizes = [
-    10 * bMB,
-    5 * bMB,
-    1 * bMB,
-    500 * bKB,
-    100 * bKB,
-    50 * bKB,
-    10 * bKB,
-    5 * bKB,
-    1 * bKB,
-  ];
-
-  const decimalSizes = [
-    10 * dMB,
-    5 * dMB,
-    1 * dMB,
-    500 * dKB,
-    100 * dKB,
-    50 * dKB,
-    10 * dKB,
-    5 * dKB,
-    1 * dKB,
-  ];
-
-  return (
-    <div style={{ display: 'flex', gap: '1rem' }}>
-      <div style={{ flex: 1 }}>
-        {binarySizes.map((maxSize) => (
-          <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
-            <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
-          </Field>
-        ))}
-      </div>
-      <div style={{ flex: 1 }}>
-        {decimalSizes.map((maxSize) => (
-          <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
-            <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
-          </Field>
-        ))}
-      </div>
-    </div>
-  );
-};

package/src/upload/Upload.tests.story.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import Upload from '.';
+import { MAX_SIZE_DEFAULT } from './Upload';
+import { Field } from '../field/Field';
+
+const meta = {
+  component: Upload,
+  title: 'Forms/Upload/Tests',
+  argTypes: {
+    maxSize: {
+      control: {
+        type: 'number',
+        min: 0,
+      },
+    },
+  },
+} satisfies Meta<typeof Upload>;
+
+export default meta;
+
+export const MaxSizes = () => {
+  const bKB = 1024;
+  const bMB = 1024 * bKB;
+
+  const dKB = 1000;
+  const dMB = 1000 * dKB;
+
+  const binarySizes = [
+    10 * bMB,
+    5 * bMB,
+    1 * bMB,
+    500 * bKB,
+    100 * bKB,
+    50 * bKB,
+    10 * bKB,
+    5 * bKB,
+    1 * bKB,
+  ];
+
+  const decimalSizes = [
+    10 * dMB,
+    5 * dMB,
+    1 * dMB,
+    500 * dKB,
+    100 * dKB,
+    50 * dKB,
+    10 * dKB,
+    5 * dKB,
+    1 * dKB,
+  ];
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+      <div style={{ flex: 1 }}>
+        {binarySizes.map((maxSize) => (
+          <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
+            <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
+          </Field>
+        ))}
+      </div>
+      <div style={{ flex: 1 }}>
+        {decimalSizes.map((maxSize) => (
+          <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
+            <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
+          </Field>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const AllVariants = () => {
+  return (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+      <div style={{ flex: 1 }}>
+        <Field key="small" label="Small Upload">
+          <Upload usLabel="Pick a file, any file" size="sm" />
+        </Field>
+        <Field key="medium" label="Medium Upload">
+          <Upload usLabel="Pick a file, any file" size="md" />
+        </Field>
+        <Field key="large" label="Large Upload">
+          <Upload usLabel="Pick a file, any file" size="lg" />
+        </Field>
+        <Field key="disabled" label="Disabled Upload">
+          <Upload usLabel="Pick a file, any file" usDisabled />
+        </Field>
+      </div>
+    </div>
+  );
+};