@dxc-technology/halstack-react 0.0.0-f64ebd5 → 0.0.0-f77ec3a

package/dist/switch/Switch.js

@@ -27,16 +27,16 @@ var _core = require("@material-ui/core");
 
 var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
 
-require("../common/OpenSans.css");
-
 var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
 
-var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
 
 function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  cursor: ", ";\n  font-family: \"Open Sans\", sans-serif;\n  opacity: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  opacity: 1;\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  cursor: ", ";\n  ", "\n"]);
 
   _templateObject2 = function _templateObject2() {
     return data;
@@ -46,7 +46,7 @@ function _templateObject2() {
 }
 
 function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n\n  display: inline-flex;\n  align-items: center;\n  flex-direction: ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  cursor: ", ";\n  .MuiSwitch-root {\n    align-items: center;\n    width: 60px;\n    height: 45px;\n    margin: 3px;\n\n    opacity: ", " !important;\n\n    .Mui-focusVisible {\n      border: ", ";\n      padding: 7px;\n    }\n\n    .MuiSwitch-track {\n      /*Enabled and unchecked bar*/\n      background-color: ", ";\n      opacity: 1;\n      height: 12px;\n    }\n\n    .MuiIconButton-root {\n      /*Enabled and unchecked*/\n      top: unset;\n      .MuiSwitch-thumb {\n        /*Only for thumb in all states*/\n        width: 24px;\n        height: 24px;\n      }\n      color: ", ";\n      &:hover {\n        background-color: transparent;\n      }\n      &.Mui-disabled {\n        /*Disabled*/\n        + .MuiSwitch-track {\n          /*Disabled and unchecked bar*/\n          background-color: ", ";\n          opacity: ", ";\n        }\n      }\n      &.Mui-checked {\n        /*Enabled and checked*/\n        color: ", ";\n        transform: translateX(40%);\n        &:hover {\n          background-color: transparent;\n        }\n        + .MuiSwitch-track {\n          /*Enabled and checked bar*/\n          background-color: ", ";\n          opacity: 1;\n        }\n      }\n    }\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  display: inline-flex;\n  align-items: center;\n  flex-direction: ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  cursor: ", ";\n  opacity: 1;\n  \n  .MuiSwitch-root {\n    align-items: center;\n    width: ", ";\n    height: 45px;\n    margin: 3px;\n\n    .Mui-focusVisible {\n      border: ", ";\n      padding: 7px;\n    }\n\n    .MuiSwitch-track {\n      /*Enabled and unchecked bar*/\n      background-color: ", ";\n      height: ", ";\n    }\n\n    .MuiSwitch-switchBase + .MuiSwitch-track {\n      opacity: 1;\n    }\n\n    .MuiIconButton-root {\n      /*Enabled and unchecked*/\n      top: unset;\n      .MuiSwitch-thumb {\n        /*Only for thumb in all states*/\n        width: ", ";\n        height: ", ";\n      }\n      color: ", ";\n      &:hover {\n        background-color: transparent;\n      }\n      &.Mui-disabled {\n        /*Disabled and unchecked*/\n        color: ", ";\n        + .MuiSwitch-track {\n          /*Disabled and unchecked bar*/\n          background-color: ", ";\n        }\n      }\n      &.Mui-disabled.Mui-checked {\n        /*Disabled and checked*/\n        color: ", ";\n        + .MuiSwitch-track {\n          /*Disabled and checked bar*/\n          background-color: ", ";\n        }\n      }\n      &.Mui-checked {\n        /*Enabled and checked*/\n        color: ", ";\n        transform: translateX(", ");\n        &:hover {\n          background-color: transparent;\n        }\n        + .MuiSwitch-track {\n          /*Enabled and checked bar*/\n          background-color: ", ";\n        }\n      }\n    }\n  }\n"]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -69,17 +69,17 @@ var DxcSwitch = function DxcSwitch(_ref) {
       required = _ref$required === void 0 ? false : _ref$required,
       margin = _ref.margin,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "fitContent" : _ref$size;
+      size = _ref$size === void 0 ? "fitContent" : _ref$size,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
 
   var _useState = (0, _react.useState)(0),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       innerChecked = _useState2[0],
       setInnerChecked = _useState2[1];
 
-  var customTheme = (0, _react.useContext)(_ThemeContext["default"]);
-  var colorsTheme = (0, _react.useMemo)(function () {
-    return (0, _utils.getCustomTheme)(_variables.theme, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
-  }, [customTheme]);
+  var colorsTheme = (0, _useTheme["default"])();
+  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
 
   var handlerSwitchChange = function handlerSwitchChange(newValue) {
     if (checked === undefined) {
@@ -102,11 +102,13 @@ var DxcSwitch = function DxcSwitch(_ref) {
     margin: margin,
     disabled: disabled,
     labelPosition: labelPosition,
-    size: size
+    size: size,
+    backgroundType: backgroundType
   }, _react["default"].createElement(_core.Switch, {
     checked: checked != undefined ? checked : innerChecked,
-    inputProps: name = {
-      name: name
+    inputProps: {
+      name: name,
+      tabIndex: tabIndex
     },
     onChange: handlerSwitchChange,
     value: value,
@@ -114,9 +116,9 @@ var DxcSwitch = function DxcSwitch(_ref) {
     disableRipple: true
   }), _react["default"].createElement(LabelContainer, {
     labelPosition: labelPosition,
-    brightness: _variables.theme,
     onClick: disabled === true ? function () {} : handlerSwitchChange,
-    disabled: disabled
+    disabled: disabled,
+    backgroundType: backgroundType
   }, required && _react["default"].createElement(_RequiredComponent["default"], null), label)));
 };
 
@@ -151,31 +153,51 @@ var SwitchContainer = _styledComponents["default"].div(_templateObject(), functi
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 }, function (props) {
-  return props.disabled === true ? "not-allowed" : "default";
+  return props.disabled ? "not-allowed" : "default";
+}, function (props) {
+  return props.theme.trackWidth;
+}, function (props) {
+  return "".concat(props.backgroundType === "dark" ? props.theme.thumbFocusColorOnDark : props.theme.thumbFocusColor, " solid 2px");
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.uncheckedTrackBackgroundColorOnDark : props.theme.uncheckedTrackBackgroundColor;
+}, function (props) {
+  return props.theme.trackHeight;
 }, function (props) {
-  return props.disabled ? props.theme.disabled : "1";
+  return props.theme.thumbWidth;
 }, function (props) {
-  return props.theme.focusColor + " solid 2px";
+  return props.theme.thumbHeight;
 }, function (props) {
-  return props.theme.uncheckedTrackBackgroundColor;
+  return props.backgroundType === "dark" ? props.theme.uncheckedThumbBackgroundColorOnDark : props.theme.uncheckedThumbBackgroundColor;
 }, function (props) {
-  return props.theme.uncheckedThumbBackgroundColor;
+  return props.backgroundType === "dark" ? props.theme.disabledUncheckedThumbBackgroundColorOnDark : props.theme.disabledUncheckedThumbBackgroundColor;
 }, function (props) {
-  return props.theme.uncheckedTrackBackgroundColor;
+  return props.backgroundType === "dark" ? props.theme.disabledUncheckedTrackBackgroundColorOnDark : props.theme.disabledUncheckedTrackBackgroundColor;
 }, function (props) {
-  return props.theme.disabled;
+  return props.backgroundType === "dark" ? props.theme.disabledCheckedThumbBackgroundColorOnDark : props.theme.disabledCheckedThumbBackgroundColor;
 }, function (props) {
-  return props.theme.checkedThumbBackgroundColor;
+  return props.backgroundType === "dark" ? props.theme.disabledCheckedTrackBackgroundColorOnDark : props.theme.disabledCheckedTrackBackgroundColor;
 }, function (props) {
-  return props.theme.checkedTrackBackgroundColor;
+  return props.backgroundType === "dark" ? props.theme.checkedThumbBackgroundColorOnDark : props.theme.checkedThumbBackgroundColor;
+}, function (props) {
+  return props.theme.thumbShift;
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.checkedTrackBackgroundColorOnDark : props.theme.checkedTrackBackgroundColor;
 });
 
 var LabelContainer = _styledComponents["default"].span(_templateObject2(), function (props) {
-  return props.theme.fontColor;
+  return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledLabelFontColorOnDark : props.theme.disabledLabelFontColor : props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
+}, function (props) {
+  return props.theme.labelFontFamily;
+}, function (props) {
+  return props.theme.labelFontSize;
+}, function (props) {
+  return props.disabled ? props.theme.disabledLabelFontStyle : props.theme.labelFontStyle;
+}, function (props) {
+  return props.theme.labelFontWeight;
 }, function (props) {
   return props.disabled === true ? "not-allowed" : "pointer";
 }, function (props) {
-  return props.disabled === true ? props.theme.disabled : "";
+  return props.labelPosition === "after" ? "margin-left: ".concat(props.theme.spaceBetweenLabelSwitch, ";") : "margin-right: ".concat(props.theme.spaceBetweenLabelSwitch, ";");
 });
 
 DxcSwitch.propTypes = {
@@ -193,7 +215,8 @@ DxcSwitch.propTypes = {
     bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
     left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
     right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
+  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
+  tabIndex: _propTypes["default"].number
 };
 var _default = DxcSwitch;
 exports["default"] = _default;

package/dist/switch/index.d.ts

@@ -0,0 +1,24 @@
+type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  checked?: boolean;
+  value?: any;
+  label?: string;
+  labelPosition?: "before" | "after";
+  name?: string,
+  disabled?: boolean;
+  onChange?: void;
+  required?: boolean;
+  margin?: Space | Margin;
+  size?: Size;
+  tabIndex?: number;
+};
+
+export default function DxcSwitch(props: Props): JSX.Element;

package/dist/table/Table.js

@@ -13,7 +13,7 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -21,10 +21,12 @@ var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
 
-var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+
+var _BackgroundColorContext = require("../BackgroundColorContext.js");
 
 function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  border-collapse: collapse;\n  width: 100%;\n\n  & tr {\n    border-bottom: 1px solid ", ";\n  }\n\n  & td {\n    color: ", ";\n    min-height: 48px;\n  }\n\n  & th {\n    padding: 16px 20px 16px 40px;\n    min-height: 60px;\n  }\n\n  & td {\n    padding: 14px 20px 12px 40px;\n  }\n\n  & th {\n    text-align: left;\n    font-size: 14px;\n    font-weight: 500;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  & th:first-child {\n    border-top-left-radius: 4px;\n  }\n\n  & th:last-child {\n    border-top-right-radius: 4px;\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  border-collapse: collapse;\n  width: 100%;\n\n  & tr {\n    border-bottom: ", ";\n  }\n  & td {\n    background-color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: ", ";\n    font-weight: ", ";\n    color: ", ";\n    text-transform: ", ";\n    text-align: ", ";\n    line-height: ", ";\n    padding: ", ";\n  }\n  & th {\n    background-color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: ", ";\n    font-weight: ", ";\n    color: ", ";\n    text-transform: ", ";\n    text-align: ", ";\n    line-height: ", ";\n    padding: ", ";\n  }\n  & th:first-child {\n    border-top-left-radius: ", ";\n  }\n  & th:last-child {\n    border-top-right-radius: ", ";\n  }\n"]);
 
   _templateObject2 = function _templateObject2() {
     return data;
@@ -34,7 +36,7 @@ function _templateObject2() {
 }
 
 function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  overflow-x: auto;\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  &::-webkit-scrollbar {\n    height: 6px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 6px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: ", ";\n    border-radius: 6px;\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  overflow: hidden auto;\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 6px;\n  }\n  &::-webkit-scrollbar-track {\n    background-color: ", ";\n    border-radius: 6px;\n  }\n"]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -46,18 +48,23 @@ function _templateObject() {
 var DxcTable = function DxcTable(_ref) {
   var children = _ref.children,
       margin = _ref.margin;
-  var customTheme = (0, _react.useContext)(_ThemeContext["default"]);
-  var colorsTheme = (0, _react.useMemo)(function () {
-    return (0, _utils.getCustomTheme)(_variables.theme, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
-  }, [customTheme]);
+  var colorsTheme = (0, _useTheme["default"])();
   return _react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.table
   }, _react["default"].createElement(DxcTableContainer, {
     margin: margin
-  }, _react["default"].createElement(DxcTableContent, null, children)));
+  }, _react["default"].createElement(DxcTableContent, null, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    color: colorsTheme.table.dataBackgroundColor
+  }, children))));
+};
+
+var calculateWidth = function calculateWidth(margin) {
+  return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
 };
 
 var DxcTableContainer = _styledComponents["default"].div(_templateObject(), function (props) {
+  return calculateWidth(props.margin);
+}, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -68,19 +75,57 @@ var DxcTableContainer = _styledComponents["default"].div(_templateObject(), func
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 }, function (props) {
-  return props.theme.darkGrey;
+  return props.theme.scrollBarThumbColor;
 }, function (props) {
-  return props.theme.lightGrey;
+  return props.theme.scrollBarTrackColor;
 });
 
 var DxcTableContent = _styledComponents["default"].table(_templateObject2(), function (props) {
-  return props.theme.separatorColor;
+  return "".concat(props.theme.rowSeparatorThickness, " ").concat(props.theme.rowSeparatorStyle, " ").concat(props.theme.rowSeparatorColor);
+}, function (props) {
+  return props.theme.dataBackgroundColor;
+}, function (props) {
+  return props.theme.dataFontFamily;
+}, function (props) {
+  return props.theme.dataFontSize;
+}, function (props) {
+  return props.theme.dataFontStyle;
+}, function (props) {
+  return props.theme.dataFontWeight;
+}, function (props) {
+  return props.theme.dataFontColor;
+}, function (props) {
+  return props.theme.dataFontTextTransform;
+}, function (props) {
+  return props.theme.dataTextAlign;
 }, function (props) {
-  return props.theme.bodyFontColor;
+  return props.theme.dataTextLineHeight;
+}, function (props) {
+  return "".concat(props.theme.dataPaddingTop, " ").concat(props.theme.dataPaddingRight, " ").concat(props.theme.dataPaddingBottom, " ").concat(props.theme.dataPaddingLeft);
 }, function (props) {
   return props.theme.headerBackgroundColor;
+}, function (props) {
+  return props.theme.headerFontFamily;
+}, function (props) {
+  return props.theme.headerFontSize;
+}, function (props) {
+  return props.theme.headerFontStyle;
+}, function (props) {
+  return props.theme.headerFontWeight;
 }, function (props) {
   return props.theme.headerFontColor;
+}, function (props) {
+  return props.theme.headerFontTextTransform;
+}, function (props) {
+  return props.theme.headerTextAlign;
+}, function (props) {
+  return props.theme.headerTextLineHeight;
+}, function (props) {
+  return "".concat(props.theme.headerPaddingTop, " ").concat(props.theme.headerPaddingRight, " ").concat(props.theme.headerPaddingBottom, " ").concat(props.theme.headerPaddingLeft);
+}, function (props) {
+  return props.theme.headerBorderRadius;
+}, function (props) {
+  return props.theme.headerBorderRadius;
 });
 
 var _default = DxcTable;

package/dist/table/index.d.ts

@@ -0,0 +1,13 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  margin?: Space | Margin;
+};
+
+export default function DxcTable(props: Props): JSX.Element;