@zohodesk/components 1.0.0-temp-241 → 1.0.0-temp-242

package/lib/Typography/__tests__/__snapshots__/Typography.spec.js.snap

@@ -0,0 +1,1226 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Typography Should render ui_decoration - default 1`] = `
+<DocumentFragment>
+  <div
+    class="decoration_default"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_decoration - overline 1`] = `
+<DocumentFragment>
+  <div
+    class="decoration_overline"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_decoration - strike 1`] = `
+<DocumentFragment>
+  <div
+    class="decoration_strike"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_decoration - underline 1`] = `
+<DocumentFragment>
+  <div
+    class="decoration_underline"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_display - block 1`] = `
+<DocumentFragment>
+  <div
+    class="display_block"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_display - initial 1`] = `
+<DocumentFragment>
+  <div
+    class="display_initial"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_display - inline 1`] = `
+<DocumentFragment>
+  <div
+    class="display_inline"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_display - inlineBlock 1`] = `
+<DocumentFragment>
+  <div
+    class="display_inlineBlock"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 0.1 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_1"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 0.2 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_2"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 0.3 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_3"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 0.4 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_4"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 0.5 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_5"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 0.6 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_6"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 0.7 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_7"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 0.8 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_8"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 0.9 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_9"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 1 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 1.1 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_1"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 1.2 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_2"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 1.3 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_3"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 1.4 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_4"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 1.5 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_5"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 1.6 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_6"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 1.7 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_7"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 1.8 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_8"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 1.9 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_9"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - 2 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_2"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_letterSpacing - inherit 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_inherit"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineClamp - 1 1`] = `
+<DocumentFragment>
+  <div
+    class="lineclamp_1"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineClamp - 2 1`] = `
+<DocumentFragment>
+  <div
+    class="lineclamp_2"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineClamp - 3 1`] = `
+<DocumentFragment>
+  <div
+    class="lineclamp_3"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineClamp - 4 1`] = `
+<DocumentFragment>
+  <div
+    class="lineclamp_4"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineClamp - 5 1`] = `
+<DocumentFragment>
+  <div
+    class="lineclamp_5"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 0 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 0.1 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_1"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 0.2 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_2"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 0.3 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_3"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 0.4 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_4"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 0.5 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_5"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 0.6 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_6"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 0.7 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_7"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 0.8 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_8"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 0.9 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_9"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 1 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 1.1 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_1"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 1.2 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_2"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 1.3 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_3"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 1.4 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_4"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 1.5 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_5"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 1.6 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_6"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 1.7 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_7"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 1.8 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_8"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 1.9 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_9"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - 2 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_2"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - inherit 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_inherit"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - initial 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_initial"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_lineHeight - normal 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_normal"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 7 1`] = `
+<DocumentFragment>
+  <div
+    class="size7"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 8 1`] = `
+<DocumentFragment>
+  <div
+    class="size8"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 9 1`] = `
+<DocumentFragment>
+  <div
+    class="size9"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 10 1`] = `
+<DocumentFragment>
+  <div
+    class="size10"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 11 1`] = `
+<DocumentFragment>
+  <div
+    class="size11"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 12 1`] = `
+<DocumentFragment>
+  <div
+    class="size12"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 13 1`] = `
+<DocumentFragment>
+  <div
+    class="size13"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 14 1`] = `
+<DocumentFragment>
+  <div
+    class="size14"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 15 1`] = `
+<DocumentFragment>
+  <div
+    class="size15"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 16 1`] = `
+<DocumentFragment>
+  <div
+    class="size16"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 17 1`] = `
+<DocumentFragment>
+  <div
+    class="size17"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 18 1`] = `
+<DocumentFragment>
+  <div
+    class="size18"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 19 1`] = `
+<DocumentFragment>
+  <div
+    class="size19"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 20 1`] = `
+<DocumentFragment>
+  <div
+    class="size20"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 21 1`] = `
+<DocumentFragment>
+  <div
+    class="size21"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 22 1`] = `
+<DocumentFragment>
+  <div
+    class="size22"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 24 1`] = `
+<DocumentFragment>
+  <div
+    class="size24"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 25 1`] = `
+<DocumentFragment>
+  <div
+    class="size25"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 26 1`] = `
+<DocumentFragment>
+  <div
+    class="size26"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 28 1`] = `
+<DocumentFragment>
+  <div
+    class="size28"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 29 1`] = `
+<DocumentFragment>
+  <div
+    class="size29"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 30 1`] = `
+<DocumentFragment>
+  <div
+    class="size30"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 32 1`] = `
+<DocumentFragment>
+  <div
+    class="size32"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 34 1`] = `
+<DocumentFragment>
+  <div
+    class="size34"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 35 1`] = `
+<DocumentFragment>
+  <div
+    class="size35"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 36 1`] = `
+<DocumentFragment>
+  <div
+    class="size36"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 40 1`] = `
+<DocumentFragment>
+  <div
+    class="size40"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - 50 1`] = `
+<DocumentFragment>
+  <div
+    class="size50"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_size - inherit 1`] = `
+<DocumentFragment>
+  <div
+    class="sizeinherit"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_textAlign - center 1`] = `
+<DocumentFragment>
+  <div
+    class="textalign_center"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_textAlign - justify 1`] = `
+<DocumentFragment>
+  <div
+    class="textalign_justify"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_textAlign - left 1`] = `
+<DocumentFragment>
+  <div
+    class="textalign_left"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_textAlign - right 1`] = `
+<DocumentFragment>
+  <div
+    class="textalign_right"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_transform - capital 1`] = `
+<DocumentFragment>
+  <div
+    class="transform_capital"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_transform - default 1`] = `
+<DocumentFragment>
+  <div
+    class="transform_default"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_transform - lower 1`] = `
+<DocumentFragment>
+  <div
+    class="transform_lower"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_transform - upper 1`] = `
+<DocumentFragment>
+  <div
+    class="transform_upper"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_typeFace - italic 1`] = `
+<DocumentFragment>
+  <div
+    class="fontStyles_italic"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_typeFace - normal 1`] = `
+<DocumentFragment>
+  <div
+    class="fontStyles_normal"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_weight - bold 1`] = `
+<DocumentFragment>
+  <div
+    class="font_bold"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_weight - light 1`] = `
+<DocumentFragment>
+  <div
+    class="font_light"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_weight - regular 1`] = `
+<DocumentFragment>
+  <div
+    class="font_regular"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_weight - semibold 1`] = `
+<DocumentFragment>
+  <div
+    class="font_semibold"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_whiteSpace - noWrap 1`] = `
+<DocumentFragment>
+  <div
+    class="whiteSpace_noWrap"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_whiteSpace - normal 1`] = `
+<DocumentFragment>
+  <div
+    class="whiteSpace_normal"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_whiteSpace - pre 1`] = `
+<DocumentFragment>
+  <div
+    class="whiteSpace_pre"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_whiteSpace - preLine 1`] = `
+<DocumentFragment>
+  <div
+    class="whiteSpace_preLine"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_whiteSpace - preWrap 1`] = `
+<DocumentFragment>
+  <div
+    class="whiteSpace_preWrap"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_wordBreak - breakAll 1`] = `
+<DocumentFragment>
+  <div
+    class="wordBreak_breakAll"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_wordBreak - breakWord 1`] = `
+<DocumentFragment>
+  <div
+    class="wordBreak_breakWord"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_wordBreak - keepAll 1`] = `
+<DocumentFragment>
+  <div
+    class="wordBreak_keepAll"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_wordWrap - break 1`] = `
+<DocumentFragment>
+  <div
+    class="wordWrap_break"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render ui_wordWrap - normal 1`] = `
+<DocumentFragment>
+  <div
+    class="wordWrap_normal"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography rendering a11yAttributes_text 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="uniqueId"
+    aria-expanded="true"
+    aria-haspopup="true"
+    class=""
+  >
+    Heading 2 Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography rendering customId 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-id="TypoCustomId"
+  >
+    Heading 2 Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography rendering flag_dotted 1`] = `
+<DocumentFragment>
+  <div
+    class="dotted"
+  >
+    Heading 2 Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography rendering flag_reset 1`] = `
+<DocumentFragment>
+  <div
+    class="reset"
+  >
+    Heading 2 Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography rendering i18n_dataTitle 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-title="typoDataTitle"
+  >
+    Heading 2 Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography rendering tagAttributes_text 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    id="TypoCustomId"
+  >
+    Heading 2 Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography rendering testId 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-test-id="TypoTestId"
+  >
+    Heading 2 Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography rendering the children  1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Typography rendering ui_className 1`] = `
+<DocumentFragment>
+  <div
+    class="custom-class"
+  >
+    Heading 2 Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography rendering ui_tagName as h2 1`] = `
+<DocumentFragment>
+  <h2
+    class=""
+  >
+    Heading 2 Test
+  </h2>
+</DocumentFragment>
+`;