@dxc-technology/halstack-react 0.0.0-01f4ea1 → 0.0.0-03ecaeb

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/tag/Tag.js

@@ -1,288 +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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _variables = require("../common/variables.js");
-
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
-
-var _Box = _interopRequireDefault(require("../box/Box"));
-
-function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  color: ", ";\n  padding: 0px 30px;\n  letter-spacing: 0.025em;\n  flex-grow: 1;\n  text-align: center;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n"]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  background: ", ";\n  width: ", ";\n  justify-content: center;\n  align-items: center;\n  color: ", ";\n  height: ", ";\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: 43px;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  img,\n  svg {\n    height: ", ";\n    width: ", ";\n  }\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 10px 12px;\n  height: ", ";\n  width: ", ";\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  outline: 0;\n  font-family: inherit;\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  flex-direction: ", ";\n  width: ", ";\n  height: ", ";\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  cursor: ", ";\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 icon = _ref.icon,
-      iconSrc = _ref.iconSrc,
-      label = _ref.label,
-      margin = _ref.margin,
-      linkHref = _ref.linkHref,
-      onClick = _ref.onClick,
-      _ref$iconBgColor = _ref.iconBgColor,
-      iconBgColor = _ref$iconBgColor === void 0 ? "#5f249f" : _ref$iconBgColor,
-      _ref$labelPosition = _ref.labelPosition,
-      labelPosition = _ref$labelPosition === void 0 ? "after" : _ref$labelPosition,
-      _ref$newWindow = _ref.newWindow,
-      newWindow = _ref$newWindow === void 0 ? false : _ref$newWindow,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "fitContent" : _ref$size,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 1 : _ref$tabIndex;
-  var colorsTheme = (0, _useTheme["default"])();
-
-  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
-  }, icon ? _react["default"].createElement(TagIconContainer, null, (0, _typeof2["default"])(icon) === "object" ? icon : _react["default"].createElement(icon)) : _react["default"].createElement(TagIcon, {
-    src: iconSrc
-  })), size !== "small" && _react["default"].createElement(TagLabel, null, label)));
-
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.tag
-  }, _react["default"].createElement(StyledDxcTag, {
-    margin: margin,
-    onMouseEnter: function onMouseEnter() {
-      return changeIsHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return changeIsHovered(false);
-    },
-    onClick: clickHandler,
-    hasAction: onClick || linkHref
-  }, onClick ? _react["default"].createElement(StyledButton, {
-    tabIndex: tabIndex
-  }, tagContent) : linkHref ? _react["default"].createElement(StyledLink, {
-    tabIndex: tabIndex,
-    href: linkHref,
-    target: newWindow ? "_blank" : "_self"
-  }, 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);
-}, function (props) {
-  return props.theme.height;
-});
-
-var StyledLink = _styledComponents["default"].a(_templateObject3());
-
-var StyledButton = _styledComponents["default"].button(_templateObject4());
-
-var TagIcon = _styledComponents["default"].img(_templateObject5(), function (props) {
-  return props.theme.iconHeight;
-}, function (props) {
-  return props.theme.iconWidth;
-});
-
-var TagIconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
-  return props.theme.iconHeight;
-}, function (props) {
-  return props.theme.iconWidth;
-});
-
-var IconContainer = _styledComponents["default"].div(_templateObject7(), function (_ref9) {
-  var iconBgColor = _ref9.iconBgColor;
-  return iconBgColor;
-}, function (props) {
-  return props.theme.iconSectionWidth;
-}, function (props) {
-  return props.theme.iconColor;
-}, function (props) {
-  return props.theme.height;
-});
-
-var TagLabel = _styledComponents["default"].div(_templateObject8(), function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.theme.fontSize;
-}, function (props) {
-  return props.theme.fontStyle;
-}, function (props) {
-  return props.theme.fontWeight;
-}, function (props) {
-  return props.theme.fontTextTransform;
-}, function (props) {
-  return props.theme.fontColor;
-});
-
-DxcTag.propTypes = {
-  size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
-  icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
-  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,
-  newWindow: _propTypes["default"].bool,
-  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)))]),
-  tabIndex: _propTypes["default"].number
-};
-DxcTag.defaultProps = {
-  icon: null,
-  iconSrc: null,
-  label: null,
-  margin: null,
-  linkHref: null,
-  onClick: null,
-  iconBgColor: "#5f249f",
-  labelPosition: "after",
-  newWindow: false
-};
-var _default = DxcTag;
-exports["default"] = _default;