@zohodesk/components 1.0.0-temp-220.6 → 1.0.0-temp-223

package/lib/ListItem/ListItem.module.css

@@ -1,5 +1,6 @@
 .varClass {
   /* listitem default variables */
+  --listitem_font_size: var(--zd_font_size13);
   --listitem_text_color: var(--zdt_listitem_default_text);
   --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_border_width: 0;
@@ -24,7 +25,7 @@
   position: relative;
   list-style: none;
   color: var(--listitem_text_color);
-  font-size: var(--zd_font_size13) ;
+  font-size: var(--listitem_font_size);
   height: var(--listitem_height);
   min-height: var(--listitem_min_height);
   text-decoration: none;
@@ -57,7 +58,7 @@
   --listitem_min_height: var(--zd_size35);
 }
 .large {
-  --listitem_height: var(--zd_size48);
+  --listitem_min_height: var(--zd_size48);
 }
 [dir=ltr] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
@@ -72,9 +73,8 @@
 .value, .multiLineValue {
   line-height: 1.5385;
 }
-.multiLineValue{
-  word-break: break-word;
-  composes: clamp from '../common/common.module.css'
+.multiLineValue,.multiLine{
+ composes: lineClamp from '../common/common.module.css';
 }
 .iconBox {
   width: var(--zd_size20) ;
@@ -94,6 +94,42 @@
   margin: var(--listitem_avatar_margin);
 }
 
+.lhsJustifyContent_start,
+.lhsJustifyContent_center,
+.lhsJustifyContent_end {
+  composes: dflex alignVertical from '../common/common.module.css';
+}
+.lhsJustifyContent_start {
+  composes: justifyFstart from '../common/common.module.css';
+}
+.lhsJustifyContent_center {
+  composes: alignHorizontal from '../common/common.module.css';
+}
+.lhsJustifyContent_end {
+  composes: justifyFend from '../common/common.module.css';
+}
+
+.lhsBox {
+  composes: dflex from '../common/common.module.css';
+  align-self: stretch;
+}
+.lhsBox_small,
+.lhsBox_medium,
+.lhsBox_large{
+  composes: varClass;
+  --listitem_doubleline_content_height: calc(var(--listitem_font_size) * 2 );
+  height: 100% ;
+  composes: dflex alignVertical from '../common/common.module.css';
+}
+.lhsBox_small {
+  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size7)); /* 7px = listitem min-height - (top + bottom padding) - doubleLine content height */
+}
+.lhsBox_medium {
+  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size8)); /* 8px = listitem min-height - (top + bottom padding) - doubleLine content height */
+}
+.lhsBox_large {
+  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size15)); /* 15px = listitem min-height - (top + bottom padding) - doubleLine content height */
+}
 .defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
@@ -155,12 +191,22 @@
 .activedark {
   --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
 }
+.secondaryField{
+  color:var(--zdt_listitem_secondaryfield_text);
+  font-size: var(--zd_font_size12) ;
+  line-height: 1.25;
+}
 
 .tickIcon,
 .defaultTick,
 .darkTick {
   position: absolute;
   color: var(--listitem_tickicon_color);
+  top:50% ;
+}
+
+.tickIcon, .defaultTick, .darkTick {
+  transform: translateY(-50%);
 }
 
 [dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
@@ -199,7 +245,7 @@
 }
 .responsiveHeight {
   --listitem_min_height: var(--zd_size45);
-  font-size: var(--zd_font_size15) ;
+  --listitem_font_size: var(--zd_font_size15);
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }

package/lib/ListItem/ListItemWithAvatar.js

@@ -128,7 +128,9 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           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;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -172,7 +174,10 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].leftAvatar
+        className: "".concat(_ListItemModule["default"].leftAvatar, " ").concat(lhsAlignContent !== 'center' ? "".concat(_ListItemModule["default"].lhsBox) : '')
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        align: lhsAlignContent,
+        className: _ListItemModule["default"]["lhsBox_".concat(size)]
       }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], _extends({
         name: name,
         size: "small",
@@ -193,12 +198,18 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         needTitle: needAvatarTitle,
         palette: isDarkPalette ? 'info' : avatarPalette,
         customClass: customAvatar
-      }, AvatarProps))) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, AvatarProps)))) : null, /*#__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": isDisabled ? null : title,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value) : null, needTick && active ? /*#__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 : '')
+      }, 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

@@ -116,7 +116,10 @@ var ListItemWithCheckBox = /*#__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 listA11y = _objectSpread({
         role: 'option'
@@ -150,8 +153,11 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].iconBox,
+        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"].lhsBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
         dataId: "".concat(dataId ? dataId : value, "_checkBox")
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        align: lhsAlignContent,
+        className: lhsAlignContent !== 'center' ? _ListItemModule["default"]["lhsBox_".concat(size)] : ''
       }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
         checked: checked,
         a11y: {
@@ -161,12 +167,18 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           customCheckBox: customCheckBox,
           customLabel: customLabel
         }
-      })), /*#__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": isDisabled ? 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 : '')
+      }, secondaryValue) : null)));
     }
   }]);
 

package/lib/ListItem/ListItemWithIcon.js

@@ -124,7 +124,10 @@ var ListItemWithIcon = /*#__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,
@@ -161,21 +164,31 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         customProps: ListItemProps
       }, ContainerProps), iconName && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "aria-hidden": true,
-        className: _ListItemModule["default"].iconBox,
+        align: lhsAlignContent,
+        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"].lhsBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
         dataId: dataId ? "".concat(dataId, "_Icon") : "".concat(value.toLowerCase().replace("'", '_'), "_Icon")
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        align: lhsAlignContent,
+        className: lhsAlignContent !== 'center' ? _ListItemModule["default"]["lhsBox_".concat(size)] : ''
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         iconClass: iconClass,
         name: iconName,
         size: iconSize
-      })), iconClass && !iconName ? /*#__PURE__*/_react["default"].createElement("span", {
+      }))), iconClass && !iconName ? /*#__PURE__*/_react["default"].createElement("span", {
         className: iconClass
-      }) : null, value && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }) : null, /*#__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, {
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,
         "data-title": isDisabled ? null : title,
         dataId: "".concat(dataIdString, "_Text")
-      }, value), needTick && active ? /*#__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 : '')
+      }, 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

@@ -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 : '')
+      }, 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