@dxc-technology/halstack-react 0.0.0-2d619b4 → 0.0.0-2f08981

package/dist/footer/Footer.js

@@ -29,9 +29,21 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
 var _BackgroundColorContext = require("../BackgroundColorContext.js");
 
-function _templateObject12() {
+var _Icons = _interopRequireDefault(require("./Icons"));
+
+function _templateObject13() {
   var data = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"]);
 
+  _templateObject13 = function _templateObject13() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject12() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px 10px;\n  color: ", ";\n"]);
+
   _templateObject12 = function _templateObject12() {
     return data;
   };
@@ -40,7 +52,7 @@ function _templateObject12() {
 }
 
 function _templateObject11() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px 10px;\n  color: ", ";\n"]);
+  var data = (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"]);
 
   _templateObject11 = function _templateObject11() {
     return data;
@@ -50,7 +62,7 @@ function _templateObject11() {
 }
 
 function _templateObject10() {
-  var data = (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"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    height: ", ";\n    width: ", ";\n    fill: ", ";\n  }\n"]);
 
   _templateObject10 = function _templateObject10() {
     return data;
@@ -60,7 +72,7 @@ function _templateObject10() {
 }
 
 function _templateObject9() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    height: ", ";\n    width: ", ";\n    fill: ", ";\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    margin-left: ", ";\n  }\n"]);
 
   _templateObject9 = function _templateObject9() {
     return data;
@@ -70,7 +82,7 @@ function _templateObject9() {
 }
 
 function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    margin-left: ", ";\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: ", ";\n  width: ", ";\n"]);
 
   _templateObject8 = function _templateObject8() {
     return data;
@@ -156,8 +168,6 @@ var DxcFooter = function DxcFooter(_ref) {
       bottomLinks = _ref$bottomLinks === void 0 ? [] : _ref$bottomLinks,
       _ref$copyright = _ref.copyright,
       copyright = _ref$copyright === void 0 ? "" : _ref$copyright,
-      _ref$logoSrc = _ref.logoSrc,
-      logoSrc = _ref$logoSrc === void 0 ? "default" : _ref$logoSrc,
       children = _ref.children,
       padding = _ref.padding,
       margin = _ref.margin,
@@ -181,6 +191,20 @@ var DxcFooter = function DxcFooter(_ref) {
       setIsResponsivePhone = _useState6[1];
 
   var colorsTheme = (0, _useTheme["default"])();
+  var footerLogo = (0, _react.useMemo)(function () {
+    if (!colorsTheme.footer.logo) {
+      return _Icons["default"];
+    }
+
+    if (typeof colorsTheme.footer.logo === "string") {
+      return _react["default"].createElement(LogoImg, {
+        alt: "Logo",
+        src: colorsTheme.footer.logo
+      });
+    }
+
+    return colorsTheme.footer.logo;
+  }, [colorsTheme.footer.logo]);
 
   var handleResize = function handleResize(refWidth) {
     if (ref.current) {
@@ -236,10 +260,7 @@ var DxcFooter = function DxcFooter(_ref) {
     margin: margin,
     refSize: refSize,
     ref: ref
-  }, _react["default"].createElement(FooterHeader, null, _react["default"].createElement(LogoIcon, {
-    logoSrc: logoSrc,
-    src: logoSrc === "default" ? colorsTheme.footer.logo : logoSrc
-  }), _react["default"].createElement("div", null, socialLink)), isResponsivePhone && _react["default"].createElement("div", null, _react["default"].createElement(FooterFooter, {
+  }, _react["default"].createElement(FooterHeader, null, _react["default"].createElement(LogoContainer, null, footerLogo), _react["default"].createElement("div", null, socialLink)), isResponsivePhone && _react["default"].createElement("div", null, _react["default"].createElement(FooterFooter, {
     className: "footerFooter",
     refSize: refSize
   }, _react["default"].createElement(BottomLinks, {
@@ -321,17 +342,23 @@ var Copyright = _styledComponents["default"].div(_templateObject6(), function (p
   return props.theme.bottomLinksDividerSpacing;
 });
 
-var LogoIcon = _styledComponents["default"].img(_templateObject7(), function (props) {
+var LogoContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
+  return props.theme.logoHeight;
+}, function (props) {
+  return props.theme.logoWidth;
+});
+
+var LogoImg = _styledComponents["default"].img(_templateObject8(), function (props) {
   return props.theme.logoHeight;
 }, function (props) {
   return props.theme.logoWidth;
 });
 
-var SocialAnchor = _styledComponents["default"].a(_templateObject8(), function (props) {
+var SocialAnchor = _styledComponents["default"].a(_templateObject9(), function (props) {
   return props.index === 0 ? "0px" : props.theme.socialLinksGutter;
 });
 
-var SocialIcon = _styledComponents["default"].img(_templateObject9(), function (props) {
+var SocialIcon = _styledComponents["default"].img(_templateObject10(), function (props) {
   return props.theme.socialLinksSize;
 }, function (props) {
   return props.theme.socialLinksSize;
@@ -339,7 +366,7 @@ var SocialIcon = _styledComponents["default"].img(_templateObject9(), function (
   return props.theme.socialLinksColor;
 });
 
-var SocialIconContainer = _styledComponents["default"].div(_templateObject10(), function (props) {
+var SocialIconContainer = _styledComponents["default"].div(_templateObject11(), function (props) {
   return props.theme.socialLinksSize;
 }, function (props) {
   return props.theme.socialLinksSize;
@@ -347,11 +374,11 @@ var SocialIconContainer = _styledComponents["default"].div(_templateObject10(),
   return props.theme.socialLinksColor;
 });
 
-var Point = _styledComponents["default"].span(_templateObject11(), function (props) {
+var Point = _styledComponents["default"].span(_templateObject12(), function (props) {
   return props.theme.bottomLinksFontColor;
 });
 
-var BottomLink = _styledComponents["default"].a(_templateObject12(), function (props) {
+var BottomLink = _styledComponents["default"].a(_templateObject13(), function (props) {
   return props.theme.bottomLinksTextDecoration;
 }, function (props) {
   return props.theme.bottomLinksFontColor;
@@ -366,7 +393,6 @@ var BottomLink = _styledComponents["default"].a(_templateObject12(), function (p
 });
 
 DxcFooter.propTypes = {
-  logoSrc: _propTypes["default"].string,
   socialLinks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     logo: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
     logoSrc: _propTypes["default"].string.isRequired,

package/dist/footer/Icons.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _default = _react["default"].createElement("svg", {
+  id: "g10",
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "280.781",
+  height: "32",
+  viewBox: "0 0 280.781 32"
+}, _react["default"].createElement("title", null, "DXC Logo"), _react["default"].createElement("g", {
+  id: "g12"
+}, _react["default"].createElement("path", {
+  id: "path14",
+  d: "M171.5-54.124v12.539h-3.6V-54.124h-4.973v-3.191h13.54v3.191H171.5",
+  transform: "translate(-68.528 65.45)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path16",
+  d: "M189.96-41.585V-57.315h12.326v3.079h-8.753v3.191h7.7v3.078h-7.7v3.3h8.87v3.078H189.96",
+  transform: "translate(-77.56 65.45)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path18",
+  d: "M223.558-41.438a8.1,8.1,0,0,1-8.382-8.1v-.045a8.161,8.161,0,0,1,8.522-8.146,8.6,8.6,0,0,1,6.444,2.431l-2.289,2.543a6.133,6.133,0,0,0-4.178-1.778,4.743,4.743,0,0,0-4.738,4.905v.045a4.752,4.752,0,0,0,4.738,4.95,6,6,0,0,0,4.295-1.845l2.288,2.228a8.491,8.491,0,0,1-6.7,2.813",
+  transform: "translate(-86.019 65.583)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path20",
+  d: "M254.988-41.585V-47.9h-6.63v6.315h-3.6V-57.315h3.6v6.225h6.63v-6.225h3.594v15.731h-3.594",
+  transform: "translate(-95.903 65.45)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path22",
+  d: "M285.991-41.585l-7.914-10v10h-3.549V-57.315h3.316l7.657,9.685v-9.685h3.549v15.731h-3.058",
+  transform: "translate(-105.869 65.45)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path24",
+  d: "M317.2-49.583a4.869,4.869,0,0,0-4.949-4.95,4.793,4.793,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.793,4.793,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.661-3.623-8.661-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.66,3.623,8.66,8.1v.045c0,4.477-3.664,8.145-8.708,8.145",
+  transform: "translate(-115.631 65.583)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path26",
+  d: "M336.786-41.585V-57.315h3.6v12.584h8.148v3.146H336.786",
+  transform: "translate(-126.654 65.45)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path28",
+  d: "M372.78-49.583a4.87,4.87,0,0,0-4.949-4.95,4.794,4.794,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.794,4.794,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.662-3.623-8.662-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.661,3.623,8.661,8.1v.045c0,4.477-3.666,8.145-8.708,8.145",
+  transform: "translate(-135.016 65.583)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path30",
+  d: "M399.735-41.438c-5.09,0-8.592-3.443-8.592-8.1v-.045a8.243,8.243,0,0,1,8.568-8.146,9.18,9.18,0,0,1,6.42,2.16l-2.265,2.634a6.141,6.141,0,0,0-4.272-1.6,4.807,4.807,0,0,0-4.692,4.905v.045a4.8,4.8,0,0,0,4.949,4.995,5.89,5.89,0,0,0,3.384-.945v-2.25h-3.618v-2.992h7.1v6.841a10.837,10.837,0,0,1-6.98,2.5",
+  transform: "translate(-145.284 65.583)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path32",
+  d: "M428.664-47.855v6.27h-3.6v-6.2l-6.28-9.528h4.2L426.89-51l3.968-6.315h4.085l-6.28,9.46",
+  transform: "translate(-154.162 65.45)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path34",
+  d: "M84.218-55.737a10.063,10.063,0,0,1,2.589-4.4,9.792,9.792,0,0,1,6.985-2.77h11.328V-69.3H93.792a17.041,17.041,0,0,0-11.8,4.759,16.344,16.344,0,0,0-3.547,5.115,13.247,13.247,0,0,0-1.122,3.688Zm0,4.877a10.065,10.065,0,0,0,2.589,4.4,9.793,9.793,0,0,0,6.985,2.77h11.328V-37.3H93.792a17.042,17.042,0,0,1-11.8-4.759,16.339,16.339,0,0,1-3.547-5.114,13.251,13.251,0,0,1-1.122-3.688ZM63.1-47.98,54.45-37.3H45.873l12.957-16-12.957-16H54.45L63.1-58.619l8.65-10.68h8.578l-12.957,16,12.957,16H71.749ZM48.875-55.737a13.212,13.212,0,0,0-1.122-3.688,16.359,16.359,0,0,0-3.546-5.115,17.043,17.043,0,0,0-11.8-4.759H21.08v6.393H32.408a9.79,9.79,0,0,1,6.985,2.77,10.072,10.072,0,0,1,2.59,4.4Zm0,4.877a13.215,13.215,0,0,1-1.122,3.688,16.353,16.353,0,0,1-3.546,5.114,17.044,17.044,0,0,1-11.8,4.759H21.08v-6.393H32.408a9.791,9.791,0,0,0,6.985-2.77,10.074,10.074,0,0,0,2.59-4.4h6.892",
+  transform: "translate(-21.08 69.298)",
+  fill: "#fff"
+})));
+
+exports["default"] = _default;

package/dist/footer/index.d.ts

@@ -0,0 +1,25 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+type Padding = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  socialLinks?: any;
+  bottomLinks?: any;
+  copyright?: string;
+  padding?: Space | Padding;
+  margin?: Space | Margin;
+  tabIndex?: number;
+  
+};
+
+export default function DxcFooter(props: Props): JSX.Element;

package/dist/header/Header.js

@@ -27,17 +27,47 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Dropdown = _interopRequireDefault(require("../dropdown/Dropdown"));
 
-var _close_icon = _interopRequireDefault(require("./close_icon.svg"));
+var _Icons = require("./Icons");
 
 var _variables = require("../common/variables.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
-var _BackgroundColorContext = require("../BackgroundColorContext.js");
+var _BackgroundColorContext = _interopRequireWildcard(require("../BackgroundColorContext.js"));
 
-function _templateObject12() {
+function _templateObject15() {
   var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: ", ";\n  opacity: ", " !important;\n  visibility: ", ";\n  opacity: ", ";\n  display: ", ";\n  transition: opacity 0.2s 0.2s ease-in-out;\n  z-index: ", ";\n"]);
 
+  _templateObject15 = function _templateObject15() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject14() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: 100%;\n  margin-top: 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  color: ", ";\n"]);
+
+  _templateObject14 = function _templateObject14() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject13() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  cursor: pointer;\n  :focus {\n    outline: ", " auto 1px;\n  }\n  position: fixed;\n  top: 23px;\n  right: 20px;\n  width: 24px;\n  height: 24px;\n  padding: ", ";\n"]);
+
+  _templateObject13 = function _templateObject13() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject12() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: ", ";\n  width: ", ";\n  position: absolute;\n  top: 23px;\n  left: 20px;\n"]);
+
   _templateObject12 = function _templateObject12() {
     return data;
   };
@@ -46,7 +76,7 @@ function _templateObject12() {
 }
 
 function _templateObject11() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  cursor: pointer;\n  :focus {\n    outline: ", " auto 1px;\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: space-evenly;\n  background-color: ", ";\n  position: fixed;\n  top: 0;\n  right: 0;\n  z-index: ", ";\n  width: ", ";\n  height: 100vh;\n  padding: 20px;\n  transform: ", ";\n  opacity: ", ";\n  transition-property: transform, opacity;\n  transition-duration: 0.6s;\n  transition-timing-function: ease-in-out;\n  box-sizing: border-box;\n"]);
 
   _templateObject11 = function _templateObject11() {
     return data;
@@ -56,7 +86,7 @@ function _templateObject11() {
 }
 
 function _templateObject10() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: 100%;\n  margin-top: 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-grow: 1;\n"]);
 
   _templateObject10 = function _templateObject10() {
     return data;
@@ -66,7 +96,7 @@ function _templateObject10() {
 }
 
 function _templateObject9() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: space-evenly;\n  background-color: ", ";\n  position: fixed;\n  top: 0;\n  right: 0;\n  z-index: ", ";\n  width: ", ";\n  height: 100vh;\n  padding: 20px;\n  transform: ", ";\n  opacity: ", ";\n  transition-property: transform, opacity;\n  transition-duration: 0.6s;\n  transition-timing-function: ease-in-out;\n  box-sizing: border-box;\n\n  & > img:first-of-type {\n    position: absolute;\n    top: 23px;\n    left: 20px;\n  }\n\n  & > img:last-of-type {\n    position: fixed;\n    top: 23px;\n    right: 20px;\n    width: 24px;\n    height: 24px;\n    padding: ", ";\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-style: ", ";\n  font-size: ", ";\n  text-transform: ", ";\n  font-weight: ", ";\n  color: ", ";\n"]);
 
   _templateObject9 = function _templateObject9() {
     return data;
@@ -76,7 +106,7 @@ function _templateObject9() {
 }
 
 function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-grow: 1;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 54px;\n  cursor: pointer;\n  :hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: ", " auto 1px;\n  }\n  & > svg {\n    fill: ", ";\n  }\n"]);
 
   _templateObject8 = function _templateObject8() {
     return data;
@@ -86,7 +116,7 @@ function _templateObject8() {
 }
 
 function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-style: ", ";\n  font-size: ", ";\n  text-transform: ", ";\n  font-weight: ", ";\n  color: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: calc(100% - 186px);\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  color: ", ";\n\n  justify-content: flex-end;\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"]);
 
   _templateObject7 = function _templateObject7() {
     return data;
@@ -96,7 +126,7 @@ function _templateObject7() {
 }
 
 function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 54px;\n  cursor: pointer;\n  :hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: ", " auto 1px;\n  }\n  & > svg {\n    fill: ", ";\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: calc(100% - 186px);\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n\n  justify-content: flex-end;\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"]);
 
   _templateObject6 = function _templateObject6() {
     return data;
@@ -106,7 +136,7 @@ function _templateObject6() {
 }
 
 function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: calc(100% - 186px);\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  justify-content: flex-end;\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: ", ";\n  width: ", ";\n  vertical-align: middle;\n"]);
 
   _templateObject5 = function _templateObject5() {
     return data;
@@ -116,7 +146,7 @@ function _templateObject5() {
 }
 
 function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: ", ";\n  width: ", ";\n  vertical-align: middle;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: ", ";\n  width: ", ";\n"]);
 
   _templateObject4 = function _templateObject4() {
     return data;
@@ -161,11 +191,24 @@ var Dropdown = function Dropdown(props) {
 
 var HeaderDropdown = _styledComponents["default"].div(_templateObject());
 
+var getLogoElement = function getLogoElement(themeInput) {
+  if (!themeInput) {
+    return _Icons.dxcLogo;
+  }
+
+  if (typeof themeInput === "string") {
+    return _react["default"].createElement(LogoImg, {
+      alt: "Logo",
+      src: themeInput
+    });
+  }
+
+  return themeInput;
+};
+
 var DxcHeader = function DxcHeader(_ref) {
   var _ref$underlined = _ref.underlined,
       underlined = _ref$underlined === void 0 ? false : _ref$underlined,
-      _ref$logoSrc = _ref.logoSrc,
-      logoSrc = _ref$logoSrc === void 0 ? "default" : _ref$logoSrc,
       onClick = _ref.onClick,
       content = _ref.content,
       responsiveContent = _ref.responsiveContent,
@@ -203,6 +246,16 @@ var DxcHeader = function DxcHeader(_ref) {
     }
   };
 
+  var ContentContainerComponent = function ContentContainerComponent() {
+    var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
+    return isResponsive && _react["default"].createElement(MenuContent, {
+      backgroundType: backgroundType
+    }, responsiveContent(handleMenu)) || _react["default"].createElement(ContentContainer, {
+      padding: padding,
+      backgroundType: backgroundType
+    }, content);
+  };
+
   var handleMenu = function handleMenu() {
     if (isResponsive && !isMenuVisible) {
       setIsMenuVisible(!isMenuVisible);
@@ -211,12 +264,12 @@ var DxcHeader = function DxcHeader(_ref) {
     }
   };
 
-  var getLogoRendered = function getLogoRendered(intoMenu) {
-    return _react["default"].createElement(LogoIcon, {
-      logoSrc: logoSrc,
-      src: intoMenu && logoSrc === "default" ? colorsTheme.header.logoResponsive : !intoMenu && logoSrc === "default" ? colorsTheme.header.logo : logoSrc
-    });
-  };
+  var headerLogo = (0, _react.useMemo)(function () {
+    return getLogoElement(colorsTheme.header.logo);
+  }, [colorsTheme.header.logo]);
+  var headerResponsiveLogo = (0, _react.useMemo)(function () {
+    return getLogoElement(colorsTheme.header.logoResponsive);
+  }, [colorsTheme.header.logoResponsive]);
 
   var handleEventListener = function handleEventListener() {
     handleResize(ref.current.offsetWidth);
@@ -232,22 +285,10 @@ var DxcHeader = function DxcHeader(_ref) {
       window.removeEventListener("resize", handleEventListener);
     };
   }, []);
-
-  var HamburgerIcon = function HamburgerIcon() {
-    return _react["default"].createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 24 24",
-      width: "24",
-      height: "24"
-    }, _react["default"].createElement("path", {
-      d: "M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z"
-    }));
-  };
-
   return _react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.header
   }, _react["default"].createElement(HeaderContainer, {
-    underlined: underlined,
+    $underlined: underlined,
     position: "static",
     margin: margin,
     ref: ref
@@ -255,29 +296,28 @@ var DxcHeader = function DxcHeader(_ref) {
     tabIndex: typeof onClick === "function" ? tabIndex : -1,
     interactuable: typeof onClick === "function",
     onClick: onClick
-  }, getLogoRendered(false)), isResponsive && responsiveContent && _react["default"].createElement(MainContainer, null, _react["default"].createElement(ChildContainer, {
+  }, _react["default"].createElement(LogoContainer, null, headerLogo)), isResponsive && responsiveContent && _react["default"].createElement(MainContainer, null, _react["default"].createElement(ChildContainer, {
     padding: padding
   }, _react["default"].createElement(HamburguerItem, {
     tabIndex: tabIndex,
     underlined: underlined,
     onClick: handleMenu
-  }, _react["default"].createElement(HamburgerIcon, null), _react["default"].createElement(HamburguerTitle, null, "Menu"))), _react["default"].createElement("div", null, _react["default"].createElement(ResponsiveMenu, {
+  }, _Icons.hamburgerIcon, _react["default"].createElement(HamburguerTitle, null, "Menu"))), _react["default"].createElement("div", null, _react["default"].createElement(ResponsiveMenu, {
     hasVisibility: isMenuVisible,
     refSize: refSize
-  }, getLogoRendered(true), _react["default"].createElement(MenuContent, null, responsiveContent(handleMenu)), _react["default"].createElement(CloseContainer, {
+  }, _react["default"].createElement(ResponsiveLogoContainer, null, headerResponsiveLogo), _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    color: colorsTheme.header.menuBackgroundColor
+  }, _react["default"].createElement(ContentContainerComponent, null, responsiveContent(handleMenu))), _react["default"].createElement(CloseContainer, {
     tabIndex: tabIndex,
     onClick: handleMenu,
-    src: _close_icon["default"],
     className: "closeIcon"
-  })), _react["default"].createElement(Overlay, {
+  }, _Icons.closeIcon)), _react["default"].createElement(Overlay, {
     onClick: handleMenu,
     hasVisibility: isMenuVisible,
     refSize: refSize
-  }))), !isResponsive && _react["default"].createElement(ChildContainer, {
-    padding: padding
-  }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+  }))), !isResponsive && _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
     color: colorsTheme.header.backgroundColor
-  }, content))));
+  }, _react["default"].createElement(ContentContainerComponent, null))));
 };
 
 DxcHeader.Dropdown = Dropdown;
@@ -286,7 +326,7 @@ var HeaderContainer = (0, _styledComponents["default"])(_AppBar["default"])(_tem
 }, function (props) {
   return props.theme.backgroundColor;
 }, function (props) {
-  return props.underlined && "".concat(props.theme.underlinedThickness, " ").concat(props.theme.underlinedStyle, " ").concat(props.theme.underlinedColor);
+  return props.$underlined && "".concat(props.theme.underlinedThickness, " ").concat(props.theme.underlinedStyle, " ").concat(props.theme.underlinedColor);
 }, function (props) {
   return props.theme.minHeight;
 }, function (props) {
@@ -296,18 +336,38 @@ var HeaderContainer = (0, _styledComponents["default"])(_AppBar["default"])(_tem
 var LogoAnchor = _styledComponents["default"].a(_templateObject3(), function (props) {
   if (!props.interactuable) {
     return "cursor: default; outline:none;";
-  } else {
-    return "cursor: pointer;";
   }
+
+  return "cursor: pointer;";
 });
 
-var LogoIcon = _styledComponents["default"].img(_templateObject4(), function (props) {
+var LogoImg = _styledComponents["default"].img(_templateObject4(), function (props) {
   return props.theme.logoHeight;
 }, function (props) {
   return props.theme.logoWidth;
 });
 
-var ChildContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
+var LogoContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
+  return props.theme.logoHeight;
+}, function (props) {
+  return props.theme.logoWidth;
+});
+
+var ChildContainer = _styledComponents["default"].div(_templateObject6(), 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] : "";
+}, function (props) {
+  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.right ? _variables.spaces[props.padding.right] : "";
+}, function (props) {
+  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.bottom ? _variables.spaces[props.padding.bottom] : "";
+}, function (props) {
+  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
+});
+
+var ContentContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
+  return props.backgroundType === "dark" ? props.theme.contentColorOnDark : props.theme.contentColor;
+}, 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] : "";
@@ -319,7 +379,7 @@ var ChildContainer = _styledComponents["default"].div(_templateObject5(), functi
   return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
 });
 
-var HamburguerItem = _styledComponents["default"].div(_templateObject6(), function (props) {
+var HamburguerItem = _styledComponents["default"].div(_templateObject8(), function (props) {
   return props.theme.hamburguerHoverColor;
 }, function (props) {
   return props.theme.hamburguerFocusColor;
@@ -327,7 +387,7 @@ var HamburguerItem = _styledComponents["default"].div(_templateObject6(), functi
   return props.theme.hamburguerIconColor;
 });
 
-var HamburguerTitle = _styledComponents["default"].span(_templateObject7(), function (props) {
+var HamburguerTitle = _styledComponents["default"].span(_templateObject9(), function (props) {
   return props.theme.hamburguerFontFamily;
 }, function (props) {
   return props.theme.hamburguerFontStyle;
@@ -341,9 +401,9 @@ var HamburguerTitle = _styledComponents["default"].span(_templateObject7(), func
   return props.theme.hamburguerFontColor;
 });
 
-var MainContainer = _styledComponents["default"].div(_templateObject8());
+var MainContainer = _styledComponents["default"].div(_templateObject10());
 
-var ResponsiveMenu = _styledComponents["default"].div(_templateObject9(), function (props) {
+var ResponsiveMenu = _styledComponents["default"].div(_templateObject11(), function (props) {
   return props.theme.menuBackgroundColor;
 }, function (props) {
   return props.theme.menuZindex;
@@ -357,15 +417,23 @@ var ResponsiveMenu = _styledComponents["default"].div(_templateObject9(), functi
   return props.hasVisibility ? "translateX(0)" : "translateX(100vw)";
 }, function (props) {
   return props.hasVisibility ? "1" : "0.96";
-}, _variables.spaces.xxsmall);
+});
 
-var MenuContent = _styledComponents["default"].div(_templateObject10());
+var ResponsiveLogoContainer = _styledComponents["default"].div(_templateObject12(), function (props) {
+  return props.theme.logoHeight;
+}, function (props) {
+  return props.theme.logoWidth;
+});
 
-var CloseContainer = _styledComponents["default"].img(_templateObject11(), function (props) {
+var CloseContainer = _styledComponents["default"].div(_templateObject13(), function (props) {
   return props.theme.hamburguerFocusColor;
+}, _variables.spaces.xxsmall);
+
+var MenuContent = _styledComponents["default"].div(_templateObject14(), function (props) {
+  return props.backgroundType === "dark" ? props.theme.contentColorOnDark : props.theme.contentColor;
 });
 
-var Overlay = _styledComponents["default"].div(_templateObject12(), function (props) {
+var Overlay = _styledComponents["default"].div(_templateObject15(), function (props) {
   return props.theme.overlayColor;
 }, function (props) {
   return props.theme.overlayOpacity;
@@ -380,7 +448,6 @@ var Overlay = _styledComponents["default"].div(_templateObject12(), function (pr
 });
 
 DxcHeader.propTypes = {
-  logoSrc: _propTypes["default"].string,
   underlined: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
   margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({