From 4f27c00a4ca679c98f3cfb1333de215221f33842 Mon Sep 17 00:00:00 2001
From: rachel cantor <rachelcantor@gmail.com>
Date: Tue, 6 Feb 2018 22:32:08 -0500
Subject: [PATCH 1/4] fix(Progress): adds condition to display percentage when
 progress='value' and total is defined

---
 src/modules/Progress/Progress.js             | 4 ++--
 test/specs/modules/Progress/Progress-test.js | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/modules/Progress/Progress.js b/src/modules/Progress/Progress.js
index 01abbdf74c..bb268daa66 100644
--- a/src/modules/Progress/Progress.js
+++ b/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)
diff --git a/test/specs/modules/Progress/Progress-test.js b/test/specs/modules/Progress/Progress-test.js
index 56e628947a..e9f419ae68 100644
--- a/test/specs/modules/Progress/Progress-test.js
+++ b/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', () => {

From 259005b4d8df77210b776c47477368bc0393a824 Mon Sep 17 00:00:00 2001
From: rachel cantor <rachelcantor@gmail.com>
Date: Tue, 6 Feb 2018 22:33:12 -0500
Subject: [PATCH 2/4] docs(Progress): add example of progress bar with
 progress='value' and total defined

---
 ...ssExampleProgressValuePercentageOfTotal.js | 35 +++++++++++++++++++
 .../modules/Progress/Content/index.js         |  4 +++
 2 files changed, 39 insertions(+)
 create mode 100644 docs/app/Examples/modules/Progress/Content/ProgressExampleProgressValuePercentageOfTotal.js

diff --git a/docs/app/Examples/modules/Progress/Content/ProgressExampleProgressValuePercentageOfTotal.js b/docs/app/Examples/modules/Progress/Content/ProgressExampleProgressValuePercentageOfTotal.js
new file mode 100644
index 0000000000..77a1b812e3
--- /dev/null
+++ b/docs/app/Examples/modules/Progress/Content/ProgressExampleProgressValuePercentageOfTotal.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import { Divider, Icon, Item, Progress } from 'semantic-ui-react'
+
+const ProgressExampleProgressValuePercentageOfTotal = () => (
+  <Item.Group divided relaxed>
+    <Item>
+      <Item.Image size='small' src='/assets/images/avatar/large/rachel.png' />
+      <Item.Content>
+        <Item.Header>Rachel</Item.Header>
+        <Item.Meta><Icon circular name='book' /> last read an article on January 26th</Item.Meta>
+        <Item.Meta><Icon circular name='newspaper' /> read 20 articles in January</Item.Meta>
+        <Divider hidden />
+        <Item.Description>
+          <Progress progress='value' value={15} total={20} content='Politics' color='blue' />
+          <Progress progress='value' value={5} total={20} content='Cats' color='yellow' />
+        </Item.Description>
+      </Item.Content>
+    </Item>
+    <Item>
+      <Item.Image size='small' src='/assets/images/avatar/large/zoe.jpg' />
+      <Item.Content>
+        <Item.Header>Zoe</Item.Header>
+        <Item.Meta><Icon circular name='book' /> last read an article on January 10th</Item.Meta>
+        <Item.Meta><Icon circular name='newspaper' /> read 7 articles in January</Item.Meta>
+        <Divider hidden />
+        <Item.Description>
+          <Progress progress='value' value={5} total={7} content='Fashion' color='purple' />
+          <Progress progress='value' value={2} total={7} content='Cats' color='yellow' />
+        </Item.Description>
+      </Item.Content>
+    </Item>
+  </Item.Group>
+)
+
+export default ProgressExampleProgressValuePercentageOfTotal
diff --git a/docs/app/Examples/modules/Progress/Content/index.js b/docs/app/Examples/modules/Progress/Content/index.js
index 2c261046cf..019dcf7ea3 100644
--- a/docs/app/Examples/modules/Progress/Content/index.js
+++ b/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, but with the width of progress being determined as a percentage of a total.'
+      examplePath='modules/Progress/Content/ProgressExampleProgressValuePercentageOfTotal'
+    />
   </ExampleSection>
 )
 

