Merge pull request #74 from open-sauced/72-implement-progress-pie-com…

…ponent

feat: Implement ProgressPie component

components/atoms/ProgressPie/progress-pie.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+interface ProgressPieProps {
+    className?: string;
+    percentage?: number;
+    svgStyles?: string;
+    circleStyles?: string;
+}
+
+
+const ProgressPie: React.FC<ProgressPieProps> = ({ className, percentage, svgStyles, circleStyles}) => {
+
+  return (
+    <div className={`${className ? className : ""} w-8 h-8 text-base relative flex items-center justify-center border-2 rounded-full border-orange-400`}>
+      <svg className={`${svgStyles ? svgStyles : ""} w-6 h-6 text-base`} viewBox="0 0 20 20" height="20" width="20">
+        <circle className={`${circleStyles ? circleStyles : ""} fill-transparent stroke-orange-400 -rotate-90 translate-y-[20px]`} r="5" cx="10" cy="10" strokeWidth="10" strokeDasharray={`calc(${percentage} * 31.4 / 100) 31.4`}></circle>
+      </svg>
+    </div>
+  );
+};
+
+export default ProgressPie;

stories/atoms/progress-pie.stories.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import ProgressPie from "../../components/atoms/ProgressPie/progress-pie";
+
+const storyConfig = {
+  title: "Design System/Atoms/ProgressPie"
+};
+
+export default storyConfig;
+
+const ProgressPieTemplate: ComponentStory<typeof ProgressPie> = (args) => <ProgressPie {...args} />;
+
+export const Default = ProgressPieTemplate.bind({});
+Default.args = { percentage: 32 };