@zohodesk/components 1.0.0-temp-241 → 1.0.0-temp-243

package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap

@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CardContent Should render with name - both 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrollboth"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test Animation
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - both 2`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly preventScrollBubbleBoth"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - horizontal 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrollx"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test Animation
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - horizontal 2`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly preventScrollBubbleX"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - none 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrollnone"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test Animation
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - vertical 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test Animation
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent Should render with name - vertical 2`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly preventScrollBubbleY"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    <div>
+      Test
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering children 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering customClass is true 1`] = `
+<DocumentFragment>
+  <div
+    class="cardCustomClass grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering isScrollAttribute is true 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-scroll="true"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering shrink is true 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOn scrolly"
+    data-id="CardContent"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardContent rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="grow basis shrinkOff scrolly"
+    data-id="CardContent"
+    data-selector-id="cardContent"
+    data-test-id="CardContent"
+  />
+</DocumentFragment>
+`;

package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CardHeader rendering the Children is true 1`] = `
+<DocumentFragment>
+  <div
+    class="notScroll  shrinkOff"
+    data-id="CardHeader"
+    data-selector-id="cardHeader"
+    data-test-id="CardHeader"
+  >
+    Children
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardHeader rendering the customClass  1`] = `
+<DocumentFragment>
+  <div
+    class="notScroll cardHeader-class shrinkOff"
+    data-id="CardHeader"
+    data-selector-id="cardHeader"
+    data-test-id="CardHeader"
+  >
+    Children
+  </div>
+</DocumentFragment>
+`;
+
+exports[`CardHeader rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="notScroll  shrinkOff"
+    data-id="CardHeader"
+    data-selector-id="cardHeader"
+    data-test-id="CardHeader"
+  />
+</DocumentFragment>
+`;
+
+exports[`CardHeader rendering the isScroll is true 1`] = `
+<DocumentFragment>
+  <div
+    class="scroll  shrinkOff"
+    data-id="CardHeader"
+    data-selector-id="cardHeader"
+    data-test-id="CardHeader"
+  >
+    Children
+  </div>
+</DocumentFragment>
+`;

package/es/ListItem/ListItem.js

@@ -7,6 +7,9 @@ import { ListItem_Props } from "./props/propTypes";
 /**** Components ****/
 
 import { Icon } from '@zohodesk/icons';
+/*** Utils ****/
+
+import { renderNode, isRenderable } from '@zohodesk/utils';
 /**** CSS ****/
 
 import style from "./ListItem.module.css";
@@ -71,7 +74,8 @@ export default class ListItem extends React.Component {
       customClass,
       customProps,
       needMultiLineText,
-      secondaryValue
+      secondaryValue,
+      renderValueRightPlaceholderNode
     } = this.props;
     let {
       ListItemProps = {},
@@ -79,7 +83,8 @@ export default class ListItem extends React.Component {
     } = customProps;
     let {
       customListItem = '',
-      customTickIcon = ''
+      customTickIcon = '',
+      customValueRightPlaceholder = ''
     } = customClass;
     const listA11y = {
       ariaHidden: true,
@@ -123,7 +128,9 @@ export default class ListItem extends React.Component {
       shrink: true,
       adjust: true,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value) : null, children ? /*#__PURE__*/React.createElement(Box, {
+    }, value) : null, isRenderable(renderValueRightPlaceholderNode) ? /*#__PURE__*/React.createElement(Box, {
+      className: customValueRightPlaceholder
+    }, renderNode(renderValueRightPlaceholderNode)) : null, children ? /*#__PURE__*/React.createElement(Box, {
       shrink: true,
       adjust: true,
       className: style.children

package/es/ListItem/ListItemWithAvatar.js

@@ -9,6 +9,9 @@ import { ListItemWithAvatar_Props } from "./props/propTypes";
 import Avatar from "../Avatar/Avatar";
 import AvatarTeam from "../AvatarTeam/AvatarTeam";
 import { Icon } from '@zohodesk/icons';
+/*** Utils ****/
+
+import { renderNode, isRenderable } from '@zohodesk/utils';
 /**** CSS ****/
 
 import style from "./ListItem.module.css";
@@ -76,6 +79,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customProps,
       needMultiLineText,
       secondaryValue,
+      renderValueRightPlaceholderNode,
       lhsAlignContent
     } = this.props;
     let {
@@ -87,7 +91,8 @@ export default class ListItemWithAvatar extends React.PureComponent {
     let {
       customListItem = '',
       customAvatar = '',
-      customAvatarTeam = ''
+      customAvatarTeam = '',
+      customValueRightPlaceholder = ''
     } = customClass;
     const listA11y = {
       ariaHidden: true,
@@ -148,16 +153,20 @@ export default class ListItemWithAvatar extends React.PureComponent {
       ...AvatarProps
     }))) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      shrink: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "column"
+      className: style.leftBox
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.titleBox
     }, value ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true,
+      adjust: true,
       "data-title": isDisabled ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+    }, value) : null, isRenderable(renderValueRightPlaceholderNode) ? /*#__PURE__*/React.createElement(Box, {
+      className: customValueRightPlaceholder
+    }, renderNode(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
       className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
-    }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/React.createElement(Box, {
+    }, secondaryValue) : null), needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,

package/es/ListItem/ListItemWithCheckBox.js

@@ -4,6 +4,7 @@ import { ListItemWithCheckBoxDefaultProps } from "./props/defaultProps";
 import { ListItemWithCheckBox_Props } from "./props/propTypes";
 import CheckBox from "../CheckBox/CheckBox";
 import { Box, Container } from "../Layout";
+import { renderNode, isRenderable } from '@zohodesk/utils';
 import style from "./ListItem.module.css";
 export default class ListItemWithCheckBox extends React.Component {
   constructor(props) {
@@ -61,6 +62,7 @@ export default class ListItemWithCheckBox extends React.Component {
       customProps,
       needMultiLineText,
       secondaryValue,
+      renderValueRightPlaceholderNode,
       lhsAlignContent,
       lhsJustifyContent
     } = this.props;
@@ -75,7 +77,8 @@ export default class ListItemWithCheckBox extends React.Component {
     let {
       customListItem = '',
       customCheckBox = '',
-      customLabel = ''
+      customLabel = '',
+      customValueRightPlaceholder = ''
     } = customClass;
     return /*#__PURE__*/React.createElement(ListContainer, {
       a11y: listA11y,
@@ -112,16 +115,20 @@ export default class ListItemWithCheckBox extends React.Component {
       }
     }))), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      shrink: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "column"
+      className: style.leftBox
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.titleBox
     }, value ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true,
+      adjust: true,
       "data-title": isDisabled ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+    }, value) : null, isRenderable(renderValueRightPlaceholderNode) ? /*#__PURE__*/React.createElement(Box, {
+      className: customValueRightPlaceholder
+    }, 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/ListItemWithIcon.js

@@ -5,6 +5,9 @@ import { Icon } from '@zohodesk/icons';
 import ListContainer from "./ListContainer";
 import { ListItemWithIconDefaultProps } from "./props/defaultProps";
 import { ListItemWithIcon_Props } from "./props/propTypes";
+/*** Utils ****/
+
+import { renderNode, isRenderable } from '@zohodesk/utils';
 /**** CSS ****/
 
 import style from "./ListItem.module.css";
@@ -69,9 +72,11 @@ export default class ListItemWithIcon extends React.Component {
       disableTitle,
       a11y,
       customClass,
+      customValueRightPlaceholderClass,
       customProps,
       needMultiLineText,
       secondaryValue,
+      renderValueRightPlaceholderNode,
       lhsAlignContent,
       lhsJustifyContent
     } = this.props;
@@ -127,17 +132,21 @@ export default class ListItemWithIcon extends React.Component {
       className: iconClass
     }) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      shrink: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "column"
+      className: style.leftBox
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.titleBox
     }, value ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true,
+      adjust: true,
       className: needMultiLineText ? style.multiLineValue : style.value,
       "data-title": isDisabled ? null : title,
       dataId: `${dataIdString}_Text`
-    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+    }, value) : null, isRenderable(renderValueRightPlaceholderNode) ? /*#__PURE__*/React.createElement(Box, {
+      className: customValueRightPlaceholderClass
+    }, renderNode(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
       className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
-    }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/React.createElement(Box, {
+    }, secondaryValue) : null), needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,

package/es/ListItem/ListItemWithRadio.js

@@ -4,6 +4,7 @@ import { Box, Container } from "../Layout";
 import ListContainer from "./ListContainer";
 import { ListItemWithRadioDefaultProps } from "./props/defaultProps";
 import { ListItemWithRadio_Props } from "./props/propTypes";
+import { renderNode, isRenderable } from '@zohodesk/utils';
 import style from "./ListItem.module.css";
 export default class ListItemWithRadio extends React.Component {
   constructor(props) {
@@ -62,6 +63,7 @@ export default class ListItemWithRadio extends React.Component {
       customProps,
       needMultiLineText,
       secondaryValue,
+      renderValueRightPlaceholderNode,
       lhsAlignContent,
       lhsJustifyContent
     } = this.props;
@@ -76,7 +78,8 @@ export default class ListItemWithRadio extends React.Component {
     let {
       customListItem = '',
       customRadio = '',
-      customRadioWrap = ''
+      customRadioWrap = '',
+      customValueRightPlaceholder = ''
     } = customClass;
     return /*#__PURE__*/React.createElement(ListContainer, {
       a11y: listA11y,
@@ -115,16 +118,20 @@ export default class ListItemWithRadio extends React.Component {
       }
     }))), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      shrink: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "column"
+      className: style.leftBox
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.titleBox
     }, value ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true,
+      adjust: true,
       "data-title": disableTitle ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+    }, value) : null, isRenderable(renderValueRightPlaceholderNode) ? /*#__PURE__*/React.createElement(Box, {
+      className: customValueRightPlaceholder
+    }, 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__/ListItem.spec.js

@@ -8,4 +8,23 @@ describe('ListItem', () => {
     } = render( /*#__PURE__*/React.createElement(ListItem, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItem with renderValueRightPlaceholderNode', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Custom Placeholder")
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItem with renderValueRightPlaceholderNode & it\'s custom class', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItem, {
+      renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement("div", null, "Custom Placeholder"),
+      customClass: {
+        customValueRightPlaceholder: "customValueRightPlaceholderClass"
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,83 @@
 // 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