From 6a9c69fd4db2732c8ef902354271752dcc277a00 Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 21 May 2019 12:13:32 +0200 Subject: [PATCH] feat: rename component from #progress to #progress-indicator --- CHANGELOG.md | 2 +- .../src/pages/uilib/components.md | 6 +- .../uilib/components/progress-indicator.md | 25 ++ .../Examples.js | 22 +- .../progress-indicator-events.md} | 0 .../progress-indicator-info.md | 17 ++ .../progress-indicator-properties.md} | 0 .../src/pages/uilib/components/progress.md | 24 +- .../components/progress/progress-info.md | 17 -- .../dnb-ui-lib/src/components/Progress.js | 14 - .../src/components/ProgressIndicator.js | 14 + packages/dnb-ui-lib/src/components/index.js | 4 +- packages/dnb-ui-lib/src/components/lib.js | 6 +- .../ProgressIndicator.js} | 35 ++- .../ProgressIndicatorCircular.js} | 31 ++- .../ProgressIndicator.screenshot.test.js} | 6 +- .../__tests__/ProgressIndicator.test.js} | 26 +- .../ProgressIndicator.test.js.snap | 261 +++++++++++++++++ ...cular-with-50-percentage-1-125eb.snap.png} | Bin .../components/progress-indicator/index.js | 8 + .../components/progress-indicator/style.js | 6 + .../style/_progress-indicator.scss | 141 ++++++++++ .../style/dnb-progress-indicator.scss} | 6 +- .../progress-indicator/style/index.js | 6 + .../dnb-progress-indicator-theme-ui.scss} | 12 +- .../progress-indicator/style/themes/ui.js | 6 + .../web-component.js | 0 .../__snapshots__/Progress.test.js.snap | 262 ------------------ .../src/components/progress/index.js | 8 - .../src/components/progress/style.js | 6 - .../components/progress/style/_progress.scss | 123 -------- .../src/components/progress/style/index.js | 6 - .../components/progress/style/themes/ui.js | 6 - packages/dnb-ui-lib/src/index.js | 4 +- .../src/style/dnb-ui-components.scss | 2 +- .../style/themes/theme-ui/dnb-theme-ui.scss | 2 +- .../dnb-ui-lib/stories/componentsStories.js | 14 +- 37 files changed, 584 insertions(+), 544 deletions(-) create mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/progress-indicator.md rename packages/dnb-design-system-portal/src/pages/uilib/components/{progress => progress-indicator}/Examples.js (68%) rename packages/dnb-design-system-portal/src/pages/uilib/components/{progress/progress-events.md => progress-indicator/progress-indicator-events.md} (100%) create mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/progress-indicator/progress-indicator-info.md rename packages/dnb-design-system-portal/src/pages/uilib/components/{progress/progress-properties.md => progress-indicator/progress-indicator-properties.md} (100%) delete mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-info.md delete mode 100644 packages/dnb-ui-lib/src/components/Progress.js create mode 100644 packages/dnb-ui-lib/src/components/ProgressIndicator.js rename packages/dnb-ui-lib/src/components/{progress/Progress.js => progress-indicator/ProgressIndicator.js} (79%) rename packages/dnb-ui-lib/src/components/{progress/ProgressCircular.js => progress-indicator/ProgressIndicatorCircular.js} (67%) rename packages/dnb-ui-lib/src/components/{progress/__tests__/Progress.screenshot.test.js => progress-indicator/__tests__/ProgressIndicator.screenshot.test.js} (67%) rename packages/dnb-ui-lib/src/components/{progress/__tests__/Progress.test.js => progress-indicator/__tests__/ProgressIndicator.test.js} (57%) create mode 100644 packages/dnb-ui-lib/src/components/progress-indicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap rename 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 => 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} (100%) create mode 100644 packages/dnb-ui-lib/src/components/progress-indicator/index.js create mode 100644 packages/dnb-ui-lib/src/components/progress-indicator/style.js create mode 100644 packages/dnb-ui-lib/src/components/progress-indicator/style/_progress-indicator.scss rename packages/dnb-ui-lib/src/components/{progress/style/dnb-progress.scss => progress-indicator/style/dnb-progress-indicator.scss} (51%) create mode 100644 packages/dnb-ui-lib/src/components/progress-indicator/style/index.js rename packages/dnb-ui-lib/src/components/{progress/style/themes/dnb-progress-theme-ui.scss => progress-indicator/style/themes/dnb-progress-indicator-theme-ui.scss} (67%) create mode 100644 packages/dnb-ui-lib/src/components/progress-indicator/style/themes/ui.js rename packages/dnb-ui-lib/src/components/{progress => progress-indicator}/web-component.js (100%) delete mode 100644 packages/dnb-ui-lib/src/components/progress/__tests__/__snapshots__/Progress.test.js.snap delete mode 100644 packages/dnb-ui-lib/src/components/progress/index.js delete mode 100644 packages/dnb-ui-lib/src/components/progress/style.js delete mode 100644 packages/dnb-ui-lib/src/components/progress/style/_progress.scss delete mode 100644 packages/dnb-ui-lib/src/components/progress/style/index.js delete mode 100644 packages/dnb-ui-lib/src/components/progress/style/themes/ui.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 00d9e448b7b..9a07f4f4136 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## May, 19. 2019 -- New component in the `dnb-ui-lib`: Circular [Progress](/uilib/components/progress) bar (spinner with animation) +- New component in the `dnb-ui-lib`: Circular [ProgressIndicator](/uilib/components/progress-indicator) bar (spinner with animation) ## May, 8. 2019 diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components.md b/packages/dnb-design-system-portal/src/pages/uilib/components.md index 054070d93d2..adc790b11fb 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/components.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/components.md @@ -59,9 +59,13 @@ A ready to use DNB logo in SVG format. Modal dialogs appear on top of the main content changing the mode of the system into a special mode requiring user interaction. The main content is disabled until the user interacts with the modal dialog. +## [ProgressIndicator](/uilib/components/progress-indicator) + +Use a `ProgressIndicator` whenever the user has to wait for more than _150ms_. + ## [StepIndicator](/uilib/components/step-indicator) -The step indicator (progress indicator) is a visual representation of a users progress through a set of steps or series of actions. Their purpose is to both guide the user through the process and to help them create a mental model of the amount of time and effort that is required of them. +The step indicator (progress) is a visual representation of a users progress through a set of steps or series of actions. Their purpose is to both guide the user through the process and to help them create a mental model of the amount of time and effort that is required of them. ## [Notification](/uilib/components/notification) diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/progress-indicator.md b/packages/dnb-design-system-portal/src/pages/uilib/components/progress-indicator.md new file mode 100644 index 00000000000..7b0ff3322fd --- /dev/null +++ b/packages/dnb-design-system-portal/src/pages/uilib/components/progress-indicator.md @@ -0,0 +1,25 @@ +--- +title: 'ProgressIndicator' +draft: false +order: 12 +--- + +import Tabs from 'Tags/Tabs' + +import ProgressIndicatorInfo from 'Pages/uilib/components/progress-indicator/progress-indicator-info' +import ProgressIndicatorProperties from 'Pages/uilib/components/progress-indicator/progress-indicator-properties' +import ProgressIndicatorEvents from 'Pages/uilib/components/progress-indicator/progress-indicator-events' + +# ProgressIndicator + + + + + + + + + + + + diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/progress/Examples.js b/packages/dnb-design-system-portal/src/pages/uilib/components/progress-indicator/Examples.js similarity index 68% rename from packages/dnb-design-system-portal/src/pages/uilib/components/progress/Examples.js rename to packages/dnb-design-system-portal/src/pages/uilib/components/progress-indicator/Examples.js index 6dae38bc90e..bf61a67633e 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/components/progress/Examples.js +++ b/packages/dnb-design-system-portal/src/pages/uilib/components/progress-indicator/Examples.js @@ -10,17 +10,17 @@ class Example extends PureComponent { render() { return ( - + {/* @jsx */ ` - + `} {/* @jsx */ ` - {/* @jsx */ ` () => { const random = (min, max) => (Math.floor( Math.random () * (max - min + 1)) + min) - const [progress, setProgress] = useState(random(1, 100)) + const [progress, setProgressIndicator] = useState(random(1, 100)) useEffect(() => { - const timer = setInterval(() => setProgress(random(1, 100)), 1e3) + const timer = setInterval(() => setProgressIndicator(random(1, 100)), 1e3) return () => clearTimeout(timer) }) return ( - @@ -50,7 +50,7 @@ class Example extends PureComponent { `} {/* @jsx */ ` @@ -61,7 +61,7 @@ class Example extends PureComponent { return () => clearTimeout(timer) }) return ( - { diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-events.md b/packages/dnb-design-system-portal/src/pages/uilib/components/progress-indicator/progress-indicator-events.md similarity index 100% rename from packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-events.md rename to packages/dnb-design-system-portal/src/pages/uilib/components/progress-indicator/progress-indicator-events.md diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/progress-indicator/progress-indicator-info.md b/packages/dnb-design-system-portal/src/pages/uilib/components/progress-indicator/progress-indicator-info.md new file mode 100644 index 00000000000..48ab283c725 --- /dev/null +++ b/packages/dnb-design-system-portal/src/pages/uilib/components/progress-indicator/progress-indicator-info.md @@ -0,0 +1,17 @@ +--- +draft: true +--- + +import Examples from 'Pages/uilib/components/progress-indicator/Examples' + +## Description + +Use a `ProgressIndicator` whenever the user has to wait for more than _150ms_. This component is also knows as: + +- Indicator (Activity-Indicator) +- Loader (Pre-loader) +- Spinner + +## Demos + + diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-properties.md b/packages/dnb-design-system-portal/src/pages/uilib/components/progress-indicator/progress-indicator-properties.md similarity index 100% rename from packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-properties.md rename to packages/dnb-design-system-portal/src/pages/uilib/components/progress-indicator/progress-indicator-properties.md diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/progress.md b/packages/dnb-design-system-portal/src/pages/uilib/components/progress.md index 1d7e29a7e93..84c7e6e48e2 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/components/progress.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/components/progress.md @@ -1,25 +1,9 @@ --- -title: 'Progress' -draft: false +title: 'ProgressIndicator' +draft: true order: 12 --- -import Tabs from 'Tags/Tabs' +import OldProgress from 'Pages/uilib/components/progress' -import ProgressInfo from 'Pages/uilib/components/progress/progress-info' -import ProgressProperties from 'Pages/uilib/components/progress/progress-properties' -import ProgressEvents from 'Pages/uilib/components/progress/progress-events' - -# Progress - - - - - - - - - - - - + diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-info.md b/packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-info.md deleted file mode 100644 index 536b7609e60..00000000000 --- a/packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-info.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -draft: true ---- - -import Examples from 'Pages/uilib/components/progress/Examples' - -## Description - -Use a progress whenever the user has to wait for more than _150ms_. This component is also knows as: - -- Indicator (Activity-Indicator) -- Loader (Pre-loader) -- Spinner - -## Demos - - diff --git a/packages/dnb-ui-lib/src/components/Progress.js b/packages/dnb-ui-lib/src/components/Progress.js deleted file mode 100644 index 5a6542f1865..00000000000 --- a/packages/dnb-ui-lib/src/components/Progress.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * ATTENTION: This file is auto generated by using "prepareTemplates". - * Do not change the content! - * - */ - -/** - * Library Index progress to autogenerate all the components and patterns - * Used by "prepareProgresss" - */ - -import Progress from './progress/Progress' -export * from './progress/Progress' -export default Progress diff --git a/packages/dnb-ui-lib/src/components/ProgressIndicator.js b/packages/dnb-ui-lib/src/components/ProgressIndicator.js new file mode 100644 index 00000000000..16f9c9014e8 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/ProgressIndicator.js @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index progress-indicator to autogenerate all the components and patterns + * Used by "prepareProgressIndicators" + */ + +import ProgressIndicator from './progress-indicator/ProgressIndicator' +export * from './progress-indicator/ProgressIndicator' +export default ProgressIndicator diff --git a/packages/dnb-ui-lib/src/components/index.js b/packages/dnb-ui-lib/src/components/index.js index 40be6322827..db2433e4c78 100644 --- a/packages/dnb-ui-lib/src/components/index.js +++ b/packages/dnb-ui-lib/src/components/index.js @@ -23,7 +23,7 @@ import LineTitle from './line-title/LineTitle' import Logo from './logo/Logo' import Modal from './modal/Modal' import Notification from './notification/Notification' -import Progress from './progress/Progress' +import ProgressIndicator from './progress-indicator/ProgressIndicator' import Slider from './slider/Slider' import StepIndicator from './step-indicator/StepIndicator' import Switch from './switch/Switch' @@ -44,7 +44,7 @@ export { Logo, Modal, Notification, - Progress, + ProgressIndicator, Slider, StepIndicator, Switch, diff --git a/packages/dnb-ui-lib/src/components/lib.js b/packages/dnb-ui-lib/src/components/lib.js index 64471b2b3d2..360119f5651 100644 --- a/packages/dnb-ui-lib/src/components/lib.js +++ b/packages/dnb-ui-lib/src/components/lib.js @@ -25,7 +25,7 @@ import LineTitle from './line-title/LineTitle' import Logo from './logo/Logo' import Modal from './modal/Modal' import Notification from './notification/Notification' -import Progress from './progress/Progress' +import ProgressIndicator from './progress-indicator/ProgressIndicator' import Slider from './slider/Slider' import StepIndicator from './step-indicator/StepIndicator' import Switch from './switch/Switch' @@ -46,7 +46,7 @@ export { Logo, Modal, Notification, - Progress, + ProgressIndicator, Slider, StepIndicator, Switch, @@ -68,7 +68,7 @@ export const getComponents = () => { Logo, Modal, Notification, - Progress, + ProgressIndicator, Slider, StepIndicator, Switch, diff --git a/packages/dnb-ui-lib/src/components/progress/Progress.js b/packages/dnb-ui-lib/src/components/progress-indicator/ProgressIndicator.js similarity index 79% rename from packages/dnb-ui-lib/src/components/progress/Progress.js rename to packages/dnb-ui-lib/src/components/progress-indicator/ProgressIndicator.js index eb43b2ea9ae..21b303b0edb 100644 --- a/packages/dnb-ui-lib/src/components/progress/Progress.js +++ b/packages/dnb-ui-lib/src/components/progress-indicator/ProgressIndicator.js @@ -1,5 +1,5 @@ /** - * Web Progress Component + * Web ProgressIndicator Component * */ @@ -11,7 +11,7 @@ import { validateDOMAttributes, dispatchCustomElementEvent } from '../../shared/component-helper' -import ProgressCircular from './ProgressCircular' +import ProgressIndicatorCircular from './ProgressIndicatorCircular' const renderProps = { on_complete: null } @@ -59,13 +59,17 @@ export const defaultProps = { ...renderProps } -export default class Progress extends PureComponent { - static tagName = 'dnb-progress' +export default class ProgressIndicator extends PureComponent { + static tagName = 'dnb-progress-indicator' static propTypes = propTypes static defaultProps = defaultProps static enableWebComponent() { - registerElement(Progress.tagName, Progress, defaultProps) + registerElement( + ProgressIndicator.tagName, + ProgressIndicator, + defaultProps + ) } static getDerivedStateFromProps(props, state) { @@ -87,7 +91,7 @@ export default class Progress extends PureComponent { super(props) // this._id = - // props.id || `dnb-progress-${Math.round(Math.random() * 999)}` // cause we need an id anyway + // props.id || `dnb-progress-indicator-${Math.round(Math.random() * 999)}` // cause we need an id anyway this.state = { _listenForPropChanges: true, @@ -108,7 +112,7 @@ export default class Progress extends PureComponent { if (typeof this.props.on_complete === 'function') { this.fadeOutTimeout = setTimeout(() => { dispatchCustomElementEvent(this, 'on_complete') - }, 600) // wait for CSS fade out, defined in "progress-fade-out" + }, 600) // wait for CSS fade out, defined in "progress-indicator-fade-out" } } @@ -144,9 +148,9 @@ export default class Progress extends PureComponent { const { progress, visible, complete } = this.state const params = { ...props } - const hasProgress = parseFloat(progress) > -1 + const hasProgressIndicator = parseFloat(progress) > -1 - if (visible && !hasProgress) { + if (visible && !hasProgressIndicator) { params.role = 'alert' params['aria-busy'] = 'true' } @@ -154,7 +158,8 @@ export default class Progress extends PureComponent { validateDOMAttributes(this.props, params) const isComplete = - visible === false || (hasProgress && parseFloat(progress) >= 100) + visible === false || + (hasProgressIndicator && parseFloat(progress) >= 100) if (isComplete) { this.delayVisibility() } @@ -162,15 +167,15 @@ export default class Progress extends PureComponent { return (
{type === 'circular' && ( - -1 + const hasProgressIndicator = parseFloat(progress) > -1 const params = {} - if (hasProgress) { + if (hasProgressIndicator) { params['title'] = `${progress}%` params['aria-label'] = `${progress}%` } else { @@ -42,34 +42,35 @@ export default class ProgressCircular extends PureComponent { return (
{/* 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( ) @@ -34,7 +34,7 @@ describe('Circular Progress component', () => { it('has to have a stroke-dashoffset of 44 on 50%', () => { expect( - Comp.find('svg.dnb-progress__circular__line.dark[style]') + Comp.find('svg.dnb-progress-indicator__circular__line.dark[style]') .instance() .getAttribute('style') ).toBe('stroke-dashoffset: 44;') @@ -42,7 +42,7 @@ describe('Circular Progress component', () => { it('has to have a aria-label with a 50% value', () => { expect( - Comp.find('.dnb-progress__circular') + Comp.find('.dnb-progress-indicator__circular') .instance() .getAttribute('aria-label') ).toBe('50%') @@ -53,14 +53,18 @@ describe('Circular Progress component', () => { }) }) -describe('Progress scss', () => { +describe('ProgressIndicator scss', () => { it('have to match snapshot', () => { - const scss = loadScss(require.resolve('../style/dnb-progress.scss')) + const scss = loadScss( + require.resolve('../style/dnb-progress-indicator.scss') + ) expect(scss).toMatchSnapshot() }) it('have to match default theme snapshot', () => { const scss = loadScss( - require.resolve('../style/themes/dnb-progress-theme-ui.scss') + require.resolve( + '../style/themes/dnb-progress-indicator-theme-ui.scss' + ) ) expect(scss).toMatchSnapshot() }) diff --git a/packages/dnb-ui-lib/src/components/progress-indicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap b/packages/dnb-ui-lib/src/components/progress-indicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap new file mode 100644 index 00000000000..6b457feb377 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/progress-indicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap @@ -0,0 +1,261 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Circular ProgressIndicator component have to match snapshot 1`] = ` + +
+ +
+ + + + + + + + + + +
+ +
+ +`; + +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 ( -