@zohodesk/components 1.6.32 → 1.6.34

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

@@ -320,6 +320,2015 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS alig
 </DocumentFragment>
 `;
 
+exports[`ListItemWithIcon Render with a11y ariaHidden=false with active and needTick 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default activedefault mediumwithTick activewithBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selected="true"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+      <div
+        aria-hidden="false"
+        class="d-flex-shrink-0 tickIcon"
+        data-id="list_tickIcon"
+        data-selector-id="listItemWithIcon_tickIcon"
+        data-test-id="list_tickIcon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons ff icon-ticknew basic d-inline-block d-align-middle"
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size8);"
+        />
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with a11y role, ariaSelected and ariaLabel 1`] = `
+<DocumentFragment>
+  <li
+    aria-label="Item label"
+    aria-selected="true"
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="menuitem"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with active 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default activedefault activewithBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selected="true"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with active and needTick 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default activedefault mediumwithTick activewithBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selected="true"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        class="d-flex-shrink-0 tickIcon"
+        data-id="list_tickIcon"
+        data-selector-id="listItemWithIcon_tickIcon"
+        data-test-id="list_tickIcon"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons ff icon-ticknew basic d-inline-block d-align-middle"
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size8);"
+        />
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with autoHover 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default defaultEffect withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with customClass 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder custom-list-item"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with customProps ContainerProps align as baseline 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-baseline list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with customProps ListItemProps 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-custom-attr="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with customValueRightPlaceholderClass without renderValueRightPlaceholderNode 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with dataId 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list-item-with-icon-dataId"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list-item-with-icon-dataId"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list-item-with-icon-dataId_Text"
+            data-selector-id="box"
+            data-test-id="list-item-with-icon-dataId_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with dataId and iconName 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list-item-with-icon-dataId"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list-item-with-icon-dataId"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-hidden="true"
+        class="iconBox lhsJustifyContent_center"
+        data-id="list-item-with-icon-dataId_Icon"
+        data-test-id="list-item-with-icon-dataId_Icon"
+      >
+        <div
+          class="d-flex-shrink-0 d-self-start iconWrapper"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-info basic d-inline-block d-align-middle"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size10);"
+          />
+        </div>
+      </div>
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list-item-with-icon-dataId_Text"
+            data-selector-id="box"
+            data-test-id="list-item-with-icon-dataId_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with dataSelectorId 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="list-item-with-icon-dataSelectorId"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with empty value and dataId 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list-item-with-icon-dataId"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list-item-with-icon-dataId"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        />
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with highlight 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default defaultHover withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with iconClass without iconName 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <span
+        class="custom-icon-class"
+      />
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with iconName and iconClass 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-hidden="true"
+        class="iconBox lhsJustifyContent_center"
+        data-id="list_Icon"
+        data-test-id="list_Icon"
+      >
+        <div
+          class="d-flex-shrink-0 d-self-start iconWrapper"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-info basic d-inline-block d-align-middle custom-icon-class"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size10);"
+          />
+        </div>
+      </div>
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with iconName and iconSize 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-hidden="true"
+        class="iconBox lhsJustifyContent_center"
+        data-id="list_Icon"
+        data-test-id="list_Icon"
+      >
+        <div
+          class="d-flex-shrink-0 d-self-start iconWrapper"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-info basic d-inline-block d-align-middle"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size14);"
+          />
+        </div>
+      </div>
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with iconName and lhsAlignContent as center 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-hidden="true"
+        class="iconBox lhsJustifyContent_center"
+        data-id="list_Icon"
+        data-test-id="list_Icon"
+      >
+        <div
+          class="d-flex-shrink-0 d-self-center iconWrapper"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-info basic d-inline-block d-align-middle"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size10);"
+          />
+        </div>
+      </div>
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with iconName and lhsAlignContent as end 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-hidden="true"
+        class="iconBox lhsJustifyContent_center"
+        data-id="list_Icon"
+        data-test-id="list_Icon"
+      >
+        <div
+          class="d-flex-shrink-0 d-self-end iconWrapper"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-info basic d-inline-block d-align-middle"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size10);"
+          />
+        </div>
+      </div>
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with iconName and lhsJustifyContent as end 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-hidden="true"
+        class="iconBox lhsJustifyContent_end"
+        data-id="list_Icon"
+        data-test-id="list_Icon"
+      >
+        <div
+          class="d-flex-shrink-0 d-self-start iconWrapper"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-info basic d-inline-block d-align-middle"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size10);"
+          />
+        </div>
+      </div>
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with iconName and lhsJustifyContent as start 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-hidden="true"
+        class="iconBox lhsJustifyContent_start"
+        data-id="list_Icon"
+        data-test-id="list_Icon"
+      >
+        <div
+          class="d-flex-shrink-0 d-self-start iconWrapper"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-info basic d-inline-block d-align-middle"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size10);"
+          />
+        </div>
+      </div>
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with iconName as ZD-GN-agent 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-hidden="true"
+        class="iconBox lhsJustifyContent_center"
+        data-id="list_Icon"
+        data-test-id="list_Icon"
+      >
+        <div
+          class="d-flex-shrink-0 d-self-start iconWrapper"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-agent basic d-inline-block d-align-middle"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size10);"
+          />
+        </div>
+      </div>
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with iconName as ZD-GN-info 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        aria-hidden="true"
+        class="iconBox lhsJustifyContent_center"
+        data-id="list_Icon"
+        data-test-id="list_Icon"
+      >
+        <div
+          class="d-flex-shrink-0 d-self-start iconWrapper"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-info basic d-inline-block d-align-middle"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size10);"
+          />
+        </div>
+      </div>
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with isDisabled and title 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default disable withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    data-title="Disabled title"
+    role="option"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with isLink and href 1`] = `
+<DocumentFragment>
+  <a
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    href="/list-item-with-icon"
+    role="option"
+    target="_blank"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </a>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with isLink, href and target as self 1`] = `
+<DocumentFragment>
+  <a
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    href="/list-item-with-icon"
+    role="option"
+    target="_self"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </a>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with needBorder=false 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with needMultiLineText 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink multiLineValue"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with needMultiLineText and secondaryValue 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink multiLineValue"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+        <div
+          class="d-flex-shrink-0 secondaryField multiLine"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="Secondary value"
+        >
+          Secondary value
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with needTick 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default mediumwithTick withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with needTick and size as large 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list large default largewithTick withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with needTick and size as small 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list small default smallwithTick withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with palette as dark 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium dark withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with palette as primary 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with palette as secondary 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium secondary withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with secondaryValue and isDisabled 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default disable withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+        <div
+          class="d-flex-shrink-0 secondaryField secondaryValue"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          Secondary value
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with size as large 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list large default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with size as small 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list small default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with title 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="list_Text"
+            data-selector-id="box"
+            data-test-id="list_Text"
+            data-title="List item title"
+          >
+            List
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithIcon Render with value containing an apostrophe 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="agent_s list"
+    data-selector-id="listItemWithIcon"
+    data-test-id="agent_s list"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 contentWrapper"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="d-flex-shrink-0 titleBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-basis-auto d-min-w-0 d-flex-shrink value"
+            data-id="agent_s list_Text"
+            data-selector-id="box"
+            data-test-id="agent_s list_Text"
+          >
+            Agent's list
+          </div>
+        </div>
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
 exports[`ListItemWithIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <li