feat(Blockquote): fix sbanken styling, added small screen version (#2639

)

## Summary

* Updated sbanken styling
* Added sbanken styling for small screens
* Use proper colors for DNB theme icon background

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
   }

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: '—';

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);
-  }
 }

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,