feat(FileUploader): add classes, label, accept props

use native accept attribute refactor DropZone styles & classes
lumada-design · Dec 16, 2024 · 41d2063 · 41d2063
1 parent e52fea8
commit 41d2063
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 125 deletions.
diff --git a/packages/core/src/FileUploader/DropZone/DropZone.styles.tsx b/packages/core/src/FileUploader/DropZone/DropZone.styles.tsx
@@ -10,17 +10,15 @@ export const { staticClasses, useClasses } = createClasses("HvDropZone", {
     display: "flex",
     border: `1px dashed ${theme.colors.secondary_60}`,
     cursor: "pointer",
-    background: theme.colors.atmo1,
+    backgroundColor: theme.colors.atmo1,
     borderRadius: theme.radii.round,
 
     "&:hover": {
-      background: `${theme.colors.atmo1}`,
-      border: `1px dashed ${theme.colors.secondary}`,
+      borderColor: theme.colors.secondary,
     },
 
     "&:focus-within": {
-      background: `${theme.colors.atmo1}`,
-      border: `1px dashed ${theme.colors.secondary}`,
+      borderColor: theme.colors.secondary,
       ...outlineStyles,
     },
   },
@@ -35,23 +33,16 @@ export const { staticClasses, useClasses } = createClasses("HvDropZone", {
     },
   },
   dragAction: {
-    background: `${theme.colors.atmo1}`,
-    border: `1px dashed ${theme.colors.primary}`,
+    backgroundColor: theme.colors.atmo1,
+    borderColor: theme.colors.primary,
   },
   dropZoneContainerDisabled: {
-    background: `${theme.colors.atmo3}`,
-    border: `1px dashed ${theme.colors.secondary_60}`,
+    color: theme.colors.secondary_60,
+    backgroundColor: theme.colors.atmo3,
+    borderColor: "currentcolor",
     cursor: "not-allowed",
     "&:hover": {
-      background: `${theme.colors.atmo3}`,
-      border: `1px dashed ${theme.colors.secondary_60}`,
-    },
-
-    "& $dragText": {
-      color: theme.colors.secondary_60,
-    },
-    "& $selectFilesText": {
-      color: theme.colors.secondary_60,
+      borderColor: "currentcolor",
     },
   },
   inputArea: {
@@ -67,23 +58,19 @@ export const { staticClasses, useClasses } = createClasses("HvDropZone", {
   },
   dropArea: {
     display: "flex",
-    margin: `${theme.space.md} auto`,
+    margin: theme.spacing("md", "auto"),
+    gap: theme.space.xs,
     minHeight: 48,
   },
   dropZoneAreaLabels: {
     display: "flex",
     maxWidth: 120,
     margin: "auto",
   },
-  dropZoneAreaIcon: {
-    margin: "auto",
-    marginRight: theme.space.xs,
-  },
+  dropZoneAreaIcon: {},
   dropZoneLabel: {},
-  dragText: {
-    ...(theme.typography.body as React.CSSProperties),
-  },
+  dragText: {},
   selectFilesText: {
-    ...(theme.typography.label as React.CSSProperties),
+    fontWeight: theme.typography.label.fontWeight,
   },
 });
diff --git a/packages/core/src/FileUploader/DropZone/DropZone.tsx b/packages/core/src/FileUploader/DropZone/DropZone.tsx
@@ -1,13 +1,18 @@
-import { useRef, useState } from "react";
+import { useContext, useRef, useState } from "react";
 import { Doc } from "@hitachivantara/uikit-react-icons";
 import {
   useDefaultProps,
   type ExtractNames,
 } from "@hitachivantara/uikit-react-utils";
 
-import { HvInfoMessage, HvLabel } from "../../FormElement";
+import {
+  HvFormElementContext,
+  HvFormElementProps,
+  HvInfoMessage,
+  HvLabel,
+} from "../../FormElement";
+import { useLabels } from "../../hooks/useLabels";
 import { useUniqueId } from "../../hooks/useUniqueId";
-import { HvTypography } from "../../Typography";
 import { uniqueId } from "../../utils/helpers";
 import { setId } from "../../utils/setId";
 import { HvFileData, HvFilesAddedEvent } from "../File";
@@ -18,46 +23,31 @@ export { staticClasses as dropZoneClasses };
 
 export type HvDropZoneClasses = ExtractNames<typeof useClasses>;
 
-export interface HvDropZoneLabels {
-  /**
-   * Extensions of the accepted file types
-   */
-  acceptedFiles?: string;
-  /**
-   * Dropzone area label.
-   */
-  dropzone?: string;
-  /**
-   * Size file warning label.
-   */
-  sizeWarning?: string;
-  /**
-   * Size file warning label.
-   */
-  drag?: string;
-  /**
-   * Size file warning label.
-   */
-  selectFiles?: string;
-  /**
-   * Theming sheet used to style components
-   * */
-  dropFiles?: string;
-  /**
-   * Message to display when file size is greater than allowed
-   * */
-  fileSizeError?: string;
-  /**
-   * Message to display when file type is greater than allowed
-   * */
-  fileTypeError?: string;
-}
+const DEFAULT_LABELS = {
+  /** Extensions of the accepted file types */
+  acceptedFiles: "",
+  /** Dropzone area label. @deprecated use `label` prop instead */
+  dropzone: "Label",
+  /** Size file warning label. */
+  sizeWarning: "Max. file size:",
+  /** Size file warning label. */
+  drag: "Drop files here or",
+  /** Size file warning label. */
+  selectFiles: "click to upload",
+  /** Theming sheet used to style components */
+  dropFiles: "Drop files here",
+  /** Message to display when file size is greater than allowed */
+  fileSizeError: "The file exceeds the maximum upload size",
+  /** Message to display when file type is greater than allowed */
+  fileTypeError: "File type not allowed for upload",
+
+  removeFileButtonLabel: "Remove File",
+};
 
-export interface HvDropZoneProps {
-  /**
-   * Id to be applied to the root node.
-   */
-  id?: string;
+export type HvDropZoneLabels = Partial<typeof DEFAULT_LABELS>;
+
+export interface HvDropZoneProps
+  extends Pick<HvFormElementProps, "id" | "disabled" | "label"> {
   /**
    * Labels to present in FileUploader.
    */
@@ -66,10 +56,6 @@ export interface HvDropZoneProps {
    * Whether the Dropzone should accept multiple files at once.
    */
   multiple?: boolean;
-  /**
-   * If the input is disabled or not
-   */
-  disabled?: boolean;
   /**
    * Files extensions accepted for upload.
    */
@@ -122,22 +108,23 @@ export const HvDropZone = (props: HvDropZoneProps) => {
   const {
     id: idProp,
     classes: classesProp,
-    labels,
+    label,
+    labels: labelsProp,
     accept,
     maxFileSize,
     inputProps,
     hideLabels,
     multiple = true,
-    disabled = false,
     onFilesAdded,
   } = useDefaultProps("HvDropZone", props);
   const id = useUniqueId(idProp);
-
+  const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const { classes, cx } = useClasses(classesProp);
+  const { disabled } = useContext(HvFormElementContext);
 
   const [dragState, setDragState] = useState(false);
 
-  const inputRef = useRef<HTMLInputElement | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const handleDragLeave = () => {
     setDragState(false);
@@ -188,7 +175,7 @@ export const HvDropZone = (props: HvDropZoneProps) => {
             showGutter
             id={setId(id, "input-file-label")}
             htmlFor={setId(id, "input-file")}
-            label={labels?.dropzone}
+            label={label ?? labels?.dropzone}
             className={classes.dropZoneLabel}
           />
           <HvInfoMessage id={setId(id, "description")}>
@@ -245,24 +232,18 @@ export const HvDropZone = (props: HvDropZoneProps) => {
         <div className={classes?.dropArea}>
           {dragState ? (
             <div className={classes.dropZoneAreaLabels}>
-              <HvTypography className={classes.dragText}>
-                {labels?.dropFiles}
-              </HvTypography>
+              <div className={classes.dragText}>{labels?.dropFiles}</div>
             </div>
           ) : (
             <>
-              <Doc
-                iconSize="M"
-                className={classes.dropZoneAreaIcon}
-                color={disabled ? "secondary_60" : "secondary"}
-              />
+              <Doc size="M" className={classes.dropZoneAreaIcon} />
               <div className={classes.dropZoneAreaLabels}>
-                <HvTypography className={classes.dragText}>
+                <div className={classes.dragText}>
                   {labels?.drag}
                   <span
                     className={classes.selectFilesText}
                   >{`\xa0${labels?.selectFiles}`}</span>
-                </HvTypography>
+                </div>
               </div>
             </>
           )}

diff --git a/packages/core/src/FileUploader/FileUploader.stories.tsx b/packages/core/src/FileUploader/FileUploader.stories.tsx
@@ -11,7 +11,7 @@ import {
 } from "@hitachivantara/uikit-react-core";
 import { Code, DocWord } from "@hitachivantara/uikit-react-icons";
 
-import { cancelUpload, simulateUpload } from "./simulators";
+import { cancelUpload, simulateUpload } from "./stories/simulators";
 
 const meta: Meta<typeof HvFileUploader> = {
   title: "Widgets/File Uploader",
@@ -140,7 +140,7 @@ export const Basic: StoryObj<HvFileUploaderProps> = {
 
     return (
       <HvFileUploader
-        acceptedFiles={[".jpg", ".jpeg", ".png"]}
+        accept=".jpg,.jpeg,.png"
         labels={{ sizeWarning: "Maximum file size:" }}
         maxFileSize={1 * 1000 ** 2}
         fileList={list}
@@ -292,7 +292,7 @@ export const WithPreviewThumbnails: StoryObj<HvFileUploaderProps> = {
     return (
       <>
         <HvFileUploader
-          acceptedFiles={["image/*"]}
+          accept="image/*"
           labels={{
             sizeWarning: "Maximum file size:",
             acceptedFiles: "Pick an image",
@@ -378,7 +378,7 @@ export const SingleUpload: StoryObj<HvFileUploaderProps> = {
         onFileRemoved={(removedFile) => {
           removeFile(removedFile);
         }}
-        acceptedFiles={[".jpg", ".jpeg", ".png"]}
+        accept=".jpg,.jpeg,.png"
         maxFileSize={1 * 1000 ** 2}
         multiple={false}
         disabled={list.length === 1}
@@ -444,10 +444,7 @@ export const CustomizedFileTypes: StoryObj<HvFileUploaderProps> = {
         onFileRemoved={(removedFile) => {
           removeFile(removedFile);
         }}
-        acceptedFiles={[
-          "application/vnd.ms-excel",
-          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-        ]}
+        accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
         labels={{
           dropzone: "Upload your spreadsheets",
           acceptedFiles: "(excel files)",

diff --git a/packages/core/src/FileUploader/FileUploader.styles.ts b/packages/core/src/FileUploader/FileUploader.styles.ts
@@ -0,0 +1,5 @@
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+
+export const { staticClasses, useClasses } = createClasses("HvFileUploader", {
+  root: {},
+});
diff --git a/packages/core/src/FileUploader/FileUploader.test.tsx b/packages/core/src/FileUploader/FileUploader.test.tsx
@@ -113,7 +113,7 @@ describe("FileUploader", () => {
             },
           ] as HvFileData[]
         }
-        acceptedFiles={["png"]}
+        accept=".png"
         maxFileSize={1}
       />,
     );
@@ -141,7 +141,7 @@ describe("FileUploader", () => {
             },
           ] as HvFileData[]
         }
-        acceptedFiles={["png"]}
+        accept=".png"
         maxFileSize={5 * 1000}
       />,
     );