@dxc-technology/halstack-react 0.0.0-1c4cbc0 → 0.0.0-1d5e7bf

package/select/types.d.ts

@@ -201,11 +201,10 @@ export declare type ListboxProps = {
     optionalItem: Option;
     searchable: boolean;
     handleOptionOnClick: (option: Option) => void;
+    styles: {
+        width: number;
+    };
 };
-/**
- * Reference to the listbox component.
- */
-export declare type ListboxRefType = HTMLUListElement;
 /**
  * Reference to the select component.
  */

package/sidenav/Sidenav.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import SidenavPropsType, { SidenavTitlePropsType, SidenavSubtitlePropsType, SidenavLinkPropsType } from "./types.js";
+import SidenavPropsType, { SidenavTitlePropsType, SidenavSubtitlePropsType, SidenavLinkPropsType } from "./types";
 declare const DxcSidenav: {
     ({ padding, children }: SidenavPropsType): JSX.Element;
     Title: ({ children }: SidenavTitlePropsType) => JSX.Element;

package/sidenav/Sidenav.js

@@ -21,6 +21,8 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _BackgroundColorContext = require("../BackgroundColorContext");
 
+var _SidenavContext = require("../layout/SidenavContext");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 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); }
@@ -33,7 +35,7 @@ var DxcSidenav = function DxcSidenav(_ref) {
   var colorsTheme = (0, _useTheme["default"])();
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.sidenav
-  }, /*#__PURE__*/_react["default"].createElement(SideNavContainer, {
+  }, /*#__PURE__*/_react["default"].createElement(SidenavContainer, {
     padding: padding
   }, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
     color: colorsTheme.sidenav.backgroundColor
@@ -42,12 +44,12 @@ var DxcSidenav = function DxcSidenav(_ref) {
 
 var Title = function Title(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/_react["default"].createElement(SideNavMenuTitle, null, children);
+  return /*#__PURE__*/_react["default"].createElement(SidenavMenuTitle, null, children);
 };
 
 var Subtitle = function Subtitle(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/_react["default"].createElement(SideNavMenuSubTitle, null, children);
+  return /*#__PURE__*/_react["default"].createElement(SidenavMenuSubTitle, null, children);
 };
 
 var Link = function Link(_ref4) {
@@ -56,15 +58,24 @@ var Link = function Link(_ref4) {
       href = _ref4.href,
       onClick = _ref4.onClick,
       children = _ref4.children;
-  return /*#__PURE__*/_react["default"].createElement(SideNavMenuLink, {
+  var setIsSidenavVisibleResponsive = (0, _SidenavContext.useResponsiveSidenavVisibility)();
+
+  var handleClick = function handleClick() {
+    onClick === null || onClick === void 0 ? void 0 : onClick();
+    setIsSidenavVisibleResponsive === null || setIsSidenavVisibleResponsive === void 0 ? void 0 : setIsSidenavVisibleResponsive(false);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(SidenavMenuLink, {
     tabIndex: tabIndex,
     href: href,
-    onClick: onClick
+    onClick: handleClick
   }, children);
 };
 
-var SideNavContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  background-color: ", ";\n  max-width: 300px;\n  width: ", ";\n  padding: ", ";\n\n  overflow-y: auto;\n  overflow-x: hidden;\n  ::-webkit-scrollbar {\n    width: 2px;\n  }\n  ::-webkit-scrollbar-track {\n    background-color: ", ";\n    border-radius: 3px;\n  }\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 3px;\n  }\n"])), function (props) {
+var SidenavContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  background-color: ", ";\n\n  @media (max-width: ", "rem) {\n    width: ", ";\n  }\n\n  width: ", ";\n  padding: ", ";\n\n  overflow-y: auto;\n  overflow-x: hidden;\n  ::-webkit-scrollbar {\n    width: 2px;\n  }\n  ::-webkit-scrollbar-track {\n    background-color: ", ";\n    border-radius: 3px;\n  }\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 3px;\n  }\n"])), function (props) {
   return props.theme.backgroundColor;
+}, _variables.responsiveSizes.medium, function (props) {
+  return props.padding ? "calc(100vw - ".concat(_variables.spaces[props.padding], " - ").concat(_variables.spaces[props.padding], ")") : "100vw";
 }, function (props) {
   return props.padding ? "calc(300px - ".concat(_variables.spaces[props.padding], " - ").concat(_variables.spaces[props.padding], ")") : "300px";
 }, function (props) {
@@ -75,7 +86,7 @@ var SideNavContainer = _styledComponents["default"].div(_templateObject || (_tem
   return props.theme.scrollBarThumbColor;
 });
 
-var SideNavMenuTitle = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  letter-spacing: ", ";\n  text-transform: ", ";\n  margin-bottom: 16px;\n"])), function (props) {
+var SidenavMenuTitle = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  letter-spacing: ", ";\n  text-transform: ", ";\n  margin-bottom: 16px;\n"])), function (props) {
   return props.theme.titleFontFamily;
 }, function (props) {
   return props.theme.titleFontSize;
@@ -91,7 +102,7 @@ var SideNavMenuTitle = _styledComponents["default"].div(_templateObject2 || (_te
   return props.theme.titleFontTextTransform;
 });
 
-var SideNavMenuSubTitle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  letter-spacing: ", ";\n  text-transform: ", ";\n  margin-bottom: 4px;\n"])), function (props) {
+var SidenavMenuSubTitle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  letter-spacing: ", ";\n  text-transform: ", ";\n  margin-bottom: 4px;\n"])), function (props) {
   return props.theme.subtitleFontFamily;
 }, function (props) {
   return props.theme.subtitleFontSize;
@@ -107,7 +118,7 @@ var SideNavMenuSubTitle = _styledComponents["default"].div(_templateObject3 || (
   return props.theme.subtitleFontTextTransform;
 });
 
-var SideNavMenuLink = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  letter-spacing: ", ";\n  text-transform: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n  cursor: pointer;\n\n  :focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 1px;\n  }\n"])), function (props) {
+var SidenavMenuLink = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  letter-spacing: ", ";\n  text-transform: ", ";\n  text-decoration: ", ";\n  margin: ", ";\n  cursor: pointer;\n\n  :focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 1px;\n  }\n"])), function (props) {
   return props.theme.linkFontFamily;
 }, function (props) {
   return props.theme.linkFontSize;

package/stack/Stack.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import StackPropsType from "./types";
-export default function Stack({ gutter, divider, align, as, children }: StackPropsType): JSX.Element;
+declare const DxcStack: ({ alignX, as, divider, gutter, reverse, wrap, children, }: StackPropsType) => JSX.Element;
+export default DxcStack;

package/stack/Stack.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = Stack;
+exports["default"] = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -15,83 +15,42 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject, _templateObject2;
 
-function Stack(_ref) {
-  var gutter = _ref.gutter,
-      divider = _ref.divider,
-      align = _ref.align,
+var DxcStack = function DxcStack(_ref) {
+  var _ref$alignX = _ref.alignX,
+      alignX = _ref$alignX === void 0 ? "stretch" : _ref$alignX,
       _ref$as = _ref.as,
       as = _ref$as === void 0 ? "div" : _ref$as,
+      _ref$divider = _ref.divider,
+      divider = _ref$divider === void 0 ? false : _ref$divider,
+      _ref$gutter = _ref.gutter,
+      gutter = _ref$gutter === void 0 ? "0rem" : _ref$gutter,
+      _ref$reverse = _ref.reverse,
+      reverse = _ref$reverse === void 0 ? false : _ref$reverse,
+      _ref$wrap = _ref.wrap,
+      wrap = _ref$wrap === void 0 ? false : _ref$wrap,
       children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(StyledStack, {
+  return /*#__PURE__*/_react["default"].createElement(Stack, {
     gutter: gutter,
+    alignX: alignX,
+    reverse: reverse,
+    as: as,
     divider: divider,
-    align: align,
-    as: as
+    wrap: wrap
   }, _react["default"].Children.map(children, function (child, index) {
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, child, divider && index !== _react["default"].Children.count(children) - 1 && /*#__PURE__*/_react["default"].createElement(Divider, null));
   }));
-}
+};
 
-var Divider = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  height: 1px;\n  background-color: #999999;\n"])));
+var Divider = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  height: 1px;\n  background-color: #999999;\n"])));
 
-var StyledStack = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n  gap: ", ";\n  margin: 0;\n  padding: 0;\n"])), function (_ref2) {
-  var align = _ref2.align;
-
-  switch (align) {
-    case "start":
-      return "flex-start";
-
-    case "center":
-      return "center";
-
-    case "end":
-      return "flex-end";
-
-    case "baseline":
-      return "baseline";
-
-    case "stretch":
-      return "stretch";
-
-    default:
-      return "initial";
-  }
-}, function (_ref3) {
-  var gutter = _ref3.gutter,
-      divider = _ref3.divider;
-
-  switch (gutter) {
-    case "none":
-      return "0";
-
-    case "xxxsmall":
-      return "calc(0.125rem / ".concat(divider ? 2 : 1, ")");
-
-    case "xxsmall":
-      return "calc(0.25rem / ".concat(divider ? 2 : 1, ")");
-
-    case "xsmall":
-      return "calc(0.5rem / ".concat(divider ? 2 : 1, ")");
-
-    case "small":
-      return "calc(1rem / ".concat(divider ? 2 : 1, ")");
-
-    case "medium":
-      return "calc(1.5rem / ".concat(divider ? 2 : 1, ")");
-
-    case "large":
-      return "calc(2rem / ".concat(divider ? 2 : 1, ")");
-
-    case "xlarge":
-      return "calc(3rem / ".concat(divider ? 2 : 1, ")");
-
-    case "xxlarge":
-      return "calc(4rem / ".concat(divider ? 2 : 1, ")");
-
-    case "xxxlarge":
-      return "calc(5rem / ".concat(divider ? 2 : 1, ")");
+var Stack = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  ", "\n  padding: 0px;\n  margin: 0px;\n  height: 100%;\n"])), function (_ref2) {
+  var alignX = _ref2.alignX,
+      gutter = _ref2.gutter,
+      reverse = _ref2.reverse,
+      divider = _ref2.divider,
+      wrap = _ref2.wrap;
+  return "\n    flex-direction: ".concat(reverse ? "column-reverse" : "column", ";\n    align-items: ").concat(alignX === "start" || alignX === "end" ? "flex-".concat(alignX) : alignX, ";\n    gap: ").concat(divider ? "calc(".concat(gutter, "/2 - 1px)") : gutter, ";\n    flex-wrap: ").concat(wrap ? "wrap" : "nowrap", ";\n  ");
+});
 
-    default:
-      return "0";
-  }
-});
+var _default = DxcStack;
+exports["default"] = _default;

