@dxc-technology/halstack-react 0.0.0-c9b5c13 → 0.0.0-ca55cbe

package/file-input/FileInput.stories.tsx

@@ -2,14 +2,15 @@ import React from "react";
 import DxcFileInput from "./FileInput";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import FileItem from "./FileItem";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "File input",
   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", {
@@ -21,7 +22,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",
 });
 
@@ -53,7 +54,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,
   },
   {
@@ -63,19 +64,53 @@ const filesExamples = [
   },
 ];
 
+const opinionatedTheme = {
+  fileInput: {
+    fontColor: "#000000",
+  },
+};
+
 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
+        fileName="file"
+        error=""
+        singleFileMode={false}
+        showPreview={false}
+        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
+        fileName="file"
+        error=""
+        singleFileMode={false}
+        showPreview={false}
+        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
+        fileName="file"
+        error=""
+        singleFileMode={false}
+        showPreview={false}
+        preview={picPreview}
+        type="image/png"
+        onDelete={() => {}}
+        tabIndex={0}
+      />
     </ExampleContainer>
     <Title title="File" theme="light" level={2} />
     <ExampleContainer>
@@ -501,7 +536,83 @@ export const Chromatic = () => (
         mode="dropzone"
         margin="xxlarge"
       />
-      <hr />
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <Title title="Single file" theme="light" level={4} />
+        <DxcFileInput
+          label="File input"
+          helperText="Please select files"
+          value={fileExample}
+          multiple={false}
+          callbackFile={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <Title title="Invalid single file" theme="light" level={4} />
+        <DxcFileInput
+          label="File input"
+          helperText="Please select files"
+          value={fileExampleError}
+          multiple={false}
+          callbackFile={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Single file" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcFileInput
+          mode="filedrop"
+          label="File input"
+          helperText="Please select files"
+          value={fileExample}
+          multiple={false}
+          callbackFile={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Invalid single file" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcFileInput
+          mode="filedrop"
+          label="File input"
+          helperText="Please select files"
+          value={fileExampleError}
+          multiple={false}
+          callbackFile={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Single file" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcFileInput
+          label="File input"
+          helperText="Please select files"
+          mode="dropzone"
+          value={fileExample}
+          callbackFile={() => {}}
+          multiple={false}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Invalid single file" theme="light" level={4} />{" "}
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcFileInput
+          label="File input"
+          helperText="Please select files"
+          mode="dropzone"
+          value={fileExampleError}
+          callbackFile={() => {}}
+          multiple={false}
+        />
+      </HalstackProvider>
     </ExampleContainer>
   </>
 );

package/file-input/FileInput.test.js

@@ -12,21 +12,21 @@ var _react2 = require("@testing-library/react");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
-var _FileInput = _interopRequireDefault(require("./FileInput"));
-
+var _FileInput = _interopRequireDefault(require("./FileInput.tsx"));
+
+var file1 = new File(["file1"], "file1.png", {
+  type: "image/png"
+});
+var file2 = new File(["file2"], "file2.txt", {
+  type: "text/plain"
+});
+var allFiles = [{
+  file: file1
+}, {
+  error: "Error message",
+  file: file2
+}];
 describe("FileInput component tests", function () {
-  var file1 = new File(["file1"], "file1.png", {
-    type: "image/png"
-  });
-  var file2 = new File(["file2"], "file2.txt", {
-    type: "text/plain"
-  });
-  var allFiles = [{
-    file: file1
-  }, {
-    error: "Error message",
-    file: file2
-  }];
   test("Renders with correct labels and helper text in file mode", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FileInput["default"], {
       label: "File input label",

package/file-input/FileItem.d.ts

@@ -1,14 +1,4 @@
-/// <reference types="react" />
-declare const FileItem: ({ mode, multiple, name, error, showPreview, preview, type, numFiles, onDelete, tabIndex, }: {
-    mode: any;
-    multiple: any;
-    name?: string;
-    error?: string;
-    showPreview: any;
-    preview: any;
-    type: any;
-    numFiles: any;
-    onDelete: any;
-    tabIndex: any;
-}) => JSX.Element;
-export default FileItem;
+import React from "react";
+import { FileItemProps } from "./types";
+declare const _default: React.MemoExoticComponent<({ fileName, error, singleFileMode, showPreview, preview, type, onDelete, tabIndex, }: FileItemProps) => JSX.Element>;
+export default _default;

package/file-input/FileItem.js

@@ -15,9 +15,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _main = require("../main");
+
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -47,103 +51,76 @@ var errorIcon = /*#__PURE__*/_react["default"].createElement("svg", {
 }));
 
 var FileItem = function FileItem(_ref) {
-  var mode = _ref.mode,
-      multiple = _ref.multiple,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? "" : _ref$name,
+  var _ref$fileName = _ref.fileName,
+      fileName = _ref$fileName === void 0 ? "" : _ref$fileName,
       _ref$error = _ref.error,
       error = _ref$error === void 0 ? "" : _ref$error,
+      singleFileMode = _ref.singleFileMode,
       showPreview = _ref.showPreview,
       preview = _ref.preview,
       type = _ref.type,
-      numFiles = _ref.numFiles,
       onDelete = _ref.onDelete,
       tabIndex = _ref.tabIndex;
   var colorsTheme = (0, _useTheme["default"])();
-  var isImage = type.includes("image");
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
 
   var getIconAriaLabel = function getIconAriaLabel() {
-    if (type.includes("video")) {
-      return "video";
-    }
-
-    if (type.includes("audio")) {
-      return "audio";
-    }
-
-    return "file";
+    if (type.includes("video")) return "video";else if (type.includes("audio")) return "audio";else return "file";
   };
 
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.fileInput
-  }, /*#__PURE__*/_react["default"].createElement(Container, {
-    mode: mode,
-    multiple: multiple,
+  }, /*#__PURE__*/_react["default"].createElement(MainContainer, {
     error: error,
-    showPreview: showPreview,
-    numFiles: numFiles
-  }, showPreview && (isImage ? /*#__PURE__*/_react["default"].createElement(ImagePreview, {
+    singleFileMode: singleFileMode,
+    showPreview: showPreview
+  }, showPreview && (type.includes("image") ? /*#__PURE__*/_react["default"].createElement(ImagePreview, {
     src: preview,
-    alt: name
-  }) : /*#__PURE__*/_react["default"].createElement(IconPreviewContainer, {
+    alt: fileName
+  }) : /*#__PURE__*/_react["default"].createElement(IconPreview, {
     error: error,
     "aria-label": getIconAriaLabel()
-  }, /*#__PURE__*/_react["default"].createElement(IconPreview, {
-    error: error
-  }, preview))), /*#__PURE__*/_react["default"].createElement(FileItemContent, null, /*#__PURE__*/_react["default"].createElement(FileItemContainer, null, /*#__PURE__*/_react["default"].createElement(FileName, {
-    mode: mode,
-    multiple: multiple,
-    error: error,
-    showPreview: showPreview,
-    numFiles: numFiles
-  }, name), error && /*#__PURE__*/_react["default"].createElement(ErrorIcon, {
-    "aria-label": "Error"
-  }, errorIcon), /*#__PURE__*/_react["default"].createElement(DeleteIcon, {
-    error: error,
+  }, preview)), /*#__PURE__*/_react["default"].createElement(FileItemContent, null, /*#__PURE__*/_react["default"].createElement(FileName, null, fileName), /*#__PURE__*/_react["default"].createElement(_main.DxcFlex, {
+    gap: "0.25rem"
+  }, error && /*#__PURE__*/_react["default"].createElement(ErrorIcon, null, errorIcon), /*#__PURE__*/_react["default"].createElement(DeleteFileAction, {
     onClick: function onClick() {
-      return onDelete(name);
+      onDelete(fileName);
     },
-    "aria-label": "Remove ".concat(name),
+    type: "button",
+    title: translatedLabels.fileInput.deleteFileActionTitle,
+    "aria-label": translatedLabels.fileInput.deleteFileActionTitle,
     tabIndex: tabIndex
-  }, deleteIcon)), error && (multiple || numFiles > 1) && /*#__PURE__*/_react["default"].createElement(ErrorMessage, null, error))));
+  }, deleteIcon)), error && !singleFileMode && /*#__PURE__*/_react["default"].createElement(ErrorMessage, null, error))));
 };
 
-var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  padding: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  width: ", ";\n  min-height: ", ";\n  border-color: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  display: flex;\n  justify-content: center;\n"])), function (props) {
-  return props.showPreview ? "calc(8px - ".concat(props.theme.fileItemBorderThickness, ") 8px") : "calc(8px - ".concat(props.theme.fileItemBorderThickness, ") 8px calc(8px - ").concat(props.theme.fileItemBorderThickness, ") 16px");
-}, function (props) {
-  return props.error && props.theme.errorFileItemBackgroundColor;
-}, function (props) {
-  return props.theme.fileItemBorderRadius;
+var MainContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  gap: 0.75rem;\n  width: ", ";\n  padding: ", ";\n  ", ";\n  border-color: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-radius: ", ";\n"])), function (props) {
+  return props.singleFileMode ? "230px" : "320px";
 }, function (props) {
-  return props.mode === "file" && !props.multiple && props.numFiles === 1 ? "calc(230px - 26px)" : !props.showPreview ? "calc(320px - 26px)" : props.showPreview && "calc(320px - 18px)";
+  return props.showPreview ? "calc(8px - ".concat(props.theme.fileItemBorderThickness, ")") : "calc(8px - ".concat(props.theme.fileItemBorderThickness, ") calc(8px - ").concat(props.theme.fileItemBorderThickness, ") calc(8px - ").concat(props.theme.fileItemBorderThickness, ") 16px");
 }, function (props) {
-  return props.mode === "file" && !props.multiple && props.numFiles === 1 || !props.showPreview && !props.error ? "calc(40px - 18px)" : !props.showPreview && props.error ? "calc(59px - 18px)" : "calc(64px - 18px)";
+  return props.error ? "background-color: ".concat(props.theme.errorFileItemBackgroundColor, ";") : "";
 }, function (props) {
   return props.error ? props.theme.errorFileItemBorderColor : props.theme.fileItemBorderColor;
 }, function (props) {
   return props.theme.fileItemBorderThickness;
 }, function (props) {
   return props.theme.fileItemBorderStyle;
+}, function (props) {
+  return props.theme.fileItemBorderRadius;
 });
 
-var FileItemContent = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n"])));
-
-var FileItemContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
-
-var ImagePreview = _styledComponents["default"].img(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 48px;\n  height: 48px;\n  object-fit: contain;\n  margin-right: 12px;\n  border-radius: 2px;\n"])));
+var ImagePreview = _styledComponents["default"].img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 48px;\n  height: 48px;\n  border-radius: 2px;\n  object-fit: contain;\n"])));
 
-var IconPreviewContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 12px;\n  background-color: ", ";\n  width: 48px;\n  height: 48px;\n  border-radius: 2px;\n  color: ", ";\n"])), function (props) {
+var IconPreview = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  width: 48px;\n  height: 48px;\n  padding: 15px;\n  border-radius: 2px;\n  color: ", ";\n\n  svg {\n    height: 18px;\n    width: 18px;\n  }\n"])), function (props) {
   return props.error ? props.theme.errorFilePreviewBackgroundColor : props.theme.filePreviewBackgroundColor;
 }, function (props) {
   return props.error ? props.theme.errorFilePreviewIconColor : props.theme.filePreviewIconColor;
 });
 
