feat: progress step indicator has a title and a light badge style

bcgov · Apr 23, 2021 · 9d6aae8 · 9d6aae8
1 parent 6b9d663
commit 9d6aae8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/app/components/ProgressStepIndicator.tsx b/app/components/ProgressStepIndicator.tsx
@@ -13,6 +13,7 @@ interface Props {
     description: string;
     badgeStyle: Variant;
   }>;
+  title?: string;
 }
 
 const NumberedCircle: React.FunctionComponent<NumberCircleProps> = ({
@@ -37,18 +38,27 @@ const NumberedCircle: React.FunctionComponent<NumberCircleProps> = ({
 };
 
 export const ProgressStepIndicator: React.FunctionComponent<Props> = ({
-  steps
+  steps,
+  title
 }) => {
   return (
     <>
+      {title && (
+        <Row>
+          <Col>
+            <h2>{title}</h2>
+          </Col>
+        </Row>
+      )}
+      <br />
       <div className="progress ml-1 mr-1">
         <div
           role="progressbar"
           className="progress-bar"
           aria-valuenow={0}
           aria-valuemin={0}
           aria-valuemax={100}
-          aria-label="operator-progress-indicator"
+          aria-label="progress-step-indicator"
           style={{width: '0%'}}
         />
       </div>
@@ -69,6 +79,9 @@ export const ProgressStepIndicator: React.FunctionComponent<Props> = ({
         ))}
       </Row>
       <style jsx global>{`
+        h2 {
+          font-size: 1.5rem;
+        }
         .stepDescription {
           text-align: center;
           font-weight: 500;

diff --git a/app/components/helpers/StatusBadgeColor.tsx b/app/components/helpers/StatusBadgeColor.tsx
@@ -1,4 +1,5 @@
 export default {
+  NONE: 'light',
   INITIAL: 'warning',
   REJECTED: 'danger',
   PENDING: 'info',