@dxc-technology/halstack-react 0.0.0-4b1188a → 0.0.0-4d89cae

package/dist/tabs-for-sections/TabsForSections.js

@@ -1,92 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _reactUseScrollspy = _interopRequireDefault(require("react-use-scrollspy"));
-
-var _Tabs = _interopRequireDefault(require("../tabs/Tabs"));
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: 10;\n  ", "\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var TABS_HEIGHT = 54;
-
-var DxcTabsForSections = function DxcTabsForSections(_ref) {
-  var _ref$sections = _ref.sections,
-      sections = _ref$sections === void 0 ? [] : _ref$sections,
-      _ref$stickAtPx = _ref.stickAtPx,
-      stickAtPx = _ref$stickAtPx === void 0 ? 0 : _ref$stickAtPx;
-  var tabs = sections.map(function (section) {
-    return {
-      label: section.tabLabel
-    };
-  });
-  var refs = sections.map(function () {
-    return _react["default"].createRef();
-  });
-  var activeTab = (0, _reactUseScrollspy["default"])({
-    sectionElementRefs: refs,
-    offsetPx: -stickAtPx - TABS_HEIGHT
-  });
-
-  var onTabClick = function onTabClick(tabId) {
-    var topOfElement = refs[tabId].current.offsetTop - stickAtPx - TABS_HEIGHT + 5;
-    window.scroll({
-      top: topOfElement,
-      behavior: "smooth"
-    });
-  };
-
-  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(StyledTabs, {
-    stickAtPx: stickAtPx
-  }, _react["default"].createElement(_Tabs["default"], {
-    tabs: tabs,
-    activeTabIndex: activeTab,
-    onTabClick: onTabClick
-  })), sections.map(function (section, i) {
-    return _react["default"].createElement("div", {
-      key: "section".concat(i),
-      ref: refs[i]
-    }, _react["default"].createElement(section.section, null));
-  }));
-};
-
-DxcTabsForSections.propTypes = {
-  stickAtPx: _propTypes["default"].number,
-  sections: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    tabLabel: _propTypes["default"].string,
-    section: _propTypes["default"].func
-  }))
-};
-DxcTabsForSections.defaultProps = {
-  stickAtPx: 0,
-  sections: []
-};
-
-var StyledTabs = _styledComponents["default"].div(_templateObject(), function (_ref2) {
-  var stickAtPx = _ref2.stickAtPx;
-  return stickAtPx && "\n    position: sticky;\n    top: ".concat(stickAtPx, "px;\n  ");
-});
-
-var _default = DxcTabsForSections;
-exports["default"] = _default;

package/dist/tabs-for-sections/readme.md

@@ -1,78 +0,0 @@
-# DXC Tabs Component
-
-## Tab Group Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>mode: 'filled' | 'underlined'</td>
-        <td><code>'filled'</code></td>
-        <td>Uses one of the available component modes.</td>
-    </tr>
-    <tr>
-        <td>theme: 'light' | 'dark'</td>
-        <td><code>'light'</code></td>
-        <td>Uses one of the available component themes.</td>
-    </tr>
-    <tr>
-        <td>showDotIndicator: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, a dot indicator will be shown in the active tab.</td>
-    </tr>
-    <tr>
-        <td>disableRipple: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the ripple effect will be disabled.</td>
-    </tr>
-    <tr>
-        <td>activeTabIndex: number</td>
-        <td><code>0</code></td>
-        <td>The index of the active tab.</td>
-    </tr>
-    <tr>
-        <td>activeTabIndexChange: function</td>
-        <td></td>
-        <td>This function will be called when the user clicks on a tab. The index of the clicked tab will be passed as a parameter.</td>
-    </tr>
-    <tr>
-        <td>stepper: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the component should be rendered as a Stepper component.</td>
-    </tr>
-    <tr>
-        <td>orientation: 'horizontal' | 'vertical'</td>
-        <td><code>'horizontal'</code></td>
-        <td>Only if stepper, this parameter shows the stepper orientation.</td>
-    </tr>
-
-</table>
-
-## Tab Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>label: string</td>
-        <td></td>
-        <td>Text to be placed within the tab.</td>
-    </tr>
-    <tr>
-        <td>iconSrc: string</td>
-        <td></td>
-        <td>The path of an icon to be placed within the tab.</td>
-    </tr>
-    <tr>
-        <td>disabled: boolean</td>
-        <td><code>false</code></td>
-        <td>Whether the tab is disabled.</td>
-    </tr>
-</table>
-

package/dist/textarea/Textarea.js

@@ -1,227 +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"));
-
-var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
-
-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      &.Mui-disabled {\n        opacity: ", ";\n        cursor: not-allowed;\n      }\n      padding-left: \"inherit\";\n      &.Mui-focused {\n        color: ", ";\n        &.MuiInputLabel-shrink {\n          transform: \"translate(0, 1.5px) scale(0.75);\";\n        }\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,\n        & + 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    .MuiInputBase-root.MuiInput-root.MuiInput-underline {\n      font-family: \"Open Sans\", sans-serif;\n      &::before {\n        border-bottom: ", ";\n      }\n      &:not(.Mui-error)::before,\n      &: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: ", ";\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    & > p {\n      &.Mui-error {\n        color: ", ";\n      }\n      &.Mui-disabled {\n        opacity: ", ";\n        cursor: not-allowed;\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$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 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 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.textarea
-  }, _react["default"].createElement(TextContainer, {
-    required: required,
-    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: required ? _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_RequiredComponent["default"], null), 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.theme.fontColor;
-}, function (props) {
-  return props.theme.disabled;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return props.theme.error;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return "1px solid ".concat(props.theme.fontColor);
-}, function (props) {
-  return "1px solid ".concat(props.theme.fontColor);
-}, function (props) {
-  return "2px solid ".concat(props.theme.fontColor);
-}, function (props) {
-  return props.theme.scrollBarTrackColor;
-}, function (props) {
-  return props.theme.scrollBarThumbColor;
-}, function (props) {
-  return props.theme.error;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return props.theme.error;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return props.theme.disabled;
-}, function (props) {
-  return "1px solid ".concat(props.theme.fontColor);
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return "".concat(props.theme.error, " !important");
-}, function (props) {
-  return props.theme.disabled;
-});
-
-DxcTextarea.propTypes = {
-  label: _propTypes["default"].string,
-  name: _propTypes["default"].string,
-  value: _propTypes["default"].string,
-  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;