@zohodesk/components 1.6.1 → 1.6.3

package/es/ListItem/ListItemWithIcon.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 /**** Libraries ****/
 import React from 'react';
 import { Box, Container } from "../Layout";
@@ -93,7 +95,8 @@ export default class ListItemWithIcon extends React.Component {
       ariaHidden
     } = listA11y;
     let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
-    return /*#__PURE__*/React.createElement(ListContainer, {
+    const iconBoxDataId = dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`;
+    return /*#__PURE__*/React.createElement(ListContainer, _extends({
       a11y: listA11y,
       size: size,
       palette: palette,
@@ -114,16 +117,17 @@ export default class ListItemWithIcon extends React.Component {
       eleRef: this.getRef,
       disableTitle: disableTitle,
       title: null,
-      customProps: ListItemProps,
-      ...ContainerProps
-    }, iconName && /*#__PURE__*/React.createElement(Box, {
+      customProps: ListItemProps
+    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
+      className: `${style.contentWrapper} ${!iconName && lhsAlignContent !== 'start' ? style[`alignLhsBox_${lhsAlignContent}`] : ''}`
+    }, iconName && /*#__PURE__*/React.createElement("div", {
       "aria-hidden": true,
-      align: lhsAlignContent,
-      className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
-      dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
+      className: `${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
+      "data-id": iconBoxDataId,
+      "data-test-id": iconBoxDataId
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
+      className: style.iconWrapper
     }, /*#__PURE__*/React.createElement(Icon, {
       iconClass: iconClass,
       name: iconName,
@@ -132,7 +136,7 @@ export default class ListItemWithIcon extends React.Component {
       className: iconClass
     }) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      className: style.leftBox
+      className: `${style.leftBox} ${style.selfAlign_center}`
     }, /*#__PURE__*/React.createElement(Box, {
       className: style.titleBox
     }, value ? /*#__PURE__*/React.createElement(Box, {
@@ -154,7 +158,7 @@ export default class ListItemWithIcon extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null);
+    })) : null));
   }
 
 }

package/es/ListItem/ListItemWithRadio.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import Radio from "../Radio/Radio";
 import { Box, Container } from "../Layout";
@@ -82,7 +84,8 @@ export default class ListItemWithRadio extends React.Component {
       customRadioWrap = '',
       customValueRightPlaceholder = ''
     } = customClass;
-    return /*#__PURE__*/React.createElement(ListContainer, {
+    const iconBoxDataId = `${dataId}_radio`;
+    return /*#__PURE__*/React.createElement(ListContainer, _extends({
       a11y: listA11y,
       size: size,
       palette: palette,
@@ -99,15 +102,16 @@ export default class ListItemWithRadio extends React.Component {
       eleRef: this.getRef,
       disableTitle: disableTitle,
       title: null,
-      customProps: ListItemProps,
-      ...ContainerProps
-    }, /*#__PURE__*/React.createElement(Box, {
-      align: lhsAlignContent,
-      className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
-      dataId: `${dataId}_radio`
+      customProps: ListItemProps
+    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
+      className: style.contentWrapper
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
+      "data-id": iconBoxDataId,
+      "data-test-id": iconBoxDataId
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
+      className: lhsAlignContent !== 'center' ? style.lhsBoxInner : ''
     }, /*#__PURE__*/React.createElement(Radio, {
       checked: checked,
       id: id,
@@ -120,7 +124,7 @@ export default class ListItemWithRadio extends React.Component {
       }
     }))), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      className: style.leftBox
+      className: `${style.leftBox} ${style.selfAlign_center}`
     }, /*#__PURE__*/React.createElement(Box, {
       className: style.titleBox
     }, value ? /*#__PURE__*/React.createElement(Box, {
@@ -133,7 +137,7 @@ export default class ListItemWithRadio extends React.Component {
     }, renderNode(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
       className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
-    }, secondaryValue) : null));
+    }, secondaryValue) : null)));
   }
 
 }

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

