@zohodesk/components 1.0.0-alpha-249 → 1.0.0-alpha-250

package/es/common/docStyle.module.css

@@ -1,11 +1,11 @@
 .cboth::after {
   content: '.';
-  clear: both;
   display: block;
   font-size: 0;
   height: 0;
   line-height: 0;
   visibility: hidden;
+  clear: both;
 }
 
 .m10 {
@@ -16,10 +16,14 @@
   margin: 50px;
 }
 
-.pl10 {
+[dir=ltr] .pl10 {
   padding-left: 10px;
 }
 
+[dir=rtl] .pl10 {
+  padding-right: 10px;
+}
+
 .p10 {
   padding: 10px;
 }
@@ -61,10 +65,14 @@
   margin-bottom: 20px;
 }
 
-.mr20 {
+[dir=ltr] .mr20 {
   margin-right: 20px;
 }
 
+[dir=rtl] .mr20 {
+  margin-left: 20px;
+}
+
 .w60 {
   width: 60%;
 }
@@ -90,22 +98,25 @@
 }
 
 .dark {
-  background-color: var(--dot_black);
   composes: p10;
+  background-color: var(--dot_black);
 }
 
 .table {
-  border: 1px solid var(--zd_smoke84);
-  border-radius: 3px;
   composes: p10;
   composes: cboth;
+  border: 1px solid var(--zd_smoke84);
+  border-radius: 3px;
 }
 
