Web: Components: Restored old progress-bar

(cherry picked from commit e6e02945f4)

packages/components/progress-bar/README.md

@@ -0,0 +1,21 @@
+# ProgressBar
+
+A container that displays a process or operation as a progress bar
+
+### Usage
+
+```js
+import ProgressBar from "@docspace/components/progress-bar";
+```
+
+```jsx
+<ProgressBar value={10} maxValue={100} />
+```
+
+### Properties
+
+|       Props       |   Type   | Required | Values | Default | Description           |
+| :---------------: | :------: | :------: | :----: | :-----: | --------------------- |
+|     `percent`     | `number` |    ✅    |   -    |    -    | Progress value.       |
+|      `label`      | `string` |    -     |   -    |    -    | Text in progress-bar. |
+| `dropDownContent` |  `any`   |    -     |   -    |    -    | Drop-down content.    |

packages/components/progress-bar/link.js

@@ -0,0 +1,72 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+import Text from "../text";
+import ExpanderDownReactSvg from "PUBLIC_DIR/images/expander-down.react.svg";
+const StyledLinkWrapper = styled.span`
+  position: relative;
+
+  .fixed-max-width {
+    max-width: 260px;
+  }
+`;
+
+const StyledLink = styled.a`
+  cursor: pointer;
+  user-select: none;
+  padding-right: 20px;
+  position: relative;
+  display: inline-grid;
+  color: ${(props) => props.color};
+  text-decoration: underline dashed;
+
+  .progress-bar_icon {
+    position: absolute;
+    width: 8px;
+    min-width: 8px;
+    height: 8px;
+    right: 6px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+
+    path {
+      fill: ${(props) => props.color};
+      stroke: ${(props) => props.color};
+    }
+
+    ${(props) =>
+      props.isOpen &&
+      css`
+        bottom: -1px;
+        transform: scale(1, -1);
+      `}
+  }
+`;
+
+class Link extends React.Component {
+  render() {
+    const { color, children, isOpen, showIcon, ...rest } = this.props;
+
+    //console.log("ProgressBar link render");
+    return (
+      <StyledLinkWrapper {...rest}>
+        <StyledLink color={color} isOpen={isOpen}>
+          <Text color={color}>{children}</Text>
+          {showIcon && <ExpanderDownReactSvg className="progress-bar_icon" />}
+        </StyledLink>
+      </StyledLinkWrapper>
+    );
+  }
+}
+
+Link.propTypes = {
+  children: PropTypes.any,
+  color: PropTypes.string,
+  isOpen: PropTypes.bool,
+  showIcon: PropTypes.bool,
+};
+
+Link.displayName = "Link";
+
+export default Link;

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

@@ -0,0 +1,25 @@
+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",
+      },
+    },
+  },
+};
+
+const Template = (args) => {
+  return <ProgressBar {...args} style={{ marginTop: 16 }} />;
+};
+export const Default = Template.bind({});
+Default.args = {
+  label: "Uploading files: 20 of 100",
+  percent: 20,
+  dropDownContent: "You content here",
+};

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

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

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

@@ -0,0 +1,61 @@
+import styled from "styled-components";
+import Base from "../themes/base";
+
+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;