@zohodesk/components 1.4.2 → 1.4.4

package/es/v1/Button/props/propTypes.js

@@ -22,6 +22,7 @@ export const propTypes = {
   customStyle: PropTypes.object,
   customProps: PropTypes.object,
   id: PropTypes.string,
-  a11y: PropTypes.object
+  a11y: PropTypes.object,
+  shouldStrikeThroughDisabled: PropTypes.bool
 };
 export default propTypes;

package/lib/Button/Button.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = Button;
+exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -15,6 +15,8 @@ var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
 var _utils = require("@zohodesk/utils");
 
+var _ComponentRegistry = require("@zohodesk/dotkit/es/react/ComponentRegistry");
+
 var _ButtonModule = _interopRequireDefault(require("./css/Button.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -26,8 +28,6 @@ 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'] }] */
 function Button(props) {
   var text = props.text,
       disabled = props.disabled,
@@ -76,9 +76,16 @@ function Button(props) {
 }
 
 Button.defaultProps = _defaultProps.defaultProps;
-Button.propTypes = _propTypes.propTypes; // if (__DOCS__) {
+Button.propTypes = _propTypes.propTypes;
+
+var _default = (0, _ComponentRegistry.withComponentRegistrar)(Button, {
+  name: 'ZDC_Button'
+}); // if (__DOCS__) {
 //   Button.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
-// }
+// }
+
+
+exports["default"] = _default;

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

@@ -39,7 +39,6 @@
 }
 
 .native:disabled {
-  pointer-events: none;
   --button_cursor: not-allowed;
   --button_opacity: 0.4;
 }
@@ -144,7 +143,7 @@
   --button_text_color: var(--zdt_button_default_text);
 }
 
-.plainprimary:hover {
+.plainprimary:not(:disabled):hover {
   --button_text_color: var(--zdt_button_plainprimary_hover_text);
 }
 
@@ -152,7 +151,7 @@
   --button_text_color: var(--zdt_button_danger_text);
 }
 
-.plaindanger:hover {
+.plaindanger:not(:disabled):hover {
   --button_text_color: var(--zdt_button_danger_hover_text);
 }
 
@@ -160,7 +159,7 @@
   --button_text_color: var(--zdt_button_success_text);
 }
 
-.plainsuccess:hover {
+.plainsuccess:not(:disabled):hover {
   --button_text_color: var(--zdt_button_success_hover_text);
 }
 
@@ -168,7 +167,7 @@
   --button_text_color: var(--zdt_button_secondary_text);
 }
 
-.plainsecondary:hover {
+.plainsecondary:not(:disabled):hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
 
@@ -184,7 +183,7 @@
   --button_border_width: 1px;
 }
 
-.primary:hover {
+.primary:not(:disabled):hover {
   --button_border_color: var(--zdt_button_primary_hover_border);
   --button_text_color: var(--zdt_button_primary_hover_text);
 }
@@ -195,7 +194,7 @@
   --button_text_color: var(--zdt_button_primaryfill_text);
 }
 
-.primaryfilled:hover {
+.primaryfilled:not(:disabled):hover {
   --button_bg_color: var(--zdt_button_primaryfill_hover_bg);
 }
 
@@ -205,7 +204,7 @@
   --button_text_color: var(--zdt_button_danger_text);
 }
 
-.danger:hover {
+.danger:not(:disabled):hover {
   --button_border_color: var(--zdt_button_danger_hover_border);
   --button_text_color: var(--zdt_button_danger_hover_text);
 }
@@ -216,7 +215,7 @@
   --button_text_color: var(--zdt_button_success_text);
 }
 
-.success:hover {
+.success:not(:disabled):hover {
   --button_border_color: var(--zdt_button_success_hover_border);
   --button_text_color: var(--zdt_button_success_hover_text);
 }
@@ -227,7 +226,7 @@
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
 
-.dangerfilled:hover {
+.dangerfilled:not(:disabled):hover {
   --button_bg_color: var(--zdt_button_dangerfill_hover_bg);
 }
 
@@ -237,7 +236,7 @@
   --button_text_color: var(--zdt_button_secondary_text);
 }
 
-.secondary:hover {
+.secondary:not(:disabled):hover {
   --button_border_color: var(--zdt_button_secondary_hover_border);
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -248,18 +247,17 @@
   --button_text_color: var(--zdt_button_secondary_text);
 }
 
-.secondaryfilled:hover {
+.secondaryfilled:not(:disabled):hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
 
 .successfilled {
-  --button_border_color: var(--zdt_button_successfill_border);
+  --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:hover {
-  --button_border_color: var(--zdt_button_successfill_hover_border);
+.successfilled:not(:disabled):hover {
   --button_bg_color: var(--zdt_button_successfill_hover_bg);
 }
 
@@ -269,7 +267,7 @@
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
 
-.tertiaryfilled:hover {
+.tertiaryfilled:not(:disabled):hover {
   --button_bg_color: var(--zdt_button_tertiaryfill_hover_bg);
 }
 
@@ -572,4 +570,44 @@
 
 .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

@@ -21,16 +21,20 @@ function cssJSLogic(_ref) {
       size = props.size,
       children = props.children,
       palette = props.palette,
-      status = props.status;
+      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 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, style.loader, !!needAppearance && statusLower !== 'none'), _compileClassNames));
+  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 {

package/lib/Button/props/propTypes.js

@@ -24,6 +24,7 @@ var propTypes = {
   status: _propTypes["default"].oneOf(['loading', 'success', 'none']),
   text: _propTypes["default"].string,
   title: _propTypes["default"].string,
+  shouldStrikeThroughDisabled: _propTypes["default"].bool,
   customClass: _propTypes["default"].shape({
     customButton: _propTypes["default"].string,
     customStatus: _propTypes["default"].string,

package/lib/ListItem/ListItem.js

@@ -122,7 +122,8 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props4.a11y,
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
-          needMultiLineText = _this$props4.needMultiLineText;
+          needMultiLineText = _this$props4.needMultiLineText,
+          secondaryValue = _this$props4.secondaryValue;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -162,7 +163,12 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         onMouseEnter: this.handleMouseEnter,
         eleRef: this.getRef,
         customProps: ListItemProps
-      }, ContainerProps), value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true,
+        className: _ListItemModule["default"].leftBox
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].titleBox
+      }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
@@ -170,7 +176,10 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         shrink: true,
         adjust: true,
         className: _ListItemModule["default"].children
-      }, children) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, children) : null), secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        "data-title": isDisabled ? null : secondaryValue,
+        className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : _ListItemModule["default"].secondaryValue)
+      }, secondaryValue) : null), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon),
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),

