feat(progressBar): add ProgressBar component (#442)

* feat(progressBar): add ProgressBar component

* fix(progress bar): typo of text description

* v2.10.0

Author: burbuli8ra

copy-assets.js

@@ -42,6 +42,9 @@ copyFileSync(
 copyFileSync("src/components/pill/index.d.ts", "lib/components/pill/index.d.ts")
 copyFileSync("src/components/pill/alertMastercard.d.ts", "lib/components/pill/alertMastercard.d.ts")
 copyFileSync("src/components/pill/mastercard.d.ts", "lib/components/pill/mastercard.d.ts")
+
+copyFileSync("src/components/progressBar/index.d.ts", "lib/components/progressBar/index.d.ts")
+
 copyFileSync(
   "src/components/sidebar/portaled-sidebar.d.ts",
   "lib/components/sidebar/portaled-sidebar.d.ts"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "2.9.6",
+  "version": "2.10.0",
   "description": "netdata UI kit",
   "main": "./lib/index.js",
   "files": [

src/components/progressBar/README.md

@@ -0,0 +1,35 @@
+## ProgressBar component
+
+The progress bar component is used to visualise the progress of one ore more than one elements as bar style.
+
+### Props:
+
+```typescript
+interface ProgressBarProps {
+  background?: string
+  className?: string
+  color?: string
+  "data-testid"?: string
+  containerWidth?: string
+  height?: number
+  value?: Value[]
+  width?: string
+  [s: string]: any
+}
+```
+
+### Typical usage:
+
+```JSX
+export const ProgressBars = () => (
+    <div>
+        <ProgressBar width="40%" />
+        <ProgressBar
+        value={[
+          { color: ["blue", "indigo"], width: "30%" },
+          { color: ["green", "limeGreen"], width: "60%" },
+        ]}
+      />
+    </div>
+  )
+```

src/components/progressBar/index.d.ts

@@ -0,0 +1,25 @@
+import { FC } from "react"
+
+export interface Value {
+  color?: string
+  width?: string
+  [key: string]: any
+}
+
+export interface ProgressBarProps {
+  background?: string
+  className?: string
+  color?: string
+  "data-testid"?: string
+  containerWidth?: string
+  height?: number
+  value?: Value[]
+  width?: string
+  [s: string]: any
+}
+
+declare const ProgressBar: FC<ProgressBarProps>
+
+export { ProgressBar }
+
+export default ProgressBar

src/components/progressBar/index.js

@@ -0,0 +1,52 @@
+import React, { forwardRef } from "react"
+import Box from "src/components/templates/box"
+import Flex from "src/components/templates/flex"
+
+const ProgressBar = forwardRef(
+  (
+    {
+      background = "nodeBadgeBackground",
+      className,
+      color = "text",
+      containerWidth = "100%",
+      height = 2,
+      value,
+      width,
+      ...rest
+    },
+    ref
+  ) => {
+    value = Array.isArray(value) ? value : [value || { width, color }]
+
+    return (
+      <Flex
+        background={background}
+        border={{ side: "all", color: background }}
+        className={className}
+        data-testid="progressBar"
+        height={height}
+        ref={ref}
+        round="2px"
+        width={containerWidth}
+        {...rest}
+      >
+        {value.map(({ color, width }, index) =>
+          width === "0%" ? null : (
+            <Box
+              background={color}
+              border={{ side: "all", color }}
+              data-testid={`progressBar-progress${width}`}
+              height="100%"
+              key={`${width}-${index}`}
+              position="relative"
+              round="2px"
+              width={width}
+            />
+          )
+        )}
+      </Flex>
+    )
+  }
+)
+
+export default ProgressBar

src/components/progressBar/index.stories.js

@@ -0,0 +1,27 @@
+import React from "react"
+import { storiesOf } from "@storybook/react"
+import Flex from "src/components/templates/flex"
+import ProgressBar from "."
+
+const story = storiesOf("Atoms/ProgressBar", module)
+
+const Default = () => (
+  <Flex width="300px">
+    <ProgressBar width="80%" color={["blue", "aquamarine"]} background={["purple", "lilac"]} />
+  </Flex>
+)
+
+const WithValue = () => (
+  <Flex width="300px">
+    <ProgressBar
+      value={[
+        { color: ["blue", "indigo"], width: "20%" },
+        { color: ["green", "limeGreen"], width: "60%" },
+      ]}
+      background={["yellow", "seaBuckthorn"]}
+    />
+  </Flex>
+)
+
+story.add("Default", Default)
+story.add("WithValue", WithValue)

src/components/progressBar/index.test.js

@@ -0,0 +1,27 @@
+import React from "react"
+import { renderWithProviders, screen } from "testUtilities"
+import ProgressBar from "."
+
+describe("ProgressBar component", () => {
+  test("should render component with width", () => {
+    renderWithProviders(<ProgressBar width="20%" />)
+
+    expect(screen.getByTestId("progressBar")).toBeInTheDocument()
+    expect(screen.getByTestId("progressBar-progress20%")).toBeInTheDocument()
+  })
+
+  test("should render component with value", () => {
+    renderWithProviders(
+      <ProgressBar
+        value={[
+          { color: ["blue", "indigo"], width: "30%" },
+          { color: ["green", "limeGreen"], width: "60%" },
+        ]}
+      />
+    )
+
+    expect(screen.getByTestId("progressBar")).toBeInTheDocument()
+    expect(screen.getByTestId("progressBar-progress30%")).toBeInTheDocument()
+    expect(screen.getByTestId("progressBar-progress60%")).toBeInTheDocument()
+  })
+})

src/index.js

@@ -102,6 +102,8 @@ export { default as useIntersection } from "./hooks/use-intersection"
 
 export { default as Pill } from "./components/pill"
 
+export { default as ProgressBar } from "./components/progressBar"
+
 export { default as AlertMasterCard } from "./components/pill/alertMastercard"
 export { default as MasterCard } from "./components/pill/mastercard"