@dxc-technology/halstack-react 0.0.0-0e90110 → 0.0.0-1021ecf

package/file-input/FileInput.stories.tsx

@@ -0,0 +1,507 @@
+import React from "react";
+import DxcFileInput from "./FileInput";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+
+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 file1 = new File(["file1"], "file.pdf", { type: "text/plain" });
+const file2 = new File(["file2"], "file2.mp3", {
+  type: "audio",
+});
+const file3 = new File(["file3"], "file3.png", {
+  type: "image/png",
+});
+const file4 = new File(["file4"], "file4file4file4file4file4file4file4file4file4.mp4", {
+  type: "video",
+});
+const file5 = new File(["file4"], "file5file5file5file5file5file5file5file5file5.mp4", {
+  type: "video",
+});
+
+const fileExample = [
+  {
+    file: file1,
+  },
+];
+
+const fileExampleError = [
+  {
+    error: "Error message",
+    file: file1,
+  },
+];
+
+const filesExamples = [
+  {
+    file: file1,
+  },
+  {
+    file: file2,
+  },
+  {
+    file: file3,
+    preview: picPreview,
+  },
+  {
+    file: file4,
+  },
+  {
+    error: "Error message error message error message error message",
+    file: file5,
+  },
+  {
+    error: "Error message",
+    file: file3,
+    preview: picPreview,
+  },
+];
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="File item hovered" theme="light" level={4} />
+      <DxcFileInput value={fileExample} callbackFile={() => {}} />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="File item focused" theme="light" level={4} />
+      <DxcFileInput value={fileExample} callbackFile={() => {}} />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="File item actived" theme="light" level={4} />
+      <DxcFileInput value={fileExample} callbackFile={() => {}} />
+    </ExampleContainer>
+    <Title title="File" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Without label" theme="light" level={4} />
+      <DxcFileInput value={[]} callbackFile={() => {}} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With label" theme="light" level={4} />
+      <DxcFileInput label="File input" value={[]} callbackFile={() => {}} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With label and helper text" theme="light" level={4} />
+      <DxcFileInput label="File input" helperText="Please select files" value={[]} callbackFile={() => {}} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Single file" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        multiple={false}
+        callbackFile={() => {}}
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Invalid single file" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExampleError}
+        multiple={false}
+        callbackFile={() => {}}
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Multiple files" theme="light" level={4} />
+      <DxcFileInput label="File input" helperText="Please select files" value={filesExamples} callbackFile={() => {}} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Show preview" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={filesExamples}
+        callbackFile={() => {}}
+        showPreview
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <DxcFileInput label="File input" helperText="Please select files" disabled value={[]} callbackFile={() => {}} />
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Xxsmall margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        margin="xxsmall"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        margin="xsmall"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        margin="small"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        margin="medium"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        margin="large"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        margin="xlarge"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        margin="xxlarge"
+      />
+    </ExampleContainer>
+    <Title title="Filedrop" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Without label" theme="light" level={4} />
+      <DxcFileInput mode="filedrop" value={[]} callbackFile={() => {}} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With label" theme="light" level={4} />
+      <DxcFileInput mode="filedrop" label="File input" value={[]} callbackFile={() => {}} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With label, helper text and ellipsis" theme="light" level={4} />
+      <DxcFileInput
+        mode="filedrop"
+        label="File input"
+        dropAreaLabel="or drop files or drop files or drop files or drop files or drop files"
+        helperText="Please select files"
+        value={[]}
+        callbackFile={() => {}}
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Single file" theme="light" level={4} />
+      <DxcFileInput
+        mode="filedrop"
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        multiple={false}
+        callbackFile={() => {}}
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Invalid single file" theme="light" level={4} />
+      <DxcFileInput
+        mode="filedrop"
+        label="File input"
+        helperText="Please select files"
+        value={fileExampleError}
+        multiple={false}
+        callbackFile={() => {}}
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Multiple files" theme="light" level={4} />
+      <DxcFileInput
+        mode="filedrop"
+        label="File input"
+        helperText="Please select files"
+        value={filesExamples}
+        callbackFile={() => {}}
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Show preview" theme="light" level={4} />
+      <DxcFileInput
+        mode="filedrop"
+        label="File input"
+        helperText="Please select files"
+        value={filesExamples}
+        callbackFile={() => {}}
+        showPreview
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        mode="filedrop"
+        disabled
+        value={[]}
+        callbackFile={() => {}}
+      />
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Xxsmall margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        mode="filedrop"
+        margin="xxsmall"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        mode="filedrop"
+        margin="xsmall"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        mode="filedrop"
+        margin="small"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        mode="filedrop"
+        margin="medium"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        mode="filedrop"
+        margin="large"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        margin="xlarge"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        mode="filedrop"
+        margin="xxlarge"
+      />
+    </ExampleContainer>
+    <Title title="Dropzone" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Without label" theme="light" level={4} />
+      <DxcFileInput mode="dropzone" value={[]} callbackFile={() => {}} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With label" theme="light" level={4} />
+      <DxcFileInput label="File input" mode="dropzone" value={[]} callbackFile={() => {}} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With label, helper text and ellipsis" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        mode="dropzone"
+        dropAreaLabel="or drop files or drop files or drop files or drop files or drop files or drop files or drop files or drop files or drop files or drop files or drop files or drop files or drop files or drop files"
+        value={[]}
+        callbackFile={() => {}}
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Single file" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        mode="dropzone"
+        value={fileExample}
+        callbackFile={() => {}}
+        multiple={false}
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Invalid single file" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        mode="dropzone"
+        value={fileExampleError}
+        callbackFile={() => {}}
+        multiple={false}
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Multiple files" theme="light" level={4} />
+      <DxcFileInput
+        mode="dropzone"
+        label="File input"
+        helperText="Please select files"
+        value={filesExamples}
+        callbackFile={() => {}}
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Show preview" theme="light" level={4} />
+      <DxcFileInput
+        mode="dropzone"
+        label="File input"
+        helperText="Please select files"
+        value={filesExamples}
+        callbackFile={() => {}}
+        showPreview
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        mode="dropzone"
+        disabled
+        value={[]}
+        callbackFile={() => {}}
+      />
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Xxsmall margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        mode="dropzone"
+        margin="xxsmall"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        mode="dropzone"
+        margin="xsmall"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        mode="dropzone"
+        margin="small"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        mode="dropzone"
+        margin="medium"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        mode="dropzone"
+        margin="large"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        mode="dropzone"
+        margin="xlarge"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileExample}
+        callbackFile={() => {}}
+        mode="dropzone"
+        margin="xxlarge"
+      />
+      <hr />
+    </ExampleContainer>
+  </>
+);