From 3ea58768e6a2b38eddee80789e638caee7c89dd1 Mon Sep 17 00:00:00 2001
From: rachel cantor <rachelcantor@gmail.com>
Date: Tue, 6 Feb 2018 22:40:27 -0500
Subject: [PATCH 3/4] lint error fix

---
 docs/app/Examples/modules/Progress/Content/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/Examples/modules/Progress/Content/index.js b/docs/app/Examples/modules/Progress/Content/index.js
index 019dcf7ea3..38d7f58be4 100644
--- a/docs/app/Examples/modules/Progress/Content/index.js
+++ b/docs/app/Examples/modules/Progress/Content/index.js
@@ -36,7 +36,7 @@ const ProgressContentExamples = () => (
       examplePath='modules/Progress/Content/ProgressExampleProgressValue'
     />
     <ComponentExample
-      description='A progress element display progress as a value, but with the width of progress being determined as a percentage of a total.'
+      description='A progress element display progress as a value, with the width determined as a % of total.'
       examplePath='modules/Progress/Content/ProgressExampleProgressValuePercentageOfTotal'
     />
   </ExampleSection>

From 9742b8c0f36bb68a2d7689206899530df4cd6c6d Mon Sep 17 00:00:00 2001
From: Rachel Cantor <rachelcantor@gmail.com>
Date: Wed, 7 Feb 2018 10:31:58 -0500
Subject: [PATCH 4/4] adding simpler example

---
 ...ssExampleProgressValuePercentageOfTotal.js | 31 ++-----------------
 1 file changed, 2 insertions(+), 29 deletions(-)

diff --git a/docs/app/Examples/modules/Progress/Content/ProgressExampleProgressValuePercentageOfTotal.js b/docs/app/Examples/modules/Progress/Content/ProgressExampleProgressValuePercentageOfTotal.js
index 77a1b812e3..107183fcb0 100644
--- a/docs/app/Examples/modules/Progress/Content/ProgressExampleProgressValuePercentageOfTotal.js
+++ b/docs/app/Examples/modules/Progress/Content/ProgressExampleProgressValuePercentageOfTotal.js
@@ -1,35 +1,8 @@
 import React from 'react'
-import { Divider, Icon, Item, Progress } from 'semantic-ui-react'
+import { Progress } from 'semantic-ui-react'
 
 const ProgressExampleProgressValuePercentageOfTotal = () => (
-  <Item.Group divided relaxed>
-    <Item>
-      <Item.Image size='small' src='/assets/images/avatar/large/rachel.png' />
-      <Item.Content>
-        <Item.Header>Rachel</Item.Header>
-        <Item.Meta><Icon circular name='book' /> last read an article on January 26th</Item.Meta>
-        <Item.Meta><Icon circular name='newspaper' /> read 20 articles in January</Item.Meta>
-        <Divider hidden />
-        <Item.Description>
-          <Progress progress='value' value={15} total={20} content='Politics' color='blue' />
-          <Progress progress='value' value={5} total={20} content='Cats' color='yellow' />
-        </Item.Description>
-      </Item.Content>
-    </Item>
-    <Item>
-      <Item.Image size='small' src='/assets/images/avatar/large/zoe.jpg' />
-      <Item.Content>
-        <Item.Header>Zoe</Item.Header>
-        <Item.Meta><Icon circular name='book' /> last read an article on January 10th</Item.Meta>
-        <Item.Meta><Icon circular name='newspaper' /> read 7 articles in January</Item.Meta>
-        <Divider hidden />
-        <Item.Description>
-          <Progress progress='value' value={5} total={7} content='Fashion' color='purple' />
-          <Progress progress='value' value={2} total={7} content='Cats' color='yellow' />
-        </Item.Description>
-      </Item.Content>
-    </Item>
-  </Item.Group>
+  <Progress progress='value' value={35} total={50} />
 )
 
 export default ProgressExampleProgressValuePercentageOfTotal