feat: #1390 Added two additional type sizes (#1477)

* #1390: Addedt two additional type sizes * added missing type scale on playground
SAP · Jul 16, 2020 · 048877b · 048877b
1 parent 1a690dc
commit 048877b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/docs/pages/foundation/type.html b/docs/pages/foundation/type.html
@@ -40,6 +40,8 @@ <h2 class="docs-header-h2">Sizes</h2>
     <td class="fd-has-type-4 docs-type__scale--preview">a</td>
     <td class="fd-has-type-5 docs-type__scale--preview">a</td>
     <td class="fd-has-type-6 docs-type__scale--preview">a</td>
+    <td class="fd-has-type-7 docs-type__scale--preview">a</td>
+    <td class="fd-has-type-8 docs-type__scale--preview">a</td>
   </tr>
   <tr>
     <td class="fd-has-type-1 docs-type__scale--info"><strong>-1</strong><br>12px</td>
@@ -50,6 +52,8 @@ <h2 class="docs-header-h2">Sizes</h2>
     <td class="fd-has-type-1 docs-type__scale--info"><strong>4</strong><br>24px</td>
     <td class="fd-has-type-1 docs-type__scale--info"><strong>5</strong><br>36px</td>
     <td class="fd-has-type-1 docs-type__scale--info"><strong>6</strong><br>48px</td>
+    <td class="fd-has-type-1 docs-type__scale--info"><strong>7</strong><br>72px</td>
+    <td class="fd-has-type-1 docs-type__scale--info"><strong>8</strong><br>96px</td>
 
     </td>
   </tr>
@@ -133,6 +137,24 @@ <h4 class="docs-header-h4">6 — 48px | Line height 52px</h4>
 
 <br>
 
+<h4 class="docs-header-h4">7 — 72px | Line height 84px</h4>
+<p><a href="/guides/how-to-use-scss.html#type-mixin" target="_blank">SCSS Mixin</a>: <code>@include fd-type("7")</code> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="/guides/design-system-utilities.html#type-sizes" target="_blank">Helper class</a>: <code>.fd-has-type-7</code></p>
+{% capture type-preview %}
+<p class="fd-has-type-7">Grumpy wizards make toxic brew for the evil Queen and Jack</p>
+{% endcapture %}
+{% include display-component.html component=type-preview %}
+
+<br>
+
+<h4 class="docs-header-h4">8 — 96px | Line height 102px</h4>
+<p><a href="/guides/how-to-use-scss.html#type-mixin" target="_blank">SCSS Mixin</a>: <code>@include fd-type("8")</code> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="/guides/design-system-utilities.html#type-sizes" target="_blank">Helper class</a>: <code>.fd-has-type-8</code></p>
+{% capture type-preview %}
+<p class="fd-has-type-8">Grumpy wizards make toxic brew for the evil Queen and Jack</p>
+{% endcapture %}
+{% include display-component.html component=type-preview %}
+
+<br>
+
 <h2 class="docs-header-h2">Weights</h2>
 <p>There are three weights defined <code>light</code>, <code>normal</code>, <code>Bold</code>.
 </p>

diff --git a/scss/_settings.scss b/scss/_settings.scss
@@ -59,6 +59,8 @@ $fd-type: map-merge((
   "4": #{24/$fd-type--base}rem 32/24 16px, //23/32 16
   "5": #{36/$fd-type--base}rem 40/36 20px, //36/40 20
   "6": #{48/$fd-type--base}rem 52/48 24px, //48/52 24
+  "7": #{72/$fd-type--base}rem 84/72 32px, //84/72 32
+  "8": #{96/$fd-type--base}rem 105/96 36px, //105/96 36
 ), $fd-type);
 
 $fd-font-size: #{$fd-type--base}px !default;

diff --git a/test/templates/pages/styles.njk b/test/templates/pages/styles.njk
@@ -205,7 +205,9 @@
     "3": [ 20, 28 ],
     "4": [ 24, 32 ],
     "5": [ 36, 40 ],
-    "6": [ 48, 52 ]
+    "6": [ 48, 52 ],
+    "7": [ 72, 84 ],
+    "8": [ 96, 102 ]
 } %}
 
 
@@ -215,7 +217,7 @@
     <h1>Type Sizes</h1>
 
 
-    {% for i in ["-1","0","1","2","3","4","5","6"] | reverse %}
+    {% for i in ["-1","0","1","2","3","4","5","6","7","8"] | reverse %}
     {% set type = specs[i] %}
         <h2 style="margin-bottom:0;">{{i}}</h2>
 <p>