Skip to content

Commit

Permalink
feat: Progress (#50)
Browse files Browse the repository at this point in the history
  • Loading branch information
hachiojidev authored Nov 12, 2020
1 parent 9cbc7c4 commit 49a9c26
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 0 deletions.
17 changes: 17 additions & 0 deletions src/components/Progress/StyledProgress.tsx
Original file line number Diff line number Diff line change
@@ -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;
27 changes: 27 additions & 0 deletions src/components/Progress/index.stories.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
28 changes: 28 additions & 0 deletions src/components/Progress/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
1 change: 1 addition & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down

0 comments on commit 49a9c26

Please sign in to comment.