@zohodesk/components 1.6.6 → 1.6.7-exp-0

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

@@ -1,5 +1,975 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Typography Should render decoration - default 1`] = `
+<DocumentFragment>
+  <div
+    class="decoration_default"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render decoration - overline 1`] = `
+<DocumentFragment>
+  <div
+    class="decoration_overline"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render decoration - strike 1`] = `
+<DocumentFragment>
+  <div
+    class="decoration_strike"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render decoration - underline 1`] = `
+<DocumentFragment>
+  <div
+    class="decoration_underline"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render display - block 1`] = `
+<DocumentFragment>
+  <div
+    class="display_block"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render display - initial 1`] = `
+<DocumentFragment>
+  <div
+    class="display_initial"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render display - inline 1`] = `
+<DocumentFragment>
+  <div
+    class="display_inline"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render display - inlineBlock 1`] = `
+<DocumentFragment>
+  <div
+    class="display_inlineBlock"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 0.1 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_1"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 0.2 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_2"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 0.3 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_3"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 0.4 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_4"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 0.5 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_5"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 0.6 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_6"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 0.7 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_7"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 0.8 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_8"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 0.9 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_0_9"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 1 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 1.1 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_1"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 1.2 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_2"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 1.3 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_3"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 1.4 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_4"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 1.5 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_5"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 1.6 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_6"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 1.7 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_7"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 1.8 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_8"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 1.9 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_1_9"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - 2 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_2"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render letterSpacing - inherit 1`] = `
+<DocumentFragment>
+  <div
+    class="letterspacing_inherit"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineClamp - 1 1`] = `
+<DocumentFragment>
+  <div
+    class="lineclamp_1"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineClamp - 2 1`] = `
+<DocumentFragment>
+  <div
+    class="lineclamp_2"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineClamp - 3 1`] = `
+<DocumentFragment>
+  <div
+    class="lineclamp_3"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineClamp - 4 1`] = `
+<DocumentFragment>
+  <div
+    class="lineclamp_4"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineClamp - 5 1`] = `
+<DocumentFragment>
+  <div
+    class="lineclamp_5"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 0 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 0.1 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_1"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 0.2 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_2"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 0.3 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_3"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 0.4 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_4"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 0.5 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_5"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 0.6 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_6"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 0.7 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_7"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 0.8 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_8"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 0.9 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_0_9"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 1 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 1.1 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_1"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 1.2 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_2"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 1.3 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_3"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 1.4 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_4"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 1.5 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_5"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 1.6 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_6"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 1.7 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_7"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 1.8 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_8"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 1.9 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_1_9"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - 2 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_2"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - inherit 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_inherit"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - initial 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_initial"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render lineHeight - normal 1`] = `
+<DocumentFragment>
+  <div
+    class="lineheight_normal"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 7 1`] = `
+<DocumentFragment>
+  <div
+    class="size7"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 8 1`] = `
+<DocumentFragment>
+  <div
+    class="size8"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 9 1`] = `
+<DocumentFragment>
+  <div
+    class="size9"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 10 1`] = `
+<DocumentFragment>
+  <div
+    class="size10"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 11 1`] = `
+<DocumentFragment>
+  <div
+    class="size11"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 12 1`] = `
+<DocumentFragment>
+  <div
+    class="size12"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 13 1`] = `
+<DocumentFragment>
+  <div
+    class="size13"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 14 1`] = `
+<DocumentFragment>
+  <div
+    class="size14"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 15 1`] = `
+<DocumentFragment>
+  <div
+    class="size15"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 16 1`] = `
+<DocumentFragment>
+  <div
+    class="size16"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 17 1`] = `
+<DocumentFragment>
+  <div
+    class="size17"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 18 1`] = `
+<DocumentFragment>
+  <div
+    class="size18"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 19 1`] = `
+<DocumentFragment>
+  <div
+    class="size19"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 20 1`] = `
+<DocumentFragment>
+  <div
+    class="size20"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 21 1`] = `
+<DocumentFragment>
+  <div
+    class="size21"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 22 1`] = `
+<DocumentFragment>
+  <div
+    class="size22"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 24 1`] = `
+<DocumentFragment>
+  <div
+    class="size24"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 25 1`] = `
+<DocumentFragment>
+  <div
+    class="size25"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 26 1`] = `
+<DocumentFragment>
+  <div
+    class="size26"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 28 1`] = `
+<DocumentFragment>
+  <div
+    class="size28"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 29 1`] = `
+<DocumentFragment>
+  <div
+    class="size29"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 30 1`] = `
+<DocumentFragment>
+  <div
+    class="size30"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 32 1`] = `
+<DocumentFragment>
+  <div
+    class="size32"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 34 1`] = `
+<DocumentFragment>
+  <div
+    class="size34"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 35 1`] = `
+<DocumentFragment>
+  <div
+    class="size35"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 36 1`] = `
+<DocumentFragment>
+  <div
+    class="size36"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 40 1`] = `
+<DocumentFragment>
+  <div
+    class="size40"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - 50 1`] = `
+<DocumentFragment>
+  <div
+    class="size50"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render size - inherit 1`] = `
+<DocumentFragment>
+  <div
+    class="sizeinherit"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render textAlign - center 1`] = `
+<DocumentFragment>
+  <div
+    class="textalign_center"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render textAlign - justify 1`] = `
+<DocumentFragment>
+  <div
+    class="textalign_justify"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render textAlign - left 1`] = `
+<DocumentFragment>
+  <div
+    class="textalign_left"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render textAlign - right 1`] = `
+<DocumentFragment>
+  <div
+    class="textalign_right"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render transform - capital 1`] = `
+<DocumentFragment>
+  <div
+    class="transform_capital"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render transform - default 1`] = `
+<DocumentFragment>
+  <div
+    class="transform_default"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render transform - lower 1`] = `
+<DocumentFragment>
+  <div
+    class="transform_lower"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render transform - upper 1`] = `
+<DocumentFragment>
+  <div
+    class="transform_upper"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render typeFace - italic 1`] = `
+<DocumentFragment>
+  <div
+    class="fontStyles_italic"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render typeFace - normal 1`] = `
+<DocumentFragment>
+  <div
+    class="fontStyles_normal"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Typography Should render ui_decoration - default 1`] = `
 <DocumentFragment>
   <div