-var IconPreview = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])([""])));
+var FileItemContent = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  flex-grow: 1;\n  display: grid;\n  grid-template-columns: auto min-content;\n  grid-template-rows: min-content auto;\n  column-gap: 0.25rem;\n"])));
 
-var FileName = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  width: ", ";\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
+var FileName = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  align-self: center;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (props) {
   return props.theme.fileNameFontColor;
-}, function (props) {
-  return props.mode === "file" && !props.multiple && props.error && props.numFiles === 1 ? "calc(230px - 76px)" : props.mode === "file" && !props.multiple && !props.error && props.numFiles === 1 ? "calc(230px - 50px)" : !props.showPreview && !props.error ? "calc(320px - 52px)" : !props.showPreview && props.error ? "calc(320px - 76px)" : props.showPreview && props.error ? "calc(320px - 128px)" : props.showPreview && !props.error && "calc(320px - 102px)";
 }, function (props) {
   return props.theme.fileItemFontFamily;
 }, function (props) {
@@ -154,9 +131,9 @@ var FileName = _styledComponents["default"].span(_templateObject7 || (_templateO
   return props.theme.fileItemLineHeight;
 });
 
-var ErrorIcon = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  padding: 3px;\n  height: 18px;\n  width: 18px;\n  color: #d0011b;\n"])));
+var ErrorIcon = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  padding: 3px;\n  height: 18px;\n  width: 18px;\n  color: #d0011b;\n"])));
 
-var DeleteIcon = _styledComponents["default"].button(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  font-size: 1rem;\n  font-family: ", ";\n  border: 1px solid transparent;\n  border-radius: 2px;\n  margin-left: 4px;\n  background-color: transparent;\n  box-shadow: 0 0 0 2px transparent;\n  padding: 3px;\n  cursor: pointer;\n  color: ", ";\n  svg {\n    line-height: 18px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
+var DeleteFileAction = _styledComponents["default"].button(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  font-size: 1rem;\n  font-family: ", ";\n  border: 1px solid transparent;\n  border-radius: 2px;\n  background-color: transparent;\n  box-shadow: 0 0 0 2px transparent;\n  padding: 3px;\n  cursor: pointer;\n  color: ", ";\n\n  svg {\n    line-height: 18px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus,\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
   return props.theme.fontFamily;
 }, function (props) {
   return props.theme.deleteFileItemColor;
@@ -164,13 +141,11 @@ var DeleteIcon = _styledComponents["default"].button(_templateObject9 || (_templ
   return props.theme.hoverDeleteFileItemBackgroundColor;
 }, function (props) {
   return props.theme.focusDeleteFileItemBorderColor;
-}, function (props) {
-  return props.theme.focusDeleteFileItemBorderColor;
 }, function (props) {
   return props.theme.activeDeleteFileItemBackgroundColor;
 });
 
-var ErrorMessage = _styledComponents["default"].span(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
+var ErrorMessage = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
   return props.theme.errorMessageFontColor;
 }, function (props) {
   return props.theme.errorMessageFontFamily;
@@ -182,5 +157,6 @@ var ErrorMessage = _styledComponents["default"].span(_templateObject10 || (_temp
   return props.theme.errorMessageLineHeight;
 });
 
-var _default = FileItem;
+var _default = /*#__PURE__*/_react["default"].memo(FileItem);
+
 exports["default"] = _default;

package/file-input/types.d.ts

@@ -108,5 +108,22 @@ declare type FileModeProps = CommonProps & {
      */
     dropAreaLabel?: never;
 };
+/**
+ * Reference to the component.
+ */
+export declare type RefType = HTMLDivElement;
 declare type Props = DropModeProps | FileModeProps;
+/**
+ * Single file item preview.
+ */
+export declare type FileItemProps = {
+    fileName?: string;
+    error?: string;
+    showPreview: boolean;
+    singleFileMode: boolean;
+    preview: string;
+    type: string;
+    onDelete: (fileName: string) => void;
+    tabIndex: number;
+};
 export default Props;

package/flex/Flex.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import FlexPropsType from "./types";
+declare const DxcFlex: ({ direction, wrap, gap, order, grow, shrink, basis, children, ...props }: FlexPropsType) => JSX.Element;
+export default DxcFlex;

package/flex/Flex.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var _excluded = ["direction", "wrap", "gap", "order", "grow", "shrink", "basis", "children"],
+    _excluded2 = ["justifyContent", "alignItems", "alignContent", "alignSelf"];
+
+var DxcFlex = function DxcFlex(_ref) {
+  var _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? "row" : _ref$direction,
+      _ref$wrap = _ref.wrap,
+      wrap = _ref$wrap === void 0 ? "nowrap" : _ref$wrap,
+      _ref$gap = _ref.gap,
+      gap = _ref$gap === void 0 ? "0rem" : _ref$gap,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? 0 : _ref$order,
+      _ref$grow = _ref.grow,
+      grow = _ref$grow === void 0 ? 0 : _ref$grow,
+      _ref$shrink = _ref.shrink,
+      shrink = _ref$shrink === void 0 ? 1 : _ref$shrink,
+      _ref$basis = _ref.basis,
+      basis = _ref$basis === void 0 ? "auto" : _ref$basis,
+      children = _ref.children,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(Flex, (0, _extends2["default"])({
+    $direction: direction,
+    $wrap: wrap,
+    $order: order,
+    $grow: grow,
+    $shrink: shrink,
+    $basis: basis,
+    $gap: gap
+  }, props), children);
+};
+
+var Flex = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  ", "\n"])), function (_ref2) {
+  var _props$$gap, _props$$gap$rowGap, _props$$gap$columnGap;
+
+  var _ref2$justifyContent = _ref2.justifyContent,
+      justifyContent = _ref2$justifyContent === void 0 ? "flex-start" : _ref2$justifyContent,
+      _ref2$alignItems = _ref2.alignItems,
+      alignItems = _ref2$alignItems === void 0 ? "stretch" : _ref2$alignItems,
+      _ref2$alignContent = _ref2.alignContent,
+      alignContent = _ref2$alignContent === void 0 ? "normal" : _ref2$alignContent,
+      _ref2$alignSelf = _ref2.alignSelf,
+      alignSelf = _ref2$alignSelf === void 0 ? "auto" : _ref2$alignSelf,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+  return "\n    flex-direction: ".concat(props.$direction, "; \n    flex-wrap: ").concat(props.$wrap, "; \n    justify-content: ").concat(justifyContent, "; \n    align-items: ").concat(alignItems, ";\n    align-content: ").concat(alignContent, ";\n    align-self: ").concat(alignSelf, ";\n    gap: ").concat(props.$gap != null && typeof props.$gap === "string" ? (_props$$gap = props.$gap) !== null && _props$$gap !== void 0 ? _props$$gap : "" : "", "}\n    row-gap: ").concat(props.$gap != null && (0, _typeof2["default"])(props.$gap) === "object" ? (_props$$gap$rowGap = props.$gap.rowGap) !== null && _props$$gap$rowGap !== void 0 ? _props$$gap$rowGap : "" : "", "}\n    column-gap: ").concat(props.$gap != null && (0, _typeof2["default"])(props.$gap) === "object" ? (_props$$gap$columnGap = props.$gap.columnGap) !== null && _props$$gap$columnGap !== void 0 ? _props$$gap$columnGap : "" : "", "}\n    order: ").concat(props.$order, ";\n    flex-grow: ").concat(props.$grow, ";\n    flex-shrink: ").concat(props.$shrink, ";\n    flex-basis: ").concat(props.$basis, ";\n  ");
+});
+
+var _default = DxcFlex;
+exports["default"] = _default;

package/flex/Flex.stories.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import styled from "styled-components";
+import DxcFlex from "./Flex";
+
+export default {
+  title: "Flex",
+  component: DxcFlex,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Default" level={4} />
+    <Container>
+      <DxcFlex>
+        <Placeholder />
+        <Placeholder minWidth="50px" />
+        <Placeholder />
+        <Placeholder minWidth="50px" />
+        <Placeholder minWidth="50px" />
+      </DxcFlex>
+    </Container>
+    <Title title="Direction column, wrap, justify content end, align items center and gap" level={4} />
+    <Container>
+      <DxcFlex direction="column" wrap="wrap" justifyContent="end" alignItems="center" gap="1.5rem">
+        <Placeholder />
+        <Placeholder minWidth="100px" />
+        <Placeholder />
+        <Placeholder minWidth="100px" />
+        <Placeholder />
+      </DxcFlex>
+    </Container>
+    <Title title="Wrap with align content space between, row and column gaps, and as a span" level={4} />
+    <Container height="250px">
+      <DxcFlex wrap="wrap" alignContent="space-between" as="span" gap={{ rowGap: "0.5rem", columnGap: "1.5rem" }}>
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder minWidth="100px" />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder minWidth="100px" />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder minWidth="100px" />
+        <Placeholder />
+      </DxcFlex>
+    </Container>
+    <Title title="Basis 100%, order, grow and align self" level={4} />
+    <Container height="75px">
+      <DxcFlex basis="100%">
+        <DxcFlex order={3} grow={1} alignSelf="flex-end">
+          <Placeholder width="100%" minWidth="0">
+            order 3, grow 1, align self end
+          </Placeholder>
+        </DxcFlex>
+        <DxcFlex order={-1} grow={4}>
+          <Placeholder width="100%" minWidth="0">
+            order -1, grow 4
+          </Placeholder>
+        </DxcFlex>
+        <DxcFlex order={5} grow={1}>
+          <Placeholder width="100%" minWidth="0">
+            order 5, grow 1
+          </Placeholder>
+        </DxcFlex>
+        <DxcFlex order={2} grow={2}>
+          <Placeholder width="100%" minWidth="0">
+            order 2. grow 2
+          </Placeholder>
+        </DxcFlex>
+      </DxcFlex>
+    </Container>
+    <Title title="Basis and shrink" level={4} />
+    <Container>
+      <DxcFlex basis="600px">
+        <DxcFlex shrink={4} basis="400px">
+          <Placeholder width="100%" minWidth="0">
+            shrink 4
+          </Placeholder>
+        </DxcFlex>
+        <DxcFlex shrink={2} basis="400px">
+          <Placeholder width="100%" minWidth="0">
+            shrink 2
+          </Placeholder>
+        </DxcFlex>
+        <DxcFlex shrink={1} basis="400px">
+          <Placeholder width="100%" minWidth="0">
+            shrink 1
+          </Placeholder>
+        </DxcFlex>
+      </DxcFlex>
+    </Container>
+  </>
+);
+
+const Container = styled.div<{ height?: string }>`
+  display: flex;
+  background: #f2eafa;
+  margin: 2.5rem;
+  ${({ height }) => (height ? `height: ${height}` : "max-height: 150px")};
+`;
+
+const Placeholder = styled.div<{ minWidth?: string; width?: string }>`
+  height: 40px;
+  min-width: ${({ minWidth }) => minWidth ?? "200px"};
+  width: ${({ width }) => width};
+  border: 1px solid #a46ede;
+  border-radius: 0.5rem;
+  background-color: #e5d5f6;
+`;