npm - @epam/uui - Versions diffs - 5.5.1 → 5.5.2 - Mend

@epam/uui 5.5.1 → 5.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (854) hide show

package/components/pickers/__tests__/__snapshots__/PickerList.test.tsx.snap ADDED Viewed

@@ -0,0 +1,980 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`PickerList should open body 1`] = `
+<body
+  style="overflow: hidden;"
+>
+  <div>
+    <div>
+      <div
+        aria-posinset="1"
+        aria-selected="false"
+        class="row"
+        role="option"
+      >
+        <label
+          class="container root size-18 uui-radio-input-container uui-color-primary -clickable"
+        >
+          <div
+            class="uui-radioinput"
+          >
+            <input
+              aria-checked="false"
+              type="radio"
+            />
+          </div>
+          <div
+            class="uui-input-label"
+          >
+            Elementary
+          </div>
+        </label>
+      </div>
+      <div
+        aria-posinset="2"
+        aria-selected="false"
+        class="row"
+        role="option"
+      >
+        <label
+          class="container root size-18 uui-radio-input-container uui-color-primary -clickable"
+        >
+          <div
+            class="uui-radioinput"
+          >
+            <input
+              aria-checked="false"
+              type="radio"
+            />
+          </div>
+          <div
+            class="uui-input-label"
+          >
+            Elementary+
+          </div>
+        </label>
+      </div>
+      <div
+        aria-posinset="3"
+        aria-selected="false"
+        class="row"
+        role="option"
+      >
+        <label
+          class="container root size-18 uui-radio-input-container uui-color-primary -clickable"
+        >
+          <div
+            class="uui-radioinput"
+          >
+            <input
+              aria-checked="false"
+              type="radio"
+            />
+          </div>
+          <div
+            class="uui-input-label"
+          >
+            Pre-Intermediate
+          </div>
+        </label>
+      </div>
+      <div
+        aria-posinset="4"
+        aria-selected="false"
+        class="row"
+        role="option"
+      >
+        <label
+          class="container root size-18 uui-radio-input-container uui-color-primary -clickable"
+        >
+          <div
+            class="uui-radioinput"
+          >
+            <input
+              aria-checked="false"
+              type="radio"
+            />
+          </div>
+          <div
+            class="uui-input-label"
+          >
+            Pre-Intermediate+
+          </div>
+        </label>
+      </div>
+      <div
+        aria-posinset="5"
+        aria-selected="false"
+        class="row"
+        role="option"
+      >
+        <label
+          class="container root size-18 uui-radio-input-container uui-color-primary -clickable"
+        >
+          <div
+            class="uui-radioinput"
+          >
+            <input
+              aria-checked="false"
+              type="radio"
+            />
+          </div>
+          <div
+            class="uui-input-label"
+          >
+            Intermediate
+          </div>
+        </label>
+      </div>
+      <button
+        class="container uui-button-box uui-enabled -clickable uui-link_button root uui-size-36 uui-no-left-icon uui-no-right-icon uui-color-primary"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="uui-caption"
+        >
+          SHOW ALL 11
+        </div>
+      </button>
+    </div>
+    <div
+      class="container modalBlocker"
+      style="z-index: 2000;"
+    >
+      <div
+        aria-label="Click to close a modal"
+        class="uui-modal-blocker"
+      />
+      <div
+        aria-modal="true"
+        class="uui-modal-window root modal container"
+        role="dialog"
+        style="width: 600px; height: 700px;"
+      >
+        <div
+          class="uui-flex-row root size-36 padding-24 vPadding-12 spacing-12 root modalHeader container align-items-center"
+        >
+          <div
+            class="root uui-text uui-color-primary uui-font-weight-600 uui-font-style-normal uui-typography line-height-24 font-size-18 v-padding-12 container"
+          >
+            Please select
+          </div>
+          <div
+            class="flexSpacer"
+          />
+          <div
+            class="flexCell"
+            style="min-width: 0; flex-shrink: 0; flex-basis: auto;"
+          >
+            <button
+              aria-label="Close modal"
+              class="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-neutral root"
+              tabindex="0"
+              type="button"
+            >
+              <div
+                class="container uui-icon uui-enabled"
+              >
+                <svg
+                  class=""
+                />
+              </div>
+            </button>
+          </div>
+        </div>
+        <div
+          class="flexCell subHeaderWrapper"
+          style="min-width: 0; flex-basis: 0px;"
+        >
+          <div
+            class="uui-flex-row root size-36 vPadding-24 container align-items-center"
+          >
+            <div
+              class="container uui-input-box -clickable uui-focus root size-36 mode-form"
+              tabindex="-1"
+            >
+              <div
+                class="container uui-icon uui-enabled"
+              >
+                <svg
+                  class=""
+                />
+              </div>
+              <input
+                aria-invalid="false"
+                class="uui-input"
+                inputmode="search"
+                placeholder="Type text for quick search"
+                tabindex="-1"
+                type="search"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="uui-flex-row root size-36 body modal undefined container align-items-center"
+        >
+          <div
+            class="root uui-scroll-bars uui-shadow-top uui-shadow-bottom scrollContainer"
+            style="position: relative; overflow: hidden; width: 100%; height: 100%; display: flex;"
+          >
+            <div
+              style="position: relative; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px; flex: 1 1 auto; display: flex; flex-direction: column;"
+            >
+              <div
+                class="listContainer"
+                style="min-height: 11px;"
+              >
+                <div
+                  style="margin-top: 0px;"
+                >
+                  <div
+                    aria-posinset="1"
+                    aria-selected="false"
+                    class="uui-flex-row pickerRow container -clickable align-items-center"
+                    role="option"
+                  >
+                    <div
+                      class="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                      role="cell"
+                      style="min-width: 0; flex-grow: 1; flex-basis: 0px;"
+                    >
+                      <div
+                        class="contentWrapper"
+                      >
+                        <div
+                          class="renderItem"
+                        >
+                          <div
+                            class="flexCell root uui-typography"
+                            style="min-width: 0; flex-basis: auto;"
+                          >
+                            <div
+                              class="uui-flex-row root size-36 spacing-12 container align-items-center"
+                            >
+                              <div
+                                class="flexCell"
+                                style="min-width: 0; flex-basis: auto;"
+                              >
+                                <div
+                                  class="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
+                                >
+                                  Elementary
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="flexSpacer"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    aria-posinset="2"
+                    aria-selected="false"
+                    class="uui-flex-row pickerRow container -clickable align-items-center"
+                    role="option"
+                  >
+                    <div
+                      class="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                      role="cell"
+                      style="min-width: 0; flex-grow: 1; flex-basis: 0px;"
+                    >
+                      <div
+                        class="contentWrapper"
+                      >
+                        <div
+                          class="renderItem"
+                        >
+                          <div
+                            class="flexCell root uui-typography"
+                            style="min-width: 0; flex-basis: auto;"
+                          >
+                            <div
+                              class="uui-flex-row root size-36 spacing-12 container align-items-center"
+                            >
+                              <div
+                                class="flexCell"
+                                style="min-width: 0; flex-basis: auto;"
+                              >
+                                <div
+                                  class="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
+                                >
+                                  Elementary+
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="flexSpacer"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    aria-posinset="3"
+                    aria-selected="false"
+                    class="uui-flex-row pickerRow container -clickable align-items-center"
+                    role="option"
+                  >
+                    <div
+                      class="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                      role="cell"
+                      style="min-width: 0; flex-grow: 1; flex-basis: 0px;"
+                    >
+                      <div
+                        class="contentWrapper"
+                      >
+                        <div
+                          class="renderItem"
+                        >
+                          <div
+                            class="flexCell root uui-typography"
+                            style="min-width: 0; flex-basis: auto;"
+                          >
+                            <div
+                              class="uui-flex-row root size-36 spacing-12 container align-items-center"
+                            >
+                              <div
+                                class="flexCell"
+                                style="min-width: 0; flex-basis: auto;"
+                              >
+                                <div
+                                  class="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
+                                >
+                                  Pre-Intermediate
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="flexSpacer"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    aria-posinset="4"
+                    aria-selected="false"
+                    class="uui-flex-row pickerRow container -clickable align-items-center"
+                    role="option"
+                  >
+                    <div
+                      class="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                      role="cell"
+                      style="min-width: 0; flex-grow: 1; flex-basis: 0px;"
+                    >
+                      <div
+                        class="contentWrapper"
+                      >
+                        <div
+                          class="renderItem"
+                        >
+                          <div
+                            class="flexCell root uui-typography"
+                            style="min-width: 0; flex-basis: auto;"
+                          >
+                            <div
+                              class="uui-flex-row root size-36 spacing-12 container align-items-center"
+                            >
+                              <div
+                                class="flexCell"
+                                style="min-width: 0; flex-basis: auto;"
+                              >
+                                <div
+                                  class="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
+                                >
+                                  Pre-Intermediate+
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="flexSpacer"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    aria-posinset="5"
+                    aria-selected="false"
+                    class="uui-flex-row pickerRow container -clickable align-items-center"
+                    role="option"
+                  >
+                    <div
+                      class="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                      role="cell"
+                      style="min-width: 0; flex-grow: 1; flex-basis: 0px;"
+                    >
+                      <div
+                        class="contentWrapper"
+                      >
+                        <div
+                          class="renderItem"
+                        >
+                          <div
+                            class="flexCell root uui-typography"
+                            style="min-width: 0; flex-basis: auto;"
+                          >
+                            <div
+                              class="uui-flex-row root size-36 spacing-12 container align-items-center"
+                            >
+                              <div
+                                class="flexCell"
+                                style="min-width: 0; flex-basis: auto;"
+                              >
+                                <div
+                                  class="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
+                                >
+                                  Intermediate
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="flexSpacer"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    aria-posinset="6"
+                    aria-selected="false"
+                    class="uui-flex-row pickerRow container -clickable align-items-center"
+                    role="option"
+                  >
+                    <div
+                      class="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                      role="cell"
+                      style="min-width: 0; flex-grow: 1; flex-basis: 0px;"
+                    >
+                      <div
+                        class="contentWrapper"
+                      >
+                        <div
+                          class="renderItem"
+                        >
+                          <div
+                            class="flexCell root uui-typography"
+                            style="min-width: 0; flex-basis: auto;"
+                          >
+                            <div
+                              class="uui-flex-row root size-36 spacing-12 container align-items-center"
+                            >
+                              <div
+                                class="flexCell"
+                                style="min-width: 0; flex-basis: auto;"
+                              >
+                                <div
+                                  class="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
+                                >
+                                  Intermediate+
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="flexSpacer"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    aria-posinset="7"
+                    aria-selected="false"
+                    class="uui-flex-row pickerRow container -clickable align-items-center"
+                    role="option"
+                  >
+                    <div
+                      class="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                      role="cell"
+                      style="min-width: 0; flex-grow: 1; flex-basis: 0px;"
+                    >
+                      <div
+                        class="contentWrapper"
+                      >
+                        <div
+                          class="renderItem"
+                        >
+                          <div
+                            class="flexCell root uui-typography"
+                            style="min-width: 0; flex-basis: auto;"
+                          >
+                            <div
+                              class="uui-flex-row root size-36 spacing-12 container align-items-center"
+                            >
+                              <div
+                                class="flexCell"
+                                style="min-width: 0; flex-basis: auto;"
+                              >
+                                <div
+                                  class="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
+                                >
+                                  Upper-Intermediate
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="flexSpacer"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    aria-posinset="8"
+                    aria-selected="false"
+                    class="uui-flex-row pickerRow container -clickable align-items-center"
+                    role="option"
+                  >
+                    <div
+                      class="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                      role="cell"
+                      style="min-width: 0; flex-grow: 1; flex-basis: 0px;"
+                    >
+                      <div
+                        class="contentWrapper"
+                      >
+                        <div
+                          class="renderItem"
+                        >
+                          <div
+                            class="flexCell root uui-typography"
+                            style="min-width: 0; flex-basis: auto;"
+                          >
+                            <div
+                              class="uui-flex-row root size-36 spacing-12 container align-items-center"
+                            >
+                              <div
+                                class="flexCell"
+                                style="min-width: 0; flex-basis: auto;"
+                              >
+                                <div
+                                  class="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
+                                >
+                                  Upper-Intermediate+
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="flexSpacer"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    aria-posinset="9"
+                    aria-selected="false"
+                    class="uui-flex-row pickerRow container -clickable align-items-center"
+                    role="option"
+                  >
+                    <div
+                      class="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                      role="cell"
+                      style="min-width: 0; flex-grow: 1; flex-basis: 0px;"
+                    >
+                      <div
+                        class="contentWrapper"
+                      >
+                        <div
+                          class="renderItem"
+                        >
+                          <div
+                            class="flexCell root uui-typography"
+                            style="min-width: 0; flex-basis: auto;"
+                          >
+                            <div
+                              class="uui-flex-row root size-36 spacing-12 container align-items-center"
+                            >
+                              <div
+                                class="flexCell"
+                                style="min-width: 0; flex-basis: auto;"
+                              >
+                                <div
+                                  class="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
+                                >
+                                  Advanced
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="flexSpacer"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    aria-posinset="10"
+                    aria-selected="false"
+                    class="uui-flex-row pickerRow container -clickable align-items-center"
+                    role="option"
+                  >
+                    <div
+                      class="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                      role="cell"
+                      style="min-width: 0; flex-grow: 1; flex-basis: 0px;"
+                    >
+                      <div
+                        class="contentWrapper"
+                      >
+                        <div
+                          class="renderItem"
+                        >
+                          <div
+                            class="flexCell root uui-typography"
+                            style="min-width: 0; flex-basis: auto;"
+                          >
+                            <div
+                              class="uui-flex-row root size-36 spacing-12 container align-items-center"
+                            >
+                              <div
+                                class="flexCell"
+                                style="min-width: 0; flex-basis: auto;"
+                              >
+                                <div
+                                  class="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
+                                >
+                                  Advanced+
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="flexSpacer"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    aria-posinset="11"
+                    aria-selected="false"
+                    class="uui-flex-row pickerRow container -clickable align-items-center"
+                    role="option"
+                  >
+                    <div
+                      class="flexCell cell data-picker-cell size-36 padding-24 padding-left-24 align-widgets-top"
+                      role="cell"
+                      style="min-width: 0; flex-grow: 1; flex-basis: 0px;"
+                    >
+                      <div
+                        class="contentWrapper"
+                      >
+                        <div
+                          class="renderItem"
+                        >
+                          <div
+                            class="flexCell root uui-typography"
+                            style="min-width: 0; flex-basis: auto;"
+                          >
+                            <div
+                              class="uui-flex-row root size-36 spacing-12 container align-items-center"
+                            >
+                              <div
+                                class="flexCell"
+                                style="min-width: 0; flex-basis: auto;"
+                              >
+                                <div
+                                  class="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 text container"
+                                >
+                                  Proficiency
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="flexSpacer"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="container uui-blocker-container root"
+            >
+              <div />
+            </div>
+            <div
+              class="uui-track-horizontal"
+              style="position: absolute; height: 6px; display: none;"
+            >
+              <div
+                class="uui-thumb-horizontal"
+              />
+            </div>
+            <div
+              class="uui-track-vertical"
+              style="position: absolute; width: 6px; display: none;"
+            >
+              <div
+                class="uui-thumb-vertical"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="uui-flex-row root size-36 padding-24 vPadding-24 spacing-12 root modalFooter container align-items-center"
+        >
+          <div
+            class="flexSpacer"
+          />
+          <button
+            class="container uui-button-box uui-enabled -clickable root uui-button uui-fill-outline uui-color-secondary uui-size-36"
+            tabindex="0"
+            type="button"
+          >
+            <div
+              class="uui-caption"
+            >
+              Cancel
+            </div>
+          </button>
+          <button
+            class="container uui-button-box uui-enabled -clickable root uui-button uui-fill-solid uui-color-accent uui-size-36"
+            tabindex="0"
+            type="button"
+          >
+            <div
+              class="uui-caption"
+            >
+              Select
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+exports[`PickerList should render with maximum props 1`] = `
+<body>
+  <div>
+    <div>
+      <div
+        aria-checked="true"
+        aria-posinset="2"
+        class="row"
+        role="option"
+      >
+        <label
+          class="container uui-checkbox-container root size-18 mode-form uui-color-primary -clickable"
+        >
+          <div
+            class="uui-checkbox uui-checked"
+          >
+            <input
+              aria-checked="true"
+              checked=""
+              tabindex="0"
+              type="checkbox"
+            />
+            <div
+              class="container uui-icon uui-enabled"
+            >
+              <svg
+                class=""
+              />
+            </div>
+          </div>
+          <div
+            class="uui-input-label"
+          >
+            A1+
+          </div>
+        </label>
+      </div>
+      <div
+        aria-checked="true"
+        aria-posinset="1"
+        class="row"
+        role="option"
+      >
+        <label
+          class="container uui-checkbox-container root size-18 mode-form uui-color-primary -clickable"
+        >
+          <div
+            class="uui-checkbox uui-checked"
+          >
+            <input
+              aria-checked="true"
+              checked=""
+              tabindex="0"
+              type="checkbox"
+            />
+            <div
+              class="container uui-icon uui-enabled"
+            >
+              <svg
+                class=""
+              />
+            </div>
+          </div>
+          <div
+            class="uui-input-label"
+          >
+            A1
+          </div>
+        </label>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+exports[`PickerList should render with minimum props 1`] = `
+<body>
+  <div>
+    <div>
+      <div
+        aria-posinset="1"
+        aria-selected="false"
+        class="row"
+        role="option"
+      >
+        <label
+          class="container root size-18 uui-radio-input-container uui-color-primary -clickable"
+        >
+          <div
+            class="uui-radioinput"
+          >
+            <input
+              aria-checked="false"
+              type="radio"
+            />
+          </div>
+          <div
+            class="uui-input-label"
+          >
+            A1
+          </div>
+        </label>
+      </div>
+      <div
+        aria-posinset="2"
+        aria-selected="false"
+        class="row"
+        role="option"
+      >
+        <label
+          class="container root size-18 uui-radio-input-container uui-color-primary -clickable"
+        >
+          <div
+            class="uui-radioinput"
+          >
+            <input
+              aria-checked="false"
+              type="radio"
+            />
+          </div>
+          <div
+            class="uui-input-label"
+          >
+            A1+
+          </div>
+        </label>
+      </div>
+      <div
+        aria-posinset="3"
+        aria-selected="false"
+        class="row"
+        role="option"
+      >
+        <label
+          class="container root size-18 uui-radio-input-container uui-color-primary -clickable"
+        >
+          <div
+            class="uui-radioinput"
+          >
+            <input
+              aria-checked="false"
+              type="radio"
+            />
+          </div>
+          <div
+            class="uui-input-label"
+          >
+            A2
+          </div>
+        </label>
+      </div>
+      <div
+        aria-posinset="4"
+        aria-selected="false"
+        class="row"
+        role="option"
+      >
+        <label
+          class="container root size-18 uui-radio-input-container uui-color-primary -clickable"
+        >
+          <div
+            class="uui-radioinput"
+          >
+            <input
+              aria-checked="false"
+              type="radio"
+            />
+          </div>
+          <div
+            class="uui-input-label"
+          >
+            A2+
+          </div>
+        </label>
+      </div>
+      <div
+        aria-posinset="5"
+        aria-selected="false"
+        class="row"
+        role="option"
+      >
+        <label
+          class="container root size-18 uui-radio-input-container uui-color-primary -clickable"
+        >
+          <div
+            class="uui-radioinput"
+          >
+            <input
+              aria-checked="false"
+              type="radio"
+            />
+          </div>
+          <div
+            class="uui-input-label"
+          >
+            B1
+          </div>
+        </label>
+      </div>
+      <button
+        class="container uui-button-box uui-enabled -clickable uui-link_button root uui-size-36 uui-no-left-icon uui-no-right-icon uui-color-primary"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="uui-caption"
+        >
+          SHOW ALL 11
+        </div>
+      </button>
+    </div>
+  </div>
+</body>
+`;