@dxc-technology/halstack-react 0.0.0-b7324ab → 0.0.0-b92e300

package/dist/tag/Tag.js

@@ -1,217 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _variables = require("../common/variables.js");
-
-var _Box = _interopRequireDefault(require("../box/Box"));
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 0px 30px;\n  font-size: 14px;\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  color: black;\n  flex-grow: 1;\n  text-align: center;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  \n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  background: ", ";\n  width: 48px;\n  justify-content: center;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 10px 12px;\n  height: 23px;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: none;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: center;\n  background-color: white;\n  flex-direction: ", ";\n  width: ", ";\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  cursor: ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var DxcTag = function DxcTag(_ref) {
-  var iconSrc = _ref.iconSrc,
-      label = _ref.label,
-      margin = _ref.margin,
-      linkHref = _ref.linkHref,
-      onClick = _ref.onClick,
-      _ref$iconBgColor = _ref.iconBgColor,
-      iconBgColor = _ref$iconBgColor === void 0 ? "black" : _ref$iconBgColor,
-      _ref$labelPosition = _ref.labelPosition,
-      labelPosition = _ref$labelPosition === void 0 ? "after" : _ref$labelPosition,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "fitContent" : _ref$size;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isHovered = _useState2[0],
-      changeIsHovered = _useState2[1];
-
-  var clickHandler = function clickHandler() {
-    if (onClick) {
-      onClick();
-    }
-  };
-
-  var tagContent = _react["default"].createElement(_Box["default"], {
-    size: size,
-    shadowDepth: isHovered && (onClick || linkHref) && 2 || 1
-  }, _react["default"].createElement(TagContent, {
-    labelPosition: labelPosition,
-    margin: margin,
-    size: size
-  }, _react["default"].createElement(IconContainer, {
-    iconBgColor: iconBgColor
-  }, _react["default"].createElement(TagIcon, {
-    src: iconSrc
-  })), size !== "small" && _react["default"].createElement(TagLabel, null, label)));
-
-  return _react["default"].createElement(StyledDxcTag, {
-    margin: margin,
-    onMouseEnter: function onMouseEnter() {
-      return changeIsHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return changeIsHovered(false);
-    },
-    onClick: clickHandler,
-    hasAction: onClick || linkHref
-  }, linkHref && _react["default"].createElement(StyledLink, {
-    href: linkHref
-  }, tagContent) || tagContent);
-};
-
-var sizes = {
-  small: "42px",
-  medium: "240px",
-  large: "480px",
-  fillParent: "100%",
-  fitContent: "unset"
-};
-
-var calculateWidth = function calculateWidth(size) {
-  return sizes[size];
-};
-
-var StyledDxcTag = _styledComponents["default"].div(_templateObject(), function (_ref2) {
-  var hasAction = _ref2.hasAction;
-  return hasAction && "pointer" || "unset";
-}, function (_ref3) {
-  var margin = _ref3.margin;
-  return margin && (0, _typeof2["default"])(margin) !== "object" ? _variables.spaces[margin] : "0px";
-}, function (_ref4) {
-  var margin = _ref4.margin;
-  return margin && margin.top ? _variables.spaces[margin.top] : "";
-}, function (_ref5) {
-  var margin = _ref5.margin;
-  return margin && margin.right ? _variables.spaces[margin.right] : "";
-}, function (_ref6) {
-  var margin = _ref6.margin;
-  return margin && margin.bottom ? _variables.spaces[margin.bottom] : "";
-}, function (_ref7) {
-  var margin = _ref7.margin;
-  return margin && margin.left ? _variables.spaces[margin.left] : "";
-});
-
-var TagContent = _styledComponents["default"].div(_templateObject2(), function (_ref8) {
-  var labelPosition = _ref8.labelPosition;
-  return labelPosition === "before" && "row-reverse" || "row";
-}, function (props) {
-  return calculateWidth(props.size);
-});
-
-var StyledLink = _styledComponents["default"].a(_templateObject3());
-
-var TagIcon = _styledComponents["default"].img(_templateObject4());
-
-var IconContainer = _styledComponents["default"].div(_templateObject5(), function (_ref9) {
-  var iconBgColor = _ref9.iconBgColor;
-  return iconBgColor;
-});
-
-var TagLabel = _styledComponents["default"].div(_templateObject6());
-
-DxcTag.propTypes = {
-  size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
-  iconSrc: _propTypes["default"].string,
-  iconBgColor: _propTypes["default"].string,
-  label: _propTypes["default"].string,
-  labelPosition: _propTypes["default"].oneOf(["before", "after"]),
-  linkHref: _propTypes["default"].string,
-  onClick: _propTypes["default"].func,
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    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)))])
-};
-DxcTag.defaultProps = {
-  iconSrc: null,
-  label: null,
-  margin: null,
-  linkHref: null,
-  onClick: null,
-  iconBgColor: "black",
-  labelPosition: "after"
-};
-var _default = DxcTag;
-exports["default"] = _default;

