@react-magma/dropzone 16.0.0-next.0 → 16.0.0

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

@@ -1,12 +1,21 @@
 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 { axe } from '../../../axe-helper.js';
 
 import { Dropzone } from '.';
+import { FileIcon } from './FileIcon';
+import { Preview } from './Preview';
 
 describe('File Uploader', () => {
   let files;
@@ -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',
+      });
     });
   });
 

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
@@ -146,35 +147,44 @@ 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 }) =>
+  border-radius: ${({ noDrag, theme }) =>
+    noDrag ? theme.borderRadiusNone : theme.borderRadiusSmall};
+  border: ${({ dragState = DragState.default, noDrag, theme, isInverse }) =>
     noDrag
       ? `0px`
-      : dragState === 'dragReject' || dragState === 'error'
+      : dragState === DragState.dragReject || dragState === 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'};
+          ? `${dragState === DragState.error ? '1px' : '2px'} dashed ${
+              dragState === DragState.error
+                ? theme.colors.red500
+                : theme.colors.red400
+            }`
+          : `${dragState === DragState.error ? '1px' : '2px'} dashed ${
+              theme.colors.danger
+            }`
+        : dragState === DragState.dragActive
+          ? `2px dashed ${theme.colors.blue500}`
+          : dragState === DragState.dragAccept
+            ? `2px dashed ${theme.colors.green500}`
+            : `2px dashed ${
+                isInverse ? theme.colors.neutral800 : theme.colors.neutral300
+              }`};
+
+  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 +192,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};
@@ -303,16 +313,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 +503,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 +561,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}
                 />

package/src/components/dropzone/FileIcon.tsx