@@ -18,7 +18,7 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode & it's custom cl
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox shrinkOff"
+        class="titleBox   shrinkOff"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -57,7 +57,7 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox shrinkOff"
+        class="titleBox   shrinkOff"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -96,7 +96,7 @@ exports[`ListItem Should render with renderBeforeChildren 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox shrinkOff"
+        class="titleBox   shrinkOff"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -143,7 +143,7 @@ exports[`ListItem rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox shrinkOff"
+        class="titleBox   shrinkOff"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"

package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap

@@ -12,33 +12,40 @@ exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderN
     tabindex="0"
   >
     <div
-      class="leftBox grow basis shrinkOff"
+      class="contentWrapper shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox shrinkOff"
+        class="leftBox selfAlign_center grow basis shrinkOff"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="value basisAuto shrinkOn"
+          class="titleBox shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
-          List
-        </div>
-        <div
-          class="customValueRightPlaceholderClass shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div>
-            Custom Placeholder
+          <div
+            class="value basisAuto shrinkOn"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            List
+          </div>
+          <div
+            class="customValueRightPlaceholderClass shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div>
+              Custom Placeholder
+            </div>
           </div>
         </div>
       </div>
@@ -59,33 +66,40 @@ exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderN
     tabindex="0"
   >
     <div
-      class="leftBox grow basis shrinkOff"
+      class="contentWrapper shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox shrinkOff"
+        class="leftBox selfAlign_center grow basis shrinkOff"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="value basisAuto shrinkOn"
+          class="titleBox shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
-          List
-        </div>
-        <div
-          class="shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div>
-            Custom Placeholder
+          <div
+            class="value basisAuto shrinkOn"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            List
+          </div>
+          <div
+            class="shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div>
+              Custom Placeholder
+            </div>
           </div>
         </div>
       </div>
@@ -106,34 +120,41 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
     tabindex="0"
   >
     <div
-      class="leftBox grow basis shrinkOff"
+      class="contentWrapper shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox shrinkOff"
+        class="leftBox selfAlign_center grow basis shrinkOff"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="value basisAuto shrinkOn"
+          class="titleBox shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
-          List
+          <div
+            class="value basisAuto shrinkOn"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            List
+          </div>
+        </div>
+        <div
+          class="secondaryField secondaryValue shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="secondaryValue"
+        >
+          secondaryValue
         </div>
-      </div>
-      <div
-        class="secondaryField secondaryValue shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-        data-title="secondaryValue"
-      >
-        secondaryValue
       </div>
     </div>
   </li>
@@ -152,34 +173,41 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS
     tabindex="0"
   >
     <div
-      class="leftBox grow basis shrinkOff"
+      class="contentWrapper shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox shrinkOff"
+        class="leftBox selfAlign_center grow basis shrinkOff"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="value basisAuto shrinkOn"
+          class="titleBox shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
-          List
+          <div
+            class="value basisAuto shrinkOn"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            List
+          </div>
+        </div>
+        <div
+          class="secondaryField secondaryValue shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="secondaryValue"
+        >
+          secondaryValue
         </div>
-      </div>
-      <div
-        class="secondaryField secondaryValue shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-        data-title="secondaryValue"
-      >
-        secondaryValue
       </div>
     </div>
   </li>
@@ -198,34 +226,41 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue 1`] = `
     tabindex="0"
   >
     <div
-      class="leftBox grow basis shrinkOff"
+      class="contentWrapper shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox shrinkOff"
+        class="leftBox selfAlign_center grow basis shrinkOff"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="value basisAuto shrinkOn"
+          class="titleBox shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
-          List
+          <div
+            class="value basisAuto shrinkOn"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            List
+          </div>
+        </div>
+        <div
+          class="secondaryField secondaryValue shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="secondaryValue"
+        >
+          secondaryValue
         </div>
-      </div>
-      <div
-        class="secondaryField secondaryValue shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-        data-title="secondaryValue"
-      >
-        secondaryValue
       </div>
     </div>
   </li>
@@ -244,34 +279,41 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
     tabindex="0"
   >
     <div
-      class="leftBox grow basis shrinkOff"
+      class="contentWrapper shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox shrinkOff"
+        class="leftBox selfAlign_center grow basis shrinkOff"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="value basisAuto shrinkOn"
+          class="titleBox shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
-          List
+          <div
+            class="value basisAuto shrinkOn"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            List
+          </div>
+        </div>
+        <div
+          class="secondaryField secondaryValue shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="secondaryValue"
+        >
+          secondaryValue
         </div>
-      </div>
-      <div
-        class="secondaryField secondaryValue shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-        data-title="secondaryValue"
-      >
-        secondaryValue
       </div>
     </div>
   </li>
@@ -290,24 +332,31 @@ exports[`ListItemWithAvatar rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="leftBox grow basis shrinkOff"
+      class="contentWrapper shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox shrinkOff"
+        class="leftBox selfAlign_center grow basis shrinkOff"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="value basisAuto shrinkOn"
+          class="titleBox shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
-          List
+          <div
+            class="value basisAuto shrinkOn"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            List
+          </div>
         </div>
       </div>
     </div>