@zohodesk/components 1.0.0-temp-234 → 1.0.0-temp-235

package/lib/ListItem/ListItem.js

@@ -123,8 +123,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
-          secondaryValue = _this$props4.secondaryValue,
-          renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode;
+          secondaryValue = _this$props4.secondaryValue;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -132,9 +131,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
       var _customClass$customLi = customClass.customListItem,
           customListItem = _customClass$customLi === void 0 ? '' : _customClass$customLi,
           _customClass$customTi = customClass.customTickIcon,
-          customTickIcon = _customClass$customTi === void 0 ? '' : _customClass$customTi,
-          _customClass$customVa = customClass.customValueRightPlaceholder,
-          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa;
+          customTickIcon = _customClass$customTi === void 0 ? '' : _customClass$customTi;
 
       var listA11y = _objectSpread({
         ariaHidden: true,
@@ -175,9 +172,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         shrink: true,
         adjust: true,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value) : null, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: customValueRightPlaceholder
-      }, renderValueRightPlaceholderNode()) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, value) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
         className: _ListItemModule["default"].children

package/lib/ListItem/ListItemWithAvatar.js

@@ -130,7 +130,6 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
-          renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode,
           lhsAlignContent = _this$props4.lhsAlignContent;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
@@ -145,9 +144,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           _customClass$customAv = customClass.customAvatar,
           customAvatar = _customClass$customAv === void 0 ? '' : _customClass$customAv,
           _customClass$customAv2 = customClass.customAvatarTeam,
-          customAvatarTeam = _customClass$customAv2 === void 0 ? '' : _customClass$customAv2,
-          _customClass$customVa = customClass.customValueRightPlaceholder,
-          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa;
+          customAvatarTeam = _customClass$customAv2 === void 0 ? '' : _customClass$customAv2;
 
       var listA11y = _objectSpread({
         ariaHidden: true,
@@ -203,20 +200,16 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         customClass: customAvatar
       }, AvatarProps)))) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: _ListItemModule["default"].leftBox
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].titleBox
+        shrink: true
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "column"
       }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        shrink: true,
-        adjust: true,
         "data-title": isDisabled ? null : title,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value) : null, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: customValueRightPlaceholder
-      }, renderValueRightPlaceholderNode()) : null), secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, value) : 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, {
+      }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),

package/lib/ListItem/ListItemWithCheckBox.js

@@ -118,7 +118,6 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
-          renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode,
           lhsAlignContent = _this$props4.lhsAlignContent,
           lhsJustifyContent = _this$props4.lhsJustifyContent;
 
@@ -135,9 +134,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           _customClass$customCh = customClass.customCheckBox,
           customCheckBox = _customClass$customCh === void 0 ? '' : _customClass$customCh,
           _customClass$customLa = customClass.customLabel,
-          customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa,
-          _customClass$customVa = customClass.customValueRightPlaceholder,
-          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa;
+          customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
         size: size,
@@ -172,20 +169,16 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         }
       }))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: _ListItemModule["default"].leftBox
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].titleBox
+        shrink: true
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "column"
       }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        shrink: true,
-        adjust: true,
         "data-title": isDisabled ? null : title,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value) : null, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: customValueRightPlaceholder
-      }, renderValueRightPlaceholderNode()) : null), secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, value) : 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));
+      }, secondaryValue) : null)));
     }
   }]);
 

package/lib/ListItem/ListItemWithIcon.js

@@ -123,11 +123,9 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
           disableTitle = _this$props4.disableTitle,
           a11y = _this$props4.a11y,
           customClass = _this$props4.customClass,
-          customValueRightPlaceholderClass = _this$props4.customValueRightPlaceholderClass,
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
-          renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode,
           lhsAlignContent = _this$props4.lhsAlignContent,
           lhsJustifyContent = _this$props4.lhsJustifyContent;
       var _customProps$ListItem = customProps.ListItemProps,
@@ -180,21 +178,17 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         className: iconClass
       }) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: _ListItemModule["default"].leftBox
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].titleBox
+        shrink: true
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "column"
       }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        shrink: true,
-        adjust: true,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,
         "data-title": isDisabled ? null : title,
         dataId: "".concat(dataIdString, "_Text")
-      }, value) : null, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: customValueRightPlaceholderClass
-      }, renderValueRightPlaceholderNode()) : null), secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, value) : 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, {
+      }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),

package/lib/ListItem/ListItemWithRadio.js

@@ -119,7 +119,6 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           customProps = _this$props4.customProps,
           needMultiLineText = _this$props4.needMultiLineText,
           secondaryValue = _this$props4.secondaryValue,
-          renderValueRightPlaceholderNode = _this$props4.renderValueRightPlaceholderNode,
           lhsAlignContent = _this$props4.lhsAlignContent,
           lhsJustifyContent = _this$props4.lhsJustifyContent;
       var _customProps$ListItem = customProps.ListItemProps,
@@ -136,9 +135,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           _customClass$customRa = customClass.customRadio,
           customRadio = _customClass$customRa === void 0 ? '' : _customClass$customRa,
           _customClass$customRa2 = customClass.customRadioWrap,
