Fonts: New heading style h4 (#3333)

kirbydesign · Jan 15, 2024 · 69b5010 · 69b5010
1 parent 43416c0
commit 69b5010
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 3 deletions.
diff --git a/apps/cookbook/src/app/showcase/fonts-showcase/fonts-showcase.component.html b/apps/cookbook/src/app/showcase/fonts-showcase/fonts-showcase.component.html
@@ -38,21 +38,28 @@ <h1 class="sample-header-1 kirby-text-xlarge">h1 - Heading 1</h1>
     <div class="info-box">
       <code>font-size: font-size("xl");</code>
       <code>font-weight: font-weight("black");</code>
-      <code class="highlight">CLASS: h1 or .kirby-text-xlarge</code>
+      <code class="highlight">CLASS: kirby-text-xlarge</code>
     </div>
 
     <h2 class="sample-header-2 kirby-text-large">h2 - Heading 2</h2>
     <div class="info-box">
       <code>font-size: font-size("l");</code>
       <code>font-weight: font-weight("bold");</code>
-      <code class="highlight">CLASS: h2 or kirby-text-large</code>
+      <code class="highlight">CLASS: kirby-text-large</code>
     </div>
 
     <h3 class="sample-header-3 kirby-text-medium">h3 - Heading 3</h3>
     <div class="info-box">
       <code>font-size: font-size("m");</code>
       <code>font-weight: font-weight("bold");</code>
-      <code class="highlight">CLASS: h3 or kirby-text-medium</code>
+      <code class="highlight">CLASS: kirby-text-medium</code>
+    </div>
+
+    <h4 class="sample-header-4 kirby-text-normal-bold">h4 - Section header</h4>
+    <div class="info-box">
+      <code>font-size: font-size("n");</code>
+      <code>font-weight: font-weight("bold");</code>
+      <code class="highlight">CLASS: kirby-text-normal-bold</code>
     </div>
 
     <p class="sample-body kirby-text-normal">p - Paragraph (Default body font)</p>

diff --git a/apps/cookbook/src/app/showcase/fonts-showcase/fonts-showcase.component.scss b/apps/cookbook/src/app/showcase/fonts-showcase/fonts-showcase.component.scss
@@ -34,6 +34,7 @@ code {
   &-header-1,
   &-header-2,
   &-header-3,
+  &-header-4,
   &-body,
   &-body-small,
   &-body-small-light,
@@ -61,6 +62,12 @@ code {
     }
   }
 
+  &-header-4 {
+    &::after {
+      content: '(#{utils.font-size('n')})';
+    }
+  }
+
   &-body {
     &::after {
       content: '(#{utils.font-size('n')})';

diff --git a/libs/core/src/scss/base/_typography.scss b/libs/core/src/scss/base/_typography.scss
@@ -73,6 +73,14 @@ h3,
   line-height: functions.line-height('m');
 }
 
+h4,
+.h4,
+.kirby-text-normal-bold {
+  font-size: functions.font-size('n');
+  font-weight: functions.font-weight('bold');
+  line-height: functions.line-height('n');
+}
+
 p,
 .p,
 .kirby-text-normal {

diff --git a/libs/designsystem/helpers/scss/src/typography.spec.ts b/libs/designsystem/helpers/scss/src/typography.spec.ts
@@ -112,6 +112,13 @@ describe('Typography', () => {
         fontWeight: '700',
         lineHeight: '24px',
       },
+      'heading 4': {
+        tag: 'h4',
+        cssClasses: ['h4', 'kirby-text-normal-bold'],
+        fontSize: '16px',
+        fontWeight: '700',
+        lineHeight: '24px',
+      },
     };
 
     for (const headingName in headings) {