feat: add static progress to circular #progress - also add example to…

… the docs
dnbexperience · May 19, 2019 · 39bae67 · 39bae67
1 parent 6b99a2b
commit 39bae67
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 46 deletions.
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/Examples.js
@@ -10,11 +10,19 @@ class Example extends PureComponent {
   render() {
     return (
       <Fragment>
-        <ComponentBox>
+        <ComponentBox caption="Default circular progress">
+          {/* @jsx */ `
+<Progress />
+          `}
+        </ComponentBox>
+        <ComponentBox
+          caption="Shows a large circular progress with a static 50% in progress"
+          data-dnb-test="progress-circular--primary"
+        >
           {/* @jsx */ `
 <Progress
-  // label="Primary button with text only"
-  data-dnb-test="progress-circular--primary"
+  progress="50"
+  size="large"
 />
           `}
         </ComponentBox>

diff --git a/...design-system-portal/src/pages/uilib/components/progress/progress-properties.md b/...design-system-portal/src/pages/uilib/components/progress/progress-properties.md
@@ -7,6 +7,7 @@ draft: true
 | Properties     | Description                                                                                                                                         |
 | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `label`        | _(optional)_ if a text label is needed. Defaults to `null`.                                                                                         |
+| `progress`     | _(optional)_ to visualize a static **percentage** (0-100) as a progress state. Defaults to `null`.                                                  |
 | `visible`      | _(optional)_ defines the visibility of the progress. Toggeling the `visible` property to false will force a fade-out animation. Defaults to `true`. |
 | `type`         | _(optional)_ defines the **type** of progress, like `circular`. Defaults to `circular`.                                                             |
 | `no_animation` | _(optional)_ disables the fade-in and fade-out animation. Defaults to false.                                                                        |

diff --git a/packages/dnb-ui-lib/src/components/progress/Progress.js b/packages/dnb-ui-lib/src/components/progress/Progress.js
@@ -5,49 +5,47 @@
 
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-// import classnames from 'classnames'
-// import keycode from 'keycode'
+import classnames from 'classnames'
 import {
   registerElement
   // validateDOMAttributes,
   // dispatchCustomElementEvent
 } from '../../shared/component-helper'
 import ProgressCircular from './ProgressCircular'
 
-const renderProps = {
-  render: null
-}
+const renderProps = {}
 
 export const propTypes = {
-  label: PropTypes.string,
+  // label: PropTypes.string,
   visible: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  type: PropTypes.oneOf(['circular']),
-  no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  min_time: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  variant: PropTypes.oneOf(['primary', 'secondary']),
-  size: PropTypes.oneOf(['large', 'medium']),
+  // type: PropTypes.oneOf(['circular']),
+  // no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  // min_time: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  // variant: PropTypes.oneOf(['primary', 'secondary']),
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'huge']),
+  progress: PropTypes.number
   // id: PropTypes.string,
   // class: PropTypes.string,
   /** React props */
-  className: PropTypes.string,
-  children: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.node,
-    PropTypes.func
-  ]),
+  // className: PropTypes.string,
+  // children: PropTypes.oneOfType([
+  //   PropTypes.object,
+  //   PropTypes.node,
+  //   PropTypes.func
+  // ]),
 
   // Web Component props
