diff --git a/packages/dnb-eufemia/src/elements/blockquote/__tests__/Blockquote.screenshot.test.ts b/packages/dnb-eufemia/src/elements/blockquote/__tests__/Blockquote.screenshot.test.ts index d8a1af65455..c7b36abafda 100644 --- a/packages/dnb-eufemia/src/elements/blockquote/__tests__/Blockquote.screenshot.test.ts +++ b/packages/dnb-eufemia/src/elements/blockquote/__tests__/Blockquote.screenshot.test.ts @@ -8,8 +8,56 @@ import { setupPageScreenshot, } from '../../../core/jest/jestSetupScreenshots' -describe.each(['ui', 'sbanken'])('Blockquote for %s', (themeName, url) => { - setupPageScreenshot({ themeName, url: '/uilib/elements/blockquote' }) +describe.each(['ui', 'sbanken'])('Blockquote for %s', (themeName) => { + setupPageScreenshot({ + themeName, + url: '/uilib/elements/blockquote', + }) + + const style = { + width: '30rem', // make sure our input gets an explicit width, because of mac/linux rendering differences + } + + it('have to match default "blockquote"', async () => { + const screenshot = await makeScreenshot({ + style, + selector: '[data-visual-test="blockquote-default"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) + + it('have to match "blockquote" with top aligned graphic', async () => { + const screenshot = await makeScreenshot({ + style, + selector: '[data-visual-test="blockquote-top"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) + + it('have to match "blockquote" with top aligned graphic and no background', async () => { + const screenshot = await makeScreenshot({ + style, + selector: '[data-visual-test="blockquote-top-no-background"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) + + it('have to match "blockquote" with no background', async () => { + const screenshot = await makeScreenshot({ + style, + selector: '[data-visual-test="blockquote-no-background"]', + }) + expect(screenshot).toMatchImageSnapshot() + }) +}) + +describe.each(['sbanken'])('Blockquote on mobile for %s', (themeName) => { + setupPageScreenshot({ + themeName, + url: '/uilib/elements/blockquote', + pageViewport: { width: 640 }, + }) + const style = { width: '30rem', // make sure our input gets an explicit width, because of mac/linux rendering differences } diff --git a/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-for-sbanken-have-to-match-blockquote-with-no-background.snap.png b/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-for-sbanken-have-to-match-blockquote-with-no-background.snap.png index ac5db368289..a217f6ee69f 100644 Binary files a/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-for-sbanken-have-to-match-blockquote-with-no-background.snap.png and b/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-for-sbanken-have-to-match-blockquote-with-no-background.snap.png differ diff --git a/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-for-sbanken-have-to-match-blockquote-with-top-aligned-graphic-and-no-background.snap.png b/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-for-sbanken-have-to-match-blockquote-with-top-aligned-graphic-and-no-background.snap.png index a549160e198..2f65c88d6b4 100644 Binary files a/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-for-sbanken-have-to-match-blockquote-with-top-aligned-graphic-and-no-background.snap.png and b/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-for-sbanken-have-to-match-blockquote-with-top-aligned-graphic-and-no-background.snap.png differ diff --git a/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-for-sbanken-have-to-match-blockquote-with-top-aligned-graphic.snap.png b/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-for-sbanken-have-to-match-blockquote-with-top-aligned-graphic.snap.png index c382955a302..e17d609fea9 100644 Binary files a/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-for-sbanken-have-to-match-blockquote-with-top-aligned-graphic.snap.png and b/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-for-sbanken-have-to-match-blockquote-with-top-aligned-graphic.snap.png differ diff --git a/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-for-sbanken-have-to-match-default-blockquote.snap.png b/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-for-sbanken-have-to-match-default-blockquote.snap.png index fde2297ce29..cd5eacf166d 100644 Binary files a/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-for-sbanken-have-to-match-default-blockquote.snap.png and b/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-for-sbanken-have-to-match-default-blockquote.snap.png differ diff --git a/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-on-mobile-for-sbanken-have-to-match-blockquote-with-no-background.snap.png b/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-on-mobile-for-sbanken-have-to-match-blockquote-with-no-background.snap.png new file mode 100644 index 00000000000..75845bd5c2a Binary files /dev/null and b/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-on-mobile-for-sbanken-have-to-match-blockquote-with-no-background.snap.png differ diff --git a/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-on-mobile-for-sbanken-have-to-match-blockquote-with-top-aligned-graphic-and-no-background.snap.png b/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-on-mobile-for-sbanken-have-to-match-blockquote-with-top-aligned-graphic-and-no-background.snap.png new file mode 100644 index 00000000000..e424a835873 Binary files /dev/null and b/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-on-mobile-for-sbanken-have-to-match-blockquote-with-top-aligned-graphic-and-no-background.snap.png differ diff --git a/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-on-mobile-for-sbanken-have-to-match-blockquote-with-top-aligned-graphic.snap.png b/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-on-mobile-for-sbanken-have-to-match-blockquote-with-top-aligned-graphic.snap.png new file mode 100644 index 00000000000..6600e9406f0 Binary files /dev/null and b/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-on-mobile-for-sbanken-have-to-match-blockquote-with-top-aligned-graphic.snap.png differ diff --git a/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-on-mobile-for-sbanken-have-to-match-default-blockquote.snap.png b/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-on-mobile-for-sbanken-have-to-match-default-blockquote.snap.png new file mode 100644 index 00000000000..c499230fe54 Binary files /dev/null and b/packages/dnb-eufemia/src/elements/blockquote/__tests__/__image_snapshots__/blockquote-on-mobile-for-sbanken-have-to-match-default-blockquote.snap.png differ diff --git a/packages/dnb-eufemia/src/elements/blockquote/style/blockquote-mixins.scss b/packages/dnb-eufemia/src/elements/blockquote/style/blockquote-mixins.scss index d793d5cf338..46897467d0a 100644 --- a/packages/dnb-eufemia/src/elements/blockquote/style/blockquote-mixins.scss +++ b/packages/dnb-eufemia/src/elements/blockquote/style/blockquote-mixins.scss @@ -1,6 +1,17 @@ @use '../../../style/elements/ui-spacing.scss'; @mixin blockquoteStyle() { + --blockquote-padding-top: 2rem; + --blockquote-padding-left: 1.5rem; + --blockquote-padding-bottom: 3rem; + + // quote + --blockquote-quote-size: 3rem; + --blockquote-quote-padding: 6rem; + + // font + --blockquote-cite-style: italic; + display: inline-block; width: auto; @@ -19,10 +30,10 @@ &::before { content: ''; position: absolute; - top: 2rem; - left: 1.5rem; - width: 3em; - height: 3em; + top: var(--blockquote-padding-top); + left: var(--blockquote-padding-left); + width: var(--blockquote-quote-size); + height: var(--blockquote-quote-size); background-size: cover; @@ -33,15 +44,15 @@ // stylelint-disable-next-line &, &.dnb-blockquote--left { - padding-left: 6rem; - padding-top: 2rem; - padding-bottom: 3rem; + padding-left: var(--blockquote-quote-padding); + padding-top: var(--blockquote-padding-top); + padding-bottom: var(--blockquote-padding-bottom); } &.dnb-blockquote--top { - padding-left: 1.5rem; - padding-top: 6rem; - padding-bottom: 3rem; + padding-left: var(--blockquote-padding-left); + padding-top: var(--blockquote-quote-padding); + padding-bottom: var(--blockquote-padding-bottom); } &.dnb-blockquote--no-background { @@ -59,7 +70,7 @@ font-weight: var(--font-weight-medium); line-height: var(--line-height-basis); - font-style: italic; // to have / or avoid italic on cite + font-style: var(--blockquote-cite-style); &::before { content: '—'; diff --git a/packages/dnb-eufemia/src/elements/blockquote/style/themes/dnb-blockquote-theme-sbanken.scss b/packages/dnb-eufemia/src/elements/blockquote/style/themes/dnb-blockquote-theme-sbanken.scss index ffe80880f56..b69faba3b8a 100644 --- a/packages/dnb-eufemia/src/elements/blockquote/style/themes/dnb-blockquote-theme-sbanken.scss +++ b/packages/dnb-eufemia/src/elements/blockquote/style/themes/dnb-blockquote-theme-sbanken.scss @@ -1,9 +1,28 @@ +@use '../../../../style/core/utilities.scss'; + .dnb-blockquote { - color: var(--sb-color-text); + --blockquote-padding-top: 1.5rem; + --blockquote-quote-padding: 5.5rem; + --blockquote-cite-style: normal; + background-color: var(--sb-color-violet-light-4); border-radius: 1.125rem; + @include utilities.allBelow('small') { + --blockquote-padding-bottom: 1.5rem; + --blockquote-quote-size: 2rem; + --blockquote-quote-padding: 4rem; + + &.dnb-blockquote--top { + --blockquote-padding-top: 1rem; + } + + &:not(.dnb-blockquote--top) { + --blockquote-padding-left: 1rem; + } + } + &::before { filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(6711%) hue-rotate(265deg) brightness(71%) contrast(115%); // simulate the color #4e08bc - --sb-color-violet @@ -16,14 +35,4 @@ saturate(6079%) hue-rotate(204deg) brightness(78%) contrast(99%); } } - - h1, - h2, - h3, - .dnb-h--xx-large, - .dnb-h--large, - .dnb-h--medium, - .dnb-lead { - color: var(--sb-color-text); - } } diff --git a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap index 06238604420..7424028c5f8 100644 --- a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap +++ b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap @@ -25,6 +25,12 @@ exports[`Elements scss has to match style dependencies css 1`] = ` * */ .dnb-blockquote { + --blockquote-padding-top: 2rem; + --blockquote-padding-left: 1.5rem; + --blockquote-padding-bottom: 3rem; + --blockquote-quote-size: 3rem; + --blockquote-quote-padding: 6rem; + --blockquote-cite-style: italic; display: inline-block; width: auto; padding: 1.5rem; @@ -39,22 +45,22 @@ exports[`Elements scss has to match style dependencies css 1`] = ` .dnb-blockquote::before { content: ""; position: absolute; - top: 2rem; - left: 1.5rem; - width: 3em; - height: 3em; + top: var(--blockquote-padding-top); + left: var(--blockquote-padding-left); + width: var(--blockquote-quote-size); + height: var(--blockquote-quote-size); background-size: cover; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSI+ICA8cGF0aCBmaWxsPSIjQTVFMUQyIiBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0zNy41IDI3LjVhOSA5IDAgMSAwIDAtMTggOSA5IDAgMCAwIDAgMTh6Ii8+ICA8cGF0aCBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik00Ni41IDE4LjVhMjEgMjEgMCAwIDEtMjEgMjEiLz4gIDxwYXRoIGZpbGw9IiNBNUUxRDIiIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTEzLjUgMjcuNWE5IDkgMCAxIDAgMC0xOCA5IDkgMCAwIDAgMCAxOHoiLz4gIDxwYXRoIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTIyLjUgMTguNWEyMSAyMSAwIDAgMS0yMSAyMSIvPjwvc3ZnPg=="); } .dnb-blockquote, .dnb-blockquote.dnb-blockquote--left { - padding-left: 6rem; - padding-top: 2rem; - padding-bottom: 3rem; + padding-left: var(--blockquote-quote-padding); + padding-top: var(--blockquote-padding-top); + padding-bottom: var(--blockquote-padding-bottom); } .dnb-blockquote.dnb-blockquote--top { - padding-left: 1.5rem; - padding-top: 6rem; - padding-bottom: 3rem; + padding-left: var(--blockquote-padding-left); + padding-top: var(--blockquote-quote-padding); + padding-bottom: var(--blockquote-padding-bottom); } .dnb-blockquote.dnb-blockquote--no-background { background-color: transparent; @@ -68,7 +74,7 @@ exports[`Elements scss has to match style dependencies css 1`] = ` margin-top: 1rem; font-weight: var(--font-weight-medium); line-height: var(--line-height-basis); - font-style: italic; + font-style: var(--blockquote-cite-style); } .dnb-blockquote .dnb-cite::before, .dnb-blockquote .dnb-figcaption::before,