package/lib/ListItem/ListItem.module.css

@@ -250,3 +250,12 @@
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }
+
+
+.leftBox {
+  composes: dflex flexcolumn from '../common/common.module.css';
+}
+
+.titleBox {
+  composes: dflex alignVertical from '../common/common.module.css';
+}

package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap

@@ -10,6 +10,20 @@ exports[`ListItem rendering the defult props 1`] = `
     data-test-id="listItem"
     role="option"
     tabindex="0"
-  />
+  >
+    <div
+      class="leftBox grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      />
+    </div>
+  </li>
 </DocumentFragment>
 `;

package/lib/ListItem/props/propTypes.js

@@ -81,7 +81,8 @@ var ListItem_Props = {
   }),
   customProps: _propTypes["default"].shape({
     ListItemProps: _propTypes["default"].object
-  })
+  }),
+  secondaryValue: _propTypes["default"].string
 };
 exports.ListItem_Props = ListItem_Props;
 var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {

package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap

@@ -215,12 +215,26 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                       tabindex="0"
                     >
                       <div
-                        class="value basisAuto shrinkOn"
+                        class="leftBox grow basis shrinkOff"
                         data-id="boxComponent"
                         data-selector-id="box"
                         data-test-id="boxComponent"
                       >
-                        Apple
+                        <div
+                          class="titleBox shrinkOff"
+                          data-id="boxComponent"
+                          data-selector-id="box"
+                          data-test-id="boxComponent"
+                        >
+                          <div
+                            class="value basisAuto shrinkOn"
+                            data-id="boxComponent"
+                            data-selector-id="box"
+                            data-test-id="boxComponent"
+                          >
+                            Apple
+                          </div>
+                        </div>
                       </div>
                     </li>
                     <li
@@ -237,12 +251,26 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                       tabindex="0"
                     >
                       <div
-                        class="value basisAuto shrinkOn"
+                        class="leftBox grow basis shrinkOff"
                         data-id="boxComponent"
                         data-selector-id="box"
                         data-test-id="boxComponent"
                       >
-                        Orange
+                        <div
+                          class="titleBox shrinkOff"
+                          data-id="boxComponent"
+                          data-selector-id="box"
+                          data-test-id="boxComponent"
+                        >
+                          <div
+                            class="value basisAuto shrinkOn"
+                            data-id="boxComponent"
+                            data-selector-id="box"
+                            data-test-id="boxComponent"
+                          >
+                            Orange
+                          </div>
+                        </div>
                       </div>
                     </li>
                     <li
@@ -259,12 +287,26 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                       tabindex="0"
                     >
                       <div
-                        class="value basisAuto shrinkOn"
+                        class="leftBox grow basis shrinkOff"
                         data-id="boxComponent"
                         data-selector-id="box"
                         data-test-id="boxComponent"
                       >
-                        string test
+                        <div
+                          class="titleBox shrinkOff"
+                          data-id="boxComponent"
+                          data-selector-id="box"
+                          data-test-id="boxComponent"
+                        >
+                          <div
+                            class="value basisAuto shrinkOn"
+                            data-id="boxComponent"
+                            data-selector-id="box"
+                            data-test-id="boxComponent"
+                          >
+                            string test
+                          </div>
+                        </div>
                       </div>
                     </li>
                   </div>
@@ -421,12 +463,26 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                       tabindex="0"
                     >
                       <div
-                        class="value basisAuto shrinkOn"
+                        class="leftBox grow basis shrinkOff"
                         data-id="boxComponent"
                         data-selector-id="box"
                         data-test-id="boxComponent"
                       >
-                        Apple
+                        <div
+                          class="titleBox shrinkOff"
+                          data-id="boxComponent"
+                          data-selector-id="box"
+                          data-test-id="boxComponent"
+                        >
+                          <div
+                            class="value basisAuto shrinkOn"
+                            data-id="boxComponent"
+                            data-selector-id="box"
+                            data-test-id="boxComponent"
+                          >
+                            Apple
+                          </div>
+                        </div>
                       </div>
                     </li>
                     <li
@@ -443,12 +499,26 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                       tabindex="0"
                     >
                       <div
-                        class="value basisAuto shrinkOn"
+                        class="leftBox grow basis shrinkOff"
                         data-id="boxComponent"
                         data-selector-id="box"
                         data-test-id="boxComponent"
                       >
-                        Orange
+                        <div
+                          class="titleBox shrinkOff"
+                          data-id="boxComponent"
+                          data-selector-id="box"
+                          data-test-id="boxComponent"
+                        >
+                          <div
+                            class="value basisAuto shrinkOn"
+                            data-id="boxComponent"
+                            data-selector-id="box"
+                            data-test-id="boxComponent"
+                          >
+                            Orange
+                          </div>
+                        </div>
                       </div>
                     </li>
                   </div>

package/lib/Provider/LibraryContext.js

@@ -45,6 +45,7 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
       coloredTagVariant = _ref.coloredTagVariant,
       hasTagColorInheritedToText = _ref.hasTagColorInheritedToText,
       shouldIndicateSwitchState = _ref.shouldIndicateSwitchState,
+      shouldStrikeThroughDisabledButton = _ref.shouldStrikeThroughDisabledButton,
       children = _ref.children;
 
   var _useState = (0, _react.useState)({
@@ -52,7 +53,8 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
     direction: direction,
     coloredTagVariant: coloredTagVariant,
     hasTagColorInheritedToText: hasTagColorInheritedToText,
-    shouldIndicateSwitchState: shouldIndicateSwitchState
+    shouldIndicateSwitchState: shouldIndicateSwitchState,
+    shouldStrikeThroughDisabledButton: shouldStrikeThroughDisabledButton
   }),
       _useState2 = _slicedToArray(_useState, 2),
       value = _useState2[0],
@@ -77,14 +79,16 @@ LibraryContextProvider.propTypes = {
   coloredTagVariant: _propTypes["default"].oneOf(['bold', 'subtle', 'minimal']),
   hasTagColorInheritedToText: _propTypes["default"].bool,
   direction: _propTypes["default"].string,
-  shouldIndicateSwitchState: _propTypes["default"].bool
+  shouldIndicateSwitchState: _propTypes["default"].bool,
+  shouldStrikeThroughDisabledButton: _propTypes["default"].bool
 };
 LibraryContextProvider.defaultProps = {
   isReducedMotion: (0, _Config.getLibraryConfig)('isReducedMotion'),
   direction: (0, _Config.getLibraryConfig)('direction'),
   coloredTagVariant: 'bold',
   hasTagColorInheritedToText: true,
-  shouldIndicateSwitchState: false
+  shouldIndicateSwitchState: false,
+  shouldStrikeThroughDisabledButton: false
 };
 var _default = LibraryContextProvider;
 exports["default"] = _default;