@dxc-technology/halstack-react 9.1.0 → 10.0.0

package/grid/Grid.stories.tsx

@@ -56,16 +56,16 @@ export const Chromatic = () => (
     <Title title="Place self" level={4} />
     <ExampleContainer>
       <DxcGrid templateRows={["repeat(3, 100px)"]}>
-        <DxcGrid.GridItem placeSelf="center">
+        <DxcGrid.Item placeSelf="center">
           <ColoredContainer height="50px" width="50px" />
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem placeSelf={{ alignSelf: "end" }}>
+        </DxcGrid.Item>
+        <DxcGrid.Item placeSelf={{ alignSelf: "end" }}>
           <ColoredContainer height="40px" width="40px" />
           <ColoredContainer height="30px" width="30px" />
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem placeSelf={{ alignSelf: "center", justifySelf: "end" }}>
+        </DxcGrid.Item>
+        <DxcGrid.Item placeSelf={{ alignSelf: "center", justifySelf: "end" }}>
           <ColoredContainer height="50px" width="50px" />
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </DxcGrid>
     </ExampleContainer>
     <Title title="Halstack layout using template areas" level={4} />
@@ -76,33 +76,33 @@ export const Chromatic = () => (
         templateAreas={["header header header header", "sidenav main main main", "sidenav footer footer footer"]}
         gap={{ rowGap: "0.5rem", columnGap: "1rem" }}
       >
-        <DxcGrid.GridItem areaName="header" as="header">
+        <DxcGrid.Item areaName="header" as="header">
           <ColoredContainer height="100%" />
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem areaName="main" as="main">
+        </DxcGrid.Item>
+        <DxcGrid.Item areaName="main" as="main">
           <ColoredContainer height="100%" />
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem areaName="sidenav" as="nav">
+        </DxcGrid.Item>
+        <DxcGrid.Item areaName="sidenav" as="nav">
           <ColoredContainer height="100%" />
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem areaName="footer" as="footer">
+        </DxcGrid.Item>
+        <DxcGrid.Item areaName="footer" as="footer">
           <ColoredContainer height="100%" />
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </DxcGrid>
     </ExampleContainer>
     <Title title="Template rows and columns with flexible sizes" level={4} />
     <ExampleContainer>
       <DxcGrid templateColumns={["1fr", "1fr", "1fr"]} templateRows={["1fr", "3fr", "1fr"]} gap="0.5rem">
-        <DxcGrid.GridItem column={{ start: 1, end: -1 }}>
+        <DxcGrid.Item column={{ start: 1, end: -1 }}>
           <ColoredContainer color="yellow" height="100%">
             Header
           </ColoredContainer>
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem column={1}>
+        </DxcGrid.Item>
+        <DxcGrid.Item column={1}>
           <ColoredContainer color="lightcyan" height="100%">
             Sidenav
           </ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
         <DxcGrid
           column={{ start: 2, end: -1 }}
           templateRows={["repeat(4, 1fr)"]}
@@ -118,11 +118,11 @@ export const Chromatic = () => (
           <ColoredContainer />
           <ColoredContainer />
         </DxcGrid>
-        <DxcGrid.GridItem column={{ start: 1, end: -1 }}>
+        <DxcGrid.Item column={{ start: 1, end: -1 }}>
           <ColoredContainer color="black" height="100%">
             Footer
           </ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </DxcGrid>
     </ExampleContainer>
     <Title title="Overlapping" level={4} />
@@ -141,53 +141,53 @@ export const Chromatic = () => (
     <Title title="Implicit rows and columns" level={4} />
     <ExampleContainer>
       <DxcGrid templateColumns={["50px"]} templateRows={["50px", "50px"]} autoRows="50px" autoColumns="50px">
-        <DxcGrid.GridItem>
+        <DxcGrid.Item>
           <ColoredContainer height="50px">1</ColoredContainer>
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem row={2}>
+        </DxcGrid.Item>
+        <DxcGrid.Item row={2}>
           <ColoredContainer height="50px">3</ColoredContainer>
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem row={6} column={1}>
+        </DxcGrid.Item>
+        <DxcGrid.Item row={6} column={1}>
           <ColoredContainer height="50px">5</ColoredContainer>
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem row={3}>
+        </DxcGrid.Item>
+        <DxcGrid.Item row={3}>
           <ColoredContainer height="50px">4</ColoredContainer>
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem row={{ start: 1, end: 2 }} column={{ start: 5, end: "span 2" }}>
+        </DxcGrid.Item>
+        <DxcGrid.Item row={{ start: 1, end: 2 }} column={{ start: 5, end: "span 2" }}>
           <ColoredContainer height="50px">2</ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </DxcGrid>
     </ExampleContainer>
     <Title title="Autoflow 'row' (default)" level={4} />
     <ExampleContainer>
       <DxcGrid templateColumns={["repeat(5, 1fr)"]} templateRows={["1fr", "1fr"]} autoFlow="row" autoColumns="1fr">
-        <DxcGrid.GridItem row={{ start: 1, end: "span 2" }} column={1}>
+        <DxcGrid.Item row={{ start: 1, end: "span 2" }} column={1}>
           <ColoredContainer height="100%">1</ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
         <ColoredContainer color="lightyellow">2</ColoredContainer>
         <ColoredContainer color="lightcyan">3</ColoredContainer>
         <ColoredContainer color="lightgreen">4</ColoredContainer>
-        <DxcGrid.GridItem row={{ start: 1, end: -1 }} column={-2}>
+        <DxcGrid.Item row={{ start: 1, end: -1 }} column={-2}>
           <ColoredContainer color="lightpink" height="100%">
             5
           </ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </DxcGrid>
     </ExampleContainer>
     <Title title="Autoflow 'column'" level={4} />
     <ExampleContainer>
       <DxcGrid templateColumns={["repeat(5, 1fr)"]} templateRows={["1fr", "1fr"]} autoFlow="column" autoColumns="1fr">
-        <DxcGrid.GridItem row={{ start: 1, end: -1 }} column={1}>
+        <DxcGrid.Item row={{ start: 1, end: -1 }} column={1}>
           <ColoredContainer height="100%">1</ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
         <ColoredContainer color="lightyellow">2</ColoredContainer>
         <ColoredContainer color="lightcyan">3</ColoredContainer>
         <ColoredContainer color="lightgreen">4</ColoredContainer>
-        <DxcGrid.GridItem row={{ start: 1, end: -1 }} column={-2}>
+        <DxcGrid.Item row={{ start: 1, end: -1 }} column={-2}>
           <ColoredContainer color="lightpink" height="100%">
             5
           </ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </DxcGrid>
     </ExampleContainer>
   </>

package/header/Header.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import DxcDropdown from "../dropdown/Dropdown";
 import HeaderPropsType from "./types";
 declare const DxcHeader: {
-    ({ underlined, content, responsiveContent, onClick, margin, padding, tabIndex, }: HeaderPropsType): JSX.Element;
+    ({ underlined, content, responsiveContent, onClick, margin, tabIndex, }: HeaderPropsType): JSX.Element;
     Dropdown: (props: React.ComponentProps<typeof DxcDropdown>) => JSX.Element;
 };
 export default DxcHeader;

package/header/Header.js

@@ -72,13 +72,11 @@ var Content = function Content(_ref) {
   var isResponsive = _ref.isResponsive,
       responsiveContent = _ref.responsiveContent,
       handleMenu = _ref.handleMenu,
-      padding = _ref.padding,
       content = _ref.content;
   var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
   return isResponsive ? /*#__PURE__*/_react["default"].createElement(MenuContent, {
     backgroundType: backgroundType
   }, responsiveContent(handleMenu)) : /*#__PURE__*/_react["default"].createElement(ContentContainer, {
-    padding: padding,
     backgroundType: backgroundType
   }, content);
 };
@@ -90,7 +88,6 @@ var DxcHeader = function DxcHeader(_ref2) {
       responsiveContent = _ref2.responsiveContent,
       onClick = _ref2.onClick,
       margin = _ref2.margin,
-      padding = _ref2.padding,
       _ref2$tabIndex = _ref2.tabIndex,
       tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex;
   var colorsTheme = (0, _useTheme["default"])();
@@ -145,9 +142,7 @@ var DxcHeader = function DxcHeader(_ref2) {
     tabIndex: onClick ? tabIndex : -1,
     interactuable: onClick ? true : false,
     onClick: onClick
-  }, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, headerLogo)), isResponsive && responsiveContent && /*#__PURE__*/_react["default"].createElement(MainContainer, null, /*#__PURE__*/_react["default"].createElement(ChildContainer, {
-    padding: padding
-  }, /*#__PURE__*/_react["default"].createElement(HamburguerTrigger, {
+  }, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, headerLogo)), isResponsive && responsiveContent && /*#__PURE__*/_react["default"].createElement(MainContainer, null, /*#__PURE__*/_react["default"].createElement(ChildContainer, null, /*#__PURE__*/_react["default"].createElement(HamburguerTrigger, {
     tabIndex: tabIndex,
     onClick: handleMenu
   }, hamburgerIcon, translatedLabels.header.hamburguerTitle)), /*#__PURE__*/_react["default"].createElement(ResponsiveMenu, {
@@ -163,7 +158,6 @@ var DxcHeader = function DxcHeader(_ref2) {
     isResponsive: isResponsive,
     responsiveContent: responsiveContent,
     handleMenu: handleMenu,
-    padding: padding,
     content: content
   }))), /*#__PURE__*/_react["default"].createElement(Overlay, {
     onClick: handleMenu,
@@ -174,7 +168,6 @@ var DxcHeader = function DxcHeader(_ref2) {
     isResponsive: isResponsive,
     responsiveContent: responsiveContent,
     handleMenu: handleMenu,
-    padding: padding,
     content: content
   }))));
 };
@@ -209,29 +202,9 @@ var LogoContainer = _styledComponents["default"].div(_templateObject5 || (_templ
   return props.theme.logoWidth;
 });
 
-var ChildContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  flex-grow: 1;\n  width: calc(100% - 186px);\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\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] : "";
-}, 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 ChildContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  flex-grow: 1;\n  width: calc(100% - 186px);\n"])));
 
