@zohodesk/components 1.6.32 → 1.6.34

package/es/PopOver/__tests__/__snapshots__/PopOver.spec.js.snap

@@ -1,5 +1,1106 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`PopOver Render with isAnimate without isPopupOpen 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main hidden container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with isArrow 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main hidden container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="arrowPosition"
+          data-id="dropBox_arrow"
+          data-selector-id="dropBox_arrow"
+          data-test-id="dropBox_arrow"
+        >
+          <div
+            class="arrowShape"
+          />
+        </div>
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with isArrow and arrowPosition as end 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main container bottomMid default boxDirection arrow"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="end"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="arrowPosition"
+          data-id="dropBox_arrow"
+          data-selector-id="dropBox_arrow"
+          data-test-id="dropBox_arrow"
+        >
+          <div
+            class="arrowShape"
+          />
+        </div>
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with isArrow and arrowPosition as start 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main container bottomMid default boxDirection arrow"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="start"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="arrowPosition"
+          data-id="dropBox_arrow"
+          data-selector-id="dropBox_arrow"
+          data-test-id="dropBox_arrow"
+        >
+          <div
+            class="arrowShape"
+          />
+        </div>
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with isPopupOpen 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main container bottomMid default paddingSpace"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with isPopupOpen and isAnimate 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main container bottomMid default paddingSpace"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow radius fadeInScale defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with isPopupOpen and isArrow 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main container bottomMid default boxDirection arrow"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="arrowPosition"
+          data-id="dropBox_arrow"
+          data-selector-id="dropBox_arrow"
+          data-test-id="dropBox_arrow"
+        >
+          <div
+            class="arrowShape"
+          />
+        </div>
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with isPopupOpen, isAnimate and animationStyle as bounce 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main container bottomMid default paddingSpace"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow radius bounce defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with isPopupOpen, isAnimate and animationStyle as fadeIn 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main container bottomMid default paddingSpace"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow radius fadeIn defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with isPopupOpen, isAnimate and animationStyle as scaleIn 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main container bottomMid default paddingSpace"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow radius scaleIn defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with multiple children in the target and container 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      <span>
+        Target one
+      </span>
+      <span>
+        Target two
+      </span>
+    </div>
+    <div
+      class="main hidden container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <span>
+              Container one
+            </span>
+            <span>
+              Container two
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with only target 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with size as large 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main hidden container bottomMid large"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with size as medium 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main hidden container bottomMid medium"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with size as mini 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main hidden container bottomMid mini"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with size as mlarge 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main hidden container bottomMid mlarge"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with size as small 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main hidden container bottomMid small"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with size as xlarge 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main hidden container bottomMid xlarge"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with size as xmini 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main hidden container bottomMid xmini"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with size as xsmall 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main hidden container bottomMid xsmall"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with size as xxlarge 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main hidden container bottomMid xxlarge"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver Render with target and container 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main hidden container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`PopOver rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -11,3 +1112,162 @@ exports[`PopOver rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`PopOver with a body font size Render with arrowTop without isArrow 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main hidden container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver with a body font size Render with isArrow and arrowRight, arrowLeft, arrowTop and arrowBottom 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main hidden container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="arrowPosition"
+          data-id="dropBox_arrow"
+          data-selector-id="dropBox_arrow"
+          data-test-id="dropBox_arrow"
+          style="right: 0.625rem; left: 1.25rem; top: 1.875rem; bottom: 2.5rem;"
+        >
+          <div
+            class="arrowShape"
+          />
+        </div>
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`PopOver with a body font size Render with right, left, top and bottom 1`] = `
+<DocumentFragment>
+  <div
+    class="popup"
+  >
+    <div
+      class="target"
+    >
+      Target
+    </div>
+    <div
+      class="main hidden container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="dropBox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="dropBox"
+      dot-ui-element="dropbox"
+      style="right: 0.625rem; left: 1.25rem; top: 1.875rem; bottom: 2.5rem;"
+    >
+      <div
+        class="subContainer shadow radius defaultPalette"
+        data-id="dropBox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="dropBox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="d-flex d-flex-row"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="d-min-h-0 d-flex-grow d-basis-0 d-min-w-0 d-flex-shrink d-overflow-y-auto d-overflow-x-hidden"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            Container content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;