-          customRadioWrap = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2,
-          _customClass$customVa = customClass.customValueRightPlaceholder,
-          customValueRightPlaceholder = _customClass$customVa === void 0 ? '' : _customClass$customVa;
+          customRadioWrap = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2;
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
         size: size,
@@ -175,20 +172,16 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         }
       }))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        className: _ListItemModule["default"].leftBox
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].titleBox
+        shrink: true
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "column"
       }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        shrink: true,
-        adjust: true,
         "data-title": disableTitle ? null : title,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value) : null, typeof renderValueRightPlaceholderNode === 'function' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: customValueRightPlaceholder
-      }, renderValueRightPlaceholderNode()) : null), secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, value) : 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));
+      }, secondaryValue) : null)));
     }
   }]);
 

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

@@ -15,27 +15,4 @@ describe('ListItem', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('ListItem with renderValueRightPlaceholderNode', function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
-      renderValueRightPlaceholderNode: function renderValueRightPlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Custom Placeholder");
-      }
-    })),
-        asFragment = _render2.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('ListItem with renderValueRightPlaceholderNode & it\'s custom class', function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
-      renderValueRightPlaceholderNode: function renderValueRightPlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Custom Placeholder");
-      },
-      customClass: {
-        customValueRightPlaceholder: "customValueRightPlaceholderClass"
-      }
-    })),
-        asFragment = _render3.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

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

@@ -50,27 +50,4 @@ describe('ListItemWithAvatar', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('ListItemWithAvatar with renderValueRightPlaceholderNode', function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], {
-      renderValueRightPlaceholderNode: function renderValueRightPlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Custom Placeholder");
-      }
-    })),
-        asFragment = _render6.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('ListItemWithAvatar with renderValueRightPlaceholderNode & it\'s custom class', function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], {
-      renderValueRightPlaceholderNode: function renderValueRightPlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Custom Placeholder");
-      },
-      customClass: {
-        customValueRightPlaceholder: "customValueRightPlaceholderClass"
-      }
-    })),
-        asFragment = _render7.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

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

@@ -50,27 +50,4 @@ describe('ListItemWithCheckBox', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('ListItemWithCheckBox with renderValueRightPlaceholderNode', function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithCheckBox["default"], {
-      renderValueRightPlaceholderNode: function renderValueRightPlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Custom Placeholder");
-      }
-    })),
-        asFragment = _render6.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('ListItemWithCheckBox with renderValueRightPlaceholderNode & it\'s custom class', function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithCheckBox["default"], {
-      renderValueRightPlaceholderNode: function renderValueRightPlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Custom Placeholder");
-      },
-      customClass: {
-        customValueRightPlaceholder: "customValueRightPlaceholderClass"
-      }
-    })),
-        asFragment = _render7.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

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

@@ -50,25 +50,4 @@ describe('ListItemWithIcon', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('ListItemWithIcon with renderValueRightPlaceholderNode', function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
-      renderValueRightPlaceholderNode: function renderValueRightPlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Custom Placeholder");
-      }
-    })),
-        asFragment = _render6.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('ListItemWithIcon with renderValueRightPlaceholderNode & it\'s custom class', function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
-      renderValueRightPlaceholderNode: function renderValueRightPlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Custom Placeholder");
-      },
-      customValueRightPlaceholderClass: "customValueRightPlaceholderClass"
-    })),
-        asFragment = _render7.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

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

@@ -50,27 +50,4 @@ describe('ListItemWithRadio', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('ListItemWithRadio with renderValueRightPlaceholderNode', function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
-      renderValueRightPlaceholderNode: function renderValueRightPlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Custom Placeholder");
-      }
-    })),
-        asFragment = _render6.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('ListItemWithRadio with renderValueRightPlaceholderNode & it\'s custom class', function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
-      renderValueRightPlaceholderNode: function renderValueRightPlaceholderNode() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, "Custom Placeholder");
-      },
-      customClass: {
-        customValueRightPlaceholder: "customValueRightPlaceholderClass"
-      }
-    })),
-        asFragment = _render7.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

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

@@ -1,83 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ListItem ListItem with renderValueRightPlaceholderNode & it's custom class 1`] = `
-<DocumentFragment>
-  <li
-    class="list medium  default     withBorder  flex rowdir vCenter"
-    data-a11y-inset-focus="true"
-    data-id="listItem"
-    data-selector-id="listItem"
-    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
-          class="customValueRightPlaceholderClass shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div>
-            Custom Placeholder
-          </div>
-        </div>
-      </div>
-    </div>
-  </li>
-</DocumentFragment>
-`;
-
-exports[`ListItem ListItem with renderValueRightPlaceholderNode 1`] = `
-<DocumentFragment>
-  <li
-    class="list medium  default     withBorder  flex rowdir vCenter"
-    data-a11y-inset-focus="true"
-    data-id="listItem"
-    data-selector-id="listItem"
-    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
-          class="shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div>
-            Custom Placeholder
-          </div>
-        </div>
-      </div>
-    </div>
-  </li>
-</DocumentFragment>
-`;
-
 exports[`ListItem rendering the defult props 1`] = `
 <DocumentFragment>
   <li