@zohodesk/components 1.6.32 → 1.6.34

package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap

@@ -1,6 +1,39 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`DateTimePopupFooter rendering the defult props 1`] = `
+exports[`DateTimePopupFooter Render with dataId 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-row d-items-center footer"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <button
+      class="bold primaryfilled medium"
+      data-id="customFooter_saveBtn"
+      data-selector-id="button"
+      data-test-id="customFooter_saveBtn"
+      type="button"
+    >
+      Button
+    </button>
+    <span
+      class="space"
+    />
+    <button
+      class="bold secondary medium"
+      data-id="customFooter_clearBtn"
+      data-selector-id="button"
+      data-test-id="customFooter_clearBtn"
+      type="button"
+    >
+      Button
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateTimePopupFooter Render with default props 1`] = `
 <DocumentFragment>
   <div
     class="d-flex d-flex-row d-items-center footer"
@@ -32,3 +65,36 @@ exports[`DateTimePopupFooter rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`DateTimePopupFooter Render with submitText and cancelText 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-row d-items-center footer"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <button
+      class="bold primaryfilled medium"
+      data-id="DateTimePopupFooter_saveBtn"
+      data-selector-id="button"
+      data-test-id="DateTimePopupFooter_saveBtn"
+      type="button"
+    >
+      Save
+    </button>
+    <span
+      class="space"
+    />
+    <button
+      class="bold secondary medium"
+      data-id="DateTimePopupFooter_clearBtn"
+      data-selector-id="button"
+      data-test-id="DateTimePopupFooter_clearBtn"
+      type="button"
+    >
+      Cancel
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`DateTimePopupHeader rendering the defult props 1`] = `
+exports[`DateTimePopupHeader Render with default props 1`] = `
 <DocumentFragment>
   <div
     class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center header"