-var ContentContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  justify-content: flex-end;\n  width: calc(100% - 186px);\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  color: ", ";\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] : "";
-}, 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] : "";
-}, function (props) {
+var ContentContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  justify-content: flex-end;\n  width: calc(100% - 186px);\n  color: ", ";\n"])), function (props) {
   return props.backgroundType === "dark" ? props.theme.contentColorOnDark : props.theme.contentColor;
 });
 

package/header/Header.stories.tsx

@@ -42,46 +42,9 @@ const opinionatedTheme = {
     fontColor: "#000000",
     menuBaseColor: "#ffffff",
     hamburguerColor: "#000000",
-    logo: (
-      <svg xmlns="http://www.w3.org/2000/svg" width="73" height="40" viewBox="0 0 73 40">
-        <g id="g10" transform="translate(0)">
-          <g id="g12">
-            <path
-              id="path14"
-              d="M91.613-28.177v2.514H90.231V-28.15l-2.415-3.82h1.616l1.5,2.532,1.526-2.532h1.571ZM83.9-25.555A3.15,3.15,0,0,1,80.6-28.8v-.018a3.231,3.231,0,0,1,3.294-3.262,3.442,3.442,0,0,1,2.469.865l-.87,1.054a2.311,2.311,0,0,0-1.643-.64,1.891,1.891,0,0,0-1.8,1.964v.018a1.886,1.886,0,0,0,1.9,2,2.2,2.2,0,0,0,1.3-.378v-.9H83.858v-1.2h2.729v2.738A4.071,4.071,0,0,1,83.9-25.555Zm-6.416-3.261a1.913,1.913,0,0,0-1.9-1.982A1.883,1.883,0,0,0,73.7-28.835v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,77.486-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018A3.255,3.255,0,0,1,75.6-32.078a3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,75.583-25.555Zm-9.173-.108V-31.97h1.382v5.045h3.133v1.261Zm-3.433-3.153a1.913,1.913,0,0,0-1.9-1.982,1.883,1.883,0,0,0-1.886,1.964v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,62.978-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018a3.255,3.255,0,0,1,3.348-3.262,3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,61.075-25.555Zm-6.508-.108-3.043-4.009v4.009H50.159V-31.97h1.275l2.944,3.883V-31.97h1.364v6.306Zm-8.246,0v-2.531h-2.55v2.531H42.389V-31.97h1.382v2.5h2.55v-2.5H47.7v6.306Zm-8.432.108A3.178,3.178,0,0,1,34.666-28.8v-.018a3.2,3.2,0,0,1,3.276-3.262,3.237,3.237,0,0,1,2.478.973l-.88,1.018a2.315,2.315,0,0,0-1.606-.712,1.866,1.866,0,0,0-1.822,1.964v.018a1.87,1.87,0,0,0,1.822,1.982,2.265,2.265,0,0,0,1.651-.739l.88.891A3.206,3.206,0,0,1,37.889-25.555Zm-9.805-.108V-31.97h4.739v1.235H29.458v1.279h2.962v1.234H29.458V-26.9h3.411v1.234ZM24.322-30.69v5.027H22.939V-30.69H21.028v-1.28h5.206v1.28H24.322"
-              transform="translate(-21.028 65.555)"
-              fill="#100f0d"
-            />
-            <path
-              id="path16"
-              d="M75.836-76.712a8.975,8.975,0,0,1,2.246-3.9,8.393,8.393,0,0,1,6.058-2.457h9.824v-5.67H84.139a14.611,14.611,0,0,0-10.232,4.221,14.509,14.509,0,0,0-3.076,4.536,11.913,11.913,0,0,0-.973,3.271Zm0,4.325a8.978,8.978,0,0,0,2.246,3.9,8.394,8.394,0,0,0,6.058,2.457h9.824v5.67H84.139A14.611,14.611,0,0,1,73.907-64.58a14.506,14.506,0,0,1-3.076-4.536,11.91,11.91,0,0,1-.973-3.271ZM57.522-69.832l-7.5,9.473H42.581L53.818-74.55,42.581-88.739H50.02l7.5,9.472,7.5-9.472h7.439L61.225-74.55l11.237,14.19H65.023Zm-12.336-6.88a11.935,11.935,0,0,0-.973-3.271,14.515,14.515,0,0,0-3.076-4.536A14.612,14.612,0,0,0,30.9-88.739H21.081v5.67H30.9a8.394,8.394,0,0,1,6.058,2.457,8.978,8.978,0,0,1,2.246,3.9Zm0,4.325a11.932,11.932,0,0,1-.973,3.271,14.511,14.511,0,0,1-3.076,4.536A14.611,14.611,0,0,1,30.9-60.359H21.081v-5.67H30.9a8.4,8.4,0,0,0,6.058-2.457,8.981,8.981,0,0,0,2.246-3.9h5.978"
-              transform="translate(-21.049 88.739)"
-              fill="#5f249f"
-            />
-          </g>
-        </g>
-      </svg>
-    ),
-    logoResponsive: (
-      <svg xmlns="http://www.w3.org/2000/svg" width="73" height="40" viewBox="0 0 73 40">
-        <g id="g10" transform="translate(0)">
-          <g id="g12">
-            <path
-              id="path14"
-              d="M91.613-28.177v2.514H90.231V-28.15l-2.415-3.82h1.616l1.5,2.532,1.526-2.532h1.571ZM83.9-25.555A3.15,3.15,0,0,1,80.6-28.8v-.018a3.231,3.231,0,0,1,3.294-3.262,3.442,3.442,0,0,1,2.469.865l-.87,1.054a2.311,2.311,0,0,0-1.643-.64,1.891,1.891,0,0,0-1.8,1.964v.018a1.886,1.886,0,0,0,1.9,2,2.2,2.2,0,0,0,1.3-.378v-.9H83.858v-1.2h2.729v2.738A4.071,4.071,0,0,1,83.9-25.555Zm-6.416-3.261a1.913,1.913,0,0,0-1.9-1.982A1.883,1.883,0,0,0,73.7-28.835v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,77.486-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018A3.255,3.255,0,0,1,75.6-32.078a3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,75.583-25.555Zm-9.173-.108V-31.97h1.382v5.045h3.133v1.261Zm-3.433-3.153a1.913,1.913,0,0,0-1.9-1.982,1.883,1.883,0,0,0-1.886,1.964v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,62.978-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018a3.255,3.255,0,0,1,3.348-3.262,3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,61.075-25.555Zm-6.508-.108-3.043-4.009v4.009H50.159V-31.97h1.275l2.944,3.883V-31.97h1.364v6.306Zm-8.246,0v-2.531h-2.55v2.531H42.389V-31.97h1.382v2.5h2.55v-2.5H47.7v6.306Zm-8.432.108A3.178,3.178,0,0,1,34.666-28.8v-.018a3.2,3.2,0,0,1,3.276-3.262,3.237,3.237,0,0,1,2.478.973l-.88,1.018a2.315,2.315,0,0,0-1.606-.712,1.866,1.866,0,0,0-1.822,1.964v.018a1.87,1.87,0,0,0,1.822,1.982,2.265,2.265,0,0,0,1.651-.739l.88.891A3.206,3.206,0,0,1,37.889-25.555Zm-9.805-.108V-31.97h4.739v1.235H29.458v1.279h2.962v1.234H29.458V-26.9h3.411v1.234ZM24.322-30.69v5.027H22.939V-30.69H21.028v-1.28h5.206v1.28H24.322"
-              transform="translate(-21.028 65.555)"
-              fill="#100f0d"
-            />
-            <path
-              id="path16"
-              d="M75.836-76.712a8.975,8.975,0,0,1,2.246-3.9,8.393,8.393,0,0,1,6.058-2.457h9.824v-5.67H84.139a14.611,14.611,0,0,0-10.232,4.221,14.509,14.509,0,0,0-3.076,4.536,11.913,11.913,0,0,0-.973,3.271Zm0,4.325a8.978,8.978,0,0,0,2.246,3.9,8.394,8.394,0,0,0,6.058,2.457h9.824v5.67H84.139A14.611,14.611,0,0,1,73.907-64.58a14.506,14.506,0,0,1-3.076-4.536,11.91,11.91,0,0,1-.973-3.271ZM57.522-69.832l-7.5,9.473H42.581L53.818-74.55,42.581-88.739H50.02l7.5,9.472,7.5-9.472h7.439L61.225-74.55l11.237,14.19H65.023Zm-12.336-6.88a11.935,11.935,0,0,0-.973-3.271,14.515,14.515,0,0,0-3.076-4.536A14.612,14.612,0,0,0,30.9-88.739H21.081v5.67H30.9a8.394,8.394,0,0,1,6.058,2.457,8.978,8.978,0,0,1,2.246,3.9Zm0,4.325a11.932,11.932,0,0,1-.973,3.271,14.511,14.511,0,0,1-3.076,4.536A14.611,14.611,0,0,1,30.9-60.359H21.081v-5.67H30.9a8.4,8.4,0,0,0,6.058-2.457,8.981,8.981,0,0,0,2.246-3.9h5.978"
-              transform="translate(-21.049 88.739)"
-              fill="#5f249f"
-            />
-          </g>
-        </g>
-      </svg>
-    ),
+    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/2048px-2021_Facebook_icon.svg.png",
+    logoResponsive:
+      "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/2048px-2021_Facebook_icon.svg.png",
     contentColor: "#000000",
     overlayColor: "#000000b3",
   },
