@react-magma/dropzone 15.0.0-rc.1 → 15.0.0

package/dist/src/src/components/dropzone/index.d.ts

@@ -1,4 +1,4 @@
-export * from './FileIcon';
-export * from './FilePreview';
-export * from './Dropzone';
-export * from './FilePreview';
+export * from './FileIcon';
+export * from './FilePreview';
+export * from './Dropzone';
+export * from './FilePreview';

package/dist/src/src/components/dropzone/utils.d.ts

@@ -1 +1 @@
-export declare const formatFileSize: (bytes: number | undefined, decimalPoint?: number, bytesLabel?: string) => string;
+export declare const formatFileSize: (bytes: number | undefined, decimalPoint?: number, bytesLabel?: string) => string | undefined;

package/dist/src/src/index.d.ts

@@ -1 +1 @@
-export * from './components/dropzone';
+export * from './components/dropzone';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-magma/dropzone",
-  "version": "15.0.0-rc.1",
+  "version": "15.0.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -20,30 +20,27 @@
     "build": "microbundle build --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsx",
     "build-watch": "microbundle watch --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsx",
     "lint": "eslint ./src",
-    "lint:fix": "eslint ./src --fix",
-    "lint:check": "eslint ./src --max-warnings=0",
     "test": "jest",
-    "test-watch": "jest --watch",
-    "compiler-checks": "tsc --noEmit --project ./tsconfig.json"
+    "test-watch": "jest --watch"
   },
   "dependencies": {
-    "polished": "3.7.2",
+    "polished": "^3.7.2",
     "react-dropzone": "11.3.2"
   },
   "devDependencies": {
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-magma-dom": "^5.1.0-rc.4",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-magma-dom": "^6.0.0",
     "react-magma-icons": "^3.2.5"
   },
   "peerDependencies": {
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-magma-dom": "^5.1.0-rc.4",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-magma-dom": "^6.0.0",
     "react-magma-icons": "^3.2.5"
   },
   "engines": {

package/src/components/dropzone/Dropzone.stories.tsx

@@ -86,7 +86,7 @@ export const Default = {
     return (
       <div
         style={{
-          background: args.isInverse ? magma.colors.primary600 : 'none',
+          background: args.isInverse ? magma.colors.neutral1100 : 'none',
           padding: '24px',
         }}
       >
@@ -116,7 +116,7 @@ export const NoLimits = {
     return (
       <div
         style={{
-          background: args.isInverse ? magma.colors.primary600 : 'none',
+          background: args.isInverse ? magma.colors.neutral1100 : 'none',
           padding: '24px',
         }}
       >
@@ -138,7 +138,6 @@ export const Image = {
     const onSendFile = (props: OnSendFileProps) => {
       const { file, onFinish } = props;
       const reader = new FileReader();
-
       reader.onload = function (evt) {
         setFile(
           (evt &&
@@ -159,7 +158,7 @@ export const Image = {
     return (
       <div
         style={{
-          background: args.isInverse ? magma.colors.primary600 : 'none',
+          background: args.isInverse ? magma.colors.neutral1100 : 'none',
           padding: '24px',
         }}
       >
@@ -184,7 +183,6 @@ export const Text = {
     const onSendFile = (props: OnSendFileProps) => {
       const { file, onFinish } = props;
       const reader = new FileReader();
-
       reader.onload = function (evt) {
         setFile(
           (evt &&
@@ -205,7 +203,7 @@ export const Text = {
     return (
       <div
         style={{
-          background: args.isInverse ? magma.colors.primary600 : 'none',
+          background: args.isInverse ? magma.colors.neutral1100 : 'none',
           padding: '24px',
         }}
       >
@@ -231,7 +229,6 @@ export const Csv = {
     const onSendFile = (props: OnSendFileProps) => {
       const { file, onFinish } = props;
       const reader = new FileReader();
-
       reader.onload = function (evt) {
         const [columns, rows] =
           (evt &&
@@ -239,7 +236,6 @@ export const Csv = {
             evt.target.result &&
             csvJSON(evt.target.result.toString())) ||
           [];
-
         setColumns(columns);
         setFile(rows);
         onFinish && onFinish({ file });
@@ -253,7 +249,7 @@ export const Csv = {
     return (
       <div
         style={{
-          background: args.isInverse ? magma.colors.primary600 : 'none',
+          background: args.isInverse ? magma.colors.neutral1100 : 'none',
           padding: '24px',
         }}
       >

package/src/components/dropzone/Dropzone.test.js

@@ -1,9 +1,18 @@
 import React from 'react';
 
-import { cleanup, render, fireEvent, waitFor } from '@testing-library/react';
+import {
+  cleanup,
+  render,
+  fireEvent,
+  waitFor,
+  within,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { transparentize } from 'polished';
 import { I18nContext, defaultI18n, magma } from 'react-magma-dom';
 
+import { FileIcon } from './FileIcon';
+import { Preview } from './Preview';
 import { axe } from '../../../axe-helper.js';
 
 import { Dropzone } from '.';
@@ -113,6 +122,212 @@ describe('File Uploader', () => {
     expect(input).toHaveAttribute('multiple');
   });
 
+  it('uses the regular rebrand colors', () => {
+    const helperMessage = 'Upload a supported file.';
+    const labelText = 'Upload files';
+    const { container, getByTestId, getByText } = render(
+      <Dropzone
+        helperMessage={helperMessage}
+        labelText={labelText}
+        testId="testId"
+      />
+    );
+
+    expect(getByTestId('testId')).toHaveStyle({
+      backgroundColor: magma.colors.neutral100,
+      border: `2px dashed ${magma.colors.neutral300}`,
+      borderRadius: magma.borderRadiusSmall,
+    });
+    expect(
+      within(container).getByText(defaultI18n.dropzone.dragMessage)
+    ).toHaveStyle({
+      color: magma.colors.brand.navy,
+    });
+    expect(within(container).getByText(helperMessage)).toHaveStyle({
+      color: magma.colors.neutral700,
+    });
+    expect(within(container).getByText(labelText)).toHaveStyle({
+      color: magma.colors.brand.navy,
+    });
+    expect(container.querySelector('svg[aria-hidden="true"]')).toHaveAttribute(
+      'fill',
+      magma.colors.neutral700
+    );
+  });
+
+  it('uses the inverse rebrand colors', () => {
+    const helperMessage = 'Upload a supported file.';
+    const { getByTestId, getByText } = render(
+      <Dropzone helperMessage={helperMessage} isInverse testId="testId" />
+    );
+
+    expect(getByTestId('testId')).toHaveStyle({
+      backgroundColor: transparentize(0.6, magma.colors.neutral1200),
+      border: `2px dashed ${magma.colors.neutral800}`,
+    });
+    expect(getByText(helperMessage)).toHaveStyle({
+      color: magma.colors.neutral500,
+    });
+  });
+
+  it('uses the rebrand colors for default file icons', () => {
+    const file = createFile('file.bin', 1111, 'application/octet-stream');
+    const { container, rerender } = render(<FileIcon file={file} />);
+
+    expect(container.querySelector('svg')).toHaveStyle({
+      color: magma.colors.neutral700,
+    });
+
+    rerender(<FileIcon file={file} isInverse />);
+
+    expect(container.querySelector('svg')).toHaveStyle({
+      color: magma.colors.neutral300,
+    });
+  });
+
+  it.each([
+    ['word', 'docx', 'application/msword', 'blue500', 'blue500'],
+    ['excel', 'xlsx', 'application/vnd.ms-excel', 'green500', 'green500'],
+    [
+      'powerpoint',
+      'pptx',
+      'application/vnd.ms-powerpoint',
+      'tangerine600',
+      'tangerine500',
+    ],
+    ['pdf', 'pdf', 'application/pdf', 'red600', 'red500'],
+    ['image', 'png', 'image/png', 'neutral700', 'neutral300'],
+    ['video', 'mp4', 'video/mp4', 'neutral700', 'neutral300'],
+    ['audio', 'mp3', 'audio/mpeg', 'neutral700', 'neutral300'],
+    ['archive', 'zip', 'application/zip', 'neutral700', 'neutral300'],
+  ])(
+    'uses the rebrand colors for %s file icons',
+    (_name, extension, type, regularColor, inverseColor) => {
+      const file = createFile(`file.${extension}`, 1111, type);
+      Object.defineProperty(file, 'path', {
+        value: `file.${extension}`,
+      });
+      const { container, rerender } = render(<FileIcon file={file} />);
+
+      expect(container.querySelector('svg')).toHaveStyle({
+        color: magma.colors[regularColor],
+      });
+
+      rerender(<FileIcon file={file} isInverse />);
+
+      expect(container.querySelector('svg')).toHaveStyle({
+        color: magma.colors[inverseColor],
+      });
+    }
+  );
+
+  it('uses brand navy for regular preview text', () => {
+    const { getByText } = render(
+      <Preview
+        file={files[0]}
+        isInverse={false}
+        testId="preview"
+        thumbnails={false}
+      />
+    );
+
+    const previewCard = getByText(files[0].name).parentElement.parentElement;
+
+    expect(previewCard).toHaveStyle({
+      borderColor: magma.colors.neutral200,
+      borderRadius: magma.borderRadiusSmall,
+      color: magma.colors.brand.navy,
+    });
+  });
+
+  it('uses the inverse rebrand colors for the default preview', () => {
+    const { getByText } = render(
+      <Preview file={files[0]} isInverse thumbnails={false} />
+    );
+
+    const previewCard = getByText(files[0].name).parentElement.parentElement;
+
+    expect(previewCard).toHaveStyle({
+      borderColor: magma.colors.neutral800,
+    });
+  });
+
+  it('uses the inverse rebrand colors for pending and successful previews', async () => {
+    const pendingFile = files[0];
+    pendingFile.processor = { status: 'pending', percent: '25%' };
+
+    const { container, getByLabelText, rerender } = render(
+      <Preview file={pendingFile} isInverse thumbnails={false} />
+    );
+
+    await waitFor(() => {
+      expect(getByLabelText('Loading')).toHaveAttribute(
+        'color',
+        magma.colors.brand.skyBlue
+      );
+    });
+
+    const successfulFile = createFile(
+      'successful-file.pdf',
+      1111,
+      'application/pdf'
+    );
+    successfulFile.processor = { status: 'success', percent: '100%' };
+
+    rerender(<Preview file={successfulFile} isInverse thumbnails={false} />);
+
+    await waitFor(() => {
+      expect(
+        container.querySelector(`svg[fill="${magma.colors.green500}"]`)
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('uses the inverse rebrand colors for preview errors', () => {
+    const errorFile = files[0];
+    errorFile.errors = [
+      {
+        code: 'file-invalid-type',
+        message: 'Invalid file type',
+      },
+    ];
+
+    const { container, getByText } = render(
+      <Preview
+        accept="application/pdf"
+        file={errorFile}
+        isInverse
+        thumbnails={false}
+      />
+    );
+
+    const previewCard = getByText(errorFile.name).parentElement.parentElement;
+
+    expect(previewCard).toHaveStyle({
+      borderColor: magma.colors.red500,
+    });
+    expect(
+      container.querySelector(`svg[fill="${magma.colors.red500}"]`)
+    ).toBeInTheDocument();
+
+    const errorHeading = getByText('Invalid File Type');
+    expect(errorHeading).toHaveStyle({ color: magma.colors.red500 });
+    expect(errorHeading.parentElement).toHaveStyle({
+      borderTopColor: magma.colors.neutral500,
+    });
+  });
+
+  it('uses a subtle link IconButton for preview actions', () => {
+    const { getByLabelText } = render(
+      <Preview file={files[0]} isInverse={false} thumbnails={false} />
+    );
+
+    expect(getByLabelText(`Remove file ${files[0].name}`)).toHaveAttribute(
+      'color',
+      'subtle'
+    );
+  });
+
   it('allows adding files via drop', () => {
     const { container } = render(<Dropzone />);
 
@@ -136,7 +351,7 @@ describe('File Uploader', () => {
     const dropzone = getByTestId(testId);
 
     expect(dropzone).toHaveStyle(
-      `border: 1px dashed ${magma.colors.neutral400}`
+      `border: 2px dashed ${magma.colors.neutral300}`
     );
 
     fireDragEnter(dropzone, data);
@@ -145,7 +360,7 @@ describe('File Uploader', () => {
 
     await waitFor(() => {
       expect(dropzone).toHaveStyle(
-        `border: 1px dashed ${magma.colors.success}`
+        `border: 2px dashed ${magma.colors.green500}`
       );
     });
   });
@@ -160,7 +375,7 @@ describe('File Uploader', () => {
 
     const dropzone = getByTestId(testId);
     expect(dropzone).toHaveStyle(
-      `border: 1px dashed ${magma.colors.neutral400}`
+      `border: 2px dashed ${magma.colors.neutral300}`
     );
 
     fireDragEnter(dropzone, data);
@@ -168,7 +383,35 @@ describe('File Uploader', () => {
     rerender(ui);
 
     await waitFor(() => {
-      expect(dropzone).toHaveStyle(`border: 1px dashed ${magma.colors.danger}`);
+      expect(dropzone).toHaveStyle(`border: 2px dashed ${magma.colors.danger}`);
+    });
+  });
+
+  it('uses red400 for inverse rejection borders', async () => {
+    const data = createDtWithFiles(files);
+    const testId = 'testId';
+    const ui = <Dropzone accept="image/*" isInverse testId={testId} />;
+    const { getByTestId, rerender } = render(ui);
+    const dropzone = getByTestId(testId);
+
+    fireDragEnter(dropzone, data);
+    rerender(ui);
+
+    await waitFor(() => {
+      expect(dropzone).toHaveStyle(`border: 2px dashed ${magma.colors.red400}`);
+    });
+  });
+
+  it('uses red500 for inverse error borders', async () => {
+    const { getByTestId } = render(
+      <Dropzone isInverse minFiles={1} testId="testId" />
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('testId')).toHaveStyle({
+        borderColor: magma.colors.red500,
+        borderWidth: '1px',
+      });
     });
   });
 
@@ -521,7 +764,7 @@ describe('File Uploader', () => {
   });
 
   // TODO: Fix test (Delete file doesn't exist in the document (Remove file exists))
-  xit('changes to delete file on finish', async () => {
+  it.skip('changes to delete file on finish', async () => {
     const onSendFile = ({ file, onFinish }) => {
       onFinish({ file });
     };
@@ -545,7 +788,7 @@ describe('File Uploader', () => {
   });
 
   // TODO: Fix test (Delete file doesn't exist in the document (Remove file exists))
-  xit('deletes the file when the Delete File icon is clicked', async () => {
+  it.skip('deletes the file when the Delete File icon is clicked', async () => {
     const onSendFile = ({ file, onFinish }) => {
       onFinish({ file });
     };
@@ -579,7 +822,7 @@ describe('File Uploader', () => {
   });
 
   // TODO: Fix test (Delete file doesn't exist in the document (Remove file exists))
-  xit('calls onDeleteFile when the Delete File icon is clicked', async () => {
+  it.skip('calls onDeleteFile when the Delete File icon is clicked', async () => {
     const onDeleteFileSpy = jest.fn();
     const onSendFile = ({ file, onFinish }) => {
       onFinish({ file });

package/src/components/dropzone/Dropzone.tsx

@@ -46,12 +46,13 @@ export interface OnSendFileProps {
   onProgress?: ({}: { percent: number; file: FilePreview }) => void;
 }
 
-type DragState =
-  | 'error'
-  | 'dragAccept'
-  | 'dragReject'
-  | 'dragActive'
-  | 'default';
+enum DragState {
+  error = 'error',
+  dragAccept = 'dragAccept',
+  dragReject = 'dragReject',
+  dragActive = 'dragActive',
+  default = 'default',
+}
 
 // NOTE: These props are manually copied to dropzone.mdx
 export interface DropzoneProps
@@ -133,6 +134,54 @@ export interface DropzoneProps
   thumbnails?: boolean;
 }
 
+const getErrorBorderColor = (
+  dragState: DragState,
+  theme: ThemeInterface,
+  isInverse?: boolean
+) => {
+  if (!isInverse) {
+    return theme.colors.danger;
+  }
+
+  return dragState === DragState.error
+    ? theme.colors.red500
+    : theme.colors.red400;
+};
+
+const getContainerBorder = ({
+  dragState = DragState.default,
+  noDrag,
+  theme,
+  isInverse,
+}: {
+  dragState?: DragState;
+  noDrag?: boolean;
+  theme: ThemeInterface;
+  isInverse?: boolean;
+}) => {
+  if (noDrag) {
+    return '0px';
+  }
+
+  if (dragState === DragState.dragReject || dragState === DragState.error) {
+    const width = dragState === DragState.error ? '1px' : '2px';
+
+    return `${width} dashed ${getErrorBorderColor(dragState, theme, isInverse)}`;
+  }
+
+  if (dragState === DragState.dragActive) {
+    return `2px dashed ${theme.colors.blue500}`;
+  }
+
+  if (dragState === DragState.dragAccept) {
+    return `2px dashed ${theme.colors.green500}`;
+  }
+
+  return `2px dashed ${
+    isInverse ? theme.colors.neutral800 : theme.colors.neutral300
+  }`;
+};
+
 const Container = styled(Flex)<
   DropzoneRootProps &
     FlexProps & {
@@ -146,35 +195,25 @@ const Container = styled(Flex)<
   justify-content: ${({ noDrag }) => (noDrag ? 'left' : 'center')};
   text-align: ${({ noDrag }) => (noDrag ? 'left' : 'center')};
   padding: ${({ noDrag }) => (noDrag ? '0px' : '24px')};
-  border-radius: ${({ noDrag }) => (noDrag ? '0px' : '4px')};
-  border: ${({ dragState = 'default', noDrag, theme, isInverse }) =>
-    noDrag
-      ? `0px`
-      : dragState === 'dragReject' || dragState === 'error'
-        ? isInverse
-          ? `1px dashed ${theme.colors.danger300}`
-          : `1px dashed ${theme.colors.danger}`
-        : dragState === 'dragActive'
-          ? `1px dashed ${theme.colors.primary}`
-          : dragState === 'dragAccept'
-            ? `1px dashed ${theme.colors.success}`
-            : `1px dashed ${theme.colors.neutral400}`};
-
-  border-style: ${({ dragState = 'default' }) =>
-    dragState === 'error' ? 'solid' : 'dashed'};
+  border-radius: ${({ noDrag, theme }) =>
+    noDrag ? theme.borderRadiusNone : theme.borderRadiusSmall};
+  border: ${getContainerBorder};
+
+  border-style: ${({ dragState = DragState.default }) =>
+    dragState === DragState.error ? 'solid' : 'dashed'};
   background-color: ${({ theme, noDrag, isInverse }) =>
     noDrag
       ? 'transparent'
       : isInverse
-        ? transparentize(0.75, theme.colors.neutral900)
-        : theme.colors.neutral200};
+        ? transparentize(0.6, theme.colors.neutral1200)
+        : theme.colors.neutral100};
   outline: none;
   transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};
 `;
 
 const HelperMessage = styled.span<{ isInverse?: boolean }>`
   color: ${({ theme, isInverse }) =>
-    isInverse ? theme.colors.neutral100 : theme.colors.neutral700};
+    isInverse ? theme.colors.neutral500 : theme.colors.neutral700};
   display: block;
   font-size: 14px;
   margin: -8px 0 16px 0;
@@ -182,7 +221,7 @@ const HelperMessage = styled.span<{ isInverse?: boolean }>`
 
 const Wrapper = styled.div<{ isInverse?: boolean }>`
   color: ${({ theme, isInverse }) =>
-    isInverse ? theme.colors.neutral100 : theme.colors.neutral700};
+    isInverse ? theme.colors.neutral0 : theme.colors.brand.navy};
   margin: 0 0 24px 0;
   font-size: ${({ theme }) => theme.typeScale.size02.fontSize};
   line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};
@@ -203,7 +242,7 @@ export const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(
       accept,
       containerStyle,
       disabled,
-
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       dropzoneOptions = {
         multiple: true,
       },
@@ -303,16 +342,16 @@ export const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(
 
     const inputProps = getInputProps({ id });
 
-    let dragState: DragState = 'default';
+    let dragState = DragState.default;
 
     if (errorMessage) {
-      dragState = 'error';
+      dragState = DragState.error;
     } else if (isDragAccept) {
-      dragState = 'dragAccept';
+      dragState = DragState.dragAccept;
     } else if (isDragReject) {
-      dragState = 'dragReject';
+      dragState = DragState.dragReject;
     } else if (isDragActive) {
-      dragState = 'dragActive';
+      dragState = DragState.dragActive;
     }
 
     const handleRemoveFile = (removedFile: FilePreview) => {
@@ -493,7 +532,10 @@ export const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(
           inputSize={inputSize}
           isInverse={isInverse}
           isLabelVisuallyHidden={isLabelVisuallyHidden}
-          labelStyle={labelStyle}
+          labelStyle={{
+            color: isInverse ? theme.colors.neutral0 : theme.colors.brand.navy,
+            ...labelStyle,
+          }}
           labelText={labelText}
           messageStyle={{ minHeight: 0 }}
           data-testid={testId}
@@ -548,9 +590,7 @@ export const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(
                 <CloudUploadIcon
                   aria-hidden="true"
                   color={
-                    isInverse
-                      ? theme.colors.neutral100
-                      : theme.colors.neutral500
+                    isInverse ? theme.colors.neutral0 : theme.colors.neutral700
                   }
                   size={48}
                 />