@dxc-technology/halstack-react 9.1.0 → 10.1.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/image/Image.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import ImagePropsType from "./types";
+declare const DxcImage: ({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: ImagePropsType) => JSX.Element;
+export default DxcImage;

package/image/Image.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _useTheme = _interopRequireDefault(require("../useTheme"));
+
+var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
+
+var _templateObject;
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var CaptionWrapper = function CaptionWrapper(_ref) {
+  var condition = _ref.condition,
+      wrapper = _ref.wrapper,
+      children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, condition ? wrapper(children) : children);
+};
+
+var DxcImage = function DxcImage(_ref2) {
+  var alt = _ref2.alt,
+      caption = _ref2.caption,
+      _ref2$lazyLoading = _ref2.lazyLoading,
+      lazyLoading = _ref2$lazyLoading === void 0 ? false : _ref2$lazyLoading,
+      src = _ref2.src,
+      srcSet = _ref2.srcSet,
+      sizes = _ref2.sizes,
+      width = _ref2.width,
+      height = _ref2.height,
+      objectFit = _ref2.objectFit,
+      objectPosition = _ref2.objectPosition,
+      onLoad = _ref2.onLoad,
+      onError = _ref2.onError;
+  var colorsTheme = (0, _useTheme["default"])();
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.image
+  }, /*#__PURE__*/_react["default"].createElement(CaptionWrapper, {
+    condition: caption != undefined,
+    wrapper: function wrapper(children) {
+      return /*#__PURE__*/_react["default"].createElement(Figure, null, children, /*#__PURE__*/_react["default"].createElement(_BaseTypography["default"], {
+        as: "figcaption",
+        color: colorsTheme.image.captionFontColor,
+        fontFamily: colorsTheme.image.captionFontFamily,
+        fontSize: colorsTheme.image.captionFontSize,
+        fontStyle: colorsTheme.image.captionFontStyle,
+        fontWeight: colorsTheme.image.captionFontWeight,
+        lineHeight: colorsTheme.image.captionLineHeight
+      }, caption));
+    }
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    alt: alt,
+    loading: lazyLoading ? "lazy" : undefined,
+    onLoad: onLoad,
+    onError: onError,
+    src: src,
+    srcSet: srcSet,
+    sizes: sizes,
+    style: {
+      objectFit: objectFit,
+      objectPosition: objectPosition,
+      width: width,
+      height: height
+    }
+  })));
+};
+
+var Figure = _styledComponents["default"].figure(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: fit-content;\n  margin: 0;\n  padding: 0;\n"])));
+
+var _default = DxcImage;
+exports["default"] = _default;

package/image/Image.stories.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+import DxcImage from "./Image";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { DxcFlex, DxcInset, DxcParagraph } from "../main";
+
+export default {
+  title: "Image",
+  component: DxcImage,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Image component" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Simple image" theme="light" level={4} />
+      <DxcImage
+        alt="Example image"
+        width="100%"
+        src="https://images.ctfassets.net/hrltx12pl8hq/5596z2BCR9KmT1KeRBrOQa/4070fd4e2f1a13f71c2c46afeb18e41c/shutterstock_451077043-hero1.jpg"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Image with text" theme="light" level={4} />
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et
+        arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra
+        lobortis integer eu. Potenti amet ac id risus ac nunc orci nibh. Tempus vitae vitae aenean arcu. Nibh tristique
+        porta dui enim eget tristique rutrum. Quisque faucibus suscipit nibh est sed. Netus venenatis congue diam in dui
+        morbi dignissim lorem. Urna aliquet sem in tincidunt. Nunc arcu nec fringilla enim purus ut justo nisi. Vel mus
+        ut ornare faucibus blandit diam sit vestibulum massa. Semper nullam sit sagittis hendrerit augue. In fermentum
+        metus proin arcu faucibus proin nibh sit. Vel integer sed enim in sed vel nec ut vitae. Commodo sagittis
+        volutpat id lorem.
+      </DxcParagraph>
+      <DxcInset top="2rem" bottom="2rem">
+        <DxcImage
+          alt="Ratatouille is a great movie"
+          caption="Ratatouille with a smile on his face."
+          src="https://hips.hearstapps.com/es.h-cdn.co/fotoes/images/cinefilia/por-que-ratatouille-nos-sigue-enamorando-10-anos-despues/136444706-1-esl-ES/Por-que-Ratatouille-nos-sigue-enamorando-10-anos-despues.jpg"
+        />
+      </DxcInset>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et
+        arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra
+        lobortis integer eu. Potenti amet ac id risus ac nunc orci nibh. Tempus vitae vitae aenean arcu. Nibh tristique
+        porta dui enim eget tristique rutrum. Quisque faucibus suscipit nibh est sed. Netus venenatis congue diam in dui
+        morbi dignissim lorem. Urna aliquet sem in tincidunt. Nunc arcu nec fringilla enim purus ut justo nisi. Vel mus
+        ut ornare faucibus blandit diam sit vestibulum massa. Semper nullam sit sagittis hendrerit augue. In fermentum
+        metus proin arcu faucibus proin nibh sit. Vel integer sed enim in sed vel nec ut vitae. Commodo sagittis
+        volutpat id lorem.
+      </DxcParagraph>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Example image" theme="light" level={4} />
+      <DxcFlex gap="1rem">
+        <DxcImage
+          alt="Camera pic"
+          caption="Picture of a camera and the sunset."
+          width="500px"
+          src="https://assets.entrepreneur.com/content/3x2/2000/20191009140007-GettyImages-1053962188.jpeg"
+        />
+        <DxcParagraph>
+          Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et
+          arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra
+          lobortis integer eu. Potenti amet ac id risus ac nunc orci nibh. Tempus vitae vitae aenean arcu. Nibh
+          tristique porta dui enim eget tristique rutrum. Quisque faucibus suscipit nibh est sed. Netus venenatis congue
+          diam in dui morbi dignissim lorem. Urna aliquet sem in tincidunt. Nunc arcu nec fringilla enim purus ut justo
+          nisi. Vel mus ut ornare faucibus blandit diam sit vestibulum massa. Semper nullam sit sagittis hendrerit
+          augue. In fermentum metus proin arcu faucibus proin nibh sit. Vel integer sed enim in sed vel nec ut vitae.
+          Commodo sagittis volutpat id lorem. Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis
+          volutpat urna. Hendrerit aliquet et arcu purus. Sodales elementum sollicitudin consequat elementum tortor.
+          Lectus eget cursus ut ac pharetra lobortis integer eu. Potenti amet ac id risus ac nunc orci nibh. Tempus
+          vitae vitae aenean arcu. Nibh tristique porta dui enim eget tristique rutrum. Quisque faucibus suscipit nibh
+          est sed. Netus venenatis congue diam in dui morbi dignissim lorem. Urna aliquet sem in tincidunt. Nunc arcu
+          nec fringilla enim purus ut justo nisi. Vel mus ut ornare faucibus blandit diam sit vestibulum massa. Semper
+          nullam sit sagittis hendrerit augue. In fermentum metus proin arcu faucibus proin nibh sit. Vel integer sed
+          enim in sed vel nec ut vitae. Commodo sagittis volutpat id lorem.
+        </DxcParagraph>
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Object position" theme="light" level={4} />
+      <DxcImage
+        alt="Moon pic"
+        caption="Picture of the moon."
+        width="250px"
+        src="https://interactive-examples.mdn.mozilla.net/media/examples/moon.jpg"
+        objectPosition="right top"
+        objectFit="none"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Object fit: contain" theme="light" level={4} />
+      <div style={{ display: "flex", width: "fit-content", border: "1px solid #000", padding: "0.5rem" }}>
+        <DxcImage
+          alt="Dog pic"
+          src="https://cc-prod.scene7.com/is/image/CCProdAuthor/What-is-Stock-Photography_P1_mobile?$pjpeg$&jpegSize=200&wid=720"
+          width="200px"
+          height="200px"
+          objectFit="contain"
+          caption="Pretty dog."
+        />
+      </div>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Object fit: cover" theme="light" level={4} />
+      <div style={{ width: "75%", height: "300px" }}>
+        <DxcImage
+          alt="Spaceship pic"
+          src="https://media.istockphoto.com/id/1344443930/es/foto/lanzamiento-de-cohetes-del-transbordador-espacial-en-el-cielo-y-nubes-al-espacio-exterior.jpg?s=612x612&w=0&k=20&c=CO2A96GnnWvJsgZuj9WfYCVIBVzicnQDfnzwD1nomN0="
+          objectFit="cover"
+          width="50%"
+          height="100%"
+          objectPosition="0px 0px"
+        />
+        <DxcImage
+          alt="Spaceship pic"
+          src="https://media.istockphoto.com/id/1344443930/es/foto/lanzamiento-de-cohetes-del-transbordador-espacial-en-el-cielo-y-nubes-al-espacio-exterior.jpg?s=612x612&w=0&k=20&c=CO2A96GnnWvJsgZuj9WfYCVIBVzicnQDfnzwD1nomN0="
+          objectFit="cover"
+          width="50%"
+          height="100%"
+          objectPosition="0px 0px"
+        />
+      </div>
+    </ExampleContainer>
+  </>
+);