package/stack/Stack.stories.tsx

@@ -13,152 +13,251 @@ export const Chromatic = () => (
     <Title title="Default" theme="light" level={4} />
     <Container>
       <DxcStack>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" width="large" />
       </DxcStack>
     </Container>
-    <Title title="Align = baseline" theme="light" level={4} />
+    <Title title="Default with divider" theme="light" level={4} />
     <Container>
-      <DxcStack align="baseline">
-        <Placeholder paddingLeft={20}></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder paddingRight={60}></Placeholder>
+      <DxcStack divider>
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="large" />
+        <Placeholder height="small" width="large" />
       </DxcStack>
     </Container>
-    <Title title="Align = center" theme="light" level={4} />
+    <Title title="Alignment with divider" theme="light" level={4} />
     <Container>
-      <DxcStack align="center">
-        <Placeholder paddingLeft={20}></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder paddingLeft={60}></Placeholder>
+      <DxcStack alignX="end" divider>
+        <Placeholder height="small" width="small" />
+        <Placeholder height="small" width="medium" />
+        <Placeholder height="medium" width="small" />
       </DxcStack>
     </Container>
-    <Title title="Align = end" theme="light" level={4} />
+    <Title title="Default with one child" theme="light" level={4} />
     <Container>
-      <DxcStack align="end">
-        <Placeholder paddingLeft={20}></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder paddingLeft={60}></Placeholder>
+      <DxcStack divider>
+        <Placeholder height="large" width="xlarge" />
       </DxcStack>
     </Container>
-    <Title title="Align = start" theme="light" level={4} />
+    <Title title="Wrap" theme="light" level={4} />
+    <FlexContainer customHeight>
+      <DxcStack wrap>
+        <Placeholder height="small" width="small" />
+        <Placeholder height="large" width="medium" />
+        <Placeholder height="medium" width="small" />
+        <Placeholder height="large" width="medium" />
+      </DxcStack>
+    </FlexContainer>
+    <Title title="No wrap in a flex container" theme="light" level={4} />
+    <FlexContainer customHeight>
+      <DxcStack>
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="small" />
+        <Placeholder height="small" width="medium" />
+      </DxcStack>
+    </FlexContainer>
+    <Title title="No wrap (default)" theme="light" level={4} />
+    <Container customHeight>
+      <DxcStack>
+        <Placeholder height="small" width="medium" />
+        <Placeholder height="small" width="small" />
+      </DxcStack>
+    </Container>
+    <Title title="AlignX = start" theme="light" level={4} />
     <Container>
-      <DxcStack align="start">
-        <Placeholder paddingLeft={20}></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder paddingLeft={60}></Placeholder>
+      <DxcStack alignX="start">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="large" width="medium" />
+        <Placeholder height="medium" width="small" />
+        <Placeholder height="large" width="medium" />
       </DxcStack>
     </Container>
-    <Title title="Align = stretch" theme="light" level={4} />
+    <Title title="AlignX = end" theme="light" level={4} />
     <Container>
-      <DxcStack align="stretch">
-        <Placeholder paddingLeft={20}></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder paddingLeft={60}></Placeholder>
+      <DxcStack alignX="end">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="large" width="medium" />
+        <Placeholder height="medium" width="small" />
       </DxcStack>
     </Container>
-    <Title title="gutter = xxxsmall" theme="light" level={4} />
+    <Title title="AlignX = center" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="xxxsmall">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack alignX="center">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="large" width="medium" />
+        <Placeholder height="medium" width="small" />
+        <Placeholder height="large" width="medium" />
       </DxcStack>
     </Container>
-    <Title title="gutter = xxsmall" theme="light" level={4} />
+    <Title title="AlignX = baseline" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="xxsmall">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack alignX="baseline">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="large" width="medium" />
+        <Placeholder height="medium" width="small" />
       </DxcStack>
     </Container>
-    <Title title="gutter = xsmall" theme="light" level={4} />
+    <Title title="AlignX with wrapped items" theme="light" level={4} />
+    <Container customHeight>
+      <DxcStack alignX="center" wrap>
+        <Placeholder height="small" width="medium" />
+        <Placeholder height="small" width="small" />
+      </DxcStack>
+    </Container>
+    <Title title="Gutter = 0rem" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="0rem">
+        <Placeholder height="small" width="medium" />
+        <Placeholder height="large" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="small" />
+        <Placeholder height="small" width="medium" />
+      </DxcStack>
+    </Container>
+    <Title title="Gutter = 0.125rem" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="xsmall">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack gutter="0.125rem">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="large" width="medium" />
+        <Placeholder height="medium" width="small" />
       </DxcStack>
     </Container>
-    <Title title="gutter = small" theme="light" level={4} />
+    <Title title="Gutter = 0.25rem" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="small">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack gutter="0.25rem">
+        <Placeholder height="small" width="medium" />
+        <Placeholder height="large" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="small" />
+        <Placeholder height="small" width="medium" />
       </DxcStack>
     </Container>
-    <Title title="gutter = medium" theme="light" level={4} />
+    <Title title="Gutter = 0.5rem" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack gutter="0.5rem">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="large" width="medium" />
+        <Placeholder height="medium" width="small" />
       </DxcStack>
     </Container>
-    <Title title="gutter = large" theme="light" level={4} />
+    <Title title="Gutter = 0.75rem" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="large">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack gutter="0.75rem">
+        <Placeholder height="small" width="medium" />
+        <Placeholder height="large" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="small" />
+        <Placeholder height="small" width="medium" />
       </DxcStack>
     </Container>
-    <Title title="gutter = xlarge" theme="light" level={4} />
+    <Title title="Gutter = 1rem" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="xlarge">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack gutter="1rem">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="large" width="medium" />
+        <Placeholder height="medium" width="small" />
       </DxcStack>
     </Container>
-    <Title title="gutter = xxlarge" theme="light" level={4} />
+    <Title title="Gutter = 1.5rem" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="xxlarge">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack gutter="1.5rem">
+        <Placeholder height="small" width="medium" />
+        <Placeholder height="large" width="small" />
+        <Placeholder height="medium" width="medium" />
+        <Placeholder height="large" width="small" />
+        <Placeholder height="small" width="medium" />
       </DxcStack>
     </Container>
-    <Title title="gutter = xxxlarge" theme="light" level={4} />
+    <Title title="Gutter = 2rem & divider" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="xxxlarge">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack gutter="2rem" divider>
+        <Placeholder height="small" width="small" />
+        <Placeholder height="large" width="medium" />
+        <Placeholder height="medium" width="small" />
       </DxcStack>
     </Container>
-    <Title title="gutter = xxlarge && divider" theme="light" level={4} />
+    <Title title="Gutter = 3rem" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="xxlarge" divider>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack gutter="3rem">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="large" width="medium" />
+        <Placeholder height="medium" width="small" />
       </DxcStack>
     </Container>
-    <Title title="gutter = none" theme="light" level={4} />
+    <Title title="Gutter = 4rem" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="none">
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
-        <Placeholder></Placeholder>
+      <DxcStack gutter="4rem">
+        <Placeholder height="large" width="medium" />
+        <Placeholder height="medium" width="small" />
       </DxcStack>
     </Container>
+    <Title title="Gutter = 5rem" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="5rem">
+        <Placeholder height="small" width="small" />
+        <Placeholder height="medium" width="small" />
+      </DxcStack>
+    </Container>
+    <Title title="Reverse" theme="light" level={4} />
+    <Container>
+      <DxcStack reverse>
+        <Placeholder height="small" width="medium">
+          1
+        </Placeholder>
+        <Placeholder height="large" width="small">
+          2
+        </Placeholder>
+        <Placeholder height="medium" width="medium">
+          3
+        </Placeholder>
+        <Placeholder height="large" width="small">
+          4
+        </Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="Wrapped and reversed children" theme="light" level={4} />
+    <FlexContainer customHeight>
+      <DxcStack reverse wrap>
+        <Placeholder height="small" width="medium">
+          1
+        </Placeholder>
+        <Placeholder height="large" width="small">
+          2
+        </Placeholder>
+        <Placeholder height="medium" width="medium">
+          3
+        </Placeholder>
+        <Placeholder height="large" width="small">
+          4
+        </Placeholder>
+      </DxcStack>
+    </FlexContainer>
   </>
 );
 
