Skip to content

Commit

Permalink
feat(ProgressIndicator): Sbanken styling (#2631)
Browse files Browse the repository at this point in the history 
Sbanken styling of ProgressIndicator with a touch of refactoring.

---------

Co-authored-by: Tobias Høegh <[email protected]>
  • Loading branch information
@Sundfjord @tujoworker
Sundfjord and tujoworker authored Sep 13, 2023
1 parent f358b0a commit 03de0e3
Show file tree
Hide file tree
Showing 15 changed files with 306 additions and 188 deletions.
1 change: 1 addition & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
57 changes: 55 additions & 2 deletions ...nb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2312,6 +2312,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;
Expand Down Expand Up @@ -2380,12 +2384,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%;
Expand All @@ -2394,6 +2430,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;
Expand All @@ -2413,6 +2450,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%;
Expand Down
57 changes: 55 additions & 2 deletions ...es/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -581,6 +581,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;
Expand Down Expand Up @@ -649,12 +653,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%;
Expand All @@ -663,6 +699,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;
Expand All @@ -682,6 +719,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%;
Expand Down
76 changes: 42 additions & 34 deletions ...-eufemia/src/components/progress-indicator/__tests__/ProgressIndicator.screenshot.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
})
}
)
Binary file added ...cator-circular-for-sbanken-have-to-match-static-primary-circular-sizes.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 ...ch-static-primary-circular-sizes.snap.png → ...ch-static-primary-circular-sizes.snap.png
View file
File renamed without changes
Binary file added ...r-sbanken-have-to-match-the-static-primary-circular-with-50-percentage.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...for-sbanken-have-to-match-the-static-primary-linear-with-50-percentage.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 ...mary-circular-with-50-percentage.snap.png → ...mary-circular-with-50-percentage.snap.png
View file
File renamed without changes
0 ...rimary-linear-with-50-percentage.snap.png → ...rimary-linear-with-50-percentage.snap.png
View file
File renamed without changes
Loading

0 comments on commit 03de0e3

Please sign in to comment.