@dxc-technology/halstack-react 0.0.0-e628009 → 0.0.0-e961efe

package/dist/header/Header.js

@@ -33,11 +33,21 @@ var _variables = require("../common/variables.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
-var _BackgroundColorContext = require("../BackgroundColorContext.js");
+var _BackgroundColorContext = _interopRequireWildcard(require("../BackgroundColorContext.js"));
 
-function _templateObject14() {
+function _templateObject15() {
   var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: ", ";\n  opacity: ", " !important;\n  visibility: ", ";\n  opacity: ", ";\n  display: ", ";\n  transition: opacity 0.2s 0.2s ease-in-out;\n  z-index: ", ";\n"]);
 
+  _templateObject15 = function _templateObject15() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject14() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: 100%;\n  margin-top: 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  color: ", ";\n"]);
+
   _templateObject14 = function _templateObject14() {
     return data;
   };
@@ -46,7 +56,7 @@ function _templateObject14() {
 }
 
 function _templateObject13() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: 100%;\n  margin-top: 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  cursor: pointer;\n  :focus {\n    outline: ", " auto 1px;\n  }\n  position: fixed;\n  top: 23px;\n  right: 20px;\n  width: 24px;\n  height: 24px;\n  padding: ", ";\n"]);
 
   _templateObject13 = function _templateObject13() {
     return data;
@@ -56,7 +66,7 @@ function _templateObject13() {
 }
 
 function _templateObject12() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  cursor: pointer;\n  :focus {\n    outline: ", " auto 1px;\n  }\n  position: fixed;\n  top: 23px;\n  right: 20px;\n  width: 24px;\n  height: 24px;\n  padding: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: ", ";\n  width: ", ";\n  position: absolute;\n  top: 23px;\n  left: 20px;\n"]);
 
   _templateObject12 = function _templateObject12() {
     return data;
@@ -66,7 +76,7 @@ function _templateObject12() {
 }
 
 function _templateObject11() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: ", ";\n  width: ", ";\n  position: absolute;\n  top: 23px;\n  left: 20px;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: space-evenly;\n  background-color: ", ";\n  position: fixed;\n  top: 0;\n  right: 0;\n  z-index: ", ";\n  width: ", ";\n  height: 100vh;\n  padding: 20px;\n  transform: ", ";\n  opacity: ", ";\n  transition-property: transform, opacity;\n  transition-duration: 0.6s;\n  transition-timing-function: ease-in-out;\n  box-sizing: border-box;\n"]);
 
   _templateObject11 = function _templateObject11() {
     return data;
@@ -76,7 +86,7 @@ function _templateObject11() {
 }
 
 function _templateObject10() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: space-evenly;\n  background-color: ", ";\n  position: fixed;\n  top: 0;\n  right: 0;\n  z-index: ", ";\n  width: ", ";\n  height: 100vh;\n  padding: 20px;\n  transform: ", ";\n  opacity: ", ";\n  transition-property: transform, opacity;\n  transition-duration: 0.6s;\n  transition-timing-function: ease-in-out;\n  box-sizing: border-box;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-grow: 1;\n"]);
 
   _templateObject10 = function _templateObject10() {
     return data;
@@ -86,7 +96,7 @@ function _templateObject10() {
 }
 
 function _templateObject9() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-grow: 1;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-style: ", ";\n  font-size: ", ";\n  text-transform: ", ";\n  font-weight: ", ";\n  color: ", ";\n"]);
 
   _templateObject9 = function _templateObject9() {
     return data;
@@ -96,7 +106,7 @@ function _templateObject9() {
 }
 
 function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-style: ", ";\n  font-size: ", ";\n  text-transform: ", ";\n  font-weight: ", ";\n  color: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 54px;\n  cursor: pointer;\n  :hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: ", " auto 1px;\n  }\n  & > svg {\n    fill: ", ";\n  }\n"]);
 
   _templateObject8 = function _templateObject8() {
     return data;
@@ -106,7 +116,7 @@ function _templateObject8() {
 }
 
 function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 54px;\n  cursor: pointer;\n  :hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: ", " auto 1px;\n  }\n  & > svg {\n    fill: ", ";\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: calc(100% - 186px);\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  color: ", ";\n\n  justify-content: flex-end;\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"]);
 
   _templateObject7 = function _templateObject7() {
     return data;
@@ -116,7 +126,7 @@ function _templateObject7() {
 }
 
 function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: calc(100% - 186px);\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  justify-content: flex-end;\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: calc(100% - 186px);\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n\n  justify-content: flex-end;\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"]);
 
   _templateObject6 = function _templateObject6() {
     return data;
@@ -236,6 +246,16 @@ var DxcHeader = function DxcHeader(_ref) {
     }
   };
 
+  var ContentContainerComponent = function ContentContainerComponent() {
+    var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
+    return isResponsive && _react["default"].createElement(MenuContent, {
+      backgroundType: backgroundType
+    }, responsiveContent(handleMenu)) || _react["default"].createElement(ContentContainer, {
+      padding: padding,
+      backgroundType: backgroundType
+    }, content);
+  };
+
   var handleMenu = function handleMenu() {
     if (isResponsive && !isMenuVisible) {
       setIsMenuVisible(!isMenuVisible);
@@ -285,7 +305,9 @@ var DxcHeader = function DxcHeader(_ref) {
   }, _Icons.hamburgerIcon, _react["default"].createElement(HamburguerTitle, null, "Menu"))), _react["default"].createElement("div", null, _react["default"].createElement(ResponsiveMenu, {
     hasVisibility: isMenuVisible,
     refSize: refSize
-  }, _react["default"].createElement(ResponsiveLogoContainer, null, headerResponsiveLogo), _react["default"].createElement(MenuContent, null, responsiveContent(handleMenu)), _react["default"].createElement(CloseContainer, {
+  }, _react["default"].createElement(ResponsiveLogoContainer, null, headerResponsiveLogo), _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    color: colorsTheme.header.menuBackgroundColor
+  }, _react["default"].createElement(ContentContainerComponent, null, responsiveContent(handleMenu))), _react["default"].createElement(CloseContainer, {
     tabIndex: tabIndex,
     onClick: handleMenu,
     className: "closeIcon"
@@ -293,11 +315,9 @@ var DxcHeader = function DxcHeader(_ref) {
     onClick: handleMenu,
     hasVisibility: isMenuVisible,
     refSize: refSize
-  }))), !isResponsive && _react["default"].createElement(ChildContainer, {
-    padding: padding
-  }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+  }))), !isResponsive && _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
     color: colorsTheme.header.backgroundColor
-  }, content))));
+  }, _react["default"].createElement(ContentContainerComponent, null))));
 };
 
 DxcHeader.Dropdown = Dropdown;