-const Container = styled.div`
+const FlexContainer = styled.div<{ customHeight?: boolean }>`
+  display: flex;
+  ${({ customHeight }) => customHeight && `height: 100px;`};
   background: #f2eafa;
-  padding: 10px;
 `;
 
-const Placeholder = styled.div`
-  min-height: 40px;
-  min-width: 120px;
+const Container = styled.div<{ customHeight?: boolean }>`
+  background: #f2eafa;
+  ${({ customHeight }) => customHeight && `height: 100px;`};
+`;
+
+type PlaceholderProps = {
+  width?: "xlarge" | "large" | "medium" | "small" | "auto";
+  height?: "large" | "medium" | "small" | "auto";
+};
+
+const Placeholder = styled.div<PlaceholderProps>`
+  ${({ width }) =>
+    width &&
+    `width: ${width === "xlarge" ? "350px" : width === "large" ? "150px" : width === "medium" ? "100px" : "50px"};`};
+  ${({ height }) => height && `height: ${height === "large" ? "100px" : height === "medium" ? "80px" : "50px"};`};
   border: 1px solid #a46ede;
   background-color: #e5d5f6;
-  padding-left: ${({ paddingLeft }) => `${paddingLeft ?? 0}px`};
-  padding-right: ${({ paddingRight }) => `${paddingRight ?? 0}px`};
 `;

package/stack/types.d.ts

@@ -1,24 +1,32 @@
 /// <reference types="react" />
 declare type Props = {
     /**
-     * Space applied between each child.
+     * Alignment applied to children in the main axis.
      */
-    gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
+    alignX?: "start" | "end" | "center" | "baseline" | "stretch";
+    /**
+     * Specifies the HTML tag or component that is rendered as the wrapper element.
+     */
+    as?: React.ElementType;
     /**
      * If true, a divider is shown between children.
      */
     divider?: boolean;
     /**
-     * Alignment applied to children.
+     * Space applied between each child.
      */
-    align?: "start" | "center" | "end" | "baseline" | "stretch";
+    gutter?: "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
     /**
-     * Specifies the HTML tag or component that is rendered as the wrapper element.
+     * Change the direction of the stack to reverse.
      */
-    as?: React.ElementType;
+    reverse?: boolean;
+    /**
+     * Sets whether the children are forced onto one column or can wrap onto multiple columns.
+     */
+    wrap?: boolean;
     /**
      * Custom content inside the stack.
      */
-    children: React.ReactNode;
+    children: React.ReactNode[] | React.ReactNode;
 };
 export default Props;

package/tabs-nav/NavTabs.d.ts

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