Adjust PDF headings

Arkitektum · Feb 2, 2024 · ff2c383 · ff2c383
1 parent fb16f4a
commit ff2c383
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 25 deletions.
diff --git a/src/stories/PDF.scss b/src/stories/PDF.scss
@@ -7,6 +7,7 @@ $font-size-h2: 24px;
 $font-size-h2-small: 16px;
 $font-size-h3: 19px;
 $font-size-h4: 17px;
+$font-size-h5: 16px;
 $font-size-table-header: 15px;
 $font-size-table-data: 16px;
 $font-size-checkbox: 20px;
@@ -25,6 +26,8 @@ $margin-top-h3: 15px;
 $margin-bottom-h3: 4px;
 $margin-top-h4: 15px;
 $margin-bottom-h4: 6px;
+$margin-top-h5: 12px;
+$margin-bottom-h5: 2px;
 $margin-top-paragraph: 3px;
 $margin-bottom-paragraph: 12px;
 $margin-top-list: 3px;
@@ -183,6 +186,15 @@ body {
         }
     }
 
+    h5,
+    .h5 {
+        page-break-after: avoid;
+        font-size: $font-size-h5;
+        font-weight: bold;
+        margin-top: $margin-top-h5;
+        margin-bottom: $margin-bottom-h5;
+    }
+
     p {
         margin-top: $margin-top-paragraph;
         margin-bottom: $margin-bottom-paragraph;
@@ -399,14 +411,16 @@ body {
             float: right;
             margin-left: calc($heading-logo-margin-left * $scaling-for-signed-documents);
         }
-        h1 {
+        h1,
+        .h1 {
             font-size: calc($font-size-h1 * $scaling-for-signed-documents);
             margin-top: calc($margin-top-h1 * $scaling-for-signed-documents);
             small {
                 font-size: calc($font-size-h1-small * $scaling-for-signed-documents);
             }
         }
-        h2 {
+        h2,
+        .h2 {
             font-size: calc($font-size-h2 * $scaling-for-signed-documents);
             margin-top: calc($margin-top-h2 * $scaling-for-signed-documents);
             margin-bottom: calc($margin-bottom-h2 * $scaling-for-signed-documents);
@@ -415,11 +429,24 @@ body {
                 margin-bottom: calc($margin-bottom-h2-small * $scaling-for-signed-documents);
             }
         }
-        h3 {
+        h3,
+        .h3 {
             font-size: calc($font-size-h3 * $scaling-for-signed-documents);
             margin-top: calc($margin-top-h3 * $scaling-for-signed-documents);
             margin-bottom: calc($margin-bottom-h3 * $scaling-for-signed-documents);
         }
+        h4,
+        .h4 {
+            font-size: calc($font-size-h4 * $scaling-for-signed-documents);
+            margin-top: calc($margin-top-h4 * $scaling-for-signed-documents);
+            margin-bottom: calc($margin-bottom-h4 * $scaling-for-signed-documents);
+        }
+        h5,
+        .h5 {
+            font-size: calc($font-size-h5 * $scaling-for-signed-documents);
+            margin-top: calc($margin-top-h5 * $scaling-for-signed-documents);
+            margin-bottom: calc($margin-bottom-h5 * $scaling-for-signed-documents);
+        }
         p {
             margin-top: calc($margin-top-paragraph * $scaling-for-signed-documents);
             margin-bottom: calc($margin-bottom-paragraph * $scaling-for-signed-documents);

diff --git a/src/stories/PDF.stories.jsx b/src/stories/PDF.stories.jsx
@@ -48,12 +48,18 @@ const h1Example = (
     </h1>
 );
 
-const h2Example = <h2>Heading level 2 example</h2>;
+const h2Example = (
+    <h2>
+        Heading level 2 example <small>small text example</small>
+    </h2>
+);
 
 const h3Example = <h3>Heading level 3 example</h3>;
 
 const h4Example = <h4>Heading level 4 example</h4>;
 
+const h5Example = <h5>Heading level 5 example</h5>;
+
 const textParagraphsExample = (
     <>
         <p>
@@ -203,28 +209,18 @@ Logo.args = {
     children: logoExample
 };
 
-export const H1 = Template.bind({});
-H1.args = {
-    signedDocument: false,
-    children: h1Example
-};
-
-export const H2 = Template.bind({});
-H2.args = {
-    signedDocument: false,
-    children: h2Example
-};
-
-export const H3 = Template.bind({});
-H3.args = {
+export const Headings = Template.bind({});
+Headings.args = {
     signedDocument: false,
-    children: h3Example
-};
-
-export const H4 = Template.bind({});
-H4.args = {
-    signedDocument: false,
-    children: h4Example
+    children: (
+        <>
+            {h1Example}
+            {h2Example}
+            {h3Example}
+            {h4Example}
+            {h5Example}
+        </>
+    )
 };
 
 export const Text = Template.bind({});