@@ -149,35 +112,6 @@ export const Chromatic = () => (
       <DxcHeader underlined margin="xxlarge" />
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
     </ExampleContainer>
-    <Title title="Paddings" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Xxsmall padding" theme="light" level={4} />
-      <DxcHeader underlined padding="xxsmall" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xsmall padding" theme="light" level={4} />
-      <DxcHeader underlined padding="xsmall" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Small padding" theme="light" level={4} />
-      <DxcHeader underlined padding="small" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Medium padding" theme="light" level={4} />
-      <DxcHeader underlined padding="medium" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Large padding" theme="light" level={4} />
-      <DxcHeader underlined padding="large" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xlarge padding" theme="light" level={4} />
-      <DxcHeader underlined padding="xlarge" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xxlarge padding" theme="light" level={4} />
-      <DxcHeader underlined padding="xxlarge" />
-    </ExampleContainer>
     <Title title="Opinionated theme" theme="light" level={2} />
     <ExampleContainer>
       <HalstackProvider theme={opinionatedTheme}>
@@ -200,8 +134,10 @@ export const ResponsiveHeader = () => (
   <ExampleContainer>
     <Title title="Responsive" theme="light" level={4} />
     <DxcHeader
-      content={<DxcHeader.Dropdown options={options} label="Default Dropdown" />}
-      responsiveContent={(closeHandler) => <DxcHeader.Dropdown options={options} label="Default Dropdown" />}
+      content={<DxcHeader.Dropdown options={options} label="Default Dropdown" onSelectOption={() => {}} />}
+      responsiveContent={(closeHandler) => (
+        <DxcHeader.Dropdown options={options} label="Default Dropdown" onSelectOption={() => {}} />
+      )}
       underlined
     />
   </ExampleContainer>

package/header/types.d.ts

@@ -1,11 +1,5 @@
 /// <reference types="react" />
 declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Padding = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
 declare type Props = {
     /**
      * Wether a contrast line should appear at the bottom of the header.
@@ -31,14 +25,6 @@ declare type Props = {
      * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      */
     margin?: Space;
-    /**
-     * @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
-     * Size of the padding to be applied to the custom area of the component
-     * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in
-     * order to specify different padding sizes.
-     */
-    padding?: Space | Padding;
     /**
      * Value of the tabindex for all interactuable elements, except those inside the
      * custom area.

package/inset/Inset.stories.tsx

@@ -205,7 +205,7 @@ export const Chromatic = () => (
     </Container>
     <Title title="Inside a flex column" level={4} />
     <Container>
-      <DxcFlex direction="column" gap="0.75rem">
+      <DxcFlex direction="column" gap="1rem">
         <Placeholder></Placeholder>
         <DxcInset top="0.25rem" right="1.5rem" bottom="2rem" left="4rem">
           <Placeholder></Placeholder>

package/layout/ApplicationLayout.d.ts

@@ -3,11 +3,11 @@ import AppLayoutPropsType, { AppLayoutMainPropsType } from "./types";
 declare const DxcApplicationLayout: {
     ({ visibilityToggleLabel, header, sidenav, footer, children, }: AppLayoutPropsType): JSX.Element;
     Header: {
-        ({ underlined, content, responsiveContent, onClick, margin, padding, tabIndex, }: import("../header/types").default): JSX.Element;
+        ({ underlined, content, responsiveContent, onClick, margin, tabIndex, }: import("../header/types").default): JSX.Element;
         Dropdown: (props: import("../dropdown/types").default) => JSX.Element;
     };
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
-    Footer: ({ socialLinks, bottomLinks, copyright, children, padding, margin, tabIndex, }: import("../footer/types").default) => JSX.Element;
+    Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, }: import("../footer/types").default) => JSX.Element;
     SideNav: {
         ({ title, children }: import("../sidenav/types").default): JSX.Element;
         Section: ({ children }: import("../sidenav/types").SidenavSectionPropsType) => JSX.Element;

package/layout/ApplicationLayout.js

@@ -65,13 +65,16 @@ var defaultFooter = function defaultFooter() {
     }],
     socialLinks: [{
       href: "https://www.linkedin.com/company/dxctechnology",
-      logo: _Icons.linkedinLogo
+      logo: _Icons.linkedinLogo,
+      title: "Linkedin"
     }, {
       href: "https://twitter.com/dxctechnology",
-      logo: _Icons.twitterLogo
+      logo: _Icons.twitterLogo,
+      title: "Twitter"
     }, {
       href: "https://www.facebook.com/DXCTechnology/",
-      logo: _Icons.facebookLogo
+      logo: _Icons.facebookLogo,
+      title: "Facebook"
     }]
   });
 };
@@ -160,7 +163,7 @@ var SidenavContainer = _styledComponents["default"].div(_templateObject6 || (_te
 
 var MainContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
 
-var MainContentContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1;\n"])));
+var MainContentContainer = _styledComponents["default"].main(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1;\n  background-color: #fff;\n"])));
 
 DxcApplicationLayout.Header = _Header["default"];
 DxcApplicationLayout.Main = Main;

package/link/Link.js

@@ -105,7 +105,7 @@ var StyledLink = _styledComponents["default"].div(_templateObject || (_templateO
 }, function (props) {
   return props.disabled && "cursor: default;";
 }, function (props) {
-  return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
+  return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledFontColor;
 }, function (props) {
   return props.disabled ? "pointer-events: none;" : "";
 }, function (props) {

package/nav-tabs/NavTabs.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { NavTabsContextProps, NavTabsProps } from "./types";
+import NavTabsPropsType, { NavTabsContextProps } from "./types";
 export declare const NavTabsContext: React.Context<NavTabsContextProps>;
 declare const DxcNavTabs: {
-    ({ iconPosition, tabIndex, children }: NavTabsProps): JSX.Element;
+    ({ iconPosition, tabIndex, children }: NavTabsPropsType): JSX.Element;
     Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLAnchorElement>>;
 };
 export default DxcNavTabs;

package/nav-tabs/NavTabs.js

@@ -68,23 +68,20 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
       children = _ref.children;
-  var colorsTheme = (0, _useTheme["default"])();
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      innerFocus = _useState2[0],
-      setInnerFocus = _useState2[1];
+      innerFocusIndex = _useState2[0],
+      setInnerFocusIndex = _useState2[1];
 
+  var colorsTheme = (0, _useTheme["default"])();
   var contextValue = (0, _react.useMemo)(function () {
     return {
       iconPosition: iconPosition,
       tabIndex: tabIndex,
-      hasIcons: _react["default"].Children.toArray(children).some(function (child) {
-        return getPropInChild(child, "icon");
-      }),
-      focusedLabel: innerFocus === null ? undefined : getLabelFromTab(children[innerFocus])
+      focusedLabel: innerFocusIndex === null ? undefined : getLabelFromTab(children[innerFocusIndex])
     };
-  }, [iconPosition, tabIndex, innerFocus]);
+  }, [iconPosition, tabIndex, innerFocusIndex]);
 
   var handleOnKeyDown = function handleOnKeyDown(event) {
     var activeTab = _react["default"].Children.toArray(children).findIndex(function (child) {
@@ -95,13 +92,13 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
       case "Left":
       case "ArrowLeft":
         event.preventDefault();
-        setInnerFocus(getPreviousTabIndex(children, innerFocus === null ? activeTab : innerFocus));
+        setInnerFocusIndex(getPreviousTabIndex(children, innerFocusIndex === null ? activeTab : innerFocusIndex));
         break;
 
       case "Right":
       case "ArrowRight":
         event.preventDefault();
-        setInnerFocus(getNextTabIndex(children, innerFocus === null ? activeTab : innerFocus));
+        setInnerFocusIndex(getNextTabIndex(children, innerFocusIndex === null ? activeTab : innerFocusIndex));
         break;
     }
   };

package/nav-tabs/NavTabs.stories.tsx

@@ -176,6 +176,20 @@ export const Chromatic = () => (
         </DxcNavTabs.Tab>
       </DxcNavTabs>
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With long label and left icon alignment" theme="light" level={4} />
+      <DxcNavTabs iconPosition="left">
+        <DxcNavTabs.Tab href="#" active>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </DxcNavTabs.Tab>
+        <DxcNavTabs.Tab href="#" icon={iconSVG} disabled notificationNumber={3}>
+          Tab 2
+        </DxcNavTabs.Tab>
+        <DxcNavTabs.Tab href="#" icon={iconSVG}>
+          Tab 3
+        </DxcNavTabs.Tab>
+      </DxcNavTabs>
+    </ExampleContainer>
     <Title title="Opinionated theme" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Only label" theme="light" level={4} />