fix(Progress): use correct width for value/total (#2503)

* fix(Progress): adds condition to display percentage when progress='value' and total is defined

* docs(Progress): add example of progress bar with progress='value' and total defined

* lint error fix

* adding simpler example

docs/app/Examples/modules/Progress/Content/ProgressExampleProgressValuePercentageOfTotal.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Progress } from 'semantic-ui-react'
+
+const ProgressExampleProgressValuePercentageOfTotal = () => (
+  <Progress progress='value' value={35} total={50} />
+)
+
+export default ProgressExampleProgressValuePercentageOfTotal

docs/app/Examples/modules/Progress/Content/index.js

@@ -35,6 +35,10 @@ const ProgressContentExamples = () => (
       description='A progress element display progress as a value.'
       examplePath='modules/Progress/Content/ProgressExampleProgressValue'
     />
+    <ComponentExample
+      description='A progress element display progress as a value, with the width determined as a % of total.'
+      examplePath='modules/Progress/Content/ProgressExampleProgressValuePercentageOfTotal'
+    />
   </ExampleSection>
 )
 

src/modules/Progress/Progress.js

@@ -127,9 +127,9 @@ class Progress extends Component {
   }
 
   getPercent = () => {
-    const { precision, progress, value } = this.props
+    const { precision, progress, total, value } = this.props
     const percent = _.clamp(this.calculatePercent(), 0, 100)
-
+    if (!_.isUndefined(total) && !_.isUndefined(value) && progress === 'value') return (value / total) * 100
     if (progress === 'value') return value
     if (_.isUndefined(precision)) return percent
     return _.round(percent, precision)

test/specs/modules/Progress/Progress-test.js

@@ -86,6 +86,11 @@ describe('Progress', () => {
         .find('.bar')
         .should.have.style('width', '0%')
     })
+    it('has a width equal to the percentage of the value of the total, when progress="value"', () => {
+      shallow(<Progress progress='value' value={5} total={10} />)
+        .find('.bar')
+        .should.have.style('width', '50%')
+    })
   })
 
   describe('data-percent', () => {