feat: rename component from #progress to #progress-indicator

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
 

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)
 

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
+
+<Tabs>
+  <Tabs.Content>
+    <ProgressIndicatorInfo />
+  </Tabs.Content>
+  <Tabs.Content>
+    <ProgressIndicatorProperties />
+  </Tabs.Content>
+  <Tabs.Content>
+    <ProgressIndicatorEvents  />
+  </Tabs.Content>
+</Tabs>

packages/dnb-design-system-portal/src/pages/uilib/components/progress/Examples.js → packages/dnb-design-system-portal/src/pages/uilib/components/progress-indicator/Examples.js

@@ -10,17 +10,17 @@ class Example extends PureComponent {
   render() {
     return (
       <Fragment>
-        <ComponentBox caption="Default circular progress">
+        <ComponentBox caption="Default Circular ProgressIndicator">
           {/* @jsx */ `
-<Progress />
+<ProgressIndicator />
           `}
         </ComponentBox>
         <ComponentBox
-          caption="Shows a large circular progress with a static 50% in progress"
-          data-dnb-test="progress-circular--primary"
+          caption="Shows a large Circular ProgressIndicator with a static 50% in progress"
+          data-dnb-test="progress-indicator-circular--primary"
         >
           {/* @jsx */ `
-<Progress
+<ProgressIndicator
   type="circular"
   progress="50"
   size="large"
@@ -29,19 +29,19 @@ class Example extends PureComponent {
           `}
         </ComponentBox>
         <ComponentBox
-          caption="Progress with random progress value to show the transition"
+          caption="ProgressIndicator with random progress value to show the transition"
           noFragments={false}
         >
           {/* @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 (
-    <Progress
+    <ProgressIndicator
       size="large"
       progress={progress}
     />
@@ -50,7 +50,7 @@ class Example extends PureComponent {
           `}
         </ComponentBox>
         <ComponentBox
-          caption="Progress with on_complete callback"
+          caption="ProgressIndicator with on_complete callback"
           noFragments={false}
         >
           {/* @jsx */ `
@@ -61,7 +61,7 @@ class Example extends PureComponent {
     return () => clearTimeout(timer)
   })
   return (
-    <Progress
+    <ProgressIndicator
       size="large"
       visible={visible}
       on_complete={() => {

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
+
+<Examples />

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
-
-<Tabs>
-  <Tabs.Content>
-    <ProgressInfo />
-  </Tabs.Content>
-  <Tabs.Content>
-    <ProgressProperties />
-  </Tabs.Content>
-  <Tabs.Content>
-    <ProgressEvents  />
-  </Tabs.Content>
-</Tabs>
+<OldProgress />

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

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,

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,

packages/dnb-ui-lib/src/components/progress/Progress.js → 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,33 +148,34 @@ 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'
     }
 
     validateDOMAttributes(this.props, params)
 
     const isComplete =
-      visible === false || (hasProgress && parseFloat(progress) >= 100)
+      visible === false ||
+      (hasProgressIndicator && parseFloat(progress) >= 100)
     if (isComplete) {
       this.delayVisibility()
     }
 
     return (
       <div
         className={classnames(
-          'dnb-progress',
-          visible && 'dnb-progress--visible',
-          complete && 'dnb-progress--complete',
-          Boolean(no_animation) && 'dnb-progress--no-animation'
+          'dnb-progress-indicator',
+          visible && 'dnb-progress-indicator--visible',
+          complete && 'dnb-progress-indicator--complete',
+          Boolean(no_animation) && 'dnb-progress-indicator--no-animation'
         )}
         {...params}
       >
         {type === 'circular' && (
-          <ProgressCircular
+          <ProgressIndicatorCircular
             size={size}
             progress={progress}
             complete={complete}