Merge pull request #1377 from dxc-technology/gomezivann-fileInput-styles-update

[File Input] File item styles update

Author: raquelarrojo

lib/src/file-input/FileInput.stories.tsx

@@ -9,8 +9,7 @@ export default {
   component: DxcFileInput,
 };
 
-const picPreview =
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAEDklEQVRogdXaXaxcUxQH8J/etloajVT1I9qgCbdIUB8PXPeKBJHgsV5ExAuVivBUgtSDxgNBVMVHxEeRUhIhkpJ40BYhoTShaQglQtA2VR+ttjMe1j45c6cztzNnzszc+09Ocs/Za+39/++zzt5rr7l0D1diA35P14b0bMJgAE+g2uR6FpP7xq4NZCL2YjlOSNdt6VkVj/eNXYu4VhD9G+c3aL8gtVWS7bjEsfhRCFk2ht2yZPNT8hl3WCUIfoZJY9gdhY+T7QM94NUWFmEfDuHCFuyXJNv9OL2LvNrGO2KGn2rD55nks6ErjAog+8B3YXYbfrPwR/Lt+4d/NLYLMrcW8F+efL/DtBJ5tY17EpEvxEbYLgawJfVxXxObRZhbiF2LWCjfE4Y66OeS1Mc/OLnm+Uw8ggP4oYP+j4hHxUy+VEJfL6e+3hTL8/X4RZ7W/FvCGE1xOdZp7wNvhvny9CULtSo+1QMhZWImPpQL+A03YbouCpkqXn8ZqA+jg1iD41P7NF0QMiAy2N0ipDrFWUa/hU9wXp1N6UIuEktsNug3HfY3gD2pr4rYTxrlZ6UJmY3n0mBZ7JYhhDi3ZP1+i6sb2HQsZBJuEEfUqljjV+Ic5QkhzifZylTF+xisae9IyBIRr1nnb+PU1DaoXCHkk5blXfvxGGYoKGQWnhbpdZb/XFNn0w0hGebgBXm4fY/rtClkOn6Wz8j96Vk9uikkw5DRm2JLQrKV4hB2pr+niJznuPI5toRN4rx/u1jZiLfUMqZiBf4Ss7Bb7Bu1WW0v3kgt5mA17i7iPB8vymN1Cy5Obb0W0jFm4Fd5jFbEfjJsggl5UBDeiLvk4bZP/4RcJj76W1p1OE2sXAfFBkgcotYrL0UpghF5BfOkVhzeTQ5rGrRdIXbiVWWxaxNvCG6vHckwq4jsFPXa8YYF8gPYVc2MaisiN/eGVyGsEBy3C86H4d5k8LliFZFeYSq+FlwP218WiJWpIpbY8Y5heeXllNqGdcqriPQKrwrO67MHZwh1ezGvT6SKIKu8VLCYWGareKgPZEZECrS5oP/Dgvtq2Jpuzi6FWmuYh7XyfK5asJ9zk++X5EWARuePsjEZd9SM+afOhBwjz9TtSDeDY3mUgBH526/gFRHnnQhZLD9NejLdvG7sn8yKoj6MtuLSmvaiQibJ8781RNl+V3rwEZaKpGxKQeIZ6sNoD+5s0G87QqYkbksT1yydWpQZDMl/kS16bawb9AN5GK3VfGnvZMwd0qEv+w+ETTgTN4rEcRAninSgVdTP6oE2fFvFf6JIuA1v4XmRkXQVk+UFhGoacKXDJ6eTj72nmGt0DWCbONdkmDBCMgzjK6MrmAtNQCGUvyH2HfXhNmGFZBgRNYD3Ou3ofwlpcfptqgzTAAAAAElFTkSuQmCC";
+const picPreview = "https://cdn.mos.cms.futurecdn.net/CAZ6JXi6huSuN4QGE627NR.jpg"
 
 const file1 = new File(["file1"], "file.pdf", { type: "text/plain" });
 const file2 = new File(["file2"], "file2.mp3", {
@@ -22,7 +21,7 @@ const file3 = new File(["file3"], "file3.png", {
 const file4 = new File(["file4"], "file4file4file4file4file4file4file4file4file4.mp4", {
   type: "video",
 });
-const file5 = new File(["file4"], "file5file5file5file5file5file5file5file5file5.mp4", {
+const file5 = new File(["file5"], "file5file5file5file5file5file5file5file5file5.mp4", {
   type: "video",
 });
 
@@ -54,7 +53,7 @@ const filesExamples = [
     file: file4,
   },
   {
-    error: "Error message error message error message error message",
+    error: "This error message is a multiline paragraph for testing.",
     file: file5,
   },
   {
@@ -70,11 +69,10 @@ export const Chromatic = () => (
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
       <FileItem
-        mode="dropzone"
-        multiple={true}
-        name="file"
+        fileName="file"
+        error=""
+        singleFileMode={false}
         showPreview={false}
-        numFiles={1}
         preview={picPreview}
         type="image/png"
         onDelete={() => {}}
@@ -84,11 +82,10 @@ export const Chromatic = () => (
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Focused" theme="light" level={4} />
       <FileItem
-        mode="dropzone"
-        multiple={true}
-        name="file"
+        fileName="file"
+        error=""
+        singleFileMode={false}
         showPreview={false}
-        numFiles={1}
         preview={picPreview}
         type="image/png"
         onDelete={() => {}}
@@ -98,11 +95,10 @@ export const Chromatic = () => (
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Actived" theme="light" level={4} />
       <FileItem
-        mode="dropzone"
-        multiple={true}
-        name="file"
+        fileName="file"
+        error=""
+        singleFileMode={false}
         showPreview={false}
-        numFiles={1}
         preview={picPreview}
         type="image/png"
         onDelete={() => {}}

lib/src/file-input/FileInput.test.js

@@ -3,22 +3,22 @@ import { render, fireEvent, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import DxcFileInput from "./FileInput";
 
-describe("FileInput component tests", () => {
-  const file1 = new File(["file1"], "file1.png", { type: "image/png" });
-  const file2 = new File(["file2"], "file2.txt", {
-    type: "text/plain",
-  });
+const file1 = new File(["file1"], "file1.png", { type: "image/png" });
+const file2 = new File(["file2"], "file2.txt", {
+  type: "text/plain",
+});
 
-  const allFiles = [
-    {
-      file: file1,
-    },
-    {
-      error: "Error message",
-      file: file2,
-    },
-  ];
+const allFiles = [
+  {
+    file: file1,
+  },
+  {
+    error: "Error message",
+    file: file2,
+  },
+];
 
+describe("FileInput component tests", () => {
   test("Renders with correct labels and helper text in file mode", () => {
     const { getByText } = render(
       <DxcFileInput label="File input label" helperText="File input helper text" buttonLabel="Choose files" />
@@ -235,7 +235,6 @@ describe("FileInput component tests", () => {
       ]);
     });
   });
-
   test("Callback called correctly when a file size does not comply minSize or maxSize", async () => {
     const newFile = new File(["newFile"], "newFile.pdf", { type: "pdf" });
     const callbackFile = jest.fn();
@@ -281,7 +280,6 @@ describe("FileInput component tests", () => {
       ]);
     });
   });
-
   test("File input sends value when submitted in a form", () => {
     const newFile = new File(["newFile"], "newFile.pdf", { type: "pdf" });
     const handlerOnSubmit = jest.fn((e) => {

lib/src/file-input/FileInput.tsx

@@ -1,13 +1,13 @@
-// @ts-nocheck
+//@ts-nocheck
 import React, { useState, useEffect, useCallback } from "react";
 import styled, { ThemeProvider } from "styled-components";
 import { v4 as uuidv4 } from "uuid";
 import { spaces } from "../common/variables.js";
 import useTheme from "../useTheme";
 import useTranslatedLabels from "../useTranslatedLabels";
 import DxcButton from "../button/Button";
-import FileItem from "./FileItem";
 import FileInputPropsType from "./types";
+import FileItem from "./FileItem";
 
 const audioIcon = (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
@@ -168,7 +168,7 @@ const DxcFileInput = ({
         </Label>
         <HelperText disabled={disabled}>{helperText}</HelperText>
         {mode === "file" ? (
-          <FileContainer multiple={multiple} files={files}>
+          <FileContainer singleFileMode={!multiple && files.length === 1}>
             <ValueInput
               id={fileInputId}
               type="file"
@@ -193,22 +193,22 @@ const DxcFileInput = ({
               size="fitContent"
               tabIndex={tabIndex}
             />
-            <FileItemListContainer mode={mode} multiple={multiple} files={files}>
-              {files.map((file) => (
-                <FileItem
-                  mode={mode}
-                  multiple={multiple}
-                  name={file.file.name}
-                  error={file.error}
-                  showPreview={mode === "file" && !multiple ? false : showPreview}
-                  numFiles={files.length}
-                  preview={file.preview}
-                  type={file.file.type}
-                  onDelete={onDelete}
-                  tabIndex={tabIndex}
-                />
-              ))}
-            </FileItemListContainer>
+            {files.length > 0 && (
+              <FileItemListContainer>
+                {files.map((file) => (
+                  <FileItem
+                    fileName={file.file.name}
+                    error={file.error}
+                    singleFileMode={!multiple && files.length === 1}
+                    showPreview={mode === "file" && !multiple ? false : showPreview}
+                    preview={file.preview}
+                    type={file.file.type}
+                    onDelete={onDelete}
+                    tabIndex={tabIndex}
+                  />
+                ))}
+              </FileItemListContainer>
+            )}
           </FileContainer>
         ) : (
           <Container>
@@ -232,15 +232,13 @@ const DxcFileInput = ({
               onDragOver={handleDrag}
               onDragLeave={handleDragOut}
             >
-              <ButtonContainer mode={mode}>
-                <DxcButton
-                  mode="secondary"
-                  label={buttonLabel ?? translatedLabels.fileInput.dropAreaButtonLabelDefault}
-                  onClick={handleClick}
-                  disabled={disabled}
-                  size="fitContent"
-                />
-              </ButtonContainer>
+              <DxcButton
+                mode="secondary"
+                label={buttonLabel ?? translatedLabels.fileInput.dropAreaButtonLabelDefault}
+                onClick={handleClick}
+                disabled={disabled}
+                size="fitContent"
+              />
               {mode === "dropzone" ? (
                 <DropzoneLabel disabled={disabled}>
                   {dropAreaLabel ??
@@ -257,26 +255,27 @@ const DxcFileInput = ({
                 </FiledropLabel>
               )}
             </DragDropArea>
-            <FileItemListContainer mode={mode} multiple={multiple} files={files}>
-              {files.map((file) => (
-                <FileItem
-                  mode={mode}
-                  multiple={multiple}
-                  name={file.file.name}
-                  error={file.error}
-                  showPreview={showPreview}
-                  numFiles={files.length}
-                  preview={file.preview}
-                  type={file.file.type}
-                  onDelete={onDelete}
-                  tabIndex={tabIndex}
-                />
-              ))}
-            </FileItemListContainer>
+            {files.length > 0 && (
+              <FileItemListContainer>
+                {files.map((file) => (
+                  <FileItem
+                    fileName={file.file.name}
+                    error={file.error}
+                    singleFileMode={false}
+                    showPreview={showPreview}
+                    preview={file.preview}
+                    type={file.file.type}
+                    onDelete={onDelete}
+                    tabIndex={tabIndex}
+                  />
+                ))}
+              </FileItemListContainer>
+            )}
           </Container>
         )}
-        {files.length === 1 &&
-          files.map((file) => file.error && mode === "file" && !multiple && <ErrorMessage>{file.error}</ErrorMessage>)}
+        {mode === "file" && !multiple && files.length === 1 && files[0].error && (
+          <ErrorMessage>{files[0].error}</ErrorMessage>
+        )}
       </FileInputContainer>
     </ThemeProvider>
   );
@@ -313,12 +312,10 @@ const HelperText = styled.span`
   line-height: ${(props) => props.theme.helperTextLineHeight};
 `;
 
-const FileContainer = styled.div`
+const FileContainer = styled.div<{ singleFileMode: boolean }>`
   display: flex;
   ${(props) =>
-    props.multiple || props.files.length > 1
-      ? "flex-direction: column; row-gap: 0.25rem;"
-      : "flex-direction: row; column-gap: 0.25rem;"}
+    props.singleFileMode ? "flex-direction: row; column-gap: 0.25rem;" : "flex-direction: column; row-gap: 0.25rem;"}
   margin-top: 0.25rem;
 `;
 
@@ -342,11 +339,16 @@ const Container = styled.div`
 const DragDropArea = styled.div`
   box-sizing: border-box;
   display: flex;
-  flex-direction: ${(props) => (props.mode === "filedrop" ? "row" : "column")};
-  ${(props) => props.mode === "dropzone" && "justify-content: center; padding: 1rem;"};
+  ${(props) =>
+    props.mode === "filedrop"
+      ? "flex-direction: row; column-gap: 0.75rem; height: 48px;"
+      : "justify-content: center; flex-direction: column; row-gap: 0.5rem; height: 160px;"}
   align-items: center;
-  height: ${(props) => (props.mode === "filedrop" ? "48px" : "160px")};
   width: 320px;
+  padding: ${(props) =>
+    props.mode === "filedrop"
+      ? `calc(4px - ${props.theme.dropBorderThickness}) 1rem calc(4px - ${props.theme.dropBorderThickness}) calc(4px - ${props.theme.dropBorderThickness})`
+      : "1rem"};
   overflow: hidden;
   box-shadow: 0 0 0 2px transparent;
   border-radius: ${(props) => props.theme.dropBorderRadius};
@@ -365,18 +367,13 @@ const DragDropArea = styled.div`
   cursor: ${(props) => props.disabled && "not-allowed"};
 `;
 
-const ButtonContainer = styled.div`
-  ${(props) => props.mode === "filedrop" && "padding: 2px 12px 2px 3px"};
-`;
-
 const DropzoneLabel = styled.div`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 3;
   text-align: center;
-  margin-top: 0.5rem;
   color: ${(props) => (props.disabled ? props.theme.disabledDropLabelFontColor : props.theme.dropLabelFontColor)};
   font-family: ${(props) => props.theme.dropLabelFontFamily};
   font-size: ${(props) => props.theme.dropLabelFontSize};
@@ -391,7 +388,6 @@ const FiledropLabel = styled.span`
   font-family: ${(props) => props.theme.dropLabelFontFamily};
   font-size: ${(props) => props.theme.dropLabelFontSize};
   font-weight: ${(props) => props.theme.dropLabelFontWeight};
-  margin-right: 1rem;
 `;
 
 const ErrorMessage = styled.div`