Merge pull request #1614 from ONLYOFFICE/feature/new-progress-bar

Feature/new progress bar

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
+<ProgressBar percent={25} />
+```
+
+### Properties
+
+|   Props   |   Type   | Required | Values | Default | Description                         |
+| :-------: | :------: | :------: | :----: | :-----: | ----------------------------------- |
+| `percent` | `number` |    ✅    |   -    |    -    | Progress value in %. Max value 100% |
+|  `label`  | `string` |    -     |   -    |    -    | Text in progress-bar.               |

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 (
+    <StyledProgressBar {...rest} percent={progressPercent}>
+      <div className="progress-bar_percent" />
+      <Text
+        className="progress-bar_full-text"
+        fontSize="12px"
+        fontWeight="400"
+        lineHeight="16px"
+        title={label}
+      >
+        {label}
+      </Text>
+    </StyledProgressBar>
+  );
+};
+
+ProgressBar.propTypes = {
+  /** Progress value in %. Max value 100% */
+  percent: PropTypes.number.isRequired,
+  /** Text in progress-bar. */
+  label: PropTypes.string,
+};
+
+export default ProgressBar;

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 <ProgressBar {...args} />;
+};
+export const Default = Template.bind({});
+Default.args = {
+  label: "Operation in progress...",
+  percent: 20,
+};

packages/components/progress-bar/progress-bar.test.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { mount } from "enzyme";
+import ProgressBar from ".";
+
+describe("<ProgressBar />", () => {
+  it("renders without error", () => {
+    const wrapper = mount(
+      <ProgressBar percent={50} label="Some work in progress" />
+    );
+
+    expect(wrapper).toExist();
+  });
+});

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;

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",
     },
   },
 

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",
     },
   },