add typography screenshot tests

packages/dnb-design-system-portal/src/pages/uilib/typography.md

@@ -41,11 +41,30 @@ Read more about [best practices for typography](/uilib/usage/best-practices/for-
 `}
 </CodeBlock>
 
+##### Additional Heading examples
+
+<CodeBlock reactLive hideCode data-dnb-test="heading-additional">
+{`
+<article>
+  <h1 className="dnb-h1">
+    <small>Small H1</small> Normal H1
+  </h1>
+  <h1 className="dnb-h1 dnb-small">Small H1 with class</h1>
+  <h2 className="dnb-h2">
+    Normal H2 <small>Small H2</small>
+  </h2>
+  <h3 className="dnb-h3">
+    Normal H3/Lead <small>Small H3/Lead</small>
+  </h3>
+</article>
+`}
+</CodeBlock>
+
 ### Paragraph
 
-<CodeBlock reactLive hideCode>
+<CodeBlock reactLive hideCode data-dnb-test="paragraph-example">
 {`
-<p>
+<p className="dnb-p">
   Here is a paragraph with some nonsense <a href="/" className="dnb-anchor">Lorem Ipsum</a> comes from <b>sections</b> 1.10.32 and 1.10.33 of "de <i>Finibus Bonorum</i> et <u>Malorum</u>" (<strong>The Extremes</strong> of Good and Evil) by Cicero, written in 45 BC.
 </p>
 `}

packages/dnb-ui-lib/src/style/elements/__tests__/Typography.screenshot.test.js

@@ -0,0 +1,27 @@
+/**
+ * Screenshot Test
+ * This file will not run on "test:staged" because we dont require any related files
+ */
+
+import {
+  testPageScreenshot,
+  setupPageScreenshot
+} from '../../../core/jest/jestSetupScreenshots'
+
+// NB: Remember that the fonts are swapped out with arial during the tests
+
+describe('Heading screenshot', () => {
+  setupPageScreenshot({ url: '/uilib/typography' })
+  it('have to match the additional heading examples', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-dnb-test="heading-additional"] article'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+  it('have to match the paragraph example', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-dnb-test="paragraph-example"] .dnb-p'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})