@zohodesk/components 1.4.11 → 1.4.13

package/lib/Button/css/Button.module.css

@@ -1,613 +0,0 @@
-.varClass {
-  /* button default variables */
-  /*  Variable:Ignore  */
-  --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);
-}
-
-.native {
-  composes: varClass;
-  /* transition: all var(--zd_transition2) ease 0s; */
-  letter-spacing: var(--button_letter_spacing);
-  opacity: var(--button_opacity);
-  transition-property: background-color, color, border;
-  transition-duration: var(--zd_transition2);
-  transition-timing-function: ease;
-  border: 0;
-  cursor: var(--button_cursor);
-}
-
-.native:disabled {
-  --button_cursor: not-allowed;
-  --button_opacity: 0.4;
-}
-
-.container {
-  composes: native;
-  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: var(--zd_bs_button_primary);
-}
-
-.smallBtndanger,
-.smallBtndangerfilled,
-.mediumBtndanger,
-.mediumBtndangerfilled {
-  --button_box_shadow: var(--zd_bs_button_danger);
-}
-
-.small,
-.medium,
-.large,
-.xlarge,
-.smallBtn,
-.mediumBtn {
-  composes: container;
-}
-
-.plainprimary,
-.plaindanger,
-.plainsuccess,
-.plainsecondary {
-  --button_padding: var(--zd_size5);
-  --button_min_width: initial;
-  --button_bg_color: var(--zdt_button_default_bg);
-}
-
-.plainprimary {
-  --button_text_color: var(--zdt_button_default_text);
-}
-
-.plainprimary:not(:disabled):hover {
-  --button_text_color: var(--zdt_button_plainprimary_hover_text);
-}
-
-.plaindanger {
-  --button_text_color: var(--zdt_button_danger_text);
-}
-
-.plaindanger:not(:disabled):hover {
-  --button_text_color: var(--zdt_button_danger_hover_text);
-}
-
-.plainsuccess {
-  --button_text_color: var(--zdt_button_success_text);
-}
-
-.plainsuccess:not(:disabled):hover {
-  --button_text_color: var(--zdt_button_success_hover_text);
-}
-
-.plainsecondary {
-  --button_text_color: var(--zdt_button_secondary_text);
-}
-
-.plainsecondary:not(:disabled):hover {
-  --button_text_color: var(--zdt_button_secondary_hover_text);
-}
-
-.primary,
-.primaryfilled,
-.danger,
-.dangerfilled,
-.secondary,
-.secondaryfilled,
-.success,
-.successfilled,
-.tertiaryfilled {
-  --button_border_width: 1px;
-}
-
-.primary:not(:disabled):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:not(:disabled):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:not(:disabled):hover {
-  --button_border_color: var(--zdt_button_danger_hover_border);
-  --button_text_color: var(--zdt_button_danger_hover_text);
-}
-
-.success {
-  --button_border_color: var(--zdt_button_success_border);
-  --button_bg_color: var(--zdt_button_default_bg);
-  --button_text_color: var(--zdt_button_success_text);
-}
-
-.success:not(:disabled):hover {
-  --button_border_color: var(--zdt_button_success_hover_border);
-  --button_text_color: var(--zdt_button_success_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:not(:disabled):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:not(:disabled):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:not(:disabled):hover {
-  --button_text_color: var(--zdt_button_secondary_hover_text);
-}
-
-.successfilled {
-  --button_border_color: var(--zdt_button_primaryfill_border);
-  --button_bg_color: var(--zdt_button_successfill_bg);
-  --button_text_color: var(--zdt_button_dangerfill_text);
-}
-
-.successfilled:not(:disabled):hover {
-  --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:not(:disabled):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 var(--zd_no_transition8) linear infinite;
-  -moz-animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
-  -webkit-animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
-}
-
-[dir=rtl] .loadingelement {
-  animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
-  -moz-animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
-  -webkit-animation:  crlrotate-rtl var(--zd_no_transition8) 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);
-  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_primary_linear_gradient);
-  transform: rotateX(180deg);
-}
-
-.dangerelement:before {
-  --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
-  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_danger_linear_gradient);
-  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);
-  }
-}
-.successstate {
-  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);
-  -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 var(--zd_no_transition3) 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) ;
-  }
-}
-
-.loader {
-  color: var(--dot_mirror)
-}
-
-[dir=ltr] .strike {
-  background-image: repeating-linear-gradient(120deg, var(--button_strike_color) 0 1px, transparent 1px 8px);
-}
-
-[dir=rtl] .strike {
-  background-image: repeating-linear-gradient(-120deg, var(--button_strike_color) 0 1px, transparent 1px 8px);
-}
-.primaryStrike {
-  --button_strike_color: var(--zdt_button_primary_strike);
-}
-.primaryfilledStrike {
-  --button_strike_color: var(--zdt_button_primaryFilled_strike);
-  --button_border_color: var(--zdt_button_primaryfill_bg);
-}
-.dangerStrike {
-  --button_strike_color: var(--zdt_button_danger_strike);
-}
-.dangerfilledStrike {
-  --button_strike_color: var(--zdt_button_dangerFilled_strike);
-  --button_border_color: var(--zdt_button_dangerfill_bg);
-}
-.secondaryStrike {
-  --button_strike_color: var(--zdt_button_secondary_border);
-}
-.secondaryfilledStrike {
-  --button_strike_color: var(--zdt_button_secondaryFilled_strike);
-  --button_border_color: var(--zdt_button_secondaryfill_bg);
-}
-.tertiaryfilledStrike {
-  --button_strike_color: var(--zdt_button_tertiaryFilled_strike);
-  --button_border_color: var(--zdt_button_tertiaryfill_bg);
-}
-.successStrike {
-  --button_strike_color: var(--zdt_button_success_strike);
-}
-.successfilledStrike {
-  --button_strike_color: var(--zdt_button_successFilled_strike);
-  --button_border_color: var(--zdt_button_successfill_bg);
-}