package/file-input/FileItem.js

@@ -159,13 +159,13 @@ var ErrorIcon = _styledComponents["default"].span(_templateObject8 || (_template
 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  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) {
   return props.theme.fontFamily;
 }, function (props) {
-  return props.error ? props.theme.errorHoverDeleteFileItemBackgroundColor : props.theme.hoverDeleteFileItemBackgroundColor;
+  return props.theme.hoverDeleteFileItemBackgroundColor;
 }, function (props) {
   return props.theme.focusActionBorderColor;
 }, function (props) {
   return props.theme.focusActionBorderColor;
 }, function (props) {
-  return props.error ? props.theme.errorActiveDeleteFileItemBackgroundColor : props.theme.activeDeleteFileItemBackgroundColor;
+  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) {

package/file-input/types.d.ts

@@ -19,7 +19,7 @@ declare type FileData = {
      */
     preview?: string;
 };
-declare type Props = {
+declare type CommonProps = {
     /**
      * Name attribute.
      */
@@ -29,13 +29,9 @@ declare type Props = {
      */
     label?: string;
     /**
-     * Uses one of the available file input modes:
-     *    'file': Files are selected by clicking the button and selecting it through the file explorer.
-     *    'filedrop': Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
-     *    'dropzone':  Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
-     *     The drag and drop area of this mode is bigger than the one of the filedrop mode.
+     * Text to be placed inside the button.
      */
-    mode?: "file" | "filedrop" | "dropzone";
+    buttonLabel?: string;
     /**
      * Helper text to be placed above the component.
      */
@@ -84,4 +80,33 @@ declare type Props = {
      */
     tabIndex?: number;
 };
+declare type DropModeProps = CommonProps & {
+    /**
+     * Uses one of the available file input modes:
+     *    'file': Files are selected by clicking the button and selecting it through the file explorer.
+     *    'filedrop': Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
+     *    'dropzone':  Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
+     *     The drag and drop area of this mode is bigger than the one of the filedrop mode.
+     */
+    mode: "filedrop" | "dropzone";
+    /**
+     * Text to be placed inside the drag and drop zone alongside the button.
+     */
+    dropAreaLabel?: string;
+};
+declare type FileModeProps = CommonProps & {
+    /**
+     * Uses one of the available file input modes:
+     *    'file': Files are selected by clicking the button and selecting it through the file explorer.
+     *    'filedrop': Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
+     *    'dropzone':  Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
+     *     The drag and drop area of this mode is bigger than the one of the filedrop mode.
+     */
+    mode?: "file";
+    /**
+     * Text to be placed inside the drag and drop zone alongside the button.
+     */
+    dropAreaLabel?: never;
+};
+declare type Props = DropModeProps | FileModeProps;
 export default Props;

package/footer/Footer.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import FooterPropsType from "./types";
-declare const DxcFooter: ({ socialLinks, bottomLinks, copyright, children, padding, margin, tabIndex }: FooterPropsType) => JSX.Element;
+declare const DxcFooter: ({ socialLinks, bottomLinks, copyright, children, padding, margin, tabIndex, }: FooterPropsType) => JSX.Element;
 export default DxcFooter;

package/footer/Footer.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -25,7 +25,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _BackgroundColorContext = require("../BackgroundColorContext");
 
-var _Icons = _interopRequireDefault(require("./Icons"));
+var _Icons = require("./Icons");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
@@ -37,7 +37,7 @@ var DxcFooter = function DxcFooter(_ref) {
   var socialLinks = _ref.socialLinks,
       bottomLinks = _ref.bottomLinks,
       _ref$copyright = _ref.copyright,
-      copyright = _ref$copyright === void 0 ? "" : _ref$copyright,
+      copyright = _ref$copyright === void 0 ? "\xA9 DXC Technology ".concat(new Date().getFullYear(), ". All rights reserved.") : _ref$copyright,
       children = _ref.children,
       padding = _ref.padding,
       margin = _ref.margin,
@@ -63,7 +63,7 @@ var DxcFooter = function DxcFooter(_ref) {
   var colorsTheme = (0, _useTheme["default"])();
   var footerLogo = (0, _react.useMemo)(function () {
     if (!colorsTheme.footer.logo) {
-      return _Icons["default"];
+      return _Icons.dxcLogo;
     }
 
     if (typeof colorsTheme.footer.logo === "string") {
@@ -110,9 +110,9 @@ var DxcFooter = function DxcFooter(_ref) {
       key: "social".concat(index).concat(link.href),
       index: index,
       href: link && link.href ? link.href : ""
-    }, link.logo ? /*#__PURE__*/_react["default"].createElement(SocialIconContainer, null, (0, _typeof2["default"])(link.logo) === "object" ? link.logo : /*#__PURE__*/_react["default"].createElement(link.logo)) : link && link.logoSrc && /*#__PURE__*/_react["default"].createElement(SocialIcon, {
-      src: link.logoSrc
-    }));
+    }, /*#__PURE__*/_react["default"].createElement(SocialIconContainer, null, typeof link.logo === "string" ? /*#__PURE__*/_react["default"].createElement(SocialIconImg, {
+      src: link.logo
+    }) : link.logo));
   });
   var bottomLink = bottomLinks === null || bottomLinks === void 0 ? void 0 : bottomLinks.map(function (link, index) {
     return /*#__PURE__*/_react["default"].createElement("span", {
@@ -228,15 +228,9 @@ var SocialAnchor = _styledComponents["default"].a(_templateObject9 || (_template
   return props.index === 0 ? "0px" : props.theme.socialLinksGutter;
 });
 
-var SocialIcon = _styledComponents["default"].img(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    height: ", ";\n    width: ", ";\n    fill: ", ";\n  }\n"])), function (props) {
-  return props.theme.socialLinksSize;
-}, function (props) {
-  return props.theme.socialLinksSize;
-}, function (props) {
-  return props.theme.socialLinksColor;
-});
+var SocialIconImg = _styledComponents["default"].img(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])([""])));
 
-var SocialIconContainer = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    height: ", ";\n    width: ", ";\n    color: ", ";\n  }\n\n  overflow: hidden;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
+var SocialIconContainer = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    height: ", ";\n    width: ", ";\n    color: ", ";\n  }\n\n  overflow: hidden;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.theme.socialLinksSize;
 }, function (props) {
   return props.theme.socialLinksSize;