@@ -1010,6 +1980,16 @@ exports[`Typography Should render ui_weight - semibold 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Typography Should render ui_whiteSpace - breakSpaces 1`] = `
+<DocumentFragment>
+  <div
+    class="whiteSpace_breakSpaces"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Typography Should render ui_whiteSpace - noWrap 1`] = `
 <DocumentFragment>
   <div
@@ -1110,6 +2090,169 @@ exports[`Typography Should render ui_wordWrap - normal 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Typography Should render weight - bold 1`] = `
+<DocumentFragment>
+  <div
+    class="font_bold"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render weight - light 1`] = `
+<DocumentFragment>
+  <div
+    class="font_light"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render weight - regular 1`] = `
+<DocumentFragment>
+  <div
+    class="font_regular"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render weight - semibold 1`] = `
+<DocumentFragment>
+  <div
+    class="font_semibold"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render whiteSpace - breakSpaces 1`] = `
+<DocumentFragment>
+  <div
+    class="whiteSpace_breakSpaces"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render whiteSpace - noWrap 1`] = `
+<DocumentFragment>
+  <div
+    class="whiteSpace_noWrap"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render whiteSpace - normal 1`] = `
+<DocumentFragment>
+  <div
+    class="whiteSpace_normal"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render whiteSpace - pre 1`] = `
+<DocumentFragment>
+  <div
+    class="whiteSpace_pre"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render whiteSpace - preLine 1`] = `
+<DocumentFragment>
+  <div
+    class="whiteSpace_preLine"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render whiteSpace - preWrap 1`] = `
+<DocumentFragment>
+  <div
+    class="whiteSpace_preWrap"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render wordBreak - breakAll 1`] = `
+<DocumentFragment>
+  <div
+    class="wordBreak_breakAll"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render wordBreak - breakWord 1`] = `
+<DocumentFragment>
+  <div
+    class="wordBreak_breakWord"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render wordBreak - keepAll 1`] = `
+<DocumentFragment>
+  <div
+    class="wordBreak_keepAll"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render wordWrap - break 1`] = `
+<DocumentFragment>
+  <div
+    class="wordWrap_break"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography Should render wordWrap - normal 1`] = `
+<DocumentFragment>
+  <div
+    class="wordWrap_normal"
+  >
+    Heading
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography rendering a11yAttributes 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="uniqueId"
+    aria-expanded="true"
+    aria-haspopup="true"
+    class=""
+  >
+    Heading 2 Test
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Typography rendering a11yAttributes_text 1`] = `
 <DocumentFragment>
   <div
