@dxc-technology/halstack-react 0.0.0-4a5e7d8 → 0.0.0-4b95ba0

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/footer/Footer.js

@@ -27,7 +27,7 @@ var _BackgroundColorContext = require("../BackgroundColorContext");
 
 var _Icons = require("./Icons");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 
 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); }
 
@@ -130,19 +130,17 @@ var DxcFooter = function DxcFooter(_ref) {
     margin: margin,
     refSize: refSize,
     ref: ref
-  }, /*#__PURE__*/_react["default"].createElement(FooterHeader, null, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, footerLogo), /*#__PURE__*/_react["default"].createElement("div", null, socialLink)), isResponsivePhone && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(FooterFooter, {
-    className: "footerFooter",
-    refSize: refSize
-  }, /*#__PURE__*/_react["default"].createElement(BottomLinks, {
+  }, /*#__PURE__*/_react["default"].createElement(FooterHeader, {
     refSize: refSize
-  }, bottomLink), /*#__PURE__*/_react["default"].createElement(Copyright, {
+  }, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, footerLogo), /*#__PURE__*/_react["default"].createElement(SocialLinkContainer, {
     refSize: refSize
-  }, copyright))), (!isResponsiveTablet && !isResponsivePhone || isResponsiveTablet) && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(ChildComponents, {
+  }, socialLink)), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(ChildComponents, {
     padding: padding
   }, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
     color: colorsTheme.footer.backgroundColor
   }, children)), /*#__PURE__*/_react["default"].createElement(FooterFooter, {
-    className: "footerFooter"
+    className: "footerFooter",
+    refSize: refSize
   }, /*#__PURE__*/_react["default"].createElement(BottomLinks, {
     refSize: refSize
   }, bottomLink), /*#__PURE__*/_react["default"].createElement(Copyright, {
@@ -160,9 +158,9 @@ var FooterContainer = _styledComponents["default"].footer(_templateObject || (_t
   return props.theme.height;
 });
 
-var FooterHeader = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n"])));
+var FooterHeader = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  row-gap: 24px;\n"])));
 
-var FooterFooter = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  flex-direction: ", ";\n  align-items: ", ";\n  border-top: ", ";\n"])), function (props) {
+var FooterFooter = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n  flex-direction: ", ";\n  align-items: ", ";\n  border-top: ", ";\n  margin-top: 16px;\n"])), function (props) {
   return props.refSize <= _variables.responsiveSizes.mobileLarge ? "column" : "row";
 }, function (props) {
   return props.refSize <= _variables.responsiveSizes.mobileLarge ? "center" : "";
@@ -170,17 +168,15 @@ var FooterFooter = _styledComponents["default"].div(_templateObject3 || (_templa
   return "".concat(props.theme.bottomLinksDividerThickness, " ").concat(props.theme.bottomLinksDividerStyle, " ").concat(props.theme.bottomLinksDividerColor);
 });
 
-var BottomLinks = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  padding-top: ", ";\n  display: inline-flex;\n  flex-wrap: wrap;\n  max-width: ", ";\n  width: ", ";\n  & > span:last-child span {\n    display: none;\n  }\n  margin: ", ";\n"])), function (props) {
+var BottomLinks = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  padding-top: ", ";\n  display: inline-flex;\n  flex-wrap: wrap;\n  max-width: ", ";\n  width: ", ";\n  & > span:last-child span {\n    display: none;\n  }\n  align-self: center;\n"])), function (props) {
   return props.theme.bottomLinksDividerSpacing;
 }, function (props) {
   return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "60%";
 }, function (props) {
   return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "";
-}, function (props) {
-  return props.refSize <= _variables.responsiveSizes.mobileLarge ? "40px 0 40px 0" : "";
 });
 
-var ChildComponents = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 15px;\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  overflow: hidden;\n"])), function (props) {
+var ChildComponents = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 16px;\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  overflow: hidden;\n"])), function (props) {
   return props.padding && (0, _typeof2["default"])(props.padding) !== "object" ? _variables.spaces[props.padding] : "0px";
 }, function (props) {
   return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.top ? _variables.spaces[props.padding.top] : "";
@@ -207,7 +203,7 @@ var Copyright = _styledComponents["default"].div(_templateObject6 || (_templateO
 }, function (props) {
   return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "";
 }, function (props) {
-  return props.refSize <= _variables.responsiveSizes.mobileLarge ? "center" : "right";
+  return props.refSize <= _variables.responsiveSizes.mobileLarge ? "left" : "right";
 }, function (props) {
   return props.theme.bottomLinksDividerSpacing;
 });
@@ -224,13 +220,15 @@ var LogoImg = _styledComponents["default"].img(_templateObject8 || (_templateObj
   return props.theme.logoWidth;
 });
 
-var SocialAnchor = _styledComponents["default"].a(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    margin-left: ", ";\n  }\n"])), function (props) {
+var SocialLinkContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-self: center;\n"])));
+
+var SocialAnchor = _styledComponents["default"].a(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    margin-left: ", ";\n  }\n"])), function (props) {
   return props.index === 0 ? "0px" : props.theme.socialLinksGutter;
 });
 
-var SocialIconImg = _styledComponents["default"].img(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])([""])));
+var SocialIconImg = _styledComponents["default"].img(_templateObject11 || (_templateObject11 = (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  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
+var SocialIconContainer = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (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;
@@ -238,11 +236,11 @@ var SocialIconContainer = _styledComponents["default"].div(_templateObject11 ||
   return props.theme.socialLinksColor;
 });
 
-var Point = _styledComponents["default"].span(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px 10px;\n  color: ", ";\n"])), function (props) {
+var Point = _styledComponents["default"].span(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px 10px;\n  color: ", ";\n"])), function (props) {
   return props.theme.bottomLinksFontColor;
 });
 
-var BottomLink = _styledComponents["default"].a(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
+var BottomLink = _styledComponents["default"].a(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
   return props.theme.bottomLinksTextDecoration;
 }, function (props) {
   return props.theme.bottomLinksFontColor;

package/heading/Heading.stories.tsx

@@ -28,9 +28,9 @@ export const Chromatic = () => (
       <Title title="'light' Weight" theme="light" level={4} />
       <DxcHeading text="Heading for sections within the page" level={2} weight="light" />
       <Title title="'normal' Weight" theme="light" level={4} />
-      <DxcHeading text="Heading for sections within the page" level={4} weight="normal" />
+      <DxcHeading text="Heading for sections within the page" level={2} weight="normal" />
       <Title title="'bold' Weight" theme="light" level={4} />
-      <DxcHeading text="Heading for sections within the page" weight="bold" />
+      <DxcHeading text="Heading for sections within the page" level={2} weight="bold" />
     </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
@@ -48,6 +48,7 @@ export const Chromatic = () => (
       <DxcHeading text="Xlarge" margin="xlarge" />
       <Title title="Xxlarge" theme="light" level={4} />
       <DxcHeading text="Xxlarge" margin="xxlarge" />
+      <hr />
     </ExampleContainer>
   </>
 );

package/inset/Inset.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import InsetPropsType from "./types";
+export default function Inset({ space, horizontal, vertical, top, right, bottom, left, children, }: InsetPropsType): JSX.Element;