@dxc-technology/halstack-react 0.0.0-2c2ee9d → 0.0.0-2c8be25

package/dist/switch/Switch.js

@@ -25,26 +25,18 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _core = require("@material-ui/core");
 
-require("../common/OpenSans.css");
+var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
 
 var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
 
-var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  cursor: ", ";\n  font-family: \"Open Sans\", sans-serif;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
 
 function _templateObject2() {
-  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    .MuiSwitch-track {\n      /*Enabled and unchecked bar*/\n      background-color: ", ";\n      opacity: 1;\n      height: 12px;\n      opacity: 0.4;\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      .MuiTouchRipple-child {\n        background-color: ", ";\n        opacity: 1;\n      }\n      &.Mui-disabled {\n        /*Disabled*/\n        color: ", ";\n        &.Mui-checked {\n          /*Disabled and checked*/\n          color: ", ";\n          + .MuiSwitch-track {\n            /*Disabled and checked bar*/\n            background-color: ", ";\n            opacity: 0.4;\n          }\n        }\n        + .MuiSwitch-track {\n          /*Disabled and unchecked bar*/\n          background-color: ", ";\n          opacity: 0.4;\n        }\n      }\n      &.Mui-checked {\n        /*Enabled and checked*/\n        color: ", ";\n        transform: translateX(35%);\n        &:hover {\n          background-color: transparent;\n        }\n        .MuiTouchRipple-child {\n          background-color: ", ";\n          opacity: 1;\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  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;
@@ -54,7 +46,7 @@ function _templateObject2() {
 }
 
 function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  margin-right: 1px;\n  cursor: default;\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,26 +61,25 @@ var DxcSwitch = function DxcSwitch(_ref) {
       label = _ref.label,
       _ref$labelPosition = _ref.labelPosition,
       labelPosition = _ref$labelPosition === void 0 ? "before" : _ref$labelPosition,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? "light" : _ref$theme,
       name = _ref.name,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$disableRipple = _ref.disableRipple,
-      disableRipple = _ref$disableRipple === void 0 ? false : _ref$disableRipple,
       onChange = _ref.onChange,
       _ref$required = _ref.required,
       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 colorsTheme = (0, _react.useContext)(_ThemeContext["default"]) || _variables.colors;
+  var colorsTheme = (0, _useTheme["default"])();
+  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
 
   var handlerSwitchChange = function handlerSwitchChange(newValue) {
     if (checked === undefined) {
@@ -106,30 +97,29 @@ var DxcSwitch = function DxcSwitch(_ref) {
   };
 
   return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme
+    theme: colorsTheme["switch"]
   }, _react["default"].createElement(SwitchContainer, {
     margin: margin,
-    brightness: theme,
     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,
     disabled: disabled,
-    disableRipple: disableRipple
+    disableRipple: true
   }), _react["default"].createElement(LabelContainer, {
     labelPosition: labelPosition,
-    brightness: theme,
     onClick: disabled === true ? function () {} : handlerSwitchChange,
-    disabled: disabled
-  }, required && _react["default"].createElement(RequiredSpan, {
-    brightness: theme
-  }, "*"), label)));
+    disabled: disabled,
+    backgroundType: backgroundType
+  }, required && _react["default"].createElement(_RequiredComponent["default"], null), label)));
 };
 
 var sizes = {
@@ -148,11 +138,7 @@ var calculateWidth = function calculateWidth(margin, size) {
   return sizes[size];
 };
 
-var RequiredSpan = _styledComponents["default"].span(_templateObject(), function (props) {
-  return props.brightness === "dark" ? props.theme.lightRed : props.theme.darkRed;
-});
-
-var SwitchContainer = _styledComponents["default"].div(_templateObject2(), function (props) {
+var SwitchContainer = _styledComponents["default"].div(_templateObject(), function (props) {
   return calculateWidth(props.margin, props.size);
 }, function (props) {
   return props.labelPosition === "after" ? "row" : "row-reverse";
@@ -167,33 +153,51 @@ var SwitchContainer = _styledComponents["default"].div(_templateObject2(), funct
 }, 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.darkGrey;
+  return props.theme.trackWidth;
 }, function (props) {
-  return props.theme.white;
+  return "".concat(props.backgroundType === "dark" ? props.theme.thumbFocusColorOnDark : props.theme.thumbFocusColor, " solid 2px");
 }, function (props) {
-  return props.brightness === "dark" ? props.theme.yellow : props.theme.darkGrey;
+  return props.backgroundType === "dark" ? props.theme.uncheckedTrackBackgroundColorOnDark : props.theme.uncheckedTrackBackgroundColor;
 }, function (props) {
-  return props.brightness === "dark" ? "#B3B3B3" : props.theme.white;
+  return props.theme.trackHeight;
 }, function (props) {
-  return props.brightness === "dark" ? "#B3B3B3" : "#C1C1C1";
+  return props.theme.thumbWidth;
 }, function (props) {
-  return props.theme.lightGrey;
+  return props.theme.thumbHeight;
 }, function (props) {
-  return props.theme.lightGrey;
+  return props.backgroundType === "dark" ? props.theme.uncheckedThumbBackgroundColorOnDark : props.theme.uncheckedThumbBackgroundColor;
 }, function (props) {
-  return props.brightness === "dark" ? props.theme.yellow : props.theme.black;
+  return props.backgroundType === "dark" ? props.theme.disabledUncheckedThumbBackgroundColorOnDark : props.theme.disabledUncheckedThumbBackgroundColor;
 }, function (props) {
-  return props.theme.darkGrey;
+  return props.backgroundType === "dark" ? props.theme.disabledUncheckedTrackBackgroundColorOnDark : props.theme.disabledUncheckedTrackBackgroundColor;
 }, function (props) {
-  return props.theme.darkGrey;
+  return props.backgroundType === "dark" ? props.theme.disabledCheckedThumbBackgroundColorOnDark : props.theme.disabledCheckedThumbBackgroundColor;
+}, function (props) {
+  return props.backgroundType === "dark" ? props.theme.disabledCheckedTrackBackgroundColorOnDark : props.theme.disabledCheckedTrackBackgroundColor;
+}, function (props) {
+  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(_templateObject3(), function (props) {
-  return props.disabled ? props.brightness === "dark" ? props.theme.darkGrey : props.theme.lightGrey : props.brightness === "dark" ? props.theme.white : props.theme.black;
+var LabelContainer = _styledComponents["default"].span(_templateObject2(), function (props) {
+  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.labelPosition === "after" ? "margin-left: ".concat(props.theme.spaceBetweenLabelSwitch, ";") : "margin-right: ".concat(props.theme.spaceBetweenLabelSwitch, ";");
 });
 
 DxcSwitch.propTypes = {
@@ -202,10 +206,8 @@ DxcSwitch.propTypes = {
   value: _propTypes["default"].any,
   label: _propTypes["default"].string,
   labelPosition: _propTypes["default"].oneOf(["after", "before", ""]),
-  theme: _propTypes["default"].oneOf(["light", "dark", ""]),
   name: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
-  disableRipple: _propTypes["default"].bool,
   onChange: _propTypes["default"].func,
   required: _propTypes["default"].bool,
   margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
@@ -213,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,16 +13,20 @@ 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"));
 
 var _variables = require("../common/variables.js");
 
-var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
+var _utils = require("../common/utils.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    text-transform: uppercase;\n    font-size: 14px;\n    font-weight: 100;\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;
@@ -32,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;
@@ -44,17 +48,23 @@ function _templateObject() {
 var DxcTable = function DxcTable(_ref) {
   var children = _ref.children,
       margin = _ref.margin;
-
-  var colorsTheme = (0, _react.useContext)(_ThemeContext["default"]) || _variables.colors;
-
+  var colorsTheme = (0, _useTheme["default"])();
   return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme
+    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] : "";
@@ -65,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.lightGrey;
+  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.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 props.theme.darkGrey;
+  return "".concat(props.theme.headerPaddingTop, " ").concat(props.theme.headerPaddingRight, " ").concat(props.theme.headerPaddingBottom, " ").concat(props.theme.headerPaddingLeft);
 }, function (props) {
-  return props.theme.black;
+  return props.theme.headerBorderRadius;
 }, function (props) {
-  return props.theme.white;
+  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;