From c3f9661c6e75029e847c54feaed642bf6b1f4fc9 Mon Sep 17 00:00:00 2001 From: Espen Liland Date: Wed, 14 Jun 2023 14:56:35 +0200 Subject: [PATCH] chore: correct Sbanken typography docs (#2432) Updated typography docs for Sbanken theme and fixed a couple of bugs in the process. Added e2e tests. --- .../cypress/e2e/typography.cy.ts | 60 +++++++++++++++++++ .../typography/font-families.mdx | 40 ++++++++++++- .../typography/font-weights.mdx | 10 ++-- .../typography/typographic-elements.mdx | 43 ++++++------- .../typography/typographic-rules.mdx | 18 ++++++ .../src/shared/parts/PortalStyle.scss | 10 ++-- 6 files changed, 145 insertions(+), 36 deletions(-) create mode 100644 packages/dnb-design-system-portal/cypress/e2e/typography.cy.ts diff --git a/packages/dnb-design-system-portal/cypress/e2e/typography.cy.ts b/packages/dnb-design-system-portal/cypress/e2e/typography.cy.ts new file mode 100644 index 00000000000..78f87e80f23 --- /dev/null +++ b/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') + }) +}) + \ No newline at end of file diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx index a8cb113dd82..5218a9826bb 100644 --- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx +++ b/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' + + +## 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 + +
+

This is a headline in Maison Neue

+
+ +### Roboto 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. +

+
+ +### Roboto 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. +

+
+ + diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx index f5d55fac960..fe510d58a6b 100644 --- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx +++ b/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`, `.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.

-## Body Medium + -## Body Bold +### Body Bold

diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-elements.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-elements.mdx index 1c7fe44f7eb..87538a50be5 100644 --- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-elements.mdx +++ b/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:

-

- Quem facilisi moderatius id eam, id tamquam albucius per. -

+ {/* prettier-ignore */} +

Quem facilisi moderatius id eam, id tamquam albucius per.

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:

-

- - This part is small facilisi moderatius id eam, id tamquam albucius - per. Vel quem congue appareat cu, mei te eros convenire - -

+ {/* prettier-ignore */} +

Facilisi moderatius id eam, id tamquam albucius per. + Vel quem congue appareat cu, mei te eros convenire

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:

-

- 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. -

+ {/* prettier-ignore */} +

Quem facilisi moderatius id eam, id tamquam albucius per. + Vel quem congue appareat cu, mei te eros convenire.

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:

-

- Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem + {/* prettier-ignore */} +

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. -

+ Dico purto nullam sea an.

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

-

- This is a paragraph with a modifier class. This is the small + {/* prettier-ignore */} +

This is a paragraph with a modifier class. 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. -

+ ei exerci tacimates pro, aliquam pertinacia eu vim.

- - This is a paragraph with a small tag inserted here: this is + {/* prettier-ignore */} + This is a paragraph with a small tag 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. - + vim.

diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-rules.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-rules.mdx index eaa86f33cfb..0928dd83b97 100644 --- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-rules.mdx +++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-rules.mdx @@ -1,3 +1,4 @@ + + +## 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 Brand Center. + +## Typographic scale + +The Eufemia typographic scale for Sbanken is as follows: + +_12px, 14px, 16px, 20px, 26px, 34px, 48px_ + + + **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)). diff --git a/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.scss b/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.scss index 5a71358334e..45c5d884993 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.scss +++ b/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.scss @@ -78,15 +78,15 @@ 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 { @@ -94,9 +94,9 @@ html[show-dev-grid] .dev-grid { } .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 */ }