feat(Avatar): sbanken styling (#2510)

Simple sbanken styling

packages/dnb-design-system-portal/src/docs/uilib/components/avatar.mdx

@@ -3,6 +3,7 @@ title: 'Avatar'
 description: 'The Avatar component are identifiers that makes people and companies more scannable.'
 status: null
 showTabs: true
+theme: 'sbanken'
 ---
 
 import AvatarInfo from 'Docs/uilib/components/avatar/info'

packages/dnb-eufemia/src/components/avatar/__tests__/Avatar.screenshot.test.ts

@@ -8,170 +8,176 @@ import {
   setupPageScreenshot,
 } from '../../../core/jest/jestSetupScreenshots'
 
-describe('Avatar', () => {
-  setupPageScreenshot({ url: '/uilib/components/avatar/demos' })
+describe.each(['ui', 'sbanken'])(
+  'Avatar for %s',
+  (themeName) => {
+    setupPageScreenshot({
+      themeName,
+      url: '/uilib/components/avatar/demos',
+    })
 
-  describe('size', () => {
-    it('have to match default size', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-size-default"]',
+    describe('size', () => {
+      it('have to match default size', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-size-default"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match small size', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-size-small"]',
+      it('have to match small size', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-size-small"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match medium size', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-size-medium"]',
+      it('have to match medium size', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-size-medium"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match large size', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-size-large"]',
+      it('have to match large size', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-size-large"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match x-large size', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-size-x-large"]',
+      it('have to match x-large size', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-size-x-large"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
     })
-  })
 
-  describe('variant', () => {
-    it('have to match default variant', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-variant-default"]',
+    describe('variant', () => {
+      it('have to match default variant', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-variant-default"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match primary variant', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-variant-primary"]',
+      it('have to match primary variant', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-variant-primary"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match secondary variant', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-variant-secondary"]',
+      it('have to match secondary variant', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-variant-secondary"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match tertiary variant', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-variant-tertiary"]',
+      it('have to match tertiary variant', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-variant-tertiary"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
     })
-  })
 
-  describe('children', () => {
-    it('have to match icon of variant primary as children', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-children-icon-primary"]',
+    describe('children', () => {
+      it('have to match icon of variant primary as children', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-children-icon-primary"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match icon of variant secondary as children', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-children-icon-secondary"]',
+      it('have to match icon of variant secondary as children', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-children-icon-secondary"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match icon of variant tertiary as children', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-children-icon-tertiary"]',
+      it('have to match icon of variant tertiary as children', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-children-icon-tertiary"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match logo as children', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-children-logo"]',
+      it('have to match logo as children', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-children-logo"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
     })
-  })
 
-  describe('src', () => {
-    it('have to match png image of local src', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-image-local-png"]',
+    describe('src', () => {
+      it('have to match png image of local src', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-image-local-png"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match svg image of local src', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-image-local-svg"]',
+      it('have to match svg image of local src', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-image-local-svg"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match image of external src', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-image-external"]',
+      it('have to match image of external src', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-image-external"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match image when passing imgProps', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-image-props"]',
+      it('have to match image when passing imgProps', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-image-props"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
     })
-  })
 
-  describe('grouping', () => {
-    it('have to match grouping of small avatars', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-grouped-small"]',
+    describe('grouping', () => {
+      it('have to match grouping of small avatars', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-grouped-small"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match grouping of medium avatars', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-grouped-medium"]',
+      it('have to match grouping of medium avatars', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-grouped-medium"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match grouping of large avatars', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-grouped-large"]',
+      it('have to match grouping of large avatars', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-grouped-large"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match grouping of x-large avatars', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-grouped-x-large"]',
+      it('have to match grouping of x-large avatars', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-grouped-x-large"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match grouping of img avatars', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="avatar-grouped-image"]',
+      it('have to match grouping of img avatars', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="avatar-grouped-image"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
     })
-  })
-})
+  }
+)

packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap

@@ -80,6 +80,10 @@ exports[`Avatar scss has to match style dependencies css 1`] = `
   line-height: var(--avatar-line-height--x-large);
 }
 .dnb-avatar__group {
+  --avatar-font-size-left--small: var(--font-size-x-small);
+  --avatar-font-size-left--medium: var(--font-size-small);
+  --avatar-font-size-left--large: var(--font-size-large);
+  --avatar-font-size-left--x-large: var(--font-size-large);
   display: inline-flex;
   justify-content: flex;
   flex-direction: row;
@@ -113,19 +117,19 @@ exports[`Avatar scss has to match style dependencies css 1`] = `
   color: var(--color-black-55);
 }
 .dnb-avatar__group--elements-left--size-small {
-  font-size: var(--font-size-x-small);
+  font-size: var(--avatar-font-size-left--small);
   margin-left: 0.125rem;
 }
 .dnb-avatar__group--elements-left--size-medium {
-  font-size: var(--font-size-small);
+  font-size: var(--avatar-font-size-left--medium);
   margin-left: 0.125rem;
 }
 .dnb-avatar__group--elements-left--size-large {
-  font-size: var(--font-size-large);
+  font-size: var(--avatar-font-size-left--large);
   margin-left: var(--spacing-xx-small);
 }
 .dnb-avatar__group--elements-left--size-x-large {
-  font-size: var(--font-size-large);
+  font-size: var(--avatar-font-size-left--x-large);
   margin-left: var(--spacing-xx-small);
 }"
 `;

packages/dnb-eufemia/src/components/avatar/style/dnb-avatar.scss

@@ -92,6 +92,11 @@
   }
 
   &__group {
+    --avatar-font-size-left--small: var(--font-size-x-small);
+    --avatar-font-size-left--medium: var(--font-size-small);
+    --avatar-font-size-left--large: var(--font-size-large);
+    --avatar-font-size-left--x-large: var(--font-size-large);
+
     display: inline-flex;
     justify-content: flex;
     flex-direction: row;
@@ -128,22 +133,22 @@
       color: var(--color-black-55);
 
       &--size-small {
-        font-size: var(--font-size-x-small);
+        font-size: var(--avatar-font-size-left--small);
         margin-left: 0.125rem;
       }
 
       &--size-medium {
-        font-size: var(--font-size-small);
+        font-size: var(--avatar-font-size-left--medium);
         margin-left: 0.125rem;
       }
 
       &--size-large {
-        font-size: var(--font-size-large);
+        font-size: var(--avatar-font-size-left--large);
         margin-left: var(--spacing-xx-small);
       }
 
       &--size-x-large {
-        font-size: var(--font-size-large);
+        font-size: var(--avatar-font-size-left--x-large);
         margin-left: var(--spacing-xx-small);
       }
     }