Merge pull request #21 from lolsteve/progressbar_percentage

Changed progress bar width to be a percentage

src/components/Torrent/ProgressBar/__tests__/__snapshots__/index.spec.js.snap

@@ -1,35 +1,63 @@
 exports[`test ProgressBar leeching 1`] = `
 <div
   className="progressBar leeching">
-  <progress
-    max="100"
-    value={50} />
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow={50}
+    role="progressbar"
+    style={
+      Object {
+        "width": "50%",
+      }
+    } />
 </div>
 `;
 
 exports[`test ProgressBar magnet 1`] = `
 <div
   className="progressBar magnet">
-  <progress
-    max="100"
-    value={50} />
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow={50}
+    role="progressbar"
+    style={
+      Object {
+        "width": "50%",
+      }
+    } />
 </div>
 `;
 
 exports[`test ProgressBar paused 1`] = `
 <div
   className="progressBar paused">
-  <progress
-    max="100"
-    value={50} />
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow={50}
+    role="progressbar"
+    style={
+      Object {
+        "width": "50%",
+      }
+    } />
 </div>
 `;
 
 exports[`test ProgressBar seeding 1`] = `
 <div
   className="progressBar seeding">
-  <progress
-    max="100"
-    value={50} />
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow={50}
+    role="progressbar"
+    style={
+      Object {
+        "width": "50%",
+      }
+    } />
 </div>
 `;

src/components/Torrent/ProgressBar/index.js

@@ -50,7 +50,7 @@ function ProgressBar({ torrent }) {
         aria-valuenow={getPercentage(torrent)}
         aria-valuemin='0'
         aria-valuemax="100"
-        style={{ width: getPercentage(torrent) }}
+        style={{ width: getPercentage(torrent) + '%' }}
       />
     </div>
   );