From 52a80b9304352d247cca2823157c4bd5315901a9 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Sat, 22 Jul 2023 17:35:50 +0400 Subject: [PATCH] Web: Components: Restored old progress-bar (cherry picked from commit e6e02945f441a7c5b1b7b0df4b57264143e0f0b0) --- packages/components/progress-bar/README.md | 21 ++++++ packages/components/progress-bar/link.js | 72 +++++++++++++++++++ .../progress-bar/progress-bar.stories.js | 25 +++++++ .../progress-bar/progress-bar.test.js | 13 ++++ .../progress-bar/styled-progress-bar.js | 61 ++++++++++++++++ 5 files changed, 192 insertions(+) create mode 100644 packages/components/progress-bar/README.md create mode 100644 packages/components/progress-bar/link.js create mode 100644 packages/components/progress-bar/progress-bar.stories.js create mode 100644 packages/components/progress-bar/progress-bar.test.js create mode 100644 packages/components/progress-bar/styled-progress-bar.js diff --git a/packages/components/progress-bar/README.md b/packages/components/progress-bar/README.md new file mode 100644 index 0000000000..d41ac7ab78 --- /dev/null +++ b/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 + +``` + +### Properties + +| Props | Type | Required | Values | Default | Description | +| :---------------: | :------: | :------: | :----: | :-----: | --------------------- | +| `percent` | `number` | ✅ | - | - | Progress value. | +| `label` | `string` | - | - | - | Text in progress-bar. | +| `dropDownContent` | `any` | - | - | - | Drop-down content. | diff --git a/packages/components/progress-bar/link.js b/packages/components/progress-bar/link.js new file mode 100644 index 0000000000..1fd5a116b1 --- /dev/null +++ b/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 ( + + + {children} + {showIcon && } + + + ); + } +} + +Link.propTypes = { + children: PropTypes.any, + color: PropTypes.string, + isOpen: PropTypes.bool, + showIcon: PropTypes.bool, +}; + +Link.displayName = "Link"; + +export default Link; 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..8dc824d09b --- /dev/null +++ b/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 ; +}; +export const Default = Template.bind({}); +Default.args = { + label: "Uploading files: 20 of 100", + percent: 20, + dropDownContent: "You content here", +}; 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..4ccc2b757e --- /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..448e6a2959 --- /dev/null +++ b/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;