@zohodesk/components 1.6.32 → 1.6.34

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

@@ -1,10 +1,314 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Time rendering the defult props 1`] = `
+exports[`Time Render with customProps overriding the hour Select dataId 1`] = `
 <DocumentFragment>
   <span
     class="text"
-  />
+  >
+    Time
+  </span>
+  <div
+    class="d-flex d-flex-row d-items-center timesection"
+    data-id="Time_timeContainer"
+    data-selector-id="container"
+    data-test-id="Time_timeContainer"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="container box_small"
+        data-selector-id="select"
+      >
+        <div
+          class=""
+          data-id="customHourField"
+          data-test-id="customHourField"
+        >
+          <div
+            class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+            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
+                aria-activedescendant="01"
+                aria-controls="1"
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="click to select options"
+                aria-owns="1"
+                aria-readonly="true"
+                autocomplete="off"
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
+                data-id="customHourField_textBox"
+                data-selector-id="textBoxIcon"
+                data-test-id="customHourField_textBox"
+                data-title="01"
+                maxlength="2"
+                placeholder=""
+                readonly=""
+                role="Menuitem"
+                type="text"
+                value="01"
+              />
+            </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-row d-items-center d-justify-center rightPlaceholder"
+                    data-id="containerComponent"
+                    data-selector-id="container"
+                    data-test-id="containerComponent"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
+                      data-id="customHourField_downIcon"
+                      data-selector-id="container"
+                      data-test-id="customHourField_downIcon"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="zd_font_icons ff icon-down 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_size7);"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="container box_small"
+        data-selector-id="select"
+      >
+        <div
+          class=""
+          data-id="minuteField"
+          data-test-id="minuteField"
+        >
+          <div
+            class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+            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
+                aria-activedescendant="00"
+                aria-controls="3"
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="click to select options"
+                aria-owns="3"
+                aria-readonly="true"
+                autocomplete="off"
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
+                data-id="minuteField_textBox"
+                data-selector-id="textBoxIcon"
+                data-test-id="minuteField_textBox"
+                data-title="00"
+                maxlength="2"
+                placeholder=""
+                readonly=""
+                role="Menuitem"
+                type="text"
+                value="00"
+              />
+            </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-row d-items-center d-justify-center rightPlaceholder"
+                    data-id="containerComponent"
+                    data-selector-id="container"
+                    data-test-id="containerComponent"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
+                      data-id="minuteField_downIcon"
+                      data-selector-id="container"
+                      data-test-id="minuteField_downIcon"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="zd_font_icons ff icon-down 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_size7);"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="container box_small"
+        data-selector-id="select"
+      >
+        <div
+          class=""
+          data-id="ampmField"
+          data-test-id="ampmField"
+        >
+          <div
+            class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+            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
+                aria-activedescendant="AM"
+                aria-controls="5"
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="click to select options"
+                aria-owns="5"
+                aria-readonly="true"
+                autocomplete="off"
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
+                data-id="ampmField_textBox"
+                data-selector-id="textBoxIcon"
+                data-test-id="ampmField_textBox"
+                data-title="AM"
+                maxlength="2"
+                placeholder=""
+                readonly=""
+                role="Menuitem"
+                type="text"
+                value="AM"
+              />
+            </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-row d-items-center d-justify-center rightPlaceholder"
+                    data-id="containerComponent"
+                    data-selector-id="container"
+                    data-test-id="containerComponent"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
+                      data-id="ampmField_downIcon"
+                      data-selector-id="container"
+                      data-test-id="ampmField_downIcon"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="zd_font_icons ff icon-down 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_size7);"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Time Render with default props 1`] = `
+<DocumentFragment>
+  <span
+    class="text"
+  >
+    Time
+  </span>
   <div
     class="d-flex d-flex-row d-items-center timesection"
     data-id="Time_timeContainer"
@@ -37,6 +341,7 @@ exports[`Time rendering the defult props 1`] = `
               data-test-id="boxComponent"
             >
               <input
+                aria-activedescendant="01"
                 aria-controls="1"
                 aria-expanded="false"
                 aria-haspopup="true"