package/lib/Button/css/cssJSLogic.js

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = cssJSLogic;
-
-var _utils = require("@zohodesk/utils");
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function cssJSLogic(_ref) {
-  var _compileClassNames, _compileClassNames2, _compileClassNames3;
-
-  var props = _ref.props,
-      style = _ref.style;
-  var customClass = props.customClass,
-      needAppearance = props.needAppearance,
-      isBold = props.isBold,
-      rounded = props.rounded,
-      size = props.size,
-      children = props.children,
-      palette = props.palette,
-      status = props.status,
-      disabled = props.disabled,
-      shouldStrikeThroughDisabled = props.shouldStrikeThroughDisabled;
-  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 strikeExcludedPalettes = ['plainprimary', 'plainsecondary', 'plainDanger', 'plainSuccess'];
-  var paletteLower = palette.toLowerCase();
-  var statusLower = status.toLowerCase();
-  var canStrikeThrough = !strikeExcludedPalettes.includes(paletteLower);
-  var buttonClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, customButton, !!customButton), _defineProperty(_compileClassNames, style.bold, isBold), _defineProperty(_compileClassNames, style["default"], !needAppearance), _defineProperty(_compileClassNames, style[paletteLower], needAppearance), _defineProperty(_compileClassNames, style.rounded, needAppearance && rounded), _defineProperty(_compileClassNames, style[size.toLowerCase()], needAppearance && !children), _defineProperty(_compileClassNames, style["".concat(size, "Btn")], needAppearance && children), _defineProperty(_compileClassNames, style["".concat(size, "Btn").concat(paletteLower)], needAppearance && children && rounded), _defineProperty(_compileClassNames, "".concat(style["".concat(paletteLower, "Strike")], " ").concat(style.strike), disabled && canStrikeThrough && shouldStrikeThroughDisabled), _defineProperty(_compileClassNames, style.loader, !!needAppearance && statusLower !== 'none'), _compileClassNames));
-  var loaderParentClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, customStatusSize, !!customStatusSize), _defineProperty(_compileClassNames2, style.loading, statusLower === 'loading'), _defineProperty(_compileClassNames2, style["".concat(size, "loading")], statusLower === 'loading'), _defineProperty(_compileClassNames2, style.successstate, statusLower != 'loading'), _compileClassNames2));
-  var loaderChildClass = (0, _utils.compileClassNames)((_compileClassNames3 = {}, _defineProperty(_compileClassNames3, customStatus, !!customStatus), _defineProperty(_compileClassNames3, style.loadingelement, statusLower === 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "element")], statusLower === 'loading'), _defineProperty(_compileClassNames3, style.successelement, statusLower != 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "success")], statusLower != 'loading'), _compileClassNames3));
-  return {
-    buttonClass: buttonClass,
-    loaderParentClass: loaderParentClass,
-    loaderChildClass: loaderChildClass
-  };
-}

package/lib/Button/index.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Button", {
-  enumerable: true,
-  get: function get() {
-    return _Button["default"];
-  }
-});
-Object.defineProperty(exports, "ButtonPropTypes", {
-  enumerable: true,
-  get: function get() {
-    return _propTypes["default"];
-  }
-});
-
-var _Button = _interopRequireDefault(require("./Button"));
-
-var _propTypes = _interopRequireDefault(require("./props/propTypes"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/Button/props/defaultProps.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.defaultProps = void 0;
-
-var _dummyFunction = require("../../utils/dummyFunction");
-
-var defaultProps = {
-  children: null,
-  dataId: 'buttonComp',
-  dataSelectorId: 'button',
-  disabled: false,
-  isBold: true,
-  needAppearance: true,
-  onClick: _dummyFunction.dummyFunction,
-  palette: 'primary',
-  rounded: false,
-  size: 'medium',
-  status: 'none',
-  text: 'Button',
-  customClass: {},
-  customProps: {},
-  a11y: {}
-};
-exports.defaultProps = defaultProps;