@@ -70,3 +70,189 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`DateTimePopupHeader Render with isYearView=true 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center header"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="d-flex-shrink-0 dateText"
+      data-id="selectYear"
+      data-selector-id="box"
+      data-test-id="selectYear"
+    >
+      <h2
+        class="reset thMonYear"
+        tabindex="0"
+      />
+      <span>
+        <i
+          aria-hidden="true"
+          class="zd_font_icons ff icon-dropdown basic d-inline-block d-align-middle downArrow"
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size12);"
+        />
+      </span>
+    </div>
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateTimePopupHeader Render with prevMonthTitleText and nextMonthTitleText 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center header"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="d-flex-shrink-0 dateText"
+      data-id="selectYear"
+      data-selector-id="box"
+      data-test-id="selectYear"
+    >
+      <h2
+        class="reset thMonYear"
+        tabindex="0"
+      />
+      <span>
+        <i
+          aria-hidden="true"
+          class="zd_font_icons ff icon-dropdown basic d-inline-block d-align-middle downArrow"
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size12);"
+        />
+      </span>
+    </div>
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    />
+    <div
+      aria-label="prevMonth"
+      class="d-flex-shrink-0 thArrow grid"
+      data-id="prevMonth"
+      data-selector-id="box"
+      data-test-id="prevMonth"
+      data-title="Previous Month"
+      tabindex="0"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons ff icon-arrow-left3 basic d-inline-block d-align-middle rtl d-font-bold"
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      aria-label="nextMonth"
+      class="d-flex-shrink-0 thArrow grid navigation"
+      data-id="nextMonth"
+      data-selector-id="box"
+      data-test-id="nextMonth"
+      data-title="Next Month"
+      tabindex="0"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons ff icon-arrow-right3 basic d-inline-block d-align-middle rtl d-font-bold"
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateTimePopupHeader Render with showMonthTxt 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center header"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="d-flex-shrink-0 dateText"
+      data-id="selectYear"
+      data-selector-id="box"
+      data-test-id="selectYear"
+    >
+      <h2
+        class="reset thMonYear"
+        data-title="January 2024"
+        tabindex="0"
+      >
+        January 2024
+      </h2>
+      <span>
+        <i
+          aria-hidden="true"
+          class="zd_font_icons ff icon-dropdown basic d-inline-block d-align-middle downArrow"
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size12);"
+        />
+      </span>
+    </div>
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    />
+    <div
+      aria-label="prevMonth"
+      class="d-flex-shrink-0 thArrow grid"
+      data-id="prevMonth"
+      data-selector-id="box"
+      data-test-id="prevMonth"
+      tabindex="0"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons ff icon-arrow-left3 basic d-inline-block d-align-middle rtl d-font-bold"
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      aria-label="nextMonth"
+      class="d-flex-shrink-0 thArrow grid navigation"
+      data-id="nextMonth"
+      data-selector-id="box"
+      data-test-id="nextMonth"
+      tabindex="0"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons ff icon-arrow-right3 basic d-inline-block d-align-middle rtl d-font-bold"
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

@@ -1,6 +1,24 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`DateWidget rendering the defult props 1`] = `
+exports[`DateWidget Render with children 1`] = `
+<DocumentFragment>
+  <div
+    class="container"
+  >
+    <div
+      class="enabled"
+      data-id="dateWidget_widget"
+      data-test-id="dateWidget_widget"
+    >
+      <span>
+        Custom Trigger
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateWidget Render with default props 1`] = `
 <DocumentFragment>
   <div
     class="container"
@@ -72,3 +90,249 @@ exports[`DateWidget rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`DateWidget Render with isDisabled 1`] = `
+<DocumentFragment>
+  <div
+    class="container"
+  >
+    <div
+      class="textBox disabled"
+      data-id="dateWidget_disabled"
+      data-test-id="dateWidget_disabled"
+    >
+      <div
+        class="d-flex d-flex-row varClass customContainer border_bottom disabled borderColor_default hasBorder container placeHolder dateDisplayValue"
+        data-selector-id="textBoxIcon"
+        data-title=""
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            autocomplete="off"
+            class="pointer container medium default borderColor_default"
+            data-id="dateWidget"
+            data-selector-id="textBoxIcon"
+            data-test-id="dateWidget"
+            disabled=""
+            maxlength="250"
+            type="text"
+            value="MM/dd/yyyy"
+          />
+        </div>
+        <div
+          class="d-flex-shrink-0 iconContainer"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex d-h-full d-w-full d-flex-row"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="d-flex-shrink-0 icon"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="d-inline-flex d-flex-col d-items-center d-justify-center datePickIcon"
+                data-id="dateWidget_datePicker"
+                data-selector-id="container"
+                data-test-id="dateWidget_datePicker"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons ff icon-Datepicker 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_size12);"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateWidget Render with isReadOnly 1`] = `
+<DocumentFragment>
+  <div
+    class="container"
+  >
+    <div
+      class="textBox readOnly"
+      data-id="dateWidget_readOnly"
+      data-test-id="dateWidget_readOnly"
+    >
+      <div
+        class="d-flex d-flex-row varClass customContainer border_bottom readonly borderColor_default hasBorder container placeHolder dateDisplayValue"
+        data-selector-id="textBoxIcon"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            autocomplete="off"
+            class="readonly pointer container medium default borderColor_default"
+            data-id="dateWidget"
+            data-selector-id="textBoxIcon"
+            data-test-id="dateWidget"
+            maxlength="250"
+            readonly=""
+            type="text"
+            value="MM/dd/yyyy"
+          />
+        </div>
+        <div
+          class="d-flex-shrink-0 iconContainer"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex d-h-full d-w-full d-flex-row"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="d-flex-shrink-0 icon"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="d-inline-flex d-flex-col d-items-center d-justify-center datePickIcon"
+                data-id="dateWidget_datePicker"
+                data-selector-id="container"
+                data-test-id="dateWidget_datePicker"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons ff icon-Datepicker 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_size12);"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateWidget Render with value 1`] = `
+<DocumentFragment>
+  <div
+    class="container"
+  >
+    <div
+      class="textBox enabled"
+      data-id="dateWidget_widget"
+      data-test-id="dateWidget_widget"
+    >
+      <div
+        class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container dateDisplayValue"
+        data-selector-id="textBoxIcon"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            autocomplete="off"
+            class="pointer container medium default effect borderColor_default"
+            data-id="dateWidget"
+            data-selector-id="textBoxIcon"
+            data-test-id="dateWidget"
+            maxlength="250"
+            type="text"
+            value="01/15/2024"
+          />
+        </div>
+        <div
+          class="d-flex-shrink-0 iconContainer"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex d-h-full d-w-full d-flex-row"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <button
+              class="d-flex-shrink-0 buttonReset icon"
+              data-id="dateWidget_ClearIcon"
+              data-selector-id="box"
+              data-test-id="dateWidget_ClearIcon"
+              data-title="Clear"
+            >
+              <div
+                aria-hidden="true"
+                class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
+                data-id="containerComponent"
+                data-selector-id="container"
+                data-test-id="containerComponent"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons ff icon-delete basic d-inline-block d-align-middle rtl"
+                  data-id="fontIcon"
+                  data-selector-id="fontIcon"
+                  data-test-id="fontIcon"
+                  style="--zd-iconfont-size: var(--zd_font_size14);"
+                />
+              </div>
+            </button>
+            <div
+              class="d-flex-shrink-0 icon"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="d-inline-flex d-flex-col d-items-center d-justify-center datePickIcon"
+                data-id="dateWidget_datePicker"
+                data-selector-id="container"
+                data-test-id="dateWidget_datePicker"
+              >
+                <i
+                  aria-hidden="true"
+                  class="zd_font_icons ff icon-Datepicker 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_size12);"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;