feat: #22 adds semantic typography tags (#51)

* feat: #22 adds semantic typography tags * refactor: added tagged component for layout components * chore: changed extending of interface * chore: linting * docs: added changelog entry * fix: remove deprecated element components * chore: remove unused import * feat: added tests for layout components with tag property * feat: added typography tests for tagged typography abstract component --------- Co-authored-by: Will McVay <wmcvay@reapit.com>
reapit · Mar 6, 2024 · eaa447d · eaa447d
1 parent 00c8200
commit eaa447d
Show file tree

Hide file tree

Showing 16 changed files with 11,818 additions and 676 deletions.
diff --git a/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap b/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap
@@ -8,8 +8,21 @@ exports[`BreadCrumb should match a snapshot 1`] = `
       <mock-styled.div
         aria-label="Breadcrumb"
       >
-        <mock-styled.div
-          classname="mock-css.
+        <div
+          class="mock-css.
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+
+  &., {
+    background: var(--color-grey-50);
+  }
+
+  &., {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+ mock-css.
   align-items: center;
 "
         >
@@ -18,9 +31,22 @@ exports[`BreadCrumb should match a snapshot 1`] = `
           >
             Home
           </mock-styled.a>
-        </mock-styled.div>
-        <mock-styled.div
-          classname="mock-css.
+        </div>
+        <div
+          class="mock-css.
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+
+  &., {
+    background: var(--color-grey-50);
+  }
+
+  &., {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+ mock-css.
   align-items: center;
 "
         >
@@ -42,9 +68,22 @@ exports[`BreadCrumb should match a snapshot 1`] = `
           >
             Level 1
           </mock-styled.a>
-        </mock-styled.div>
-        <mock-styled.div
-          classname="mock-css.
+        </div>
+        <div
+          class="mock-css.
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+
+  &., {
+    background: var(--color-grey-50);
+  }
+
+  &., {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+ mock-css.
   align-items: center;
 "
         >
@@ -66,9 +105,22 @@ exports[`BreadCrumb should match a snapshot 1`] = `
           >
             Level 2
           </mock-styled.a>
-        </mock-styled.div>
-        <mock-styled.div
-          classname="mock-css.
+        </div>
+        <div
+          class="mock-css.
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+
+  &., {
+    background: var(--color-grey-50);
+  }
+
+  &., {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+ mock-css.
   align-items: center;
 "
         >
@@ -90,16 +142,29 @@ exports[`BreadCrumb should match a snapshot 1`] = `
           >
             Level 3
           </mock-styled.a>
-        </mock-styled.div>
+        </div>
       </mock-styled.div>
     </div>
   </body>,
   "container": <div>
     <mock-styled.div
       aria-label="Breadcrumb"
     >
-      <mock-styled.div
-        classname="mock-css.
+      <div
+        class="mock-css.
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+
+  &., {
+    background: var(--color-grey-50);
+  }
+
+  &., {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+ mock-css.
   align-items: center;
 "
       >
@@ -108,9 +173,22 @@ exports[`BreadCrumb should match a snapshot 1`] = `
         >
           Home
         </mock-styled.a>
-      </mock-styled.div>
-      <mock-styled.div
-        classname="mock-css.
+      </div>
+      <div
+        class="mock-css.
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+
+  &., {
+    background: var(--color-grey-50);
+  }
+
+  &., {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+ mock-css.
   align-items: center;
 "
       >
@@ -132,9 +210,22 @@ exports[`BreadCrumb should match a snapshot 1`] = `
         >
           Level 1
         </mock-styled.a>
-      </mock-styled.div>
-      <mock-styled.div
-        classname="mock-css.
+      </div>
+      <div
+        class="mock-css.
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+
+  &., {
+    background: var(--color-grey-50);
+  }
+
+  &., {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+ mock-css.
   align-items: center;
 "
       >
@@ -156,9 +247,22 @@ exports[`BreadCrumb should match a snapshot 1`] = `
         >
           Level 2
         </mock-styled.a>
-      </mock-styled.div>
-      <mock-styled.div
-        classname="mock-css.
+      </div>
+      <div
+        class="mock-css.
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+
+  &., {
+    background: var(--color-grey-50);
+  }
+
+  &., {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+ mock-css.
   align-items: center;
 "
       >
@@ -180,7 +284,7 @@ exports[`BreadCrumb should match a snapshot 1`] = `
         >
           Level 3
         </mock-styled.a>
-      </mock-styled.div>
+      </div>
     </mock-styled.div>
   </div>,
   "debug": [Function],