feat(ProgressIndicator): Sbanken styling

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

@@ -4,6 +4,7 @@ description: 'The ProgressIndicator component is a waiting loader / spinner to s
 showTabs: true
 redirect_from:
   - /uilib/components/progress
+theme: 'sbanken'
 ---
 
 import ProgressIndicatorInfo from 'Docs/uilib/components/progress-indicator/info'

packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap

@@ -2282,6 +2282,10 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
   --progress-indicator-circular-circle: 88;
   --progress-indicator-circular-circle-offset--min: 88;
   --progress-indicator-circular-circle-offset--max: 1;
+  --progress-indicator-circular-background-color: grey;
+  --progress-indicator-circular-bar-color: var(--color-black);
+  --progress-indicator-linear-background-color: grey;
+  --progress-indicator-linear-bar-color: var(--color-black);
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -2349,12 +2353,44 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
   stroke-linecap: round;
 }
 .dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle {
-  stroke: grey;
+  stroke: var(--progress-indicator-circular-background-color);
 }
 .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke: var(--color-black);
+  stroke: var(--progress-indicator-circular-bar-color);
+}
+.dnb-progress-indicator__circular--small {
+  width: 1rem;
+  height: 1rem;
+}
+.dnb-progress-indicator__circular--medium {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.dnb-progress-indicator__circular--large {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+.dnb-progress-indicator__circular--huge {
+  width: 20rem;
+  height: 20rem;
+}
+.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.1;
+}
+.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.3;
+}
+.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.5;
+}
+.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.7;
+}
+.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.9;
 }
 .dnb-progress-indicator__linear {
+  background-color: var(--progress-indicator-linear-background-color);
   position: relative;
   overflow: hidden;
   width: 100%;
@@ -2363,6 +2399,7 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
   border-radius: 0.25rem;
 }
 .dnb-progress-indicator__linear__bar {
+  background-color: var(--progress-indicator-linear-bar-color);
   width: 100%;
   position: absolute;
   left: 0;
@@ -2382,6 +2419,22 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
   width: auto;
   animation: progress-indicator-linear-bar-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
 }
+.dnb-progress-indicator__linear--small {
+  height: 0.25rem;
+  border-radius: 0.125rem;
+}
+.dnb-progress-indicator__linear--medium {
+  height: 1rem;
+  border-radius: 0.5rem;
+}
+.dnb-progress-indicator__linear--large {
+  height: 1.5rem;
+  border-radius: 0.75rem;
+}
+.dnb-progress-indicator__linear--huge {
+  height: 2rem;
+  border-radius: 1rem;
+}
 html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation {
   left: -35%;
   right: 100%;

packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap

@@ -571,6 +571,10 @@ button.dnb-button::-moz-focus-inner {
   --progress-indicator-circular-circle: 88;
   --progress-indicator-circular-circle-offset--min: 88;
   --progress-indicator-circular-circle-offset--max: 1;
+  --progress-indicator-circular-background-color: grey;
+  --progress-indicator-circular-bar-color: var(--color-black);
+  --progress-indicator-linear-background-color: grey;
+  --progress-indicator-linear-bar-color: var(--color-black);
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -638,12 +642,44 @@ button.dnb-button::-moz-focus-inner {
   stroke-linecap: round;
 }
 .dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle {
-  stroke: grey;
+  stroke: var(--progress-indicator-circular-background-color);
 }
 .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke: var(--color-black);
+  stroke: var(--progress-indicator-circular-bar-color);
+}
+.dnb-progress-indicator__circular--small {
+  width: 1rem;
+  height: 1rem;
+}
+.dnb-progress-indicator__circular--medium {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.dnb-progress-indicator__circular--large {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+.dnb-progress-indicator__circular--huge {
+  width: 20rem;
+  height: 20rem;
+}
+.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.1;
+}
+.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.3;
+}
+.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.5;
+}
+.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.7;
+}
+.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.9;
 }
 .dnb-progress-indicator__linear {
+  background-color: var(--progress-indicator-linear-background-color);
   position: relative;
   overflow: hidden;
   width: 100%;
@@ -652,6 +688,7 @@ button.dnb-button::-moz-focus-inner {
   border-radius: 0.25rem;
 }
 .dnb-progress-indicator__linear__bar {
+  background-color: var(--progress-indicator-linear-bar-color);
   width: 100%;
   position: absolute;
   left: 0;
@@ -671,6 +708,22 @@ button.dnb-button::-moz-focus-inner {
   width: auto;
   animation: progress-indicator-linear-bar-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
 }
+.dnb-progress-indicator__linear--small {
+  height: 0.25rem;
+  border-radius: 0.125rem;
+}
+.dnb-progress-indicator__linear--medium {
+  height: 1rem;
+  border-radius: 0.5rem;
+}
+.dnb-progress-indicator__linear--large {
+  height: 1.5rem;
+  border-radius: 0.75rem;
+}
+.dnb-progress-indicator__linear--huge {
+  height: 2rem;
+  border-radius: 1rem;
+}
 html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation {
   left: -35%;
   right: 100%;

packages/dnb-eufemia/src/components/progress-indicator/__tests__/ProgressIndicator.screenshot.test.ts

@@ -8,44 +8,52 @@ import {
   setupPageScreenshot,
 } from '../../../core/jest/jestSetupScreenshots'
 
-describe('ProgressIndicator', () => {
-  setupPageScreenshot({
-    url: '/uilib/components/progress-indicator/demos',
-  })
+describe.each(['ui', 'sbanken'])(
+  'ProgressIndicator for %s',
+  (themeName) => {
+    setupPageScreenshot({
+      themeName,
+      url: '/uilib/components/progress-indicator/demos',
+    })
 
-  it('have to match the static primary circular with 50 percentage', async () => {
-    const screenshot = await makeScreenshot({
-      selector:
-        '[data-visual-test="progress-indicator-circular--primary"] .dnb-progress-indicator',
+    it('have to match the static primary circular with 50 percentage', async () => {
+      const screenshot = await makeScreenshot({
+        selector:
+          '[data-visual-test="progress-indicator-circular--primary"] .dnb-progress-indicator',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  it('have to match the static primary linear with 50 percentage', async () => {
-    const screenshot = await makeScreenshot({
-      style: {
-        width: '20rem',
-      },
-      selector:
-        '[data-visual-test="progress-indicator-linear--primary"] .dnb-progress-indicator',
+    it('have to match the static primary linear with 50 percentage', async () => {
+      const screenshot = await makeScreenshot({
+        style: {
+          width: '20rem',
+        },
+        selector:
+          '[data-visual-test="progress-indicator-linear--primary"] .dnb-progress-indicator',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-})
+  }
+)
 
-describe('ProgressIndicator circular', () => {
-  setupPageScreenshot({
-    url: '/uilib/components/progress-indicator/visual-tests',
-  })
+describe.each(['ui', 'sbanken'])(
+  'ProgressIndicator circular for %s',
+  (themeName) => {
+    setupPageScreenshot({
+      themeName,
+      url: '/uilib/components/progress-indicator/visual-tests',
+    })
 
-  it('have to match static primary circular sizes', async () => {
-    const screenshot = await makeScreenshot({
-      style: {
-        height: '3.5rem',
-        width: '8rem',
-      },
-      selector: '[data-visual-test="progress-indicator-sizes"]',
+    it('have to match static primary circular sizes', async () => {
+      const screenshot = await makeScreenshot({
+        style: {
+          height: '3.5rem',
+          width: '8rem',
+        },
+        selector: '[data-visual-test="progress-indicator-sizes"]',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-})
+  }
+)