@dxc-technology/halstack-react 0.0.0-0e90110 → 0.0.0-1021ecf

package/select/Select.js

@@ -153,7 +153,7 @@ var getLastOptionIndex = function getLastOptionIndex(options, filteredOptions, s
 
 var getSelectedOption = function getSelectedOption(options, multiple, optional, optionalEmptyOption, value, innerValue) {
   var val = value !== null && value !== void 0 ? value : innerValue;
-  var selectedOption = multiple ? [] : "";
+  var selectedOption = multiple ? [] : {};
   var singleSelectionIndex;
 
   if (multiple) {
@@ -201,14 +201,12 @@ var getSelectedOption = function getSelectedOption(options, multiple, optional,
 var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var _selectedOption$label;
 
-  var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
+  var label = _ref.label,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? "" : _ref$name,
       value = _ref.value,
       options = _ref.options,
-      _ref$helperText = _ref.helperText,
-      helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+      helperText = _ref.helperText,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
       _ref$disabled = _ref.disabled,
@@ -221,8 +219,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       multiple = _ref$multiple === void 0 ? false : _ref$multiple,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
-      _ref$error = _ref.error,
-      error = _ref$error === void 0 ? "" : _ref$error,
+      error = _ref.error,
       margin = _ref.margin,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "medium" : _ref$size,
@@ -549,13 +546,14 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     margin: margin,
     size: size,
     ref: ref
-  }, /*#__PURE__*/_react["default"].createElement(Label, {
+  }, label && /*#__PURE__*/_react["default"].createElement(Label, {
     id: selectLabelId,
     disabled: disabled,
     onClick: function onClick() {
       selectContainerRef.current.focus();
-    }
-  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), /*#__PURE__*/_react["default"].createElement(HelperText, {
+    },
+    helperText: helperText
+  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
     disabled: disabled
   }, helperText), /*#__PURE__*/_react["default"].createElement(Select, {
     id: selectId,
@@ -585,8 +583,8 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     },
     onClick: handleClearOptionsActionOnClick,
     tabIndex: -1,
-    title: "Clear selected options",
-    "aria-label": "Clear selected options"
+    title: "Clear selection",
+    "aria-label": "Clear selection"
   }, selectIcons.clear)), /*#__PURE__*/_react["default"].createElement(SearchableValueContainer, null, /*#__PURE__*/_react["default"].createElement(ValueInput, {
     name: name,
     value: multiple ? (value !== null && value !== void 0 ? value : innerValue).join(", ") : value !== null && value !== void 0 ? value : innerValue,
@@ -615,8 +613,8 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     },
     onClick: handleClearSearchActionOnClick,
     tabIndex: -1,
-    title: "Clear search text",
-    "aria-label": "Clear search text"
+    title: "Clear search",
+    "aria-label": "Clear search"
   }, selectIcons.clear), /*#__PURE__*/_react["default"].createElement(CollapseIndicator, {
     disabled: disabled
   }, isOpen ? selectIcons.arrowUp : selectIcons.arrowDown), isOpen && /*#__PURE__*/_react["default"].createElement(OptionsList, {
@@ -633,7 +631,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   }, searchable && (filteredOptions.length === 0 || !filteredGroupsHaveOptions()) ? /*#__PURE__*/_react["default"].createElement(OptionsSystemMessage, null, /*#__PURE__*/_react["default"].createElement(NoMatchesFoundIcon, null, selectIcons.searchOff), "No matches found") : optional && !multiple && /*#__PURE__*/_react["default"].createElement(Option, {
     option: optionalEmptyOption,
     index: 0
-  }), searchable ? filteredOptions.map(mapOptionFunc) : options.map(mapOptionFunc))), !disabled && /*#__PURE__*/_react["default"].createElement(Error, null, error)));
+  }), searchable ? filteredOptions.map(mapOptionFunc) : options.map(mapOptionFunc))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, null, error)));
 });
 
 var sizes = {
@@ -661,7 +659,7 @@ var SelectContainer = _styledComponents["default"].div(_templateObject || (_temp
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 });
 
-var Label = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  cursor: default;\n"])), function (props) {
+var Label = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  cursor: default;\n  ", "\n"])), function (props) {
   return props.disabled ? props.theme.disabledColor : props.theme.labelFontColor;
 }, function (props) {
   return props.theme.fontFamily;
@@ -673,13 +671,15 @@ var Label = _styledComponents["default"].span(_templateObject2 || (_templateObje
   return props.theme.labelFontWeight;
 }, function (props) {
   return props.theme.labelLineHeight;
+}, function (props) {
+  return !props.helperText && "margin-bottom: 0.25rem";
 });
 
 var OptionalLabel = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  font-weight: ", ";\n"])), function (props) {
   return props.theme.optionalLabelFontWeight;
 });
 
