chore: correct Sbanken typography docs (#2432)

Updated typography docs for Sbanken theme and fixed a couple of bugs in the process. Added e2e tests.

packages/dnb-design-system-portal/cypress/e2e/typography.cy.ts

@@ -0,0 +1,60 @@
+/**
+ * Cypress e2e Test
+ * 
+ * TODO: Add one for ui theme?
+ */
+
+describe('Typography', () => {
+    beforeEach(() => {
+       // skip animation, use sbanken theme
+      cy.visit('/quickguide-designer/fonts?data-visual-test&eufemia-theme=sbanken')
+
+      // Check if app is mounted
+      cy.get('#dnb-drawer-list__portal', { timeout: 10000 }).should('exist')
+    })
+
+    afterEach(() => {
+      cy.clearLocalStorage('eufemia-theme')
+    })
+
+    it('docs should include heading xx-large example with correct font-size', () => {
+      cy.get('h2').should('contain', 'Heading xx-large')
+      cy.get('.typography-box > .dnb-h--xx-large').should('have.css', 'font-size', '48px')
+    })
+
+    it('docs should include heading x-large example with correct font-size', () => {
+      cy.get('h2').should('contain', 'Heading x-large')
+      cy.get('.typography-box > .dnb-h--x-large').should('have.css', 'font-size', '34px')
+    })
+
+    it('docs should include heading large example with correct font-size', () => {
+      cy.get('h2').should('contain', 'Heading large')
+      cy.get('.typography-box > .dnb-h--large').should('have.css', 'font-size', '26px')
+    })
+
+    it('examples should have correct color', () => {
+      cy.get('.typography-box > .dnb-h--xx-large').should('have.css', 'color', 'rgb(24, 23, 42)')
+      cy.get('.typography-box > .dnb-h--x-large').should('have.css', 'color', 'rgb(24, 23, 42)')
+      cy.get('.typography-box > .dnb-h--large').should('have.css', 'color', 'rgb(24, 23, 42)')
+      cy.get('.typography-box > .dnb-p').should('have.css', 'color', 'rgb(24, 23, 42)')
+      cy.get('.typography-box > .dnb-lead').should('have.css', 'color', 'rgb(24, 23, 42)')
+    })
+
+    it('line-height examples should have correct line-height', () => {
+      cy.get('.typography-box > .lh-12').should('have.css', 'line-height', '12px')
+      cy.get('.typography-box > .lh-16').should('have.css', 'line-height', '16px')
+      cy.get('.typography-box > .lh-20').should('have.css', 'line-height', '20px')
+      cy.get('.typography-box > .lh-24').should('have.css', 'line-height', '24px')
+      cy.get('.typography-box > .lh-28').should('have.css', 'line-height', '28px')
+      cy.get('.typography-box > .lh-32').should('have.css', 'line-height', '32px')
+    })
+
+    it('bold text should have correct font-weight', () => {
+      cy.get('.typography-box > .dnb-typo-bold').should('have.css', 'font-weight', '700')
+    })
+
+    it('examples should not have paragraphs inside headings', () => {
+        cy.get('.typography-box *[class^="dnb-h--"] .dnb-p').should('not.exist')
+    })
+})
+

packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx

@@ -1,5 +1,6 @@
-import { H2 } from '@dnb/eufemia/src'
+import { H2, H3 } from '@dnb/eufemia/src'
 
+<VisibilityByTheme hidden="sbanken">
 ## Font Families
 
 The default font family for all web applications is the `DNB` font.
@@ -51,3 +52,40 @@ The default font family for all web applications is the `DNB` font.
     Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
   </p>
 </div>
+</VisibilityByTheme>
+<VisibilityByTheme visible="sbanken">
+## Font Families
+
+The default font family for all web applications is `Roboto`, however for headlines and some other items we use `Maison Neue`.
+
+### Maison Neue
+
+<div className="typography-box">
+  <H3>This is a headline in Maison Neue</H3>
+</div>
+
+### Roboto regular
+
+<div className="typography-box">
+  <p className="dnb-p dnb-typo-regular">
+    Here is a paragraph with some nonsense lipsum text. Contrary to popular
+    belief, Lorem Ipsum passage, and going through the cites of the word in
+    classical literature, discovered the undoubtable source. Lorem Ipsum
+    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
+    Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
+  </p>
+</div>
+
+### Roboto bold
+
+<div className="typography-box">
+  <p className="dnb-p dnb-typo-bold">
+    Here is a paragraph with some nonsense lipsum text. Contrary to popular
+    belief, Lorem Ipsum passage, and going through the cites of the word in
+    classical literature, discovered the undoubtable source. Lorem Ipsum
+    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
+    Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
+  </p>
+</div>
+
+</VisibilityByTheme>

packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx

@@ -1,8 +1,8 @@
 ## Font Weights
 
-Achieved with HTML classes: `.dnb-typo-regular`, `.dnb-typo-medium`, `.dnb-typo-bold`
+Achieved with HTML classes: `.dnb-typo-regular`, <VisibilityByTheme hidden="sbanken">`.dnb-typo-medium`, </VisibilityByTheme>`.dnb-typo-bold`
 
-## Body Regular
+### Body Regular
 
 **NB!** body text is automatically set to use **regular** weight so there is
 no need to use a class.
@@ -17,7 +17,8 @@ no need to use a class.
   </p>
 </div>
 
-## Body Medium
+<VisibilityByTheme hidden="sbanken">
+### Body Medium
 
 <div className="typography-box">
   <p className="dnb-typo-medium">
@@ -28,8 +29,9 @@ no need to use a class.
     Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
   </p>
 </div>
+</VisibilityByTheme>
 
-## Body Bold
+### Body Bold
 
 <div className="typography-box">
   <p className="dnb-typo-bold">

packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-elements.mdx

@@ -15,9 +15,8 @@ This is an overview of the default, basic typographic elements such as **heading
 ### Example:
 
 <div className="typography-box">
-  <h1 className="dnb-h--xx-large skip-anchor">
-    Quem facilisi moderatius id eam, id tamquam albucius per.
-  </h1>
+  {/* prettier-ignore */}
+  <h1 className="dnb-h--xx-large skip-anchor">Quem facilisi moderatius id eam, id tamquam albucius per.</h1>
   <p className="dnb-p">
     Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
@@ -38,12 +37,9 @@ This is an overview of the default, basic typographic elements such as **heading
 ### Example:
 
 <div className="typography-box">
-  <h4 className="dnb-h--xx-large skip-anchor">
-    <small>
-      This part is small facilisi moderatius id eam, id tamquam albucius
-      per. Vel quem congue appareat cu, mei te eros convenire
-    </small>
-  </h4>
+  {/* prettier-ignore */}
+  <h4 className="dnb-h--x-large skip-anchor">Facilisi moderatius id eam, id tamquam albucius per.
+  Vel quem congue appareat cu, mei te eros convenire</h4>
   <p className="dnb-p">
     Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
@@ -64,11 +60,9 @@ This is an overview of the default, basic typographic elements such as **heading
 ### Example:
 
 <div className="typography-box">
-  <h4 className="dnb-h--large skip-anchor">
-    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
-    congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
-    exerci tacimates pro.
-  </h4>
+  {/* prettier-ignore */}
+  <h4 className="dnb-h--large skip-anchor">Quem facilisi moderatius id eam, id tamquam albucius per.
+  Vel quem congue appareat cu, mei te eros convenire.</h4>
   <p className="dnb-p">
     Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
@@ -89,13 +83,12 @@ This is an overview of the default, basic typographic elements such as **heading
 ### Example:
 
 <div className="typography-box">
-  <h4 className="dnb-lead skip-anchor">
-    Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
+  {/* prettier-ignore */}
+  <h4 className="dnb-lead skip-anchor">Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
     exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
     Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
-    Dico purto nullam sea an.
-  </h4>
+    Dico purto nullam sea an.</h4>
   <p className="dnb-p">
     Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
     congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
@@ -145,19 +138,17 @@ There are two methods to create small text. One, is to use the `.dnb-p--small` m
 ### Example
 
 <div className="typography-box">
-  <p className="dnb-p dnb-p--small">
-    This is a paragraph with a <b>modifier class</b>. This is the small
+  {/* prettier-ignore */}
+  <p className="dnb-p dnb-p--small">This is a paragraph with a <b>modifier class</b>. This is the small
     content. Quem facilisi moderatius id eam, id tamquam albucius per. Vel
     quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea,
-    ei exerci tacimates pro, aliquam pertinacia eu vim.
-  </p>
+    ei exerci tacimates pro, aliquam pertinacia eu vim.</p>
   <p className="dnb-p">
-    <small>
-      This is a paragraph with a <b>small tag</b> inserted here: this is
+    {/* prettier-ignore */}
+    <small>This is a paragraph with a <b>small tag</b> inserted here: this is
       the small content. Quem facilisi moderatius id eam, id tamquam
       albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea
       bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu
-      vim.
-    </small>
+      vim.</small>
   </p>
 </div>

packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-rules.mdx

@@ -1,3 +1,4 @@
+<VisibilityByTheme hidden="sbanken">
 ## In General
 
 The default font for all web applications is the `DNB` font.
@@ -14,6 +15,23 @@ The Eufemia typographic scale is as follows:
 
 _16px, 18px, 20px, 26px, 34px, 48px_
 
+</VisibilityByTheme>
+<VisibilityByTheme visible="sbanken">
+## In general
+
+Sbanken has two fonts in its profile; Roboto and Maison Neue. The latter is used mainly for headlines,
+Roboto for everything else.
+
+You can download these fonts from the <a href="https://bc.dnb.no/brandcenter/no/sbanken/typografi">Brand Center</a>.
+
+## Typographic scale
+
+The Eufemia typographic scale for Sbanken is as follows:
+
+_12px, 14px, 16px, 20px, 26px, 34px, 48px_
+
+</VisibilityByTheme>
+
 **NB!** we use `rem` for setting the size in code **not** pixels.
 
 Line-heights vary depending on context but adhere to the Eufemia space units (multiples of 8 including halves (4px)).

packages/dnb-design-system-portal/src/shared/parts/PortalStyle.scss

@@ -78,25 +78,25 @@ html[show-dev-grid] .dev-grid {
 
 /* used in the designers guide */
 .lh-12 {
-  line-height: calc(var(--line-height-basis) - 0.25rem); /* 0.75rem */
+  line-height: calc(var(--line-height-basis) - 0.75rem); /* 0.75rem */
 }
 
 .lh-16 {
-  line-height: var(--line-height-basis); /* 1rem */
+  line-height: calc(var(--line-height-basis) - 0.5rem); /* 1rem */
 }
 
 .lh-20 {
-  line-height: calc(var(--line-height-basis) + 0.25rem); /* 1.25rem */
+  line-height: calc(var(--line-height-basis) - 0.25rem); /* 1.25rem */
 }
 
 .lh-24 {
   line-height: var(--line-height-basis); /* 1rem */
 }
 
 .lh-28 {
-  line-height: calc(var(--line-height-basis) + 0.75rem); /* 1.75rem */
+  line-height: calc(var(--line-height-basis) + 0.25rem); /* 1.75rem */
 }
 
 .lh-32 {
-  line-height: calc(var(--line-height-basis) + 1rem); /* 2rem */
+  line-height: calc(var(--line-height-basis) + 0.5rem); /* 2rem */
 }