@zohodesk/components 1.0.0-alpha-198 → 1.0.0-alpha-199

package/lib/Button/Button.js

@@ -1,159 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _ButtonModule = _interopRequireDefault(require("./Button.module.css"));
-
-var _dummyFunction = require("../utils/dummyFunction");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-/*
-Button text and children props?
-use children for both cases
-toLowerCase check needed?
-*/
-
-/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small','medium','large','xlarge','button_medium','button_small','primary','primaryfilled','danger','dangerfilled','plainprimary', 'plainsecondary', 'secondary', 'secondaryfilled', 'successFilled','tertiaryFilled'] }] */
-var Button = /*#__PURE__*/function (_React$Component) {
-  _inherits(Button, _React$Component);
-
-  var _super = _createSuper(Button);
-
-  function Button() {
-    _classCallCheck(this, Button);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(Button, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          text = _this$props.text,
-          palette = _this$props.palette,
-          disabled = _this$props.disabled,
-          size = _this$props.size,
-          onClick = _this$props.onClick,
-          rounded = _this$props.rounded,
-          status = _this$props.status,
-          children = _this$props.children,
-          isBold = _this$props.isBold,
-          dataId = _this$props.dataId,
-          needAppearance = _this$props.needAppearance,
-          getRef = _this$props.getRef,
-          title = _this$props.title,
-          customClass = _this$props.customClass;
-      var _customClass$customBu = customClass.customButton,
-          customButton = _customClass$customBu === void 0 ? '' : _customClass$customBu,
-          _customClass$customSt = customClass.customStatus,
-          customStatus = _customClass$customSt === void 0 ? '' : _customClass$customSt,
-          _customClass$customSt2 = customClass.customStatusSize,
-          customStatusSize = _customClass$customSt2 === void 0 ? '' : _customClass$customSt2;
-      var paletteLower = palette.toLowerCase();
-      var statusLower = status.toLowerCase();
-      var classList = needAppearance ? "".concat(_ButtonModule["default"][paletteLower], " ").concat(rounded ? _ButtonModule["default"].rounded : '', " ").concat(!children ? _ButtonModule["default"][size.toLowerCase()] : "".concat(_ButtonModule["default"]["".concat(size, "Btn")], " \n             ").concat(rounded ? _ButtonModule["default"]["".concat(size, "Btn").concat(paletteLower)] : '')) : "".concat(_ButtonModule["default"]["default"]);
-      return /*#__PURE__*/_react["default"].createElement("button", {
-        className: "".concat(customButton, " ").concat(classList, " ").concat(isBold ? _ButtonModule["default"].bold : '', "  "),
-        "data-id": disabled ? "".concat(dataId, "_disabled") : dataId,
-        disabled: disabled || statusLower === 'loading',
-        onClick: onClick,
-        "data-title": title,
-        type: "button",
-        ref: getRef
-      }, children ? children : text, status !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
-        className: _ButtonModule["default"].overlay
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(customStatusSize, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loading, " ").concat(_ButtonModule["default"]["".concat(size, "loading")]) : _ButtonModule["default"].success)
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(customStatus, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loadingelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "element")]) : "".concat(_ButtonModule["default"].successelement, " ").concat(_ButtonModule["default"]["".concat(paletteLower, "success")]))
-      }))));
-    }
-  }]);
-
-  return Button;
-}(_react["default"].Component);
-
-exports["default"] = Button;
-Button.defaultProps = {
-  children: null,
-  dataId: 'buttonComp',
-  disabled: false,
-  isBold: true,
-  needAppearance: true,
-  onClick: _dummyFunction.dummyFunction,
-  palette: 'primary',
-  rounded: false,
-  size: 'medium',
-  status: 'none',
-  text: 'Button',
-  customClass: {}
-};
-Button.propTypes = {
-  children: _propTypes["default"].node,
-  className: _propTypes["default"].string,
-  dataId: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  getRef: _propTypes["default"].func,
-  isBold: _propTypes["default"].bool,
-  needAppearance: _propTypes["default"].bool,
-  onClick: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['plainPrimary', 'plainSecondary', 'primary', 'primaryFilled', 'danger', 'dangerFilled', 'secondary', 'secondaryFilled', 'successFilled', 'info', 'tertiaryFilled']),
-  rounded: _propTypes["default"].bool,
-  size: _propTypes["default"].oneOf(['small', 'medium', 'large', 'xlarge']),
-  status: _propTypes["default"].oneOf(['loading', 'success', 'none']),
-  text: _propTypes["default"].string,
-  title: _propTypes["default"].string,
-  customClass: _propTypes["default"].shape({
-    customButton: _propTypes["default"].string,
-    customStatus: _propTypes["default"].string,
-    customStatusSize: _propTypes["default"].string
-  })
-};
-Button.propTypesDescription = {
-  onClick: ' ',
-  text: ' ',
-  palette: ' ',
-  disabled: ' ',
-  size: ' ',
-  rounded: ' ',
-  status: ' ',
-  isBold: ' ',
-  children: ' '
-};
-
-if (false) {
-  Button.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}