-var HelperText = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
+var HelperText = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-bottom: 0.25rem;\n"])), function (props) {
   return props.disabled ? props.theme.disabledColor : props.theme.helperTextFontColor;
 }, function (props) {
   return props.theme.fontFamily;
@@ -693,9 +693,7 @@ var HelperText = _styledComponents["default"].span(_templateObject4 || (_templat
   return props.theme.helperTextLineHeight;
 });
 
-var Select = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  height: calc(2.5rem - 2px);\n  margin: ", ";\n  padding: 0 0.5rem;\n  outline: none;\n  ", ";\n  box-shadow: 0 0 0 2px transparent;\n  border-radius: 4px;\n  border: 1px solid\n    ", ";\n  ", "\n  ", ";\n\n  ", ";\n"])), function (props) {
-  return "".concat(props.theme.inputMarginTop, " 0 ").concat(props.theme.inputMarginBottom, " 0");
-}, function (props) {
+var Select = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  height: calc(2.5rem - 2px);\n  padding: 0 0.5rem;\n  outline: none;\n  ", ";\n  box-shadow: 0 0 0 2px transparent;\n  border-radius: 4px;\n  border: 1px solid\n    ", ";\n  ", "\n  ", ";\n\n  ", ";\n"])), function (props) {
   return props.disabled && "background-color: ".concat(props.theme.disabledInputBackgroundColor);
 }, function (props) {
   return props.disabled ? props.theme.disabledInputBorderColor : props.theme.enabledInputBorderColor;
@@ -773,7 +771,7 @@ var ErrorIcon = _styledComponents["default"].span(_templateObject13 || (_templat
   return props.theme.errorIconColor;
 });
 
-var Error = _styledComponents["default"].span(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 1.5em;\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.5em;\n"])), function (props) {
+var Error = _styledComponents["default"].span(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 1.5em;\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.5em;\n  margin-top: 0.25rem;\n"])), function (props) {
   return props.theme.errorMessageColor;
 }, function (props) {
   return props.theme.fontFamily;

package/select/types.d.ts

@@ -0,0 +1,170 @@
+/// <reference types="react" />
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type OptionGroup = {
+    /**
+     * Label of the group to be shown in the select's listbox.
+     */
+    label: string;
+    /**
+     * List of the grouped options.
+     */
+    options: Option[];
+};
+declare type Option = {
+    /**
+     * Element used as the icon that will be placed before the option label.
+     * It can be a url of an image or an inline SVG. If the url option
+     * is the chosen one, take into account that the component's
+     * color styling tokens will not be applied to the image.
+     */
+    icon?: string | SVG;
+    /**
+     * Label of the option to be shown in the select's listbox.
+     */
+    label: string;
+    /**
+     * Value of the option. It should be unique and
+     * not an empty string, which is reserved to the empty option added
+     * by optional prop.
+     */
+    value: string;
+};
+declare type CommonProps = {
+    /**
+     * Text to be placed above the select.
+     */
+    label?: string;
+    /**
+     * Name attribute of the input element. This attribute will allow users
+     * to find the component's value during the submit event. In this event,
+     * the component's value will always be a regular string, for both single
+     * and multiple selection modes, been in the first one a single option
+     * value and in the multiple variant more than one option value,
+     * separated by commas.
+     */
+    name?: string;
+    /**
+     * An array of objects representing the selectable options.
+     */
+    options?: Option[] | OptionGroup[];
+    /**
+     * Helper text to be placed above the select.
+     */
+    helperText?: string;
+    /**
+     * Text to be put as placeholder of the select.
+     */
+    placeholder?: string;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the select will be optional, showing '(Optional)'
+     * next to the label and adding a default first option with an empty string as value,
+     * been the placeholder (if defined) its label. Otherwise, the field will be
+     * considered required and an error will be passed as a parameter to the
+     * OnBlur and onChange functions if an option wasn't selected.
+     */
+    optional?: boolean;
+    /**
+     * If true, enables search functionality.
+     */
+    searchable?: boolean;
+    /**
+     * If it is defined, the component will change its appearance, showing
+     * the error below the select component. If it is not defined, the error
+     * messages will be managed internally, but never displayed on its own.
+     */
+    error?: string;
+    /**
+     * Size of the margin to be applied to 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 margin sizes.
+     */
+    margin?: Space | Margin;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large" | "fillParent";
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+declare type SingleSelect = CommonProps & {
+    /**
+     * If true, the select component will support multiple selected options.
+     * In that case, value will be an array of strings with each selected
+     * option value.
+     */
+    multiple?: false;
+    /**
+     * Value of the select. If undefined, the component will be uncontrolled
+     * and the value will be managed internally by the component.
+     */
+    value?: string;
+    /**
+     * This function will be called when the user selects an option.
+     * An object including the current value and the error (if the value entered is not valid)
+     * will be passed to this function. If there is no error, error will be null.
+     */
+    onChange?: (val: {
+        value: string;
+        error: string;
+    }) => void;
+    /**
+     * This function will be called when the select loses the focus. An
+     * object including the value and the error (if the value
+     * selected is not valid) will be passed to this function. If there is no error,
+     * error will be null.
+     */
+    onBlur?: (val: {
+        value: string;
+        error: string;
+    }) => void;
+};
+declare type MultipleSelect = CommonProps & {
+    /**
+     * If true, the select component will support multiple selected options.
+     * In that case, value will be an array of strings with each selected
+     * option value.
+     */
+    multiple: true;
+    /**
+     * Value of the select. If undefined, the component will be uncontrolled
+     * and the value will be managed internally by the component.
+     */
+    value?: string[];
+    /**
+     * This function will be called when the user selects an option.
+     * An object including the current selected values and the error (if the value entered is not valid)
+     * will be passed to this function. If there is no error, error will be null.
+     */
+    onChange?: (val: {
+        value: string[];
+        error: string;
+    }) => void;
+    /**
+     * This function will be called when the select loses the focus. An
+     * object including the selected values and the error (if the value
+     * selected is not valid) will be passed to this function. If there is no error,
+     * error will be null.
+     */
+    onBlur?: (val: {
+        value: string[];
+        error: string;
+    }) => void;
+};
+declare type Props = SingleSelect | MultipleSelect;
+/**
+ * Reference to the component.
+ */
+export declare type RefType = HTMLDivElement;
+export default Props;

package/select/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/sidenav/Sidenav.stories.tsx

@@ -143,7 +143,24 @@ export const Chromatic = () => (
             gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare,
             malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam
             sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo.
-            Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
+            Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus. Lorem ipsum dolor sit amet,
+            consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna, placerat sit amet felis
+            eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue
+            laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum
+            cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus eros aliquam erat, ut
+            efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus
+            aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu, fringilla mauris.
+            Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus augue. Vivamus erat
+            sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc dignissim, pharetra
+            neque molestie, molestie lectus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas
+            luctus porttitor. Donec massa magna, placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum
+            dolor sit amet, consectetur adipiscing elit. Donec congue laoreet orci, nec elementum dolor consequat quis.
+            Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna
+            ullamcorper facilisis Jia Le, risus eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo,
+            dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae.
+            Nunc sit amet elit ornare, malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum
+            purus euismod sit amet. Etiam sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id,
+            condimentum blandit justo. Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
           </p>
         </DxcSidenav>
       </StyledContainer>

package/spinner/Spinner.stories.jsx

@@ -62,6 +62,7 @@ export const Chromatic = () => (
       <DxcSpinner margin="xlarge" mode="small" value="75"></DxcSpinner>
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcSpinner margin="xxlarge" mode="small" value="75"></DxcSpinner>
+      <hr />
     </ExampleContainer>
   </>
 );

package/stack/Stack.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+declare type StackProps = {
+    gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
+    divider?: boolean;
+    align?: "start" | "center" | "end" | "baseline" | "stretch";
+    as?: React.ElementType;
+    children: React.ReactNode;
+};
+export default function Stack({ gutter, divider, align, as, children }: StackProps): JSX.Element;
+export {};

package/stack/Stack.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Stack;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2;
+
+function Stack(_ref) {
+  var gutter = _ref.gutter,
+      divider = _ref.divider,
+      align = _ref.align,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? "div" : _ref$as,
+      children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(StyledStack, {
+    gutter: gutter,
+    divider: divider,
+    align: align,
+    as: as
+  }, _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 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, ")");
+
+    default:
+      return "0";
+  }
+});

package/stack/Stack.stories.tsx

@@ -0,0 +1,166 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import styled from "styled-components";
+import DxcStack from "./Stack";
+
+export default {
+  title: "Stack",
+  component: DxcStack,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Default" theme="light" level={4} />
+    <Container>
+      <DxcStack>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="Align = baseline" theme="light" level={4} />
+    <Container>
+      <DxcStack align="baseline">
+        <Placeholder paddingLeft={20}></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder paddingRight={60}></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="Align = center" theme="light" level={4} />
+    <Container>
+      <DxcStack align="center">
+        <Placeholder paddingLeft={20}></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder paddingLeft={60}></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="Align = end" theme="light" level={4} />
+    <Container>
+      <DxcStack align="end">
+        <Placeholder paddingLeft={20}></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder paddingLeft={60}></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="Align = start" theme="light" level={4} />
+    <Container>
+      <DxcStack align="start">
+        <Placeholder paddingLeft={20}></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder paddingLeft={60}></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="Align = stretch" theme="light" level={4} />
+    <Container>
+      <DxcStack align="stretch">
+        <Placeholder paddingLeft={20}></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder paddingLeft={60}></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = xxxsmall" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="xxxsmall">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = xxsmall" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="xxsmall">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = xsmall" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="xsmall">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = small" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="small">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = medium" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="medium">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = large" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="large">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = xlarge" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="xlarge">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = xxlarge" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="xxlarge">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = xxxlarge" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="xxxlarge">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = xxlarge && divider" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="xxlarge" divider>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+    <Title title="gutter = none" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="none">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+  </>
+);
+
+const Container = styled.div`
+  background: #d0d0d0;
+  padding: 10px;
+  border-radius: 10px;
+`;
+
+const Placeholder = styled.div`
+  min-height: 80px;
+  min-width: 120px;
+  border: 1px solid #fabada;
+  background-color: #fff7fb;
+  border-radius: 5px;
+  padding-left: ${({ paddingLeft }) => `${paddingLeft ?? 0}px`};
+  padding-right: ${({ paddingRight }) => `${paddingRight ?? 0}px`};
+`;

package/switch/Switch.stories.tsx

@@ -72,7 +72,7 @@ export const Chromatic = () => (
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
-      <DxcSwitch label="Xxsmmall" margin="xxsmall" />
+      <DxcSwitch label="Xxsmall" margin="xxsmall" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xsmall margin" theme="light" level={4} />

package/table/Table.stories.jsx

@@ -271,6 +271,7 @@ export const Chromatic = () => (
           <td>Cell 9</td>
         </tr>
       </DxcTable>
+      <hr />
     </ExampleContainer>
   </>
-);
+);

package/tabs/Tabs.stories.tsx

@@ -116,6 +116,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcTabs tabs={tabs} margin="xxlarge" />
+      <hr />
     </ExampleContainer>
   </>
 );

package/tag/Tag.stories.tsx

@@ -132,7 +132,7 @@ export const Chromatic = () => (
 );
 
 const LinkTag = () => (
-  <ExampleContainer>
+  <ExampleContainer expanded>
     <Title title="Hover link tag" theme="light" level={4} />
     <DxcTag label="Tag" icon={icon} linkHref="https://www.dxc.com" />
   </ExampleContainer>

package/text/Text.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare type TextProps = {
+    as?: "p" | "span";
+    children: React.ReactNode;
+};
+declare function Text({ as, children }: TextProps): JSX.Element;
+export default Text;