Web: Components: progress-bar: Added theme support, moved styles to a separate file.

packages/asc-web-components/src/components/progress-bar/index.js

@@ -1,61 +1,10 @@
 import React, { useState } from "react";
-import styled from "styled-components";
 import PropTypes from "prop-types";
+
 import DropDown from "../drop-down";
 import Link from "./link";
+import StyledProgressBar from "./styled-progress-bar"
 
-const StyledProgressBar = styled.div`
-  position: relative;
-  height: 22px;
-  background-color: #f8f9f9;
-
-  .progress-bar_full-text {
-    display: block;
-    padding: 0px 6px;
-    position: absolute;
-    font-weight: 600;
-    margin: 0;
-  }
-
-  .progress-bar_percent {
-    width: ${(props) => props.uploadedPercent}%;
-    float: left;
-    overflow: hidden;
-    max-height: 22px;
-    min-height: 22px;
-  }
-  .progress-bar_field {
-    width: ${(props) => props.remainPercent}%;
-    float: left;
-    overflow: hidden;
-    max-height: 22px;
-    min-height: 22px;
-  }
-
-  .progress-bar_percent {
-    transition: width 0.6s ease;
-    background: linear-gradient(90deg, #20d21f 75%, #b9d21f 100%);
-  }
-
-  .progress-bar_text {
-    min-width: 200%;
-
-    .progress-bar_progress-text {
-      padding: 2px 6px;
-      position: relative;
-      margin: 0;
-      min-width: 100px;
-      font-weight: 600;
-    }
-  }
-  .progress-bar_field .progress-bar_text {
-    margin-left: -100%;
-  }
-
-  .progress-bar_drop-down {
-    padding: 16px 16px 16px 17px;
-  }
-`;
 
 const ProgressBar = (props) => {
   const { percent, label, dropDownContent, ...rest } = props;

packages/asc-web-components/src/components/progress-bar/styled-progress-bar.js

@@ -0,0 +1,61 @@
+import styled from "styled-components";
+import { Base } from "../../themes";
+
+const StyledProgressBar = styled.div`
+  position: relative;
+  height: ${(props) => props.theme.progressBar.height};
+  background-color: ${(props) => props.theme.progressBar.backgroundColor};
+
+  .progress-bar_full-text {
+    display: block;
+    padding: ${(props) => props.theme.progressBar.fullText.padding};
+    position: absolute;
+    font-weight: ${(props) => props.theme.progressBar.fullText.fontWeight};
+    margin: ${(props) => props.theme.progressBar.fullText.margin};
+  }
+
+  .progress-bar_percent {
+    width: ${(props) => props.uploadedPercent}%;
+    float: ${(props) => props.theme.progressBar.percent.float};
+    overflow: ${(props) => props.theme.progressBar.percent.overflow};
+    max-height: ${(props) => props.theme.progressBar.percent.maxHeight};
+    min-height: ${(props) => props.theme.progressBar.percent.minHeight};
+  }
+  .progress-bar_field {
+    width: ${(props) => props.remainPercent}%;
+    float: left;
+    overflow: hidden;
+    max-height: 22px;
+    min-height: 22px;
+  }
+
+  .progress-bar_percent {
+    transition: ${(props) => props.theme.progressBar.percent.transition};
+    background: ${(props) => props.theme.progressBar.percent.background};
+  }
+
+  .progress-bar_text {
+    min-width: ${(props) => props.theme.progressBar.text.minWidth};
+
+    .progress-bar_progress-text {
+      padding: ${(props) => props.theme.progressBar.text.progressText.padding};
+      position: relative;
+      margin: ${(props) => props.theme.progressBar.text.progressText.margin};
+      min-width: ${(props) =>
+        props.theme.progressBar.text.progressText.minWidth};
+      font-weight: ${(props) =>
+        props.theme.progressBar.text.progressText.fontWeight};
+    }
+  }
+  .progress-bar_field .progress-bar_text {
+    margin-left: ${(props) => props.theme.progressBar.marginLeft};
+  }
+
+  .progress-bar_drop-down {
+    padding: ${(props) => props.theme.progressBar.dropDown.padding};
+  }
+`;
+
+StyledProgressBar.defaultProps = { theme: Base };
+
+export default StyledProgressBar;

packages/asc-web-components/src/themes/base.js

@@ -706,6 +706,42 @@ const Base = {
     unsetBackgroundColor: "unset",
   },
 
+  progressBar: {
+    height: "22px",
+    backgroundColor: grayLight,
+    marginLeft: "-100%",
+
+    fullText: {
+      padding: "0px 6px",
+      fontWeight: "600",
+      margin: "0",
+    },
+
+    percent: {
+      float: "left",
+      overflow: "hidden",
+      maxHeight: "22px",
+      minHeight: "22px",
+      transition: "width 0.6s ease",
+      background: "linear-gradient(90deg, #20d21f 75%, #b9d21f 100%)",
+    },
+
+    text: {
+      minWidth: "200%",
+
+      progressText: {
+        padding: "2px 6px",
+        margin: "0",
+        minWidth: "100px",
+        fontWeight: "600",
+      },
+    },
+    
+    dropDown:{
+      padding: "16px 16px 16px 17px",
+    },
+  },
+
   // loader: {
   //   color: shuttleGrey,
   //   size: "40px",