-  render: PropTypes.func
 }
 
 export const defaultProps = {
-  label: null,
+  // label: null,
   visible: true,
-  type: 'circular',
-  no_animation: false,
-  min_time: null,
-  variant: 'primary',
+  // type: 'circular',
+  // no_animation: false,
+  // min_time: null,
+  // variant: 'primary',
   size: 'medium',
+  progress: null,
   // id: null,
   // class: null,
 
@@ -70,8 +68,11 @@ export default class Progress extends PureComponent {
 
   static getDerivedStateFromProps(props, state) {
     if (state._listenForPropChanges) {
-      if (props.visible && state._visible !== props.visible) {
-        state.visible = state._visible = props.visible
+      if (props.visible) {
+        state.visible = Boolean(props.visible)
+      }
+      if (parseFloat(props.progress) > -1) {
+        state.visible = props.progress
       }
     }
     state._listenForPropChanges = true
@@ -88,23 +89,28 @@ export default class Progress extends PureComponent {
     this.state = {
       _listenForPropChanges: true,
       visible,
-      _visible: visible
+      progress: props.progress
     }
-
-    // this._tablistRef = React.createRef()
   }
 
   render() {
     const {
+      size,
+      progress: _progress, //eslint-disable-line
       visible: _visible //eslint-disable-line
-      // ...props
+      // ...attributes
     } = this.props
 
-    // const { visible } = this.state
+    const { progress, visible } = this.state
 
     return (
-      <div className="dnb-progress">
-        <ProgressCircular />
+      <div
+        className={classnames(
+          'dnb-progress',
+          !visible && 'dnb-progress--hidden'
+        )}
+      >
+        <ProgressCircular size={size} progress={progress} />
       </div>
     )
   }

diff --git a/packages/dnb-ui-lib/src/components/progress/ProgressCircular.js b/packages/dnb-ui-lib/src/components/progress/ProgressCircular.js
@@ -5,24 +5,67 @@
 
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export const propTypes = {
+  size: PropTypes.string,
+  progress: PropTypes.number,
+  maxOffset: PropTypes.number
+}
+export const defaultProps = {
+  size: null,
+  progress: null,
+  maxOffset: 88
+}
 
 export default class ProgressCircular extends PureComponent {
+  static propTypes = propTypes
+  static defaultProps = defaultProps
   render() {
+    const { size, maxOffset, progress } = this.props
+    const strokeDashoffset = -((maxOffset / 100) * progress)
+    const hasProgress = parseFloat(progress) > -1
     return (
-      <div className="dnb-progress__circular">
-        <Circle className="dnb-progress__circular__line dark paused" />
-        <Circle className="dnb-progress__circular__line light" />
-        <Circle className="dnb-progress__circular__line dark" />
+      <div
+        className={classnames(
+          'dnb-progress__circular',
+          size && `dnb-progress__circular--${size}`
+        )}
+      >
+        <Circle
+          className={classnames(
+            'dnb-progress__circular__line',
+            'dark',
+            'paused'
+          )}
+        />
+        <Circle
+          className={classnames(
+            'dnb-progress__circular__line',
+            'light',
+            hasProgress && 'paused'
+          )}
+          style={hasProgress ? { strokeDashoffset } : {}}
+        />
+        <Circle
+          className={classnames(
+            'dnb-progress__circular__line',
+            'dark',
+            hasProgress && 'paused'
+          )}
+          style={hasProgress ? { strokeDashoffset: -maxOffset } : {}}
+        />
       </div>
     )
   }
 }
 
-const Circle = ({ className }) => (
+const Circle = ({ className, ...rest }) => (
   <svg
     className={className}
     viewBox="0 0 32 32"
     shapeRendering="optimizeSpeed"
+    {...rest}
   >
     <circle
       className="dnb-progress__circular__circle"

diff --git a/packages/dnb-ui-lib/src/components/progress/style/_progress.scss b/packages/dnb-ui-lib/src/components/progress/style/_progress.scss
@@ -16,9 +16,25 @@
   &__circular {
     position: relative;
 
+    // medium
     width: 2rem;
     height: 2rem;
 
+    &--small {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    &--large {
+      width: 4rem;
+      height: 4rem;
+    }
+
+    &--huge {
+      width: 20rem;
+      height: 20rem;
+    }
+
     // since SVG is starting 90deg from top
     transform: rotate(-90deg);
 
@@ -49,7 +65,7 @@
         var(--progress-circular-circle);
       stroke-dashoffset: var(--progress-circular-circle-offset--min);
     }
-    &__line.dark.paused {
+    &__line.paused {
       // z-index: 1;
       animation-play-state: paused;
     }
@@ -58,10 +74,10 @@
       stroke-linecap: round;
     }
     &__line.light &__circle {
-      stroke: var(--color-mint-green);
+      stroke: grey;
     }
     &__line.dark &__circle {
-      stroke: var(--color-emerald-green);
+      stroke: black;
     }
   }
 }

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/style/themes/dnb-progress-theme-ui.scss
@@ -5,5 +5,29 @@
 
 @import '../../../../style/themes/imports.scss';
 
-// .dnb-progress {
-// }
+/*
+ * Progress complightnt
+ *
+ */
+
+:root {
+  --progress-circular-circle: 88;
+  --progress-circular-circle-offset--min: -1;
+  --progress-circular-circle-offset--max: -88;
+}
+
+.dnb-progress {
+  // circular variant
+  &__circular {
+    &__line {
+      animation-duration: 2s;
+    }
+
+    &__line.light &__circle {
+      stroke: var(--color-mint-green);
+    }
+    &__line.dark &__circle {
+      stroke: var(--color-emerald-green);
+    }
+  }
+}
diff --git a/packages/dnb-ui-lib/stories/componentsStories.js b/packages/dnb-ui-lib/stories/componentsStories.js
@@ -520,7 +520,10 @@ stories.push([
   () => (
     <Wrapper>
       <Box>
-        <Progress />
+        <Progress size="huge" />
+      </Box>
+      <Box>
+        <Progress progress={88} size="huge" />
       </Box>
     </Wrapper>
   )