{/* The first one is the background line */}
- {!hasProgress && (
+ {!hasProgressIndicator && (
)}
@@ -87,7 +88,7 @@ const Circle = ({ className, ...rest }) => {
{...rest}
>
{
- setupPageScreenshot({ url: '/uilib/components/progress' })
+describe('ProgressIndicator screenshot', () => {
+ setupPageScreenshot({ url: '/uilib/components/progress-indicator' })
it('have to match the static primary circular with 50 percentage', async () => {
const screenshot = await testPageScreenshot({
selector:
- '[data-dnb-test="progress-circular--primary"] .dnb-progress'
+ '[data-dnb-test="progress-indicator-circular--primary"] .dnb-progress-indicator'
})
expect(screenshot).toMatchImageSnapshot()
})
diff --git a/packages/dnb-ui-lib/src/components/progress/__tests__/Progress.test.js b/packages/dnb-ui-lib/src/components/progress-indicator/__tests__/ProgressIndicator.test.js
similarity index 57%
rename from packages/dnb-ui-lib/src/components/progress/__tests__/Progress.test.js
rename to packages/dnb-ui-lib/src/components/progress-indicator/__tests__/ProgressIndicator.test.js
index 6fda803cd3a..724577d79f4 100644
--- a/packages/dnb-ui-lib/src/components/progress/__tests__/Progress.test.js
+++ b/packages/dnb-ui-lib/src/components/progress-indicator/__tests__/ProgressIndicator.test.js
@@ -11,19 +11,19 @@ import {
toJson,
loadScss
} from '../../../core/jest/jestSetup'
-import Component from '../Progress'
+import Component from '../ProgressIndicator'
// just to make sure we re-run the test in watch mode due to changes in theese files
-import _progress from '../style/_progress.scss' // eslint-disable-line
-import dnb_progress from '../style/dnb-progress.scss' // eslint-disable-line
-import dnb_progress_theme_ui from '../style/themes/dnb-progress-theme-ui.scss' // eslint-disable-line
+import _progress_indicator from '../style/_progress-indicator.scss' // eslint-disable-line
+import dnb_progress_indicator from '../style/dnb-progress-indicator.scss' // eslint-disable-line
+import dnb_progress_indicator_theme_ui from '../style/themes/dnb-progress-indicator-theme-ui.scss' // eslint-disable-line
-const props = fakeProps(require.resolve('../Progress'), {
+const props = fakeProps(require.resolve('../ProgressIndicator'), {
all: true,
optional: true
})
-describe('Circular Progress component', () => {
+describe('Circular ProgressIndicator component', () => {
const Comp = mount(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`ProgressIndicator scss have to match default theme snapshot 1`] = `
+"/*
+* ProgressIndicator theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-progress-indicator__circular--small {
+ width: 1rem;
+ height: 1rem; }
+
+.dnb-progress-indicator__circular--large {
+ width: 3.5rem;
+ height: 3.5rem; }
+
+.dnb-progress-indicator__circular--huge {
+ width: 20rem;
+ height: 20rem; }
+
+.dnb-progress-indicator__circular__line {
+ animation-duration: 2s; }
+
+.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle {
+ stroke: var(--color-mint-green); }
+
+.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+ stroke: var(--color-emerald-green); }
+"
+`;
+
+exports[`ProgressIndicator scss have to match snapshot 1`] = `
+"/*
+* DNB ProgressIndicator
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+.dnb-progress-indicator {
+ font-family: var(--font-family-default);
+ font-weight: var(--font-weight-default);
+ font-size: 1rem;
+ font-style: normal;
+ line-height: 1.5rem;
+ color: var(--color-black-80, #333);
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ font-variant-numeric: lining-nums;
+ font-feature-settings: \\"lnum\\";
+ /**
+ * 1. Remove repeating backgrounds in all browsers (opinionated).
+ * 2. Add border box sizing in all browsers (opinionated).
+ */
+ /**
+ * 1. Add text decoration inheritance in all browsers (opinionated).
+ * 2. Add vertical alignment inheritance in all browsers (opinionated).
+ */
+ margin: 0;
+ padding: 0; }
+ .dnb-progress-indicator *,
+ .dnb-progress-indicator ::before,
+ .dnb-progress-indicator ::after {
+ background-repeat: no-repeat;
+ /* 1 */
+ box-sizing: border-box;
+ /* 2 */ }
+ .dnb-progress-indicator ::before,
+ .dnb-progress-indicator ::after {
+ text-decoration: inherit;
+ /* 1 */
+ vertical-align: inherit;
+ /* 2 */ }
+
+/*
+ * ProgressIndicator component
+ *
+ */
+:root {
+ --progress-indicator-circular-circle: 88;
+ --progress-indicator-circular-circle-offset--min: 88;
+ --progress-indicator-circular-circle-offset--max: 1; }
+
+.dnb-progress-indicator {
+ position: relative; }
+ .dnb-progress-indicator__circular {
+ position: relative;
+ width: 2rem;
+ height: 2rem;
+ transform: rotate(-90deg); }
+ .dnb-progress-indicator__circular svg {
+ position: absolute;
+ width: 100%;
+ height: 100%; }
+ .dnb-progress-indicator__circular__line {
+ animation-duration: 2s;
+ animation-delay: 200ms;
+ animation-timing-function: cubic-bezier(0.67, 0.06, 0.27, 0.92);
+ animation-iteration-count: infinite; }
+ .dnb-progress-indicator__circular__line.background {
+ stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); }
+ .dnb-progress-indicator__circular__line.light {
+ animation-name: progress-indicator-circular-line-light;
+ stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle);
+ stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); }
+ .dnb-progress-indicator__circular__line.dark {
+ animation-name: progress-indicator-circular-line-dark;
+ stroke-dasharray: var(--progress-indicator-circular-circle), var(--progress-indicator-circular-circle);
+ stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); }
+ .dnb-progress-indicator__circular__line.paused {
+ animation-play-state: paused; }
+ .dnb-progress-indicator__circular--has-progress-indicator .dnb-progress-indicator__circular__line.dark {
+ transition: stroke-dashoffset 600ms cubic-bezier(0.67, 0.06, 0.27, 0.92); }
+ .dnb-progress-indicator__circular__circle {
+ stroke-linecap: round; }
+ .dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle {
+ stroke: grey; }
+ .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+ stroke: black; }
+ .dnb-progress-indicator:not(.dnb-progress-indicator--no-animation), .dnb-progress-indicator--visible:not(.dnb-progress-indicator--no-animation) {
+ opacity: 0;
+ animation: progress-indicator-fade-in 200ms ease-out 1 forwards; }
+ .dnb-progress-indicator--complete:not(.dnb-progress-indicator--no-animation):not(.dnb-progress-indicator--visible) {
+ animation: progress-indicator-fade-out 600ms ease-out 1 forwards; }
+
+@keyframes progress-indicator-fade-in {
+ 0% {
+ opacity: 0; }
+ 100% {
+ opacity: 1; } }
+
+@keyframes progress-indicator-fade-out {
+ 0% {
+ opacity: 1; }
+ 100% {
+ opacity: 0; } }
+
+@keyframes progress-indicator-circular-line-light {
+ 0% {
+ stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); }
+ 50% {
+ stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); }
+ 100% {
+ stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } }
+
+@keyframes progress-indicator-circular-line-dark {
+ 0% {
+ stroke-dashoffset: var(--progress-indicator-circular-circle-offset--min); }
+ 50% {
+ stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); }
+ 100% {
+ stroke-dashoffset: var(--progress-indicator-circular-circle-offset--max); } }
+"
+`;
diff --git a/packages/dnb-ui-lib/src/components/progress/__tests__/__snapshots__/progress-screenshot-test-js-progress-screenshot-have-to-match-the-static-primary-circular-with-50-percentage-1-125eb.snap.png b/packages/dnb-ui-lib/src/components/progress-indicator/__tests__/__snapshots__/progress-indicator-screenshot-test-js-progress-screenshot-have-to-match-the-static-primary-circular-with-50-percentage-1-125eb.snap.png
similarity index 100%
rename from packages/dnb-ui-lib/src/components/progress/__tests__/__snapshots__/progress-screenshot-test-js-progress-screenshot-have-to-match-the-static-primary-circular-with-50-percentage-1-125eb.snap.png
rename to packages/dnb-ui-lib/src/components/progress-indicator/__tests__/__snapshots__/progress-indicator-screenshot-test-js-progress-screenshot-have-to-match-the-static-primary-circular-with-50-percentage-1-125eb.snap.png
diff --git a/packages/dnb-ui-lib/src/components/progress-indicator/index.js b/packages/dnb-ui-lib/src/components/progress-indicator/index.js
new file mode 100644
index 00000000000..f196b1e056c
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/progress-indicator/index.js
@@ -0,0 +1,8 @@
+/**
+ * Component Entry
+ *
+ */
+
+import ProgressIndicator from './ProgressIndicator'
+export default ProgressIndicator
+export * from './ProgressIndicator'
diff --git a/packages/dnb-ui-lib/src/components/progress-indicator/style.js b/packages/dnb-ui-lib/src/components/progress-indicator/style.js
new file mode 100644
index 00000000000..ec10e54eab0
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/progress-indicator/style.js
@@ -0,0 +1,6 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import './style/dnb-progress-indicator.scss'
diff --git a/packages/dnb-ui-lib/src/components/progress-indicator/style/_progress-indicator.scss b/packages/dnb-ui-lib/src/components/progress-indicator/style/_progress-indicator.scss
new file mode 100644
index 00000000000..46a6d75c1ec
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/progress-indicator/style/_progress-indicator.scss
@@ -0,0 +1,141 @@
+/*
+ * ProgressIndicator component
+ *
+ */
+
+:root {
+ --progress-indicator-circular-circle: 88;
+ --progress-indicator-circular-circle-offset--min: 88;
+ --progress-indicator-circular-circle-offset--max: 1;
+}
+
+.dnb-progress-indicator {
+ position: relative;
+
+ // circular variant
+ &__circular {
+ position: relative;
+
+ // medium
+ width: 2rem;
+ height: 2rem;
+
+ // since SVG is starting 90deg from top
+ transform: rotate(-90deg);
+
+ svg {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ }
+
+ &__line {
+ animation-duration: 2s;
+ animation-delay: 200ms;
+ animation-timing-function: cubic-bezier(0.67, 0.06, 0.27, 0.92);
+ animation-iteration-count: infinite;
+ }
+
+ &__line.background {
+ stroke-dashoffset: var(
+ --progress-indicator-circular-circle-offset--max
+ );
+ }
+ &__line.light {
+ animation-name: progress-indicator-circular-line-light;
+ stroke-dasharray: var(--progress-indicator-circular-circle),
+ var(--progress-indicator-circular-circle);
+ stroke-dashoffset: var(
+ --progress-indicator-circular-circle-offset--max
+ );
+ }
+ &__line.dark {
+ animation-name: progress-indicator-circular-line-dark;
+ stroke-dasharray: var(--progress-indicator-circular-circle),
+ var(--progress-indicator-circular-circle);
+ stroke-dashoffset: var(
+ --progress-indicator-circular-circle-offset--min
+ );
+ }
+ &__line.paused {
+ animation-play-state: paused;
+ }
+ // for static progress-indicator animation
+ &--has-progress-indicator &__line.dark {
+ transition: stroke-dashoffset 600ms
+ cubic-bezier(0.67, 0.06, 0.27, 0.92);
+ }
+
+ &__circle {
+ stroke-linecap: round;
+ }
+ &__line.light &__circle {
+ stroke: grey;
+ }
+ &__line.dark &__circle {
+ stroke: black;
+ }
+ }
+
+ &:not(#{&}--no-animation),
+ &--visible:not(#{&}--no-animation) {
+ opacity: 0;
+ animation: progress-indicator-fade-in 200ms ease-out 1 forwards;
+ }
+ &--complete:not(#{&}--no-animation):not(#{&}--visible) {
+ animation: progress-indicator-fade-out 600ms ease-out 1 forwards;
+ }
+
+ @keyframes progress-indicator-fade-in {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+ }
+ @keyframes progress-indicator-fade-out {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+ }
+}
+
+@keyframes progress-indicator-circular-line-light {
+ 0% {
+ stroke-dashoffset: var(
+ --progress-indicator-circular-circle-offset--min
+ );
+ }
+ 50% {
+ stroke-dashoffset: var(
+ --progress-indicator-circular-circle-offset--min
+ );
+ }
+ 100% {
+ stroke-dashoffset: var(
+ --progress-indicator-circular-circle-offset--max
+ );
+ }
+}
+
+@keyframes progress-indicator-circular-line-dark {
+ 0% {
+ stroke-dashoffset: var(
+ --progress-indicator-circular-circle-offset--min
+ );
+ }
+ 50% {
+ stroke-dashoffset: var(
+ --progress-indicator-circular-circle-offset--max
+ );
+ }
+ 100% {
+ stroke-dashoffset: var(
+ --progress-indicator-circular-circle-offset--max
+ );
+ }
+}
diff --git a/packages/dnb-ui-lib/src/components/progress/style/dnb-progress.scss b/packages/dnb-ui-lib/src/components/progress-indicator/style/dnb-progress-indicator.scss
similarity index 51%
rename from packages/dnb-ui-lib/src/components/progress/style/dnb-progress.scss
rename to packages/dnb-ui-lib/src/components/progress-indicator/style/dnb-progress-indicator.scss
index d16cccbee2f..aad8cd2c082 100644
--- a/packages/dnb-ui-lib/src/components/progress/style/dnb-progress.scss
+++ b/packages/dnb-ui-lib/src/components/progress-indicator/style/dnb-progress-indicator.scss
@@ -1,12 +1,12 @@
/*
-* DNB Progress
+* DNB ProgressIndicator
*
*/
@import '../../../style/components/imports.scss';
-.dnb-progress {
+.dnb-progress-indicator {
@include componentReset();
}
-@import './progress.scss';
+@import './progress-indicator.scss';
diff --git a/packages/dnb-ui-lib/src/components/progress-indicator/style/index.js b/packages/dnb-ui-lib/src/components/progress-indicator/style/index.js
new file mode 100644
index 00000000000..b13caa8bde7
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/progress-indicator/style/index.js
@@ -0,0 +1,6 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import './dnb-progress-indicator.scss'
diff --git a/packages/dnb-ui-lib/src/components/progress/style/themes/dnb-progress-theme-ui.scss b/packages/dnb-ui-lib/src/components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.scss
similarity index 67%
rename from packages/dnb-ui-lib/src/components/progress/style/themes/dnb-progress-theme-ui.scss
rename to packages/dnb-ui-lib/src/components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.scss
index a8de93e48eb..1227b71e3c2 100644
--- a/packages/dnb-ui-lib/src/components/progress/style/themes/dnb-progress-theme-ui.scss
+++ b/packages/dnb-ui-lib/src/components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.scss
@@ -1,19 +1,19 @@
/*
-* Progress theme
+* ProgressIndicator theme
*
*/
@import '../../../../style/themes/imports.scss';
// to get a reverse #v3 - use the following setup, strokeDashoffset has also to be:
-// const strokeDashoffset = -((maxOffset / 100) * progress)
+// const strokeDashoffset = -((maxOffset / 100) * progress-indicator)
// :root {
-// --progress-circular-circle: 88;
-// --progress-circular-circle-offset--min: -1;
-// --progress-circular-circle-offset--max: -88;
+// --progress-indicator-circular-circle: 88;
+// --progress-indicator-circular-circle-offset--min: -1;
+// --progress-indicator-circular-circle-offset--max: -88;
// }
-.dnb-progress {
+.dnb-progress-indicator {
// circular variant
&__circular {
&--small {
diff --git a/packages/dnb-ui-lib/src/components/progress-indicator/style/themes/ui.js b/packages/dnb-ui-lib/src/components/progress-indicator/style/themes/ui.js
new file mode 100644
index 00000000000..38ac5007a6e
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/progress-indicator/style/themes/ui.js
@@ -0,0 +1,6 @@
+/**
+ * Imports the default theme
+ *
+ */
+
+import './dnb-progress-indicator-theme-ui.scss'
diff --git a/packages/dnb-ui-lib/src/components/progress/web-component.js b/packages/dnb-ui-lib/src/components/progress-indicator/web-component.js
similarity index 100%
rename from packages/dnb-ui-lib/src/components/progress/web-component.js
rename to packages/dnb-ui-lib/src/components/progress-indicator/web-component.js
diff --git a/packages/dnb-ui-lib/src/components/progress/__tests__/__snapshots__/Progress.test.js.snap b/packages/dnb-ui-lib/src/components/progress/__tests__/__snapshots__/Progress.test.js.snap
deleted file mode 100644
index 35eb64b7dfb..00000000000
--- a/packages/dnb-ui-lib/src/components/progress/__tests__/__snapshots__/Progress.test.js.snap
+++ /dev/null
@@ -1,262 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Circular Progress component have to match snapshot 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`Progress scss have to match default theme snapshot 1`] = `
-"/*
-* Progress theme
-*
-*/
-/**
- * This file is only used to make themes independent
- * so that they can get imported individually, without the core styles
- *
- */
-/*
- * Utilities
- */
-.dnb-progress__circular--small {
- width: 1rem;
- height: 1rem; }
-
-.dnb-progress__circular--large {
- width: 3.5rem;
- height: 3.5rem; }
-
-.dnb-progress__circular--huge {
- width: 20rem;
- height: 20rem; }
-
-.dnb-progress__circular__line {
- animation-duration: 2s; }
-
-.dnb-progress__circular__line.light .dnb-progress__circular__circle {
- stroke: var(--color-mint-green); }
-
-.dnb-progress__circular__line.dark .dnb-progress__circular__circle {
- stroke: var(--color-emerald-green); }
-"
-`;
-
-exports[`Progress scss have to match snapshot 1`] = `
-"/*
-* DNB Progress
-*
-*/
-/**
- * This file is only used to make components independent
- * so that they can get imported individually, without the core styles
- *
- */
-/*
- * Utilities
- */
-/*
- * Scopes
- *
- */
-/*
- * Document Reset
- *
- */
-.dnb-progress {
- font-family: var(--font-family-default);
- font-weight: var(--font-weight-default);
- font-size: 1rem;
- font-style: normal;
- line-height: 1.5rem;
- color: var(--color-black-80, #333);
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- font-variant-numeric: lining-nums;
- font-feature-settings: \\"lnum\\";
- /**
- * 1. Remove repeating backgrounds in all browsers (opinionated).
- * 2. Add border box sizing in all browsers (opinionated).
- */
- /**
- * 1. Add text decoration inheritance in all browsers (opinionated).
- * 2. Add vertical alignment inheritance in all browsers (opinionated).
- */
- margin: 0;
- padding: 0; }
- .dnb-progress *,
- .dnb-progress ::before,
- .dnb-progress ::after {
- background-repeat: no-repeat;
- /* 1 */
- box-sizing: border-box;
- /* 2 */ }
- .dnb-progress ::before,
- .dnb-progress ::after {
- text-decoration: inherit;
- /* 1 */
- vertical-align: inherit;
- /* 2 */ }
-
-/*
- * Progress component
- *
- */
-:root {
- --progress-circular-circle: 88;
- --progress-circular-circle-offset--min: 88;
- --progress-circular-circle-offset--max: 1; }
-
-.dnb-progress {
- position: relative; }
- .dnb-progress__circular {
- position: relative;
- width: 2rem;
- height: 2rem;
- transform: rotate(-90deg); }
- .dnb-progress__circular svg {
- position: absolute;
- width: 100%;
- height: 100%; }
- .dnb-progress__circular__line {
- animation-duration: 2s;
- animation-delay: 200ms;
- animation-timing-function: ease-in-out;
- animation-timing-function: cubic-bezier(0.67, 0.06, 0.27, 0.92);
- animation-iteration-count: infinite; }
- .dnb-progress__circular__line.background {
- stroke-dashoffset: var(--progress-circular-circle-offset--max); }
- .dnb-progress__circular__line.light {
- animation-name: progress-circular-line-light;
- stroke-dasharray: var(--progress-circular-circle), var(--progress-circular-circle);
- stroke-dashoffset: var(--progress-circular-circle-offset--max); }
- .dnb-progress__circular__line.dark {
- animation-name: progress-circular-line-dark;
- stroke-dasharray: var(--progress-circular-circle), var(--progress-circular-circle);
- stroke-dashoffset: var(--progress-circular-circle-offset--min); }
- .dnb-progress__circular__line.paused {
- animation-play-state: paused; }
- .dnb-progress__circular--has-progress .dnb-progress__circular__line.dark {
- transition: stroke-dashoffset 200ms ease-out; }
- .dnb-progress__circular__circle {
- stroke-linecap: round; }
- .dnb-progress__circular__line.light .dnb-progress__circular__circle {
- stroke: grey; }
- .dnb-progress__circular__line.dark .dnb-progress__circular__circle {
- stroke: black; }
- .dnb-progress:not(.dnb-progress--no-animation), .dnb-progress--visible:not(.dnb-progress--no-animation) {
- opacity: 0;
- animation: progress-fade-in 200ms ease-out 1 forwards; }
- .dnb-progress--complete:not(.dnb-progress--no-animation):not(.dnb-progress--visible) {
- animation: progress-fade-out 600ms ease-out 1 forwards; }
-
-@keyframes progress-fade-in {
- 0% {
- opacity: 0; }
- 100% {
- opacity: 1; } }
-
-@keyframes progress-fade-out {
- 0% {
- opacity: 1; }
- 100% {
- opacity: 0; } }
-
-@keyframes progress-circular-line-light {
- 0% {
- stroke-dashoffset: var(--progress-circular-circle-offset--min); }
- 50% {
- stroke-dashoffset: var(--progress-circular-circle-offset--min); }
- 100% {
- stroke-dashoffset: var(--progress-circular-circle-offset--max); } }
-
-@keyframes progress-circular-line-dark {
- 0% {
- stroke-dashoffset: var(--progress-circular-circle-offset--min); }
- 50% {
- stroke-dashoffset: var(--progress-circular-circle-offset--max); }
- 100% {
- stroke-dashoffset: var(--progress-circular-circle-offset--max); } }
-"
-`;
diff --git a/packages/dnb-ui-lib/src/components/progress/index.js b/packages/dnb-ui-lib/src/components/progress/index.js
deleted file mode 100644
index ae81e80023f..00000000000
--- a/packages/dnb-ui-lib/src/components/progress/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Component Entry
- *
- */
-
-import Progress from './Progress'
-export default Progress
-export * from './Progress'
diff --git a/packages/dnb-ui-lib/src/components/progress/style.js b/packages/dnb-ui-lib/src/components/progress/style.js
deleted file mode 100644
index c19f66f9dc8..00000000000
--- a/packages/dnb-ui-lib/src/components/progress/style.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Web Style Import
- *
- */
-
-import './style/dnb-progress.scss'
diff --git a/packages/dnb-ui-lib/src/components/progress/style/_progress.scss b/packages/dnb-ui-lib/src/components/progress/style/_progress.scss
deleted file mode 100644
index a859f0da190..00000000000
--- a/packages/dnb-ui-lib/src/components/progress/style/_progress.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-/*
- * Progress component
- *
- */
-
-:root {
- --progress-circular-circle: 88;
- --progress-circular-circle-offset--min: 88;
- --progress-circular-circle-offset--max: 1;
-}
-
-.dnb-progress {
- position: relative;
-
- // circular variant
- &__circular {
- position: relative;
-
- // medium
- width: 2rem;
- height: 2rem;
-
- // since SVG is starting 90deg from top
- transform: rotate(-90deg);
-
- svg {
- position: absolute;
- width: 100%;
- height: 100%;
- }
-
- &__line {
- animation-duration: 2s;
- animation-delay: 200ms;
- animation-timing-function: ease-in-out;
- animation-timing-function: cubic-bezier(0.67, 0.06, 0.27, 0.92);
- animation-iteration-count: infinite;
- }
-
- &__line.background {
- stroke-dashoffset: var(--progress-circular-circle-offset--max);
- }
- &__line.light {
- animation-name: progress-circular-line-light;
- stroke-dasharray: var(--progress-circular-circle),
- var(--progress-circular-circle);
- stroke-dashoffset: var(--progress-circular-circle-offset--max);
- }
- &__line.dark {
- animation-name: progress-circular-line-dark;
- stroke-dasharray: var(--progress-circular-circle),
- var(--progress-circular-circle);
- stroke-dashoffset: var(--progress-circular-circle-offset--min);
- }
- &__line.paused {
- animation-play-state: paused;
- }
- // for static progress animation
- &--has-progress &__line.dark {
- transition: stroke-dashoffset 200ms ease-out;
- }
-
- &__circle {
- stroke-linecap: round;
- }
- &__line.light &__circle {
- stroke: grey;
- }
- &__line.dark &__circle {
- stroke: black;
- }
- }
-
- &:not(#{&}--no-animation),
- &--visible:not(#{&}--no-animation) {
- opacity: 0;
- animation: progress-fade-in 200ms ease-out 1 forwards;
- }
- &--complete:not(#{&}--no-animation):not(#{&}--visible) {
- animation: progress-fade-out 600ms ease-out 1 forwards;
- }
-
- @keyframes progress-fade-in {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- @keyframes progress-fade-out {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
- }
-}
-
-@keyframes progress-circular-line-light {
- 0% {
- stroke-dashoffset: var(--progress-circular-circle-offset--min);
- }
- 50% {
- stroke-dashoffset: var(--progress-circular-circle-offset--min);
- }
- 100% {
- stroke-dashoffset: var(--progress-circular-circle-offset--max);
- }
-}
-
-@keyframes progress-circular-line-dark {
- 0% {
- stroke-dashoffset: var(--progress-circular-circle-offset--min);
- }
- 50% {
- stroke-dashoffset: var(--progress-circular-circle-offset--max);
- }
- 100% {
- stroke-dashoffset: var(--progress-circular-circle-offset--max);
- }
-}
diff --git a/packages/dnb-ui-lib/src/components/progress/style/index.js b/packages/dnb-ui-lib/src/components/progress/style/index.js
deleted file mode 100644
index 2458936b0be..00000000000
--- a/packages/dnb-ui-lib/src/components/progress/style/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Web Style Import
- *
- */
-
-import './dnb-progress.scss'
diff --git a/packages/dnb-ui-lib/src/components/progress/style/themes/ui.js b/packages/dnb-ui-lib/src/components/progress/style/themes/ui.js
deleted file mode 100644
index 905ed04edd0..00000000000
--- a/packages/dnb-ui-lib/src/components/progress/style/themes/ui.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Imports the default theme
- *
- */
-
-import './dnb-progress-theme-ui.scss'
diff --git a/packages/dnb-ui-lib/src/index.js b/packages/dnb-ui-lib/src/index.js
index 2ae9f18aa7d..ed45e4b4bc4 100644
--- a/packages/dnb-ui-lib/src/index.js
+++ b/packages/dnb-ui-lib/src/index.js
@@ -23,7 +23,7 @@ import LineTitle from './components/line-title/LineTitle'
import Logo from './components/logo/Logo'
import Modal from './components/modal/Modal'
import Notification from './components/notification/Notification'
-import Progress from './components/progress/Progress'
+import ProgressIndicator from './components/progress-indicator/ProgressIndicator'
import Slider from './components/slider/Slider'
import StepIndicator from './components/step-indicator/StepIndicator'
import Switch from './components/switch/Switch'
@@ -64,7 +64,7 @@ export {
Logo,
Modal,
Notification,
- Progress,
+ ProgressIndicator,
Slider,
StepIndicator,
Switch,
diff --git a/packages/dnb-ui-lib/src/style/dnb-ui-components.scss b/packages/dnb-ui-lib/src/style/dnb-ui-components.scss
index 43bd04a37c2..3630765b274 100644
--- a/packages/dnb-ui-lib/src/style/dnb-ui-components.scss
+++ b/packages/dnb-ui-lib/src/style/dnb-ui-components.scss
@@ -17,7 +17,7 @@
@import '../components/logo/style/_logo.scss';
@import '../components/modal/style/_modal.scss';
@import '../components/notification/style/_notification.scss';
-@import '../components/progress/style/_progress.scss';
+@import '../components/progress-indicator/style/_progress-indicator.scss';
@import '../components/slider/style/_slider.scss';
@import '../components/step-indicator/style/_step-indicator.scss';
@import '../components/switch/style/_switch.scss';
diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/dnb-theme-ui.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/dnb-theme-ui.scss
index 6cbc171c2d9..9a4421d30e0 100644
--- a/packages/dnb-ui-lib/src/style/themes/theme-ui/dnb-theme-ui.scss
+++ b/packages/dnb-ui-lib/src/style/themes/theme-ui/dnb-theme-ui.scss
@@ -31,7 +31,7 @@
@import '../../../components/form-status/style/themes/dnb-form-status-theme-ui.scss';
@import '../../../components/input/style/themes/dnb-input-theme-ui.scss';
@import '../../../components/modal/style/themes/dnb-modal-theme-ui.scss';
-@import '../../../components/progress/style/themes/dnb-progress-theme-ui.scss';
+@import '../../../components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.scss';
@import '../../../components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss';
@import '../../../components/switch/style/themes/dnb-switch-theme-ui.scss';
@import '../../../components/tabs/style/themes/dnb-tabs-theme-ui.scss';
diff --git a/packages/dnb-ui-lib/stories/componentsStories.js b/packages/dnb-ui-lib/stories/componentsStories.js
index 0d4ec5e8036..e49c48532db 100644
--- a/packages/dnb-ui-lib/stories/componentsStories.js
+++ b/packages/dnb-ui-lib/stories/componentsStories.js
@@ -21,7 +21,7 @@ import {
Switch,
Logo,
StepIndicator,
- Progress,
+ ProgressIndicator,
DatePicker
} from '../src/components'
import { H2, P, Hr } from '../src/elements'
@@ -569,29 +569,29 @@ stories.push([
])
stories.push([
- 'Progress',
+ 'ProgressIndicator',
() => (
-
-
-
)
])
-const ProgressCircular = () => {
+const ProgressIndicatorCircular = () => {
const [visible, setVisibe] = useState(true)
useEffect(() => {
const timer = setInterval(() => setVisibe(!visible), 2400)
return () => clearTimeout(timer)
})
return (
-