@@ -25,61 +25,92 @@ const icons = {
   default: {
     Icon: InsertDriveFileIcon,
     style: {
-      color: magma.colors.neutral500,
+      color: magma.colors.neutral700,
+    },
+    inverseStyle: {
+      color: magma.colors.neutral300,
     },
   },
   word: {
     Icon: FileWordIcon,
     style: {
-      color: magma.colors.info500,
+      color: magma.colors.blue500,
+    },
+    inverseStyle: {
+      color: magma.colors.blue500,
     },
   },
   excel: {
     Icon: FileExcelIcon,
     style: {
-      color: magma.colors.success500,
+      color: magma.colors.green500,
+    },
+    inverseStyle: {
+      color: magma.colors.green500,
     },
   },
   powerpoint: {
     Icon: FilePowerpointIcon,
     style: {
-      color: magma.colors.warning500,
+      color: magma.colors.tangerine600,
+    },
+    inverseStyle: {
+      color: magma.colors.tangerine500,
     },
   },
   pdf: {
     Icon: FilePdfIcon,
     style: {
-      color: magma.colors.danger500,
+      color: magma.colors.red600,
+    },
+    inverseStyle: {
+      color: magma.colors.red500,
     },
   },
   image: {
     Icon: ImageIcon,
     style: {
-      color: magma.colors.neutral500,
+      color: magma.colors.neutral700,
+    },
+    inverseStyle: {
+      color: magma.colors.neutral300,
     },
   },
   video: {
     Icon: VideocamIcon,
     style: {
-      color: magma.colors.neutral500,
+      color: magma.colors.neutral700,
+    },
+    inverseStyle: {
+      color: magma.colors.neutral300,
     },
   },
   audio: {
     Icon: AudiotrackIcon,
     style: {
-      color: magma.colors.neutral500,
+      color: magma.colors.neutral700,
+    },
+    inverseStyle: {
+      color: magma.colors.neutral300,
     },
   },
   archive: {
     Icon: FileZipIcon,
     style: {
-      color: magma.colors.neutral500,
+      color: magma.colors.neutral700,
+    },
+    inverseStyle: {
+      color: magma.colors.neutral300,
     },
   },
 };
 
 const iconMapping: {
-  [key: string]: { Icon: any; style: React.CSSProperties };
+  [key: string]: {
+    Icon: any;
+    style: React.CSSProperties;
+    inverseStyle: React.CSSProperties;
+  };
 } = {
   default: icons.default,
   xlsx: icons.excel,
@@ -110,8 +141,13 @@ export const FileIcon = ({ file, isInverse }: FileIconProps) => {
   const { path = '', type = '' } = file;
   const category = type.split('/')[0];
   const extension = path.split('.').pop() || 'default';
-  const { Icon, style } =
+  const { Icon, style, inverseStyle } =
     iconMapping[extension] || iconMapping[category] || iconMapping.default;
 
-  return <Icon size={magma.iconSizes.medium} style={isInverse ? {} : style} />;
+  return (
+    <Icon
+      size={magma.iconSizes.medium}
+      style={isInverse ? inverseStyle : style}
+    />
+  );
 };

package/src/components/dropzone/Preview.tsx

@@ -4,6 +4,8 @@ import {
   ButtonColor,
   ButtonVariant,
   Card,
+  CardBorderRadius,
+  CardCornerTreatment,
   Flex,
   FlexAlignItems,
   FlexBehavior,
@@ -74,8 +76,10 @@ const IconStyles = {
   display: 'flex',
 };
 
-const Errors = styled.div`
-  border-top: 1px solid ${({ theme }) => theme.colors.neutral300};
+const Errors = styled.div<{ isInverse: boolean }>`
+  border-top: 1px solid
+    ${({ theme, isInverse }) =>
+      isInverse ? theme.colors.neutral500 : theme.colors.neutral300};
   padding: 16px;
   font-size: ${({ theme }) => theme.typeScale.size02.fontSize};
   line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};
@@ -104,10 +108,18 @@ const StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`
   border-color: ${({ file, theme, isInverse }) =>
     file.errors
       ? isInverse
-        ? theme.colors.danger300
+        ? theme.colors.red500
         : theme.colors.danger
-      : theme.colors.neutral300};
+      : isInverse
+        ? theme.colors.neutral800
+        : theme.colors.neutral200};
   border-width: 1px;
+  color: ${({ file, theme, isInverse }) =>
+    isInverse
+      ? theme.colors.neutral0
+      : file.errors
+        ? theme.colors.neutral700
+        : theme.colors.brand.navy};
   margin: 10px 0;
 `;
 
@@ -221,7 +233,7 @@ export const Preview = forwardRef<
           <IconButton
             onClick={handleRemoveFile}
             variant={ButtonVariant.link}
-            color={ButtonColor.secondary}
+            color={ButtonColor.subtle}
             aria-label={`${i18n.dropzone.removeFile} ${file.name}`}
             icon={<CloseIcon />}
           />
@@ -233,7 +245,9 @@ export const Preview = forwardRef<
       return (
         <StatusIcons>
           <Spinner
-            color={isInverse ? theme.colors.neutral100 : theme.colors.primary}
+            color={
+              isInverse ? theme.colors.brand.skyBlue : theme.colors.primary
+            }
           />
         </StatusIcons>
       );
@@ -243,7 +257,7 @@ export const Preview = forwardRef<
       <StatusIcons>
         <Transition isOpen={!done} unmountOnExit fade>
           <CheckCircleIcon
-            color={isInverse ? theme.colors.success200 : theme.colors.success}
+            color={isInverse ? theme.colors.green500 : theme.colors.success}
             style={{ marginTop: '4px' }}
           />
         </Transition>
@@ -251,7 +265,7 @@ export const Preview = forwardRef<
           <IconButton
             onClick={handleDeleteFile}
             variant={ButtonVariant.link}
-            color={ButtonColor.secondary}
+            color={ButtonColor.subtle}
             aria-label={`${i18n.dropzone.deleteFile} ${file.name}`}
             icon={<DeleteIcon />}
           />
@@ -267,6 +281,8 @@ export const Preview = forwardRef<
   return (
     <InverseContext.Provider value={{ isInverse }}>
       <StyledCard
+        borderRadius={CardBorderRadius.small}
+        cornerTreatment={CardCornerTreatment.all}
         isInverse={isInverse}
         theme={theme}
         file={file}
@@ -287,7 +303,7 @@ export const Preview = forwardRef<
           >
             {file.errors ? (
               <ErrorIcon
-                color={isInverse ? theme.colors.danger300 : theme.colors.danger}
+                color={isInverse ? theme.colors.red500 : theme.colors.danger}
                 size={24}
               />
             ) : file.preview &&
@@ -314,7 +330,7 @@ export const Preview = forwardRef<
           <Flex behavior={FlexBehavior.item}>{actions}</Flex>
         </StyledFlex>
         {file.errors && (
-          <Errors theme={theme}>
+          <Errors theme={theme} isInverse={isInverse}>
             {file.errors.slice(0, 1).map(({ code, ...rest }) => {
               const { header = '', message } = formatError(
                 { code, ...rest, ...i18n.dropzone.errors[code] },
@@ -327,7 +343,7 @@ export const Preview = forwardRef<
                   <ErrorHeader
                     style={{
                       color: isInverse
-                        ? theme.colors.danger200
+                        ? theme.colors.red500
                         : theme.colors.danger,
                     }}
                   >