Merge pull request #1372 from dxc-technology/gomezivann-fileInput-fix

File Input button size, stories update and small code refactors

Author: raquelarrojo

lib/src/common/variables.js

@@ -1455,6 +1455,7 @@ export const defaultTranslatedComponentLabels = {
     dropAreaButtonLabelDefault: "Select",
     multipleDropAreaLabelDefault: "or drop files",
     singleDropAreaLabelDefault: "or drop a file",
+    deleteFileActionTitle: "Remove file",
   },
   footer: {
     copyrightText: (year) => `© DXC Technology ${year}. All rights reserved.`,

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

@@ -2,6 +2,7 @@ import React from "react";
 import DxcFileInput from "./FileInput";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import FileItem from "./FileItem";
 
 export default {
   title: "File input",
@@ -65,17 +66,48 @@ const filesExamples = [
 
 export const Chromatic = () => (
   <>
+    <Title title="File item states" theme="light" level={2} />
     <ExampleContainer pseudoState="pseudo-hover">
-      <Title title="File item hovered" theme="light" level={4} />
-      <DxcFileInput value={fileExample} callbackFile={() => {}} />
+      <Title title="Hovered" theme="light" level={4} />
+      <FileItem
+        mode="dropzone"
+        multiple={true}
+        name="file"
+        showPreview={false}
+        numFiles={1}
+        preview={picPreview}
+        type="image/png"
+        onDelete={() => {}}
+        tabIndex={0}
+      />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
-      <Title title="File item focused" theme="light" level={4} />
-      <DxcFileInput value={fileExample} callbackFile={() => {}} />
+      <Title title="Focused" theme="light" level={4} />
+      <FileItem
+        mode="dropzone"
+        multiple={true}
+        name="file"
+        showPreview={false}
+        numFiles={1}
+        preview={picPreview}
+        type="image/png"
+        onDelete={() => {}}
+        tabIndex={0}
+      />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
-      <Title title="File item actived" theme="light" level={4} />
-      <DxcFileInput value={fileExample} callbackFile={() => {}} />
+      <Title title="Actived" theme="light" level={4} />
+      <FileItem
+        mode="dropzone"
+        multiple={true}
+        name="file"
+        showPreview={false}
+        numFiles={1}
+        preview={picPreview}
+        type="image/png"
+        onDelete={() => {}}
+        tabIndex={0}
+      />
     </ExampleContainer>
     <Title title="File" theme="light" level={2} />
     <ExampleContainer>