feat: Progress (#50)

src/components/Progress/StyledProgress.tsx

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+export const Bar = styled.div`
+  background-color: ${({ theme }) => theme.colors.secondary};
+  border-radius: 32px;
+  height: 16px;
+  transition: width 200ms ease;
+`;
+
+const StyledProgress = styled.div`
+  background-color: ${({ theme }) => theme.colors.input};
+  border-radius: 32px;
+  box-shadow: ${({ theme }) => theme.shadows.inset};
+  height: 16px;
+`;
+
+export default StyledProgress;

src/components/Progress/index.stories.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import random from "lodash/random";
+import Button from "../Button";
+import Progress from "./index";
+
+export default {
+  title: "Progress",
+  component: Progress,
+  argTypes: {},
+};
+
+export const Default: React.FC = () => {
+  const [progress, setProgress] = useState(random(1, 100));
+
+  const handleClick = () => setProgress(random(1, 100));
+
+  return (
+    <div style={{ padding: "32px", width: "400px" }}>
+      <Progress step={progress} />
+      <div style={{ marginTop: "32px" }}>
+        <Button type="button" size="sm" onClick={handleClick}>
+          Random Progress
+        </Button>
+      </div>
+    </div>
+  );
+};

src/components/Progress/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import StyledProgress, { Bar } from "./StyledProgress";
+
+export interface ProgressProps {
+  step?: number;
+}
+
+const stepGuard = (step: number) => {
+  if (step < 0) {
+    return 0;
+  }
+
+  if (step > 100) {
+    return 100;
+  }
+
+  return step;
+};
+
+const Progress: React.FC<ProgressProps> = ({ step = 0 }) => {
+  return (
+    <StyledProgress>
+      <Bar style={{ width: `${stepGuard(step)}%` }} />
+    </StyledProgress>
+  );
+};
+
+export default Progress;

src/index.ts

@@ -11,6 +11,7 @@ export { default as Text } from "./components/Text";
 export { default as Link } from "./components/Link";
 export { default as ColorBox } from "./components/ColorBox";
 export { default as Toggle } from "./components/Toggle";
+export { default as Progress } from "./components/Progress";
 export { default as ResetCSS } from "./ResetCSS";
 
 export { default as Footer } from "./widgets/Footer";