package/lib/Button/Button.module.css

@@ -1,520 +0,0 @@
-.varClass {
-  /* button default variables */
-  --button_letter_spacing: 0.2px;
-  --button_cursor: pointer;
-  --button_font_size: var(--zd_font_size13);
-  --button_text_color: var(--zdt_button_default_text);
-  --button_font_family: var(--zd_regular);
-  --button_text_transform: capitalize;
-  --button_bg_color: var(--zdt_button_default_bg);
-  --button_border_radius: 4px;
-  --button_min_width: var(--zd_size90);
-  --button_height: auto;
-  --button_border_width: 0;
-  --button_border_style: solid;
-  --button_border_color: var(--zdt_button_default_border);
-  --button_padding: 0;
-  --button_opacity: none;
-  --button_box_shadow: none;
-
-  /* button loading status default variables */
-  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
-  --button_loading_border_radius: 50%;
-
-  /* button success status default variable */
-  --button_success_border_color: var(--zdt_button_success_default_border);
-}
-.default {
-  composes: varClass;
-  transition: all var(--zd_transition2) ease 0s;
-  letter-spacing: var(--button_letter_spacing);
-  opacity: var(--button_opacity);
-  border: 0;
-  cursor: var(--button_cursor);
-}
-
-.default:disabled {
-  pointer-events: none;
-  --button_cursor: not-allowed;
-  --button_opacity: 0.4;
-}
-
-.container {
-  composes: default;
-  composes: dotted from '../common/common.module.css';
-  position: relative;
-  font-size: var(--button_font_size);
-  color: var(--button_text_color);
-  font-family: var(--button_font_family);
-  text-transform: var(--button_text_transform);
-  min-width: var(--button_min_width);
-  height: var(--button_height);
-  background-color: var(--button_bg_color);
-  border-radius: var(--button_border_radius);
-  border-width: var(--button_border_width);
-  border-style: var(--button_border_style);
-  border-color: var(--button_border_color);
-  padding: var(--button_padding);
-  box-shadow: var(--button_box_shadow);
-}
-
-.bold {
-  --button_font_family: var(--zd_semibold);
-  composes: ftsmooth from '../common/common.module.css';
-}
-
-.rounded {
-  --button_border_radius: 50px;
-}
-
-.small {
-  --button_padding: var(--zd_size4) var(--zd_size7);
-  --button_min_width: var(--zd_size50);
-  --button_font_size: var(--zd_font_size10);
-}
-
-.medium {
-  --button_padding: var(--zd_size6) var(--zd_size15);
-}
-
-.large {
-  --button_padding: var(--zd_size9) var(--zd_size14);
-  --button_min_width: var(--zd_size80);
-  --button_font_size: var(--zd_font_size12);
-}
-
-.xlarge {
-  --button_padding: var(--zd_size12) var(--zd_size25);
-  --button_min_width: var(--zd_size90);
-  --button_font_size: var(--zd_font_size13);
-}
-
-.mediumBtn {
-  --button_height: var(--zd_size42);
-  --button_min_width: var(--zd_size42);
-  --button_font_size: var(--zd_font_size10);
-  text-align: center;
-}
-
-.smallBtn {
-  --button_height: var(--zd_size22);
-  --button_min_width: var(--zd_size22);
-  --button_font_size: var(--zd_font_size13);
-  text-align: center;
-}
-
-.smallBtnprimary,
-.smallBtnprimaryfilled,
-.mediumBtnprimary,
-.mediumBtnprimaryfilled {
-  --button_box_shadow: 0 3px 10px var(--zdt_button_primary_box_shadow);
-}
-
-.smallBtndanger,
-.smallBtndangerfilled,
-.mediumBtndanger,
-.mediumBtndangerfilled {
-  --button_box_shadow: 0 3px 10px var(--zdt_button_danger_box_shadow);
-}
-
-.small,
-.medium,
-.large,
-.xlarge,
-.smallBtn,
-.mediumBtn {
-  composes: container;
-}
-
-.plainprimary {
-  --button_text_color: var(--zdt_button_default_text);
-  --button_padding: var(--zd_size5);
-  --button_min_width: initial;
-  --button_bg_color: var(--zdt_button_default_bg);
-}
-.plainprimary:hover {
-  --button_text_color: var(--zdt_button_plainprimary_hover_text);
-}
-
-.plainsecondary {
-  --button_text_color: var(--zdt_button_secondary_text);
-  --button_padding: var(--zd_size5);
-  --button_min_width: initial;
-  --button_bg_color: var(--zdt_button_default_bg);
-}
-.plainsecondary:hover {
-  --button_text_color: var(--zdt_button_secondary_hover_text);
-}
-
-.primary,
-.primaryfilled,
-.danger,
-.dangerfilled,
-.secondary,
-.secondaryfilled,
-.successfilled,
-.tertiaryfilled {
-  --button_border_width: 1px;
-}
-.primary:hover {
-  --button_border_color: var(--zdt_button_primary_hover_border);
-  --button_text_color: var(--zdt_button_primary_hover_text);
-}
-
-.primaryfilled {
-  --button_border_color: var(--zdt_button_primaryfill_border);
-  --button_bg_color: var(--zdt_button_primaryfill_bg);
-  --button_text_color: var(--zdt_button_primaryfill_text);
-}
-.primaryfilled:hover {
-  --button_bg_color: var(--zdt_button_primaryfill_hover_bg);
-}
-
-.danger {
-  --button_border_color: var(--zdt_button_danger_border);
-  --button_bg_color: var(--zdt_button_default_bg);
-  --button_text_color: var(--zdt_button_danger_text);
-}
-.danger:hover {
-  --button_border_color: var(--zdt_button_danger_hover_border);
-  --button_text_color: var(--zdt_button_danger_hover_text);
-}
-
-.dangerfilled {
-  --button_border_color: var(--zdt_button_primaryfill_border);
-  --button_bg_color: var(--zdt_button_dangerfill_bg);
-  --button_text_color: var(--zdt_button_dangerfill_text);
-}
-.dangerfilled:hover {
-  --button_bg_color: var(--zdt_button_dangerfill_hover_bg);
-}
-
-.secondary {
-  --button_border_color: var(--zdt_button_secondary_border);
-  --button_bg_color: var(--zdt_button_default_bg);
-  --button_text_color: var(--zdt_button_secondary_text);
-}
-.secondary:hover {
-  --button_border_color: var(--zdt_button_secondary_hover_border);
-  --button_text_color: var(--zdt_button_secondary_hover_text);
-}
-
-.secondaryfilled {
-  --button_border_color: var(--zdt_button_primaryfill_border);
-  --button_bg_color: var(--zdt_button_secondaryfill_bg);
-  --button_text_color: var(--zdt_button_secondary_text);
-}
-.secondaryfilled:hover {
-  --button_text_color: var(--zdt_button_secondary_hover_text);
-}
-
-.successfilled {
-  --button_border_color: var(--zdt_button_successfill_border);
-  --button_bg_color: var(--zdt_button_successfill_bg);
-  --button_text_color: var(--zdt_button_dangerfill_text);
-}
-.successfilled:hover {
-  --button_border_color: var(--zdt_button_successfill_hover_border);
-  --button_bg_color: var(--zdt_button_successfill_hover_bg);
-}
-
-.tertiaryfilled {
-  --button_border_color: var(--zdt_button_primaryfill_border);
-  --button_bg_color: var(--zdt_button_tertiaryfill_bg);
-  --button_text_color: var(--zdt_button_dangerfill_text);
-}
-.tertiaryfilled:hover {
-  --button_bg_color: var(--zdt_button_tertiaryfill_hover_bg);
-}
-
-.overlay {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  background: inherit;
-  border-radius: inherit;
-}
-
-[dir=ltr] .overlay {
-  left: 0;
-  right: 0;
-}
-
-[dir=rtl] .overlay {
-  right: 0;
-  left: 0;
-}
-
-.loading {
-  position: absolute;
-  top: 50%;
-  width: var(--zd_size20);
-  height: var(--zd_size20);
-}
-
-[dir=ltr] .loading {
-  left: 50%;
-  transform: translate(-50%, -50%);
-  -moz-transform: translate(-50%, -50%);
-  -webkit-transform: translate(-50%, -50%);
-}
-
-[dir=rtl] .loading {
-  right: 50%;
-  transform: translate(50%, -50%);
-  -moz-transform: translate(50%, -50%);
-  -webkit-transform: translate(50%, -50%);
-}
-
-.loadingelement {
-  height: inherit;
-  width: inherit;
-  position: relative;
-  display: inline-block;
-  border-radius: 50%;
-  transform-origin: 50%;
-}
-
-[dir=ltr] .loadingelement {
-  animation:  crlrotate-ltr 0.8s linear infinite;
-  -moz-animation:  crlrotate-ltr 0.8s linear infinite;
-  -webkit-animation:  crlrotate-ltr 0.8s linear infinite;
-}
-
-[dir=rtl] .loadingelement {
-  animation:  crlrotate-rtl 0.8s linear infinite;
-  -moz-animation:  crlrotate-rtl 0.8s linear infinite;
-  -webkit-animation:  crlrotate-rtl 0.8s linear infinite;
-}
-
-.loadingelement:before,
-.loadingelement:after {
-  content: '';
-  position: absolute;
-}
-
-.loadingelement:before, .loadingelement:after {
-  background-color: var(--button_loading_bg_color);
-  border-radius: var(--button_loading_border_radius);
-}
-
-.smallloading,
-.mediumloading {
-  height: var(--zd_size10);
-  width: var(--zd_size10);
-}
-
-.loadingelement:after {
-  top: var(--zd_size1);
-  bottom: var(--zd_size1);
-}
-
-[dir=ltr] .loadingelement:after {
-  left: var(--zd_size1);
-  right: var(--zd_size1);
-}
-
-[dir=rtl] .loadingelement:after {
-  right: var(--zd_size1);
-  left: var(--zd_size1);
-}
-
-.loadingelement {
-  --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
-}
-.primaryelement {
-  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
-}
-.primaryfilledelement {
-  --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
-}
-.dangerelement {
-  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
-}
-.dangerfilledelement {
-  --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
-}
-.loadingelement:after,
-.primaryelement:after,
-.primaryfilledelement:after,
-.dangerelement:after,
-.dangerfilledelement:after {
-  --button_loading_bg_color: inherit;
-}
-
-.loadingelement:before {
-  top: calc(var(--zd_size1) * -1);
-  bottom: calc(var(--zd_size1) * -1);
-  background: var(--zdt_button_loading_linear_gradient);
-  background-repeat: no-repeat;
-  background-size: 50% 50%;
-}
-
-[dir=ltr] .loadingelement:before {
-  left: calc(var(--zd_size1) * -1);
-  right: calc(var(--zd_size1) * -1);
-}
-
-[dir=rtl] .loadingelement:before {
-  right: calc(var(--zd_size1) * -1);
-  left: calc(var(--zd_size1) * -1);
-}
-
-.primaryelement:before {
-  --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
-  transform: rotateX(180deg);
-}
-
-.dangerelement:before {
-  --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
-  transform: rotateX(180deg);
-}
-
-.primarysuccess {
-  --button_success_border_color: var(--zdt_button_default_border);
-}
-.primaryfilled .successelement {
-  --button_success_border_color: var(--zdt_button_tick_primary_border);
-}
-
-.dangersuccess {
-  --button_success_border_color: var(--zdt_button_danger_border);
-}
-
-@keyframes crlrotate-ltr {
-  0% {
-    transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    transform: scaleX(-1) rotate(-360deg);
-  }
-}
-
-@keyframes crlrotate-rtl {
-  0% {
-    transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    transform: scaleX(-1) rotate(360deg);
-  }
-}
-
-@-moz-keyframes crlrotate-ltr {
-  0% {
-    -moz-transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: scaleX(-1) rotate(-360deg);
-  }
-}
-
-@-moz-keyframes crlrotate-rtl {
-  0% {
-    -moz-transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: scaleX(-1) rotate(360deg);
-  }
-}
-
-@-webkit-keyframes crlrotate-ltr {
-  0% {
-    -webkit-transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: scaleX(-1) rotate(-360deg);
-  }
-}
-
-@-webkit-keyframes crlrotate-rtl {
-  0% {
-    -webkit-transform: scaleX(-1) rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: scaleX(-1) rotate(360deg);
-  }
-}
-.success {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  -moz-transform: translate(-50%, -50%);
-  -webkit-transform: translate(-50%, -50%);
-  z-index: 3;
-}
-
-.successelement {
-  height: var(--zd_size15);
-  position: relative;
-  top: calc(var(--zd_size2) * -1);
-  width: var(--zd_size6);
-  transform: scaleX(-1) rotate(135deg);
-  -ms-transform: scaleX(-1) rotate(135deg);
-  -moz-transform: scaleX(-1) rotate(135deg);
-  -webkit-transform: scaleX(-1) rotate(135deg);
-  transform-origin: center;
-  border-width: 2px 2px 0 0;
-  border-style: solid;
-  border-color: var(--button_success_border_color);
-  animation: tick 0.3s ease 0s forwards;
-  -moz-animation: tick 0.3s ease 0s forwards;
-  -webkit-animation: tick 0.3s ease 0s forwards;
-}
-
-@keyframes tick {
-  0% {
-    height: 0;
-    width: 0;
-  }
-
-  50% {
-    height: 0;
-    width: var(--zd_size6);
-  }
-
-  100% {
-    height: var(--zd_size15);
-    width: var(--zd_size6);
-  }
-}
-
-@-moz-keyframes tick {
-  0% {
-    height: 0;
-    width: 0;
-  }
-
-  50% {
-    height: 0;
-    width: var(--zd_size6);
-  }
-
-  100% {
-    height: var(--zd_size15);
-    width: var(--zd_size6);
-  }
-}
-
-@-webkit-keyframes tick {
-  0% {
-    height: 0;
-    width: 0;
-  }
-
-  50% {
-    height: 0;
-    width: var(--zd_size6);
-  }
-
-  100% {
-    height: var(--zd_size15);
-    width: var(--zd_size6);
-  }
-}