@@ -1123,6 +2266,16 @@ exports[`Typography rendering a11yAttributes_text 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Typography rendering customClass 1`] = `
+<DocumentFragment>
+  <div
+    class="custom-class"
+  >
+    Heading 2 Test
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Typography rendering customId 1`] = `
 <DocumentFragment>
   <div
@@ -1134,6 +2287,17 @@ exports[`Typography rendering customId 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Typography rendering dataTitle 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-title="typoDataTitle"
+  >
+    Heading 2 Test
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Typography rendering flag_dotted 1`] = `
 <DocumentFragment>
   <div
@@ -1154,6 +2318,16 @@ exports[`Typography rendering flag_reset 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Typography rendering h2 tag name with using as 1`] = `
+<DocumentFragment>
+  <h2
+    class=""
+  >
+    Heading 2 Test
+  </h2>
+</DocumentFragment>
+`;
+
 exports[`Typography rendering i18n_dataTitle 1`] = `
 <DocumentFragment>
   <div
@@ -1165,6 +2339,37 @@ exports[`Typography rendering i18n_dataTitle 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Typography rendering isDotted 1`] = `
+<DocumentFragment>
+  <div
+    class="dotted"
+  >
+    Heading 2 Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography rendering shouldReset 1`] = `
+<DocumentFragment>
+  <div
+    class="reset"
+  >
+    Heading 2 Test
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography rendering tagAttributes 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    id="TypoCustomId"
+  >
+    Heading 2 Test
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Typography rendering tagAttributes_text 1`] = `
 <DocumentFragment>
   <div
@@ -1417,6 +2622,34 @@ exports[`Typography with highlight should render highlighted word 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Typography with highlight should render highlighted word with highlightConfig 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class="font_bold"
+    >
+      sun
+    </span>
+     was bright, the 
+    <span
+      class="font_bold"
+    >
+      sun
+    </span>
+     was warm, the 
+    <span
+      class="font_bold"
+    >
+      sun
+    </span>
+     was high in the sky.
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Typography with highlight should render separate Styles per Word 1`] = `
 <DocumentFragment>
   <div
@@ -1569,7 +2802,7 @@ exports[`Typography with highlight should render with global custom style for al
 </DocumentFragment>
 `;
 
-exports[`Typography with highlight should render with global tagName applied to all highlights 1`] = `
+exports[`Typography with highlight should render with global tag name applied to all highlights 1`] = `
 <DocumentFragment>
   <div
     class=""
@@ -1691,7 +2924,7 @@ exports[`Typography with highlight should render with separate excluded index op
 </DocumentFragment>
 `;
 
-exports[`Typography with highlight should render with separate tagName for each highlighted word 1`] = `
+exports[`Typography with highlight should render with separate tag name for each highlighted word 1`] = `
 <DocumentFragment>
   <div
     class=""