-.table .w60,
-.table .w40 {
+[dir=ltr] .table .w60, [dir=ltr] .table .w40 {
   float: left;
 }
 
+[dir=rtl] .table .w60, [dir=rtl] .table .w40 {
+  float: right;
+}
+
 .tableheading {
   composes: blue;
   background:var(--zd_smoke1);
@@ -117,10 +128,10 @@
   composes: p10;
   composes: m10;
   width: 200px;
-  border: 1px solid var(--zd_smoke83);
-  border-radius: 3px;
   composes: tcenter;
   font-weight: bold;
+  border: 1px solid var(--zd_smoke83);
+  border-radius: 3px;
 }
 
 .palette .palettecard {
@@ -136,10 +147,10 @@
 
 .fontlist {
   composes: tcenter;
-  border: 1px solid var(--zd_smoke83);
-  border-radius: 3px;
   composes: p10;
   composes: m10;
+  border: 1px solid var(--zd_smoke83);
+  border-radius: 3px;
 }
 
 .fontlist span {
@@ -148,9 +159,9 @@
 }
 
 .cover {
-  border: 1px solid var(--zd_smoke1);
   composes: p10;
   composes: m10;
+  border: 1px solid var(--zd_smoke1);
   border-radius: 5px;
 }
 
@@ -194,8 +205,7 @@
   background-color: #e2e4e6;
   padding: 5px;
 }
-.content,
-.trow {
+.content, .trow {
   padding: 5px;
 }
 .trow {
@@ -205,14 +215,19 @@
   background-color: #f6f6f6;
 }
 .colorvalue {
+  font-size: 13px;
+  color: #000;
   background-color: #e2e4e6;
   padding: 3px;
-  margin-right: 3px;
   border-radius: 5px;
-  font-size: 13px;
-  color: #000;
   cursor: pointer;
 }
+[dir=ltr] .colorvalue {
+  margin-right: 3px;
+}
+[dir=rtl] .colorvalue {
+  margin-left: 3px;
+}
 .rect {
   width: 40px;
   height: 40px;
@@ -228,24 +243,29 @@
   flex-direction: column;
   border: 1px dotted #ccc;
   padding: 4px 6px;
+}
+[dir=ltr] .nestedDiv {
   margin-right: 5px;
 }
+[dir=rtl] .nestedDiv {
+  margin-left: 5px;
+}
 .para {
   font-size: 13px;
   margin-bottom: 5px;
 }
 
 [data-mode='default'] {
-  background: #fff;
   color: #000;
+  background: #fff;
 }
 [data-mode='dark'] {
-  background: #232b38;
   color: #e2e4e6;
+  background: #232b38;
 }
 [data-mode='pureDark'] {
-  background: #212121;
   color: #e2e4e6;
+  background: #212121;
 }
 
 .baseHue {
@@ -259,8 +279,13 @@
   --avatar_bg_color: hsl(var(--hue), 100%, 90%);
   --avatar_border_color: hsl(var(--hue), 100%, 60%);
   --avatar_text_color: hsl(var(--hue), 100%, 40%);
+}
+[dir=ltr] .customAvatar {
   --avatar_border_radius: 0 12px/*rtl: 12px 0*/;
 }
+[dir=rtl] .customAvatar {
+  --avatar_border_radius: 12px 0;
+}
 .customAvatar:hover {
   --avatar_border_width: 2px;
   --avatar_bg_color: hsl(var(--hue), 100%, 85%);
@@ -395,10 +420,15 @@
 .customDropbox {
   composes: baseHue;
   --dropbox_bg_color: hsl(var(--hue), 100%, 98%);
-  --dropbox_border_radius: 30px 0/*rtl:0 30px*/;
   --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 90%);
   --dropbox_arrow_box_shadow_color: hsl(var(--hue), 100%, 90%);
 }
+[dir=ltr] .customDropbox {
+  --dropbox_border_radius: 30px 0/*rtl:0 30px*/;
+}
+[dir=rtl] .customDropbox {
+  --dropbox_border_radius: 0 30px;
+}
 .customDropbox:hover {
   --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 80%);
   --dropbox_arrow_box_shadow_color: hsl(var(--hue), 100%, 80%);
@@ -602,24 +632,39 @@
 }
 .flagRibbon {
   composes: ribbon;
+}
+[dir=ltr] .flagRibbon {
   --ribbon_padding: 10px 20px/*rtl: 10px 20px*/;
   --ribbon_flag_border_width: 20px 10px 20px 0/*rtl: 20px 0 20px 10px*/;
 }
+[dir=rtl] .flagRibbon {
+  --ribbon_padding: 10px 20px;
+  --ribbon_flag_border_width: 20px 0 20px 10px;
+}
 .tagRibbon {
   composes: ribbon;
-  border-width: 2px 2px 2px 0/*rtl: 2px 0 2px 2px*/;
-  border-color: hsl(var(--hue), 100%, 50%);
-  border-radius: 0 6px 6px 0/*rtl: 6px 0 0 6px*/;
-  margin-left: 30px;
-  padding: 18px 30px/*rtl: 18px 30px*/;
   height: 56px;
   --ribbon_tag_before_width: 40px;
   --ribbon_tag_before_height: 40px;
-  --ribbon_tag_before_border_width: 2px 0 0 2px/*rtl: 2px 2px 0 0*/;
   --ribbon_tag_before_border_color: hsl(var(--hue), 100%, 50%);
   --ribbon_tag_before_left: -20px;
   --ribbon_tag_before_top: 6px;
   --ribbon_tag_before_border_radius: 0;
+  border-color: hsl(var(--hue), 100%, 50%);
+}
+[dir=ltr] .tagRibbon {
+  border-width: 2px 2px 2px 0/*rtl: 2px 0 2px 2px*/;
+  border-radius: 0 6px 6px 0/*rtl: 6px 0 0 6px*/;
+  margin-left: 30px;
+  padding: 18px 30px/*rtl: 18px 30px*/;
+  --ribbon_tag_before_border_width: 2px 0 0 2px/*rtl: 2px 2px 0 0*/;
+}
+[dir=rtl] .tagRibbon {
+  border-width: 2px 0 2px 2px;
+  border-radius: 6px 0 0 6px;
+  margin-right: 30px;
+  padding: 18px 30px;
+  --ribbon_tag_before_border_width: 2px 2px 0 0;
 }
 .boxRibbon {
   composes: ribbon;
@@ -654,10 +699,10 @@
 /* custom textboxicon css */
 .customTboxwrap {
   composes: baseHue;
-  background-color: hsl(var(--hue), 100%, 90%);
-  margin: 5px 0;
   --textboxicon_icon_margin: 4px 10px;
   --textboxicon_icon_color: hsl(var(--hue), 100%, 50%);
+  background-color: hsl(var(--hue), 100%, 90%);
+  margin: 5px 0;
 }
 .customTbox {
   --textbox_text_color: hsl(var(--hue), 100%, 50%);
@@ -684,6 +729,8 @@
 .tBoxIconRead,
 .tBoxIconDisable {
   composes: baseHue;
+}
+.tBoxIconRead, .tBoxIconDisable {
   background-color: hsl(var(--hue), 100%, 90%);
   margin: 5px 0;
 }
@@ -697,11 +744,11 @@
 /* custom textarea css */
 .customTextarea {
   composes: baseHue;
-  background-color: hsl(var(--hue), 100%, 97%);
   --textarea_border_width: 1px;
   --textarea_border_color: hsl(var(--hue), 100%, 50%);
   --textarea_text_color: hsl(var(--hue), 100%, 50%);
   --textarea_padding: 2px 10px;
+  background-color: hsl(var(--hue), 100%, 97%);
 }
 .customTextarea:hover {
   --textarea_border_color: hsl(var(--hue), 100%, 40%);
@@ -711,9 +758,9 @@
 }
 .disabledTarea {
   composes: baseHue;
-  background-color: hsl(var(--hue), 100%, 97%);
   --textarea_border_width: 1px;
   --textarea_border_color: hsl(var(--hue), 100%, 80%);
   --textarea_text_color: hsl(var(--hue), 100%, 80%);
   --textarea_padding: 2px 10px;
+  background-color: hsl(var(--hue), 100%, 97%);
 }

package/es/common/transition.module.css

@@ -1,6 +1,7 @@
 .zoomInEnter,
 .zoomInLeave.zoomInLeaveActive {
   opacity: 0;
+}.zoomInEnter, .zoomInLeave.zoomInLeaveActive {
   transform: perspective(1px) scale(1.5) translateZ(0);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -8,6 +9,8 @@
 .zoomInEnter.zoomInEnterActive,
 .zoomInLeave {
   opacity: 1;
+}
+.zoomInEnter.zoomInEnterActive, .zoomInLeave {
   transform: perspective(1px) scale(1) translateZ(0);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -15,15 +18,20 @@
 
 .scaleInEnter,
 .scaleInLeave.scaleInLeaveActive {
-  transform: scale(0);
   opacity: 0;
+}
+
+.scaleInEnter, .scaleInLeave.scaleInLeaveActive {
+  transform: scale(0);
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
 .scaleInEnter.scaleInEnterActive,
 .scaleInLeave {
-  transform: scale(1);
   opacity: 1;
+}
+.scaleInEnter.scaleInEnterActive, .scaleInLeave {
+  transform: scale(1);
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -31,6 +39,9 @@
 .fadeInEnter,
 .fadeInLeave.fadeInLeaveActive {
   opacity: 0;
+}
+
+.fadeInEnter, .fadeInLeave.fadeInLeaveActive {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -38,6 +49,9 @@
 .fadeInEnter.fadeInEnterActive,
 .fadeInLeave {
   opacity: 1;
+}
+
+.fadeInEnter.fadeInEnterActive, .fadeInLeave {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -45,14 +59,27 @@
 .slideLeftEnter,
 .slideLeftLeave.slideLeftLeaveActive {
   opacity: 0;
-  transform: translateX(110%);
+}
+
+.slideLeftEnter, .slideLeftLeave.slideLeftLeaveActive {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
 
+[dir=ltr] .slideLeftEnter, [dir=ltr] .slideLeftLeave.slideLeftLeaveActive {
+  transform: translateX(110%);
+}
+
+[dir=rtl] .slideLeftEnter, [dir=rtl] .slideLeftLeave.slideLeftLeaveActive {
+  transform: translateX(-110%);
+}
+
 .slideLeftEnter.slideLeftEnterActive,
 .slideLeftLeave {
   opacity: 1;
+}
+
+.slideLeftEnter.slideLeftEnterActive, .slideLeftLeave {
   transform: translateX(0%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -61,6 +88,9 @@
 .slideDownEnter,
 .slideDownLeave.slideDownLeaveActive {
   opacity: 0;
+}
+
+.slideDownEnter, .slideDownLeave.slideDownLeaveActive {
   transform: translateY(-100%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -69,6 +99,9 @@
 .slideDownEnter.slideDownEnterActive,
 .slideDownLeave {
   opacity: 1;
+}
+
+.slideDownEnter.slideDownEnterActive, .slideDownLeave {
   transform: translateY(0%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -77,14 +110,27 @@
 .skewInEnter,
 .skewInLeave.skewInLeaveActive {
   opacity: 0;
-  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
+}
+
+.skewInEnter, .skewInLeave.skewInLeaveActive {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
 
+[dir=ltr] .skewInEnter, [dir=ltr] .skewInLeave.skewInLeaveActive {
+  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
+}
+
+[dir=rtl] .skewInEnter, [dir=rtl] .skewInLeave.skewInLeaveActive {
+  transform: translate(-100%, 100%) skew(-72deg) scale(0) perspective(221px);
+}
+
 .skewInEnter.skewInEnterActive,
 .skewInLeave {
   opacity: 1;
+}
+
+.skewInEnter.skewInEnterActive, .skewInLeave {
   transform: translate(0, 0) skew(0deg) scale(1) perspective(221px);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -98,9 +144,3 @@
 .defaultLeave {
   display: block;
 }
-
-.noneEnter,
-.noneEnter.noneEnterActive,
-.noneLeave,
-.noneLeave.noneLeaveActive {
-}

package/es/deprecated/AdvancedMultiSelect.module.css

@@ -1,8 +1,7 @@
 .wrapper {
   position: relative;
 }
-.disabled,
-.readOnly {
+.disabled, .readOnly {
   cursor: not-allowed;
 }
 .container {
@@ -10,9 +9,9 @@
   composes: oflowy from '../common/common.module.css';
 }
 .hasBorder {
+  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
-  transition: border var(--zd_transition2) linear 0s;
 }
 .borderColor_transparent {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
@@ -41,25 +40,40 @@
 .effect .borderColor_dark.active {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
 }
-.container.medium {
+[dir=ltr] .container.medium {
   padding: 0 var(--zd_size34) var(--zd_size7) 0;
 }
+[dir=rtl] .container.medium {
+  padding: 0 0 var(--zd_size7) var(--zd_size34);
+}
 .container.xmedium {
-  padding: 0 var(--zd_size34) var(--zd_size1) 0;
   min-height: var(--zd_size30);
 }
+[dir=ltr] .container.xmedium {
+  padding: 0 var(--zd_size34) var(--zd_size1) 0;
+}
+[dir=rtl] .container.xmedium {
+  padding: 0 0 var(--zd_size1) var(--zd_size34);
+}
 
 .delete {
   position: absolute;
   bottom: 0;
-  right: var(--zd_size15);
-  padding-bottom: var(--zd_size10);
   color: var(--zdt_advancedmultiselect_delete_text);
+  padding-bottom: var(--zd_size10);
   cursor: pointer;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }
 
+[dir=ltr] .delete {
+  right: var(--zd_size15);
+}
+
+[dir=rtl] .delete {
+  left: var(--zd_size15);
+}
+
 .delete:hover {
   color: var(--zdt_advancedmultiselect_delete_hover_text);
 }
@@ -105,9 +119,9 @@
 .more {
   font-size: var(--zd_font_size14);
   color: var(--zdt_advancedmultiselect_more_text);
+  font-family: inherit;
   cursor: pointer;
   margin-top: var(--zd_size5);
-  font-family: inherit;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }

package/es/index.js

@@ -150,4 +150,6 @@ export { default as Provider__Zindex_For_FunctionComponent } from './Provider/do
 export { default as SemanticButton } from './semantic/Button/Button';
 export { default as SemanticButton__default } from './semantic/Button/docs/Button__default.docs.js';
 export { default as LightNightMode__AlternativeColors } from './LightNightMode/docs/AlternativeColors.docs';
-export { default as ResponsiveDropBox } from './ResponsiveDropBox/ResponsiveDropBox';
+export { default as ResponsiveDropBox } from './ResponsiveDropBox/ResponsiveDropBox';
+export { default as Heading } from './Heading/Heading';
+export { default as Heading__default } from './Heading/docs/Heading__default.docs.js';

package/es/semantic/Button/semanticButton.module.css

@@ -1,9 +1,9 @@
 .buttonReset {
-  border: inherit;
   outline: 0;
-  background-color: inherit;
   font: inherit;
-  padding: 0;
   color: inherit;
+  border: inherit;
+  background-color: inherit;
+  padding: 0;
   text-align: inherit;
 }

package/lib/Accordion/Accordion.js

@@ -0,0 +1,131 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
+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); Object.defineProperty(Constructor, "prototype", { writable: false }); 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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : 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; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } 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.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var Accordion = /*#__PURE__*/function (_React$Component) {
+  _inherits(Accordion, _React$Component);
+
+  var _super = _createSuper(Accordion);
+
+  function Accordion(props) {
+    var _this;
+
+    _classCallCheck(this, Accordion);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      selectedItem: _this.props.selectedItem
+    };
+    _this.selectMenu = _this.selectMenu.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(Accordion, [{
+    key: "selectMenu",
+    value: function selectMenu(selectedItem) {
+      var _this$props = this.props,
+          onSelect = _this$props.onSelect,
+          disableInternalState = _this$props.disableInternalState;
+
+      if (onSelect) {
+        onSelect(selectedItem);
+      }
+
+      !disableInternalState && this.setState({
+        selectedItem: selectedItem
+      });
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.props.selectedItem !== nextProps.selectedItem && !this.props.disableInternalState) {
+        this.setState({
+          selectedItem: nextProps.selectedItem
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          className = _this$props2.className,
+          height = _this$props2.height,
+          unMount = _this$props2.unMount,
+          disableInternalState = _this$props2.disableInternalState,
+          propSelectedItem = _this$props2.selectedItem,
+          a11y = _this$props2.a11y;
+      var selectedItem = this.state.selectedItem;
+
+      var children = _react["default"].Children.map(this.props.children, function (child) {
+        if (child) {
+          return /*#__PURE__*/_react["default"].cloneElement(child, {
+            selectedItem: disableInternalState ? propSelectedItem : selectedItem,
+            selectMenu: _this2.selectMenu,
+            unMount: unMount
+          });
+        }
+      });
+
+      var role = a11y.role,
+          ariaExpanded = a11y.ariaExpanded,
+          ariaHaspopup = a11y.ariaHaspopup;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: className ? className : '',
+        style: {
+          height: height
+        },
+        role: role,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHaspopup
+      }, children);
+    }
+  }]);
+
+  return Accordion;
+}(_react["default"].Component);
+
+exports["default"] = Accordion;
+Accordion.propTypes = _propTypes.Accordion_propTypes;
+Accordion.defaultProps = _defaultProps.Accordion_defaultProps;
+
+if (false) {
+  Accordion.docs = {
+    componentGroup: 'Animation',
+    folderName: 'Style Guide'
+  };
+}