feat(Progress): Add value option, to just show the value in the bar (#…

…2383)

* add value option, to just show the value of the bar

* Fix Linting errors

* adding new prop value to TS

* progress of type percent is the default

* Update Progress-test.js

* style(Progress): styling fixed and doc example

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

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

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

@@ -31,6 +31,10 @@ const ProgressContentExamples = () => (
       description='A progress element display progress as a ratio.'
       examplePath='modules/Progress/Content/ProgressExampleProgressRatio'
     />
+    <ComponentExample
+      description='A progress element display progress as a value.'
+      examplePath='modules/Progress/Content/ProgressExampleProgressValue'
+    />
   </ExampleSection>
 )
 

src/modules/Progress/Progress.d.ts

@@ -55,7 +55,7 @@ export interface ProgressProps {
   precision?: number;
 
   /** A progress bar can contain a text value indicating current progress. */
-  progress?: boolean | 'percent' | 'ratio';
+  progress?: boolean | 'percent' | 'ratio' | 'value';
 
   /** A progress bar can vary in size. */
   size?: 'tiny' | 'small' | 'medium' | 'large' | 'big';

src/modules/Progress/Progress.js

@@ -74,7 +74,7 @@ class Progress extends Component {
     /** A progress bar can contain a text value indicating current progress. */
     progress: PropTypes.oneOfType([
       PropTypes.bool,
-      PropTypes.oneOf(['percent', 'ratio']),
+      PropTypes.oneOf(['percent', 'ratio', 'value']),
     ]),
 
     /** A progress bar can vary in size. */
@@ -95,7 +95,6 @@ class Progress extends Component {
 
     /** For use with total. Together, these will calculate the percent. Mutually excludes percent. */
     value: customPropTypes.every([
-      customPropTypes.demand(['total']),
       customPropTypes.disallow(['percent']),
       PropTypes.oneOfType([
         PropTypes.number,
@@ -119,10 +118,19 @@ class Progress extends Component {
     if (!_.isUndefined(total) && !_.isUndefined(value)) return (value / total) * 100
   }
 
+  computeValueText = (percent) => {
+    const { progress, total, value } = this.props
+
+    if (progress === 'value') return value
+    if (progress === 'ratio') return `${value}/${total}`
+    return `${percent}%`
+  }
+
   getPercent = () => {
-    const { precision } = this.props
+    const { precision, progress, value } = this.props
     const percent = _.clamp(this.calculatePercent(), 0, 100)
 
+    if (progress === 'value') return value
     if (_.isUndefined(precision)) return percent
     return _.round(percent, precision)
   }
@@ -142,17 +150,12 @@ class Progress extends Component {
   }
 
   renderProgress = (percent) => {
-    const {
-      precision,
-      progress,
-      total,
-      value,
-    } = this.props
+    const { precision, progress } = this.props
 
     if (!progress && _.isUndefined(precision)) return
     return (
       <div className='progress'>
-        { progress !== 'ratio' ? `${percent}%` : `${value}/${total}` }
+        {this.computeValueText(percent)}
       </div>
     )
   }

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

@@ -159,6 +159,12 @@ describe('Progress', () => {
         .find('.progress')
         .should.contain.text('50%')
     })
+    it('displays the progress as text when set to "value"', () => {
+      shallow(<Progress progress='value' value={1} total={2} />)
+        .children()
+        .find('.progress')
+        .should.contain.text('1')
+    })
     it('shows the percent complete', () => {
       shallow(<Progress percent={72} progress />)
         .children()