From e9713e771f20e12e7d1cea4380ae4f8ffba2c977 Mon Sep 17 00:00:00 2001
From: Moshe Zemah <moshe@monday.com>
Date: Thu, 13 May 2021 15:36:36 +0300
Subject: [PATCH] Fix typpography storybook

---
 package.json                                  |  2 +-
 .../typography/typography.stories.mdx         | 20 +++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 4cbfafa1e5..f4c00d8e9f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.3.26",
+  "version": "0.3.27",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "dist/main.js",
   "scripts": {
diff --git a/src/general-stories/typography/typography.stories.mdx b/src/general-stories/typography/typography.stories.mdx
index 40dc7e5d6e..f4e8d32c60 100644
--- a/src/general-stories/typography/typography.stories.mdx
+++ b/src/general-stories/typography/typography.stories.mdx
@@ -17,22 +17,22 @@ import "./typography.scss";
 <Preview>
   <Story name="Typography">
       <StoryWrapper>
-        <h1>Typography</h1>
+        <h1 className="element-type-h1">Typography</h1>
         <p>Like in other ui in mondays interface typography work by principle of accessibility before aesthetics therefore the text should be readable and help the user understand what important by well contrasted  size and colors hierarchy. Don’t use a text under 12 px, text should be easy to read.</p>
         <br />
         <br />
         <br />
-        <h1 className="example-margin">{"<h1> Main heading (Roboto 32px bold)"}</h1>
-        <h2 className="example-margin">{"<h2> Secondary heading (Roboto 24px bold)"}</h2>
-        <h3 className="example-margin">{"<h3> Tertiary heading (Roboto 24px light)"}</h3>
-        <h4 className="example-margin">{"<h4> Fourth heading (Roboto 18px bold)"}</h4>
-        <h5 className="example-margin">{"<h5> Paragraph bold (Roboto 16px bold)"}</h5>
-        <h6 className="example-margin">{"<h6> UI labels / General text (Roboto 14px normal)"}</h6>
-        <p className="example-margin">{"<p> Paragraph text (Roboto 16px normal)"}</p>
-        <small className="example-margin">{"<small> Caption/Subtext (Roboto 14px normal)"}</small>
+        <h1 className="example-margin element-type-h1">{"<h1> Main heading (Roboto 32px bold)"}</h1>
+        <h2 className="example-margin element-type-h2">{"<h2> Secondary heading (Roboto 24px bold)"}</h2>
+        <h3 className="example-margin element-type-h3">{"<h3> Tertiary heading (Roboto 24px light)"}</h3>
+        <h4 className="example-margin element-type-h4">{"<h4> Fourth heading (Roboto 18px bold)"}</h4>
+        <h5 className="example-margin element-type-h5">{"<h5> Paragraph bold (Roboto 16px bold)"}</h5>
+        <h6 className="example-margin element-type-h6">{"<h6> UI labels / General text (Roboto 14px normal)"}</h6>
+        <p className="example-margin element-type-p">{"<p> Paragraph text (Roboto 16px normal)"}</p>
+        <small className="example-margin element-type-small">{"<small> Caption/Subtext (Roboto 14px normal)"}</small>
         <div className="example-margin element-type-link">{"<link> Link text (Roboto 14px normal)"}</div>
         <Divider />
-        <h4>Text Colors we use for text</h4>
+        <h4 className="element-type-h4">Text Colors we use for text</h4>
         {buildColorsStory(textColors)}
         <Divider />
         <div className="typo-row typo-row-header">