diff --git a/packages/components/progress-bar/README.md b/packages/components/progress-bar/README.md
new file mode 100644
index 0000000000..f552fd85bf
--- /dev/null
+++ b/packages/components/progress-bar/README.md
@@ -0,0 +1,20 @@
+# ProgressBar
+
+A container that displays a process or operation as a progress bar
+
+### Usage
+
+```js
+import ProgressBar from "@docspace/components/progress-bar";
+```
+
+```jsx
+
+```
+
+### Properties
+
+| Props | Type | Required | Values | Default | Description |
+| :-------: | :------: | :------: | :----: | :-----: | ----------------------------------- |
+| `percent` | `number` | ✅ | - | - | Progress value in %. Max value 100% |
+| `label` | `string` | - | - | - | Text in progress-bar. |
diff --git a/packages/components/progress-bar/index.js b/packages/components/progress-bar/index.js
new file mode 100644
index 0000000000..d5ea676857
--- /dev/null
+++ b/packages/components/progress-bar/index.js
@@ -0,0 +1,34 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import Text from "../text";
+import StyledProgressBar from "./styled-progress-bar";
+
+const ProgressBar = ({ percent, label, ...rest }) => {
+ const progressPercent = percent > 100 ? 100 : percent;
+
+ //console.log("ProgressBar render");
+ return (
+
+
+
+ {label}
+
+
+ );
+};
+
+ProgressBar.propTypes = {
+ /** Progress value in %. Max value 100% */
+ percent: PropTypes.number.isRequired,
+ /** Text in progress-bar. */
+ label: PropTypes.string,
+};
+
+export default ProgressBar;
diff --git a/packages/components/progress-bar/progress-bar.stories.js b/packages/components/progress-bar/progress-bar.stories.js
new file mode 100644
index 0000000000..36ed9b0d85
--- /dev/null
+++ b/packages/components/progress-bar/progress-bar.stories.js
@@ -0,0 +1,30 @@
+import React from "react";
+import ProgressBar from "./";
+
+export default {
+ title: "Components/ProgressBar",
+ component: ProgressBar,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ "A container that displays a process or operation as a progress bar",
+ },
+ },
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/file/ZiW5KSwb4t7Tj6Nz5TducC/UI-Kit-DocSpace-1.0.0?node-id=991%3A43382&mode=dev",
+ },
+ },
+};
+
+//
+
+const Template = (args) => {
+ return ;
+};
+export const Default = Template.bind({});
+Default.args = {
+ label: "Operation in progress...",
+ percent: 20,
+};
diff --git a/packages/components/progress-bar/progress-bar.test.js b/packages/components/progress-bar/progress-bar.test.js
new file mode 100644
index 0000000000..dcd39d9c1b
--- /dev/null
+++ b/packages/components/progress-bar/progress-bar.test.js
@@ -0,0 +1,13 @@
+import React from "react";
+import { mount } from "enzyme";
+import ProgressBar from ".";
+
+describe("", () => {
+ it("renders without error", () => {
+ const wrapper = mount(
+
+ );
+
+ expect(wrapper).toExist();
+ });
+});
diff --git a/packages/components/progress-bar/styled-progress-bar.js b/packages/components/progress-bar/styled-progress-bar.js
new file mode 100644
index 0000000000..6af7cc631c
--- /dev/null
+++ b/packages/components/progress-bar/styled-progress-bar.js
@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import Base from "../themes/base";
+
+const StyledProgressBar = styled.div`
+ position: relative;
+ height: 4px;
+ border-radius: 3px;
+ background-color: ${(props) => props.theme.progressBar.backgroundColor};
+
+ .progress-bar_full-text {
+ display: block;
+ position: absolute;
+ margin-top: 8px;
+ }
+
+ .progress-bar_percent {
+ float: left;
+ overflow: hidden;
+ max-height: 4px;
+ min-height: 4px;
+ transition: width 0.6s ease;
+ border-radius: 3px;
+ width: ${(props) => props.percent}%;
+ background: ${(props) => props.theme.progressBar.percent.background};
+ }
+`;
+
+StyledProgressBar.defaultProps = { theme: Base };
+
+export default StyledProgressBar;
diff --git a/packages/components/themes/base.js b/packages/components/themes/base.js
index d37f96bbba..4f5b10e755 100644
--- a/packages/components/themes/base.js
+++ b/packages/components/themes/base.js
@@ -1351,38 +1351,10 @@ const Base = {
},
progressBar: {
- height: "22px",
- backgroundColor: grayLight,
- marginLeft: "-100%",
-
- fullText: {
- padding: "0px 6px",
- fontWeight: "600",
- margin: "0",
- },
+ backgroundColor: "#DADDDF",
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",
+ background: "#4781D1",
},
},
diff --git a/packages/components/themes/dark.js b/packages/components/themes/dark.js
index 33e1a6a42f..04c1aed89d 100644
--- a/packages/components/themes/dark.js
+++ b/packages/components/themes/dark.js
@@ -1343,38 +1343,10 @@ const Dark = {
},
progressBar: {
- height: "22px",
- backgroundColor: grayLight,
- marginLeft: "-100%",
-
- fullText: {
- padding: "0px 6px",
- fontWeight: "600",
- margin: "0",
- },
+ backgroundColor: "#DADDDF",
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",
+ background: "#4781D1",
},
},