@zohodesk/components 1.0.0-temp-252.4 → 1.0.0-temp-256.1

package/es/ListItem/ListItemWithIcon.js

@@ -12,6 +12,7 @@ import { ListItemWithIcon_Props } from "./props/propTypes";
 import { renderNode, isRenderable } from '@zohodesk/utils';
 /**** CSS ****/
 
+import { cn } from "@dot-system/css-utility";
 import style from "./ListItem.module.css";
 export default class ListItemWithIcon extends React.Component {
   constructor(props) {
@@ -75,10 +76,13 @@ export default class ListItemWithIcon extends React.Component {
       a11y,
       customClass,
       customValueRightPlaceholderClass,
+      customLeftValuePlaceholderClass,
+      customTitleBoxClass,
       customProps,
       needMultiLineText,
       secondaryValue,
       renderValueRightPlaceholderNode,
+      renderLeftValuePlaceholderNode,
       lhsAlignContent,
       lhsJustifyContent
     } = this.props;
@@ -122,7 +126,7 @@ export default class ListItemWithIcon extends React.Component {
       className: `${style.contentWrapper} ${!iconName && lhsAlignContent !== 'start' ? style[`alignLhsBox_${lhsAlignContent}`] : ''}`
     }, iconName && /*#__PURE__*/React.createElement("div", {
       "aria-hidden": true,
-      className: `${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
+      className: cn(`${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`),
       "data-id": iconBoxDataId,
       "data-test-id": iconBoxDataId
     }, /*#__PURE__*/React.createElement(Box, {
@@ -133,13 +137,16 @@ export default class ListItemWithIcon extends React.Component {
       name: iconName,
       size: iconSize
     }))), iconClass && !iconName ? /*#__PURE__*/React.createElement("span", {
-      className: iconClass
+      className: cn(iconClass)
     }) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: `${style.leftBox} ${style.selfAlign_center}`
     }, /*#__PURE__*/React.createElement(Box, {
-      className: style.titleBox
-    }, value ? /*#__PURE__*/React.createElement(Box, {
+      className: `${style.titleBox} ${customTitleBoxClass}`
+    }, isRenderable(renderLeftValuePlaceholderNode) ? /*#__PURE__*/React.createElement(Box, {
+      adjust: true,
+      className: `${customLeftValuePlaceholderClass}`
+    }, renderNode(renderLeftValuePlaceholderNode)) : null, value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       className: needMultiLineText ? style.multiLineValue : style.value,

package/es/ListItem/ListItemWithRadio.js

@@ -7,6 +7,7 @@ import ListContainer from "./ListContainer";
 import { ListItemWithRadioDefaultProps } from "./props/defaultProps";
 import { ListItemWithRadio_Props } from "./props/propTypes";
 import { renderNode, isRenderable } from '@zohodesk/utils';
+import { cn } from "@dot-system/css-utility";
 import style from "./ListItem.module.css";
 export default class ListItemWithRadio extends React.Component {
   constructor(props) {
@@ -67,6 +68,7 @@ export default class ListItemWithRadio extends React.Component {
       needMultiLineText,
       secondaryValue,
       renderValueRightPlaceholderNode,
+      renderLeftValuePlaceholderNode,
       lhsAlignContent,
       lhsJustifyContent
     } = this.props;
@@ -82,7 +84,9 @@ export default class ListItemWithRadio extends React.Component {
       customListItem = '',
       customRadio = '',
       customRadioWrap = '',
-      customValueRightPlaceholder = ''
+      customValueRightPlaceholder = '',
+      customLeftValuePlaceholder = '',
+      customTitleBox = ''
     } = customClass;
     const iconBoxDataId = `${dataId}_radio`;
     return /*#__PURE__*/React.createElement(ListContainer, _extends({
@@ -106,7 +110,7 @@ export default class ListItemWithRadio extends React.Component {
     }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
       className: style.contentWrapper
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
+      className: cn(`${style.iconBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`),
       "data-id": iconBoxDataId,
       "data-test-id": iconBoxDataId
     }, /*#__PURE__*/React.createElement(Box, {
@@ -126,8 +130,11 @@ export default class ListItemWithRadio extends React.Component {
       flexible: true,
       className: `${style.leftBox} ${style.selfAlign_center}`
     }, /*#__PURE__*/React.createElement(Box, {
-      className: style.titleBox
-    }, value ? /*#__PURE__*/React.createElement(Box, {
+      className: `${style.titleBox} ${customTitleBox}`
+    }, isRenderable(renderLeftValuePlaceholderNode) ? /*#__PURE__*/React.createElement(Box, {
+      adjust: true,
+      className: `${customLeftValuePlaceholder}`
+    }, renderNode(renderLeftValuePlaceholderNode)) : null, value ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       "data-title": disableTitle ? null : title,

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

@@ -62,4 +62,23 @@ describe('ListItemWithAvatar', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItemWithAvatar with renderLeftValuePlaceholderNode', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      renderLeftValuePlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Left Placeholder")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithAvatar with renderLeftValuePlaceholderNode & it\'s custom class', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      renderLeftValuePlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Left Placeholder"),
+      customClass: {
+        customLeftValuePlaceholder: "customLeftValuePlaceholderClass"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js

@@ -62,4 +62,23 @@ describe('ListItemWithCheckBox', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItemWithCheckBox with renderLeftValuePlaceholderNode', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      renderLeftValuePlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Left Placeholder")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithCheckBox with renderLeftValuePlaceholderNode & it\'s custom class', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      renderLeftValuePlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Left Placeholder"),
+      customClass: {
+        customLeftValuePlaceholder: "customLeftValuePlaceholderClass"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/ListItem/__tests__/ListItemWithIcon.spec.js

@@ -60,4 +60,21 @@ describe('ListItemWithIcon', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItemWithIcon with renderLeftValuePlaceholderNode', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      renderLeftValuePlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Left Placeholder")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithIcon with renderLeftValuePlaceholderNode & it\'s custom class', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      renderLeftValuePlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Left Placeholder"),
+      customLeftValuePlaceholderClass: "customLeftValuePlaceholderClass"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/ListItem/__tests__/ListItemWithRadio.spec.js

@@ -62,4 +62,23 @@ describe('ListItemWithRadio', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItemWithRadio with renderLeftValuePlaceholderNode', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      renderLeftValuePlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Left Placeholder")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithRadio with renderLeftValuePlaceholderNode & it\'s custom class', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      renderLeftValuePlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Left Placeholder"),
+      customClass: {
+        customLeftValuePlaceholder: "customLeftValuePlaceholderClass"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ListContainer ListContainer with Align Base Line 1`] = `
 <DocumentFragment>
   <li
-    class="list medium  default     withBorder  flex rowdir baseline"
+    class="flex row alignItems_baseline list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="containerComponent"
     data-selector-id="listContainer"
@@ -16,7 +16,7 @@ exports[`ListContainer ListContainer with Align Base Line 1`] = `
 exports[`ListContainer rendering the defult props 1`] = `
 <DocumentFragment>
   <li
-    class="list medium  default     withBorder  flex rowdir vCenter"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="containerComponent"
     data-selector-id="listContainer"

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

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ListItem ListItem with renderValueRightPlaceholderNode & it's custom class 1`] = `
 <DocumentFragment>
   <li
-    class="list medium  default     withBorder  flex rowdir vCenter"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItem"
     data-selector-id="listItem"
@@ -12,19 +12,19 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode & it's custom cl
     tabindex="0"
   >
     <div
-      class="leftBox grow basis shrinkOff"
+      class="flexible basis_zero noShrink leftBox"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox   shrinkOff"
+        class="noShrink titleBox"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="customValueRightPlaceholderClass shrinkOff"
+          class="noShrink customValueRightPlaceholderClass"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -42,7 +42,7 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode & it's custom cl
 exports[`ListItem ListItem with renderValueRightPlaceholderNode 1`] = `
 <DocumentFragment>
   <li
-    class="list medium  default     withBorder  flex rowdir vCenter"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItem"
     data-selector-id="listItem"
@@ -51,19 +51,19 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode 1`] = `
     tabindex="0"
   >
     <div
-      class="leftBox grow basis shrinkOff"
+      class="flexible basis_zero noShrink leftBox"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox   shrinkOff"
+        class="noShrink titleBox"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="shrinkOff"
+          class="noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -81,7 +81,7 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode 1`] = `
 exports[`ListItem Should render with renderBeforeChildren 1`] = `
 <DocumentFragment>
   <li
-    class="list medium  default     withBorder  flex rowdir vCenter"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItem"
     data-selector-id="listItem"
@@ -90,19 +90,19 @@ exports[`ListItem Should render with renderBeforeChildren 1`] = `
     tabindex="0"
   >
     <div
-      class="leftBox grow basis shrinkOff"
+      class="flexible basis_zero noShrink leftBox"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox   shrinkOff"
+        class="noShrink titleBox"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="beforeChild basisAuto shrinkOff"
+          class="basis_auto noShrink beforeChild"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -112,7 +112,7 @@ exports[`ListItem Should render with renderBeforeChildren 1`] = `
           </span>
         </div>
         <div
-          class="children basisAuto shrinkOn"
+          class="basis_auto shrink children"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -128,7 +128,7 @@ exports[`ListItem Should render with renderBeforeChildren 1`] = `
 exports[`ListItem rendering the defult props 1`] = `
 <DocumentFragment>
   <li
-    class="list medium  default     withBorder  flex rowdir vCenter"
+    class="flex row alignItems_center list medium default withBorder"
     data-a11y-inset-focus="true"
     data-id="listItem"
     data-selector-id="listItem"
@@ -137,13 +137,13 @@ exports[`ListItem rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="leftBox grow basis shrinkOff"
+      class="flexible basis_zero noShrink leftBox"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="titleBox   shrinkOff"
+        class="noShrink titleBox"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"