@zohodesk/components 1.6.31 → 1.6.34

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

@@ -13,6 +13,608 @@ exports[`ListContainer ListContainer with Align Base Line 1`] = `
 </DocumentFragment>
 `;
 
+exports[`ListContainer Render with a11y extra attributes 1`] = `
+<DocumentFragment>
+  <li
+    aria-describedby="list-container-description"
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with a11y insetFocus=false 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="false"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with a11y role, ariaSelected and ariaLabel 1`] = `
+<DocumentFragment>
+  <li
+    aria-label="List container label"
+    aria-selected="true"
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    role="option"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer 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="containerComponent"
+    data-selected="true"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with active and needBorder=false 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default activedefault"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selected="true"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with active and palette as danger 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium activedanger activewithBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selected="true"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with active and palette as dark 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium dark activedark activewithBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selected="true"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with active and palette as primary 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium activeprimary activewithBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selected="true"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with active and palette as secondary 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium secondary activesecondary activewithBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selected="true"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with align as around 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-justify-around list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with align as between 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-justify-between list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with align as both 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center d-justify-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with align as bottom 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-end list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with align as horizontal 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-justify-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with align as left 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-justify-start list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with align as right 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-justify-end list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with align as top 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-start list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer 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="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with autoHover and palette as danger 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium dangerEffect withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with autoHover and palette as dark 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium dark darkEffect withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with autoHover and palette as primary 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium primaryEffect withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with autoHover and palette as secondary 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium secondary secondaryEffect withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with children 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <span>
+      List container content
+    </span>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with customClass 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default withBorder custom-list-container"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with customProps 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="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with dataId and 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-container-dataId"
+    data-selector-id="list-container-dataSelectorId"
+    data-test-id="list-container-dataId"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer 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="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with highlight and palette as danger 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium dangerHover withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with highlight and palette as dark 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium dark darkHover withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with highlight and palette as primary 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium primaryHover withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with highlight and palette as secondary 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium secondary secondaryHover withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with highlight, autoHover 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="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer Render with isDisabled and disableTitle 1`] = `
+<DocumentFragment>
+  <li
+    class="d-flex d-flex-row d-items-center list medium default disable withBorder"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    data-title="Disabled title"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer 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="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    href="/list-container"
+    target="_blank"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer 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="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    href="/list-container"
+    target="_self"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer 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="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer 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="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer 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="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer 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="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer 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="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer 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="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer 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="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer 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="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer 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="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`ListContainer 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="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    data-title="List container title"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
 exports[`ListContainer rendering the defult props 1`] = `
 <DocumentFragment>
   <li