@dxc-technology/halstack-react 0.0.0-e884f9f → 0.0.0-e9cf865

package/row/Row.stories.tsx

@@ -0,0 +1,223 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import styled from "styled-components";
+import DxcRow from "./Row";
+
+export default {
+  title: "Row",
+  component: DxcRow,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Default" theme="light" level={4} />
+    <Container>
+      <DxcRow>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="Justify = center" theme="light" level={4} />
+    <Container>
+      <DxcRow justify="center">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="Justify = end" theme="light" level={4} />
+    <Container>
+      <DxcRow justify="end">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="Justify = spaceAround" theme="light" level={4} />
+    <Container>
+      <DxcRow justify="spaceAround">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="Justify = spaceBetween" theme="light" level={4} />
+    <Container>
+      <DxcRow justify="spaceBetween">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="Justify = spaceEvenly" theme="light" level={4} />
+    <Container>
+      <DxcRow justify="spaceEvenly">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="Justify = start" theme="light" level={4} />
+    <Container>
+      <DxcRow justify="start">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="Align = baseline" theme="light" level={4} />
+    <Container>
+      <DxcRow align="baseline">
+        <Placeholder paddingTop={20}>test</Placeholder>
+        <Placeholder>test</Placeholder>
+        <Placeholder paddingBottom={60}>test</Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="Align = center" theme="light" level={4} />
+    <Container>
+      <DxcRow align="center">
+        <Placeholder paddingTop={20}></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder paddingTop={60}></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="Align = end" theme="light" level={4} />
+    <Container>
+      <DxcRow align="end">
+        <Placeholder paddingTop={20}></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder paddingTop={60}></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="Align = start" theme="light" level={4} />
+    <Container>
+      <DxcRow align="start">
+        <Placeholder paddingTop={20}></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder paddingTop={60}></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="Align = stretch" theme="light" level={4} />
+    <Container>
+      <DxcRow align="stretch">
+        <Placeholder paddingTop={20}></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder paddingTop={60}></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="gutter = xxsmall" theme="light" level={4} />
+    <Container>
+      <DxcRow gutter="xxsmall">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="gutter = xsmall" theme="light" level={4} />
+    <Container>
+      <DxcRow gutter="xsmall">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="gutter = small" theme="light" level={4} />
+    <Container>
+      <DxcRow gutter="small">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="gutter = medium" theme="light" level={4} />
+    <Container>
+      <DxcRow gutter="medium">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="gutter = large" theme="light" level={4} />
+    <Container>
+      <DxcRow gutter="large">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="gutter = xlarge" theme="light" level={4} />
+    <Container>
+      <DxcRow gutter="xlarge">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="gutter = xxlarge" theme="light" level={4} />
+    <Container>
+      <DxcRow gutter="xxlarge">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="gutter = none" theme="light" level={4} />
+    <Container>
+      <DxcRow gutter="none">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="reverse = false" theme="light" level={4} />
+    <Container>
+      <DxcRow reverse={false}>
+        <Placeholder>1</Placeholder>
+        <Placeholder>2</Placeholder>
+        <Placeholder>3</Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="reverse = true" theme="light" level={4} />
+    <Container>
+      <DxcRow reverse={true}>
+        <Placeholder>1</Placeholder>
+        <Placeholder>2</Placeholder>
+        <Placeholder>3</Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="wrap = true" theme="light" level={4} />
+    <Container width={300}>
+      <DxcRow wrap={true}>
+        <Placeholder>1</Placeholder>
+        <Placeholder>2</Placeholder>
+        <Placeholder>3</Placeholder>
+      </DxcRow>
+    </Container>
+    <Title title="wrap = false" theme="light" level={4} />
+    <Container width={300}>
+      <DxcRow wrap={false}>
+        <Placeholder>1</Placeholder>
+        <Placeholder>2</Placeholder>
+        <Placeholder>3</Placeholder>
+      </DxcRow>
+    </Container>
+  </>
+);
+
+const Container = styled.div`
+  background: #d0d0d0;
+  padding: 10px;
+  border-radius: 10px;
+  width: ${({ width }) => (width ? `${width}px` : "unset")};
+`;
+
+const Placeholder = styled.div`
+  min-height: 80px;
+  min-width: 120px;
+  border: 1px solid #fabada;
+  background-color: #fff7fb;
+  border-radius: 5px;
+  padding-top: ${({ paddingTop }) => `${paddingTop ?? 0}px`};
+  padding-bottom: ${({ paddingBottom }) => `${paddingBottom ?? 0}px`};
+`;

package/select/Select.js

@@ -21,7 +21,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _variables = require("../common/variables.js");
 
@@ -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,
@@ -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"])), 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/sidenav/Sidenav.js

@@ -17,9 +17,9 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _variables = require("../common/variables.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _BackgroundColorContext = require("../BackgroundColorContext.js");
+var _BackgroundColorContext = require("../BackgroundColorContext");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 

package/slider/Slider.js

@@ -27,9 +27,9 @@ var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 
 var _uuid = require("uuid");
 
@@ -142,7 +142,7 @@ var DxcSlider = function DxcSlider(_ref) {
     step: step
   }, maxLabel), showInput && /*#__PURE__*/_react["default"].createElement(StyledTextInput, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
     name: name,
-    value: value != null && value >= 0 && value || innerValue,
+    value: value != null && value >= 0 && value.toString() || innerValue.toString(),
     disabled: disabled,
     onChange: handlerInputChange,
     size: "fillParent"
@@ -187,7 +187,7 @@ var Label = _styledComponents["default"].label(_templateObject2 || (_templateObj
   return props.theme.labelLineHeight;
 });
 
-var HelperText = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
+var HelperText = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledHelperTextFontColorOnDark : props.theme.disabledHelperTextFontColor : props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.theme.helperTextFontColor;
 }, function (props) {
   return props.theme.fontFamily;

package/spinner/Spinner.js

@@ -19,9 +19,9 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _variables = require("../common/variables.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 

package/stack/Stack.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+declare type StackProps = {
+    gutter?: "none" | "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,94 @@
+"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 "xxsmall":
+      return "calc(0.125rem / ".concat(divider ? 2 : 1, ")");
+
+    case "xsmall":
+      return "calc(0.25rem / ".concat(divider ? 2 : 1, ")");
+
+    case "small":
+      return "calc(0.5rem / ".concat(divider ? 2 : 1, ")");
+
+    case "medium":
+      return "calc(1rem / ".concat(divider ? 2 : 1, ")");
+
+    case "large":
+      return "calc(1.5rem / ".concat(divider ? 2 : 1, ")");
+
+    case "xlarge":
+      return "calc(2rem / ".concat(divider ? 2 : 1, ")");
+
+    case "xxlarge":
+      return "calc(3rem / ".concat(divider ? 2 : 1, ")");
+
+    case "xxxlarge":
+      return "calc(4rem / ".concat(divider ? 2 : 1, ")");
+
+    default:
+      return "0";
+  }
+});

package/stack/Stack.stories.tsx

@@ -0,0 +1,150 @@
+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 = 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 = 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.js

@@ -27,9 +27,9 @@ var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 
 var _templateObject, _templateObject2;