@zohodesk/dot 1.0.0-temp-197.5 → 1.0.0-temp-198

package/lib/alert/AlertHeader/__tests__/__snapshots__/AlertHeader.spec.js.snap

@@ -1,6 +1,788 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AlertHeader rendering the defult props 1`] = `
+exports[`AlertHeader renders falls back when neither iconName nor matching iconType is available 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    />
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title danger "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders iconName is provided 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-plus  iconStyle icon_alert text_danger   "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title danger "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders iconType and iconSize is fales 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger   "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title danger "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders iconType and iconSize is true 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle  text_danger   "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size16);"
+      />
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title danger "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders with breakChildren prop 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger   "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir wrap vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title danger "
+          />
+        </div>
+        <div
+          class="grow basisAuto shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div>
+            Child Content with Break
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders with children content 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger   "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title danger "
+          />
+        </div>
+        <div
+          class="grow basisAuto shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div>
+            Child Content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders with custom iconClass 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger custom-icon-class  "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title danger "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders with dataId prop 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-id="alertDataId_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertDataId_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger   "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title danger "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders with default props 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger   "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title danger "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders with iconType - alert 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger   "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title danger "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders with iconType - delete 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-ic-social_delete-20  iconStyle icon_delete text_danger   "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title danger "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders with iconType - remoteAssist 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-task-demo  iconStyle icon_remoteAssist text_danger   "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title danger "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders with iconType - splitTicket 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-split_new  iconStyle icon_splitTicket text_danger   "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title danger "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders with iconType - update 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-update  iconStyle icon_update text_danger   "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title danger "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders with needIcon false 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title danger "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders with onClose function and closeTitle 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger   "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title danger "
+            data-title="Closable Alert"
+          >
+            Closable Alert
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <button
+        aria-pressed="false"
+        class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+        data-id="alertHeader_close"
+        data-ishtml="false"
+        data-selector-id="iconButton"
+        data-test-id="alertHeader_close"
+        data-title="Close Alert"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-cross    "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size11);"
+        />
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders with palette - danger 1`] = `
 <DocumentFragment>
   <div
     class="container danger flex rowdir wrap vCenter"
@@ -46,3 +828,147 @@ exports[`AlertHeader rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`AlertHeader renders with palette - default 1`] = `
+<DocumentFragment>
+  <div
+    class="container default flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_default   "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title default "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders with palette - primary 1`] = `
+<DocumentFragment>
+  <div
+    class="container primary flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_primary   "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title primary "
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AlertHeader renders with title 1`] = `
+<DocumentFragment>
+  <div
+    class="container danger flex rowdir wrap vCenter"
+    data-id="alertHeader_alertHeader"
+    data-selector-id="container"
+    data-test-id="alertHeader_alertHeader"
+  >
+    <div
+      class="iconContainer"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-exclamation-thincircle  iconStyle icon_alert text_danger   "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </div>
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover rowdir vCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="title shrinkOn"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <span
+            class="title danger "
+            data-title="Custom Icon Class"
+          >
+            Custom Icon Class
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;