@zohodesk/components 1.2.63 → 1.3.1

package/lib/ListItem/ListItemWithRadio.js

@@ -117,7 +117,10 @@ var ListItemWithRadio = /*#__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,
+          lhsAlignContent = _this$props4.lhsAlignContent,
+          lhsJustifyContent = _this$props4.lhsJustifyContent;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -151,8 +154,12 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].iconBox,
+        align: lhsAlignContent,
+        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"].lhsBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
         dataId: "".concat(dataId, "_radio")
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        align: lhsAlignContent,
+        className: lhsAlignContent !== 'center' ? _ListItemModule["default"]["lhsBox_".concat(size)] : ''
       }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
         checked: checked,
         id: id,
@@ -163,12 +170,18 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           customRadio: customRadio,
           customRadioWrap: customRadioWrap
         }
-      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
-        shrink: true,
+        shrink: true
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "column"
+      }, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": disableTitle ? null : title,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value));
+      }, 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)));
     }
   }]);
 

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

@@ -15,4 +15,12 @@ describe('ListContainer', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListContainer with Align Base Line', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], {
+      align: 'baseline'
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -15,4 +15,39 @@ describe('ListItemWithAvatar', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItemWithAvatar with secondaryValue', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], {
+      secondaryValue: "secondaryValue"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithAvatar with secondaryValue text and LHS align start', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "start"
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithAvatar with secondaryValue  text and LHS align center', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "center"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithAvatar with secondaryValue  text and LHS align end', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithAvatar["default"], {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "end"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -15,4 +15,39 @@ describe('ListItemWithCheckBox', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItemWithCheckBox with secondaryValue', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithCheckBox["default"], {
+      secondaryValue: "secondaryValue"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithCheckBox with secondaryValue text and LHS align start', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithCheckBox["default"], {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "start"
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithCheckBox with secondaryValue  text and LHS align center', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithCheckBox["default"], {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "center"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithCheckBox with secondaryValue  text and LHS align end', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithCheckBox["default"], {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "end"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -15,4 +15,39 @@ describe('ListItemWithIcon', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItemWithIcon with secondaryValue', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      secondaryValue: "secondaryValue"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithIcon with secondaryValue text and LHS align start', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "start"
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithIcon with secondaryValue  text and LHS align center', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "center"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithIcon with secondaryValue  text and LHS align end', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "end"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -15,4 +15,39 @@ describe('ListItemWithRadio', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItemWithRadio with secondaryValue', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      secondaryValue: "secondaryValue"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithRadio with secondaryValue text and LHS align start', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "start"
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithRadio with secondaryValue  text and LHS align center', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "center"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithRadio with secondaryValue  text and LHS align end', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ListItemWithRadio["default"], {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "end"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -1,5 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ListContainer ListContainer with Align Base Line 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir baseline"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
 exports[`ListContainer rendering the defult props 1`] = `
 <DocumentFragment>
   <li

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

@@ -1,5 +1,189 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS align center 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="List_ListItemWithAvatar"
+    data-selector-id="listItemWithAvatar"
+    data-test-id="List_ListItemWithAvatar"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List
+        </div>
+        <div
+          class="secondaryField secondaryValue shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="secondaryValue"
+        >
+          secondaryValue
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue  text and LHS align end 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="List_ListItemWithAvatar"
+    data-selector-id="listItemWithAvatar"
+    data-test-id="List_ListItemWithAvatar"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List
+        </div>
+        <div
+          class="secondaryField secondaryValue shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="secondaryValue"
+        >
+          secondaryValue
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="List_ListItemWithAvatar"
+    data-selector-id="listItemWithAvatar"
+    data-test-id="List_ListItemWithAvatar"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List
+        </div>
+        <div
+          class="secondaryField secondaryValue shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="secondaryValue"
+        >
+          secondaryValue
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS align start 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="List_ListItemWithAvatar"
+    data-selector-id="listItemWithAvatar"
+    data-test-id="List_ListItemWithAvatar"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List
+        </div>
+        <div
+          class="secondaryField secondaryValue shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="secondaryValue"
+        >
+          secondaryValue
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
 exports[`ListItemWithAvatar rendering the defult props 1`] = `
 <DocumentFragment>
   <li
@@ -12,12 +196,26 @@ exports[`ListItemWithAvatar rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="value grow basis shrinkOn"
+      class="grow basis shrinkOn"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
-      List
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          List
+        </div>
+      </div>
     </div>
   </li>
 </DocumentFragment>