package/dist/textarea/Textarea.js

@@ -1,226 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-require("../common/OpenSans.css");
-
-var _variables = require("../common/variables.js");
-
-var _utils = require("../common/utils.js");
-
-var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  \n  display: inline-block;\n  position: relative;\n  height: auto;\n  width: ", ";\n  .MuiTextField-root {\n    width: 100%;\n    font-family: \"Open Sans\", sans-serif;\n    .MuiFormHelperText-root {\n      font-family: \"Open Sans\", sans-serif;\n      margin-top: 6px;\n    }\n    .MuiFormLabel-root {\n      font-size: 16px;\n      color: ", ";\n      &::before {\n        content:'", "';\n        color: ", ";\n        font-size: 16px; \n      }\n      &.Mui-disabled{\n        opacity:0.5;\n      }\n      padding-left: \"inherit\";\n      &.Mui-focused {\n        color: ", ";\n        &.MuiInputLabel-shrink {\n          transform: \n            \"translate(0, 1.5px) scale(0.75);\";\n        }\n      }\n      &.Mui-disabled {\n        color: ", ";\n        cursor: not-allowed;\n      }\n      &.MuiInputLabel-shrink {\n        font-family: \"Open Sans\", sans-serif;\n        transform: \"translate(0, 1.5px) scale(0.75)\";\n      }\n      &.Mui-error {\n        color: ", ";\n      }\n\n      &:not(.MuiInputLabel-shrink)  {\n        font-family: \"Open Sans\", sans-serif;\n        color: ", ";\n        & + div, & + div + p {\n          color: ", ";\n        }\n      }\n\n      &.MuiInputLabel-shrink {\n        & + div::before {\n          border-color: ", ";\n        }\n        & + div + p {\n          color: ", ";\n        }\n        \n      }\n    }\n    .MuiInputBase-root.MuiInput-root.MuiInput-underline {\n      font-family: \"Open Sans\", sans-serif;\n      &::before{\n        border-bottom: ", ";\n      }\n      &:not(.Mui-error)::before, &:not(&.Mui-focused)::before {\n        border-bottom: ", ";\n      }\n      &::after{\n        border-bottom: ", ";\n      }\n\n      .MuiInputBase-inputMultiline {\n        overflow: auto !important;\n\n        ::-webkit-scrollbar {\n          width: 3px;\n        }\n\n        ::-webkit-scrollbar-track {\n          background-color: ", ";\n          border-radius: 3px;\n        }\n\n        ::-webkit-scrollbar-thumb {\n          background-color: ", ";\n          border-radius: 3px;\n        }\n      }\n\n      &.Mui-error {\n        &::before {\n          border-width: 1px;\n          border-color: ", ";\n        }\n        &::after {\n          transform: scaleX(0);\n        }\n      }\n\n      &.Mui-focused {\n        &::after {\n          border-width: 2px;\n          border-color: ", ";\n          transform: scaleX(1);\n        }\n        \n        &.Mui-error::after {\n          border-color: ", ";\n        }\n      }\n\n      &.Mui-disabled {\n        color: ", ";\n        opacity:0.5;\n        cursor: not-allowed;\n        \n        &::before {\n          border-bottom: ", ";\n          border-bottom-style: solid;\n        }\n      }\n      .MuiInputBase-input {\n        padding-left: \"inherit\";\n        color: ", ";\n         text-overflow: ellipsis;\n        &.Mui-disabled {\n          cursor: not-allowed;\n        };\n      }\n\n      &:hover:not(.Mui-disabled):before &:hover:not(.Mui-error):before{\n        border-bottom: ", ";\n      }\n      \n    }\n\n    & > p {\n      &.Mui-error {\n        color: ", ";\n      }\n      &.Mui-disabled{\n        opacity:0.5;\n        cursor:not-allowed;\n      }\n    }\n    \n  }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var DxcTextarea = function DxcTextarea(_ref) {
-  var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? " " : _ref$label,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? "" : _ref$name,
-      value = _ref.value,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? "light" : _ref$theme,
-      _ref$assistiveText = _ref.assistiveText,
-      assistiveText = _ref$assistiveText === void 0 ? "" : _ref$assistiveText,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? "" : _ref$onChange,
-      _ref$onBlur = _ref.onBlur,
-      onBlur = _ref$onBlur === void 0 ? "" : _ref$onBlur,
-      _ref$numRows = _ref.numRows,
-      numRows = _ref$numRows === void 0 ? 4 : _ref$numRows,
-      _ref$invalid = _ref.invalid,
-      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-      _ref$required = _ref.required,
-      required = _ref$required === void 0 ? false : _ref$required,
-      _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
-      margin = _ref.margin,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "medium" : _ref$size;
-
-  var _useState = (0, _react.useState)(""),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      innerValue = _useState2[0],
-      setInnerValue = _useState2[1];
-
-  var colorsTheme = (0, _react.useContext)(_ThemeContext["default"]) || _variables.colors;
-
-  var handlerTextareaChange = function handlerTextareaChange(event) {
-    if (value === null || value === undefined) {
-      if (typeof onChange === "function") {
-        setInnerValue(event.target.value);
-        onChange(event.target.value);
-      } else {
-        setInnerValue(event.target.value);
-      }
-    } else if (onChange !== "") {
-      if (typeof onChange === "function") {
-        onChange(event.target.value);
-      } else {
-        setInnerValue(event.target.value);
-      }
-    }
-  };
-
-  var handlerTextareaBlur = function handlerTextareaBlur(event) {
-    setInnerValue(event.target.value);
-
-    if (onBlur) {
-      onBlur(event.target.value);
-    }
-  };
-
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme
-  }, _react["default"].createElement(TextContainer, {
-    required: required,
-    brightness: theme,
-    assistiveText: assistiveText,
-    margin: margin,
-    size: size
-  }, _react["default"].createElement(_TextField["default"], {
-    error: invalid,
-    value: value !== null ? value : innerValue,
-    name: name,
-    multiline: true,
-    disabled: disabled,
-    label: label,
-    helperText: assistiveText,
-    onChange: handlerTextareaChange,
-    onBlur: onBlur && handlerTextareaBlur || null,
-    rows: numRows,
-    placeholder: placeholder
-  })));
-};
-
-var sizes = {
-  small: "42px",
-  medium: "240px",
-  large: "480px",
-  fillParent: "100%"
-};
-
-var calculateWidth = function calculateWidth(margin, size) {
-  if (size === "fillParent") {
-    return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
-  }
-
-  return sizes[size];
-};
-
-var TextContainer = _styledComponents["default"].div(_templateObject(), 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] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
-}, function (props) {
-  return calculateWidth(props.margin, props.size);
-}, function (props) {
-  return props.brightness === "light" ? props.theme.black : props.theme.lightGrey;
-}, function (props) {
-  return props.required && "*" || "";
-}, function (props) {
-  return props.brightness === "light" ? props.theme.darkRed : props.theme.lightRed;
-}, function (props) {
-  return props.brightness === "light" ? props.theme.black : props.theme.white;
-}, function (props) {
-  return props.brightness === "light" ? props.theme.lightGrey : props.theme.darkGrey;
-}, function (props) {
-  return props.brightness === "light" ? props.theme.darkRed : props.theme.lightRed;
-}, function (props) {
-  return props.brightness === "light" ? props.theme.darkGrey : props.theme.lightGrey;
-}, function (props) {
-  return props.brightness === "light" ? props.theme.darkGrey : props.theme.lightGrey;
-}, function (props) {
-  return props.brightness === "light" ? props.theme.black : props.theme.lightGrey;
-}, function (props) {
-  return props.brightness === "light" ? props.theme.darkGrey : props.theme.lightGrey;
-}, function (props) {
-  return props.brightness === "light" ? "1px solid ".concat(props.theme.black) : "1px solid ".concat(props.theme.lightGrey);
-}, function (props) {
-  return props.brightness === "light" ? "1px solid ".concat(props.theme.black) : "1px solid ".concat(props.theme.lightGrey);
-}, function (props) {
-  return props.brightness === "light" ? "2px solid #000" : "2px solid #d9d9d9";
-}, function (props) {
-  return props.theme.lightGrey;
-}, function (props) {
-  return props.theme.darkGrey;
-}, function (props) {
-  return props.brightness === "light" ? props.theme.darkRed : props.theme.lightRed;
-}, function (props) {
-  return props.brightness === "light" ? props.theme.black : props.theme.white;
-}, function (props) {
-  return props.brightness === "light" ? props.theme.darkRed : props.theme.lightRed;
-}, function (props) {
-  return props.brightness === "light" ? props.theme.lightGrey : props.theme.darkGrey;
-}, function (props) {
-  return props.brightness === "light" ? "1px solid ".concat(props.theme.lightGrey) : "1px solid ".concat(props.theme.darkGrey);
-}, function (props) {
-  return props.brightness === "light" ? props.theme.black : props.theme.white;
-}, function (props) {
-  return props.brightness === "light" ? "1px solid ".concat(props.theme.black) : "1px solid ".concat(props.theme.white);
-}, function (props) {
-  return props.brightness === "light" ? props.theme.darkRed + " !important" : props.theme.lightRed + " !important";
-});
-
-DxcTextarea.propTypes = {
-  label: _propTypes["default"].string,
-  name: _propTypes["default"].string,
-  value: _propTypes["default"].string,
-  theme: _propTypes["default"].oneOf(["light", "dark", ""]),
-  assistiveText: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  required: _propTypes["default"].bool,
-  invalid: _propTypes["default"].bool,
-  placeholder: _propTypes["default"].string,
-  onChange: _propTypes["default"].func,
-  onBlur: _propTypes["default"].func,
-  numRows: _propTypes["default"].number,
-  size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    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)))])
-};
-var _default = DxcTextarea;
-exports["default"] = _default;