Improve progress bar, radio group.

Author: bgetting

src/lib/components/ProgressBar/StandaloneProgressBar.js

@@ -17,11 +17,11 @@ const StandaloneProgressBar = () => {
       if (value <= 100) {
         setprogressState({
           audibleFeedback: completed
-            ? "Your file upload has completed."
-            : "Your file is uplaoding.",
+            ? "Your file upload has completed"
+            : "Your file is uploadings",
           description: completed
-            ? "Your file has been uploaded."
-            : `Your file is ${value}% uploaded.`,
+            ? "Your file has been uploaded"
+            : `Your file is ${value}% uploaded`,
           value: completed ? 100 : value + 1
         });
       }
@@ -39,7 +39,7 @@ const StandaloneProgressBar = () => {
         id="progress-bar"
         label="Uploading"
         ref={progressEl}
-        tooltip="top"
+        tooltip="bottom"
         value={progressState.value}
       />
     </div>

src/lib/components/RadioGroupInput/RadioButtonInput.js

@@ -53,7 +53,7 @@ RadioButtonInput.propTypes = {
   id: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
+  onChange: PropTypes.func,
   selected: PropTypes.bool,
   value: PropTypes.string.isRequired
 };

src/pages/ProgressBarPage.js

@@ -1,14 +1,8 @@
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import ProgressBar from "../lib/components/ProgressBar/ProgressBar.js";
 import StandaloneProgressBar from "../lib/components/ProgressBar/StandaloneProgressBar.js";
 
 const ProgressBarPage = () => {
-  const ref = useRef(null);
-
-  useEffect(() => {
-    ref.current.focus();
-  });
-
   return (
     <div>
       <h1>Progress Bar</h1>
@@ -36,7 +30,6 @@ const ProgressBarPage = () => {
             description="You have encountered 25 out of 100 words in Level 3."
             id="pb3"
             label="Level 3"
-            ref={ref}
             tooltip="top"
             value={25}
           />
@@ -60,18 +53,7 @@ const ProgressBarPage = () => {
           />
         </div>
       </div>
-      <div className="section">
-        <ProgressBar
-          description="Full width progress bar"
-          id="pb6"
-          label="Uploading"
-          tooltip="bottom"
-          value={45}
-        />
-      </div>
-      <div className="section">
-        <StandaloneProgressBar />
-      </div>
+      <StandaloneProgressBar />
     </div>
   );
 };

src/scss/styles.scss

@@ -555,6 +555,7 @@ $file-browser-height: 2rem;
       outline: none;
     }
 
+    &:focus,
     &:hover {
       .progress-meter {
         background-color: $blue;