@@ -48,12 +353,13 @@ exports[`Time rendering the defult props 1`] = `
                 data-id="hourField_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="hourField_textBox"
+                data-title="01"
                 maxlength="2"
                 placeholder=""
                 readonly=""
                 role="Menuitem"
                 type="text"
-                value=""
+                value="01"
               />
             </div>
             <div
@@ -130,6 +436,7 @@ exports[`Time rendering the defult props 1`] = `
               data-test-id="boxComponent"
             >
               <input
+                aria-activedescendant="00"
                 aria-controls="3"
                 aria-expanded="false"
                 aria-haspopup="true"
@@ -141,12 +448,13 @@ exports[`Time rendering the defult props 1`] = `
                 data-id="minuteField_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="minuteField_textBox"
+                data-title="00"
                 maxlength="2"
                 placeholder=""
                 readonly=""
                 role="Menuitem"
                 type="text"
-                value=""
+                value="00"
               />
             </div>
             <div
@@ -223,6 +531,7 @@ exports[`Time rendering the defult props 1`] = `
               data-test-id="boxComponent"
             >
               <input
+                aria-activedescendant="AM"
                 aria-controls="5"
                 aria-expanded="false"
                 aria-haspopup="true"
@@ -234,12 +543,13 @@ exports[`Time rendering the defult props 1`] = `
                 data-id="ampmField_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="ampmField_textBox"
+                data-title="AM"
                 maxlength="2"
                 placeholder=""
                 readonly=""
                 role="Menuitem"
                 type="text"
-                value=""
+                value="AM"
               />
             </div>
             <div
@@ -293,3 +603,210 @@ exports[`Time rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Time Render with is24Hour=true 1`] = `
+<DocumentFragment>
+  <span
+    class="text"
+  >
+    Time
+  </span>
+  <div
+    class="d-flex d-flex-row d-items-center timesection"
+    data-id="Time_timeContainer"
+    data-selector-id="container"
+    data-test-id="Time_timeContainer"
+  >
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="container box_small"
+        data-selector-id="select"
+      >
+        <div
+          class=""
+          data-id="hourField"
+          data-test-id="hourField"
+        >
+          <div
+            class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+            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
+                aria-activedescendant="01"
+                aria-controls="1"
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="click to select options"
+                aria-owns="1"
+                aria-readonly="true"
+                autocomplete="off"
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
+                data-id="hourField_textBox"
+                data-selector-id="textBoxIcon"
+                data-test-id="hourField_textBox"
+                data-title="01"
+                maxlength="2"
+                placeholder=""
+                readonly=""
+                role="Menuitem"
+                type="text"
+                value="01"
+              />
+            </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-row d-items-center d-justify-center rightPlaceholder"
+                    data-id="containerComponent"
+                    data-selector-id="container"
+                    data-test-id="containerComponent"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
+                      data-id="hourField_downIcon"
+                      data-selector-id="container"
+                      data-test-id="hourField_downIcon"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="zd_font_icons ff icon-down 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_size7);"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 dropDownContainer"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="container box_small"
+        data-selector-id="select"
+      >
+        <div
+          class=""
+          data-id="minuteField"
+          data-test-id="minuteField"
+        >
+          <div
+            class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
+            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
+                aria-activedescendant="00"
+                aria-controls="3"
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="click to select options"
+                aria-owns="3"
+                aria-readonly="true"
+                autocomplete="off"
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
+                data-id="minuteField_textBox"
+                data-selector-id="textBoxIcon"
+                data-test-id="minuteField_textBox"
+                data-title="00"
+                maxlength="2"
+                placeholder=""
+                readonly=""
+                role="Menuitem"
+                type="text"
+                value="00"
+              />
+            </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-row d-items-center d-justify-center rightPlaceholder"
+                    data-id="containerComponent"
+                    data-selector-id="container"
+                    data-test-id="containerComponent"
+                  >
+                    <div
+                      aria-hidden="true"
+                      class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center arrowIcon"
+                      data-id="minuteField_downIcon"
+                      data-selector-id="container"
+                      data-test-id="minuteField_downIcon"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="zd_font_icons ff icon-down 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_size7);"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;