@@ -345,7 +365,21 @@ var ChildContainer = _styledComponents["default"].div(_templateObject6(), functi
   return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
 });
 
-var HamburguerItem = _styledComponents["default"].div(_templateObject7(), function (props) {
+var ContentContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
+  return props.backgroundType === "dark" ? props.theme.contentColorOnDark : props.theme.contentColor;
+}, 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 HamburguerItem = _styledComponents["default"].div(_templateObject8(), function (props) {
   return props.theme.hamburguerHoverColor;
 }, function (props) {
   return props.theme.hamburguerFocusColor;
@@ -353,7 +387,7 @@ var HamburguerItem = _styledComponents["default"].div(_templateObject7(), functi
   return props.theme.hamburguerIconColor;
 });
 
-var HamburguerTitle = _styledComponents["default"].span(_templateObject8(), function (props) {
+var HamburguerTitle = _styledComponents["default"].span(_templateObject9(), function (props) {
   return props.theme.hamburguerFontFamily;
 }, function (props) {
   return props.theme.hamburguerFontStyle;
@@ -367,9 +401,9 @@ var HamburguerTitle = _styledComponents["default"].span(_templateObject8(), func
   return props.theme.hamburguerFontColor;
 });
 
-var MainContainer = _styledComponents["default"].div(_templateObject9());
+var MainContainer = _styledComponents["default"].div(_templateObject10());
 
-var ResponsiveMenu = _styledComponents["default"].div(_templateObject10(), function (props) {
+var ResponsiveMenu = _styledComponents["default"].div(_templateObject11(), function (props) {
   return props.theme.menuBackgroundColor;
 }, function (props) {
   return props.theme.menuZindex;
@@ -385,19 +419,21 @@ var ResponsiveMenu = _styledComponents["default"].div(_templateObject10(), funct
   return props.hasVisibility ? "1" : "0.96";
 });
 
-var ResponsiveLogoContainer = _styledComponents["default"].div(_templateObject11(), function (props) {
+var ResponsiveLogoContainer = _styledComponents["default"].div(_templateObject12(), function (props) {
   return props.theme.logoHeight;
 }, function (props) {
   return props.theme.logoWidth;
 });
 
-var CloseContainer = _styledComponents["default"].div(_templateObject12(), function (props) {
+var CloseContainer = _styledComponents["default"].div(_templateObject13(), function (props) {
   return props.theme.hamburguerFocusColor;
 }, _variables.spaces.xxsmall);
 
-var MenuContent = _styledComponents["default"].div(_templateObject13());
+var MenuContent = _styledComponents["default"].div(_templateObject14(), function (props) {
+  return props.backgroundType === "dark" ? props.theme.contentColorOnDark : props.theme.contentColor;
+});
 
-var Overlay = _styledComponents["default"].div(_templateObject14(), function (props) {
+var Overlay = _styledComponents["default"].div(_templateObject15(), function (props) {
   return props.theme.overlayColor;
 }, function (props) {
   return props.theme.overlayOpacity;

package/dist/header/index.d.ts

@@ -0,0 +1,25 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+type Padding = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  underlined?: boolean;
+  onClick?: void;
+  content?: any;
+  responsiveContent?: any;
+  margin?: Space | Margin;
+  padding?: Space | Padding;
+  tabIndex?: number;
+};
+
+export default function DxcHeader(props: Props): JSX.Element;

package/dist/heading/index.d.ts

@@ -0,0 +1,17 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  level?: 1 | 2 | 3 | 4 | 5;
+  text?: string;
+  as?: "h1" | "h2" | "h3" | "h4" | "h5";
+  weight?: "light" | "normal" | "bold";
+  margin?: Space | Margin;
+};
+
+export default function DxcHeading(props: Props): JSX.Element;

package/dist/input-text/InputText.js

@@ -136,7 +136,7 @@ function _templateObject2() {
 }
 
 function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  padding-left: 12px;\n  color:red;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  padding-left: 12px;\n  color: red;\n"]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -166,7 +166,7 @@ var makeCancelable = function makeCancelable(promise) {
   };
 };
 
-var V3DxcInputText = function V3DxcInputText(_ref) {
+var DxcInputText = function DxcInputText(_ref) {
   var _ref$label = _ref.label,
       label = _ref$label === void 0 ? " " : _ref$label,
       _ref$name = _ref.name,
@@ -670,7 +670,7 @@ var TextContainer = _styledComponents["default"].div(_templateObject10(), functi
   return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
 });
 
-V3DxcInputText.propTypes = {
+DxcInputText.propTypes = {
   label: _propTypes["default"].string,
   name: _propTypes["default"].string,
   value: _propTypes["default"].string,
@@ -701,5 +701,5 @@ V3DxcInputText.propTypes = {
   autocompleteOptions: _propTypes["default"].any,
   tabIndex: _propTypes["default"].number
 };
-var _default = V3DxcInputText;
+var _default = DxcInputText;
 exports["default"] = _default;

package/dist/input-text/index.d.ts

@@ -0,0 +1,36 @@
+type Size = "small" | "medium" | "large" | "fillParent";
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  label?: string;
+  name?: string;
+  value?: string;
+  assistiveText?: string;
+  disabled?: boolean;
+  prefix?: string;
+  suffix?: string;
+  prefixIcon?: any;
+  suffixIcon?: any;
+  prefixIconSrc?: string;
+  suffixIconSrc?: string;
+  onClickPrefix?: void;
+  onClickSuffix?: void;
+  onChange?: void;
+  onBlur?: void;
+  invalid?: boolean;
+  required?: void;
+  isMasked?: boolean;
+  placeholder?: string;
+  autocompleteOptions?: any;
+  margin?: Space | Margin;
+  size?: Size;
+  tabIndex?: number;
+};
+
+export default function DxcInputText(props: Props): JSX.Element;

package/dist/link/index.d.ts

@@ -0,0 +1,23 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  inheritColor?: boolean;
+  disabled?: boolean;
+  iconSrc?: string;
+  icon?: any;
+  iconPosition?: "before" | "after";
+  href?: string;
+  newWindow?: boolean;
+  onClick?: void;
+  text?: string;
+  margin?: Space | Margin;
+  tabIndex?: number;
+};
+
+export default function DxcLink(props: Props): JSX.Element;

package/dist/main.d.ts

@@ -1,8 +1,40 @@
+export { default as DxcAccordion } from "./accordion/index";
+export { default as DxcAccordionGroup } from "./accordion-group/index";
 export { default as DxcAlert } from "./alert/index";
-export { default as DxcNewSelect } from "./new-select/index";
-export { default as DxcTextInput } from "./text-input/index";
+export { default as DxcBox } from "./box/index";
+export { default as DxcButton } from "./button/index";
+export { default as DxcCard } from "./card/index";
+export { default as DxcCheckbox } from "./checkbox/index";
+export { default as DxcChip } from "./chip/index";
+export { default as DxcDate } from "./date/index";
 export { default as DxcDateInput } from "./date-input/index";
-export { default as DxcTextarea } from "./textarea/index";
+export { default as DxcDialog } from "./dialog/index";
+export { default as DxcDropdown } from "./dropdown/index";
+export { default as DxcFileInput } from "./file-input/index";
+export { default as DxcFooter } from "./footer/index";
+export { default as DxcHeader } from "./header/index";
+export { default as DxcHeading } from "./heading/index";
+export { default as DxcInputText } from "./input-text/index";
+export { default as DxcLink } from "./link/index";
 export { default as DxcNumberInput } from "./number-input/index";
+export { default as DxcPaginator } from "./paginator/index";
 export { default as DxcPasswordInput } from "./password-input/index";
-export { default as DxcFileInput } from "./file-input/index";
+export { default as DxcProgressBar } from "./progress-bar/index";
+export { default as DxcRadio } from "./radio/index";
+export { default as DxcResultsetTable } from "./resultsetTable/index";
+export { default as DxcSelect } from "./select/index";
+export { default as DxcSidenav } from "./sidenav/index";
+export { default as DxcSlider } from "./slider/index";
+export { default as DxcSpinner } from "./spinner/index";
+export { default as DxcSwitch } from "./switch/index";
+export { default as DxcTable } from "./table/index";
+export { default as DxcTabs } from "./tabs/index";
+export { default as DxcTag } from "./tag/index";
+export { default as DxcTextInput } from "./text-input/index";
+export { default as DxcTextarea } from "./textarea/index";
+export { default as DxcToggle } from "./toggle/index";
+export { default as DxcToggleGroup } from "./toggle-group/index";
+export { default as DxcUpload } from "./upload/index";
+export { default as V3DxcSelect } from "./V3Select/index";
+export { default as V3DxcTextarea } from "./V3Textarea/index";
+export { default as DxcWizard } from "./wizard/index";

package/dist/main.js

@@ -37,7 +37,7 @@ Object.defineProperty(exports, "DxcCheckbox", {
     return _Checkbox["default"];
   }
 });
-Object.defineProperty(exports, "V3DxcDate", {
+Object.defineProperty(exports, "DxcDate", {
   enumerable: true,
   get: function get() {
     return _Date["default"];
@@ -67,7 +67,7 @@ Object.defineProperty(exports, "DxcHeader", {
     return _Header["default"];
   }
 });
-Object.defineProperty(exports, "V3DxcInputText", {
+Object.defineProperty(exports, "DxcInputText", {
   enumerable: true,
   get: function get() {
     return _InputText["default"];
@@ -79,10 +79,10 @@ Object.defineProperty(exports, "DxcRadio", {
     return _Radio["default"];
   }
 });
-Object.defineProperty(exports, "DxcSelect", {
+Object.defineProperty(exports, "V3DxcSelect", {
   enumerable: true,
   get: function get() {
-    return _Select["default"];
+    return _V3Select["default"];
   }
 });
 Object.defineProperty(exports, "DxcSlider", {
@@ -103,12 +103,6 @@ Object.defineProperty(exports, "DxcTabs", {
     return _Tabs["default"];
   }
 });
-Object.defineProperty(exports, "DxcTabsForSections", {
-  enumerable: true,
-  get: function get() {
-    return _TabsForSections["default"];
-  }
-});
 Object.defineProperty(exports, "DxcProgressBar", {
   enumerable: true,
   get: function get() {
@@ -121,7 +115,7 @@ Object.defineProperty(exports, "DxcSpinner", {
     return _Spinner["default"];
   }
 });
-Object.defineProperty(exports, "V3DxcUpload", {
+Object.defineProperty(exports, "DxcUpload", {
   enumerable: true,
   get: function get() {
     return _Upload["default"];
@@ -247,10 +241,10 @@ Object.defineProperty(exports, "DxcTextarea", {
     return _Textarea["default"];
   }
 });
-Object.defineProperty(exports, "DxcNewSelect", {
+Object.defineProperty(exports, "DxcSelect", {
   enumerable: true,
   get: function get() {
-    return _NewSelect["default"];
+    return _Select["default"];
   }
 });
 Object.defineProperty(exports, "DxcFileInput", {
@@ -302,7 +296,7 @@ var _InputText = _interopRequireDefault(require("./input-text/InputText"));
 
 var _Radio = _interopRequireDefault(require("./radio/Radio"));
 
-var _Select = _interopRequireDefault(require("./select/Select"));
+var _V3Select = _interopRequireDefault(require("./V3Select/V3Select"));
 
 var _Slider = _interopRequireDefault(require("./slider/Slider"));
 
@@ -310,8 +304,6 @@ var _Switch = _interopRequireDefault(require("./switch/Switch"));
 
 var _Tabs = _interopRequireDefault(require("./tabs/Tabs"));
 
-var _TabsForSections = _interopRequireDefault(require("./tabs-for-sections/TabsForSections"));
-
 var _ProgressBar = _interopRequireDefault(require("./progress-bar/ProgressBar"));
 
 var _Spinner = _interopRequireDefault(require("./spinner/Spinner"));
@@ -358,7 +350,7 @@ var _NumberInput = _interopRequireDefault(require("./number-input/NumberInput"))
 
 var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
 
-var _NewSelect = _interopRequireDefault(require("./new-select/NewSelect"));
+var _Select = _interopRequireDefault(require("./select/Select"));
 
 var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));