From 7928e5636466e356d06fa26742c58e5bbd02c1b2 Mon Sep 17 00:00:00 2001
From: Benji <64439681+benjitrosch@users.noreply.github.com>
Date: Fri, 15 Apr 2022 13:31:22 -0400
Subject: [PATCH] chore(Radial Progress): added size and thickness props and
 stories (#92)

---
 src/RadialProgress/RadialProgress.stories.tsx | 25 ++++++++++++++-
 src/RadialProgress/RadialProgress.tsx         | 31 ++++++++++++++++---
 2 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/src/RadialProgress/RadialProgress.stories.tsx b/src/RadialProgress/RadialProgress.stories.tsx
index 20667a5c..1a7da8c2 100644
--- a/src/RadialProgress/RadialProgress.stories.tsx
+++ b/src/RadialProgress/RadialProgress.stories.tsx
@@ -8,10 +8,33 @@ export default {
   component: RadialProgress,
 } as Meta
 
-export const Default: Story<RadialProgressProps> = (args) => {
+const Template: Story<RadialProgressProps> = (args) => {
   return <RadialProgress {...args}>{args.value}%</RadialProgress>
 }
 
+export const Default = Template.bind({})
 Default.args = {
   value: 75,
 }
+
+export const CustomColor = Template.bind({})
+CustomColor.args = {
+  value: 75,
+  color: 'primary'
+}
+
+export const BackgroundColor = Template.bind({})
+BackgroundColor.args = {
+  value: 75,
+  className: 'bg-primary text-primary-content border-4 border-primary'
+}
+
+export const CustomSizeAndThickness: Story<RadialProgressProps> = (args) => {
+  return (
+    <div className='flex items-center gap-4'>
+      <RadialProgress value={70} size='12rem' thickness='2px'>70%</RadialProgress>
+      <RadialProgress value={80} size='12rem' thickness='2rem'>80%</RadialProgress>
+    </div>
+  )
+}
+CustomSizeAndThickness.args = {}
\ No newline at end of file
diff --git a/src/RadialProgress/RadialProgress.tsx b/src/RadialProgress/RadialProgress.tsx
index c143e307..75bb950f 100644
--- a/src/RadialProgress/RadialProgress.tsx
+++ b/src/RadialProgress/RadialProgress.tsx
@@ -1,19 +1,42 @@
 import React, { forwardRef } from 'react'
+import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
-import { IComponentBaseProps } from '../types'
+import { ComponentColor, IComponentBaseProps } from '../types'
 
 export type RadialProgressProps = React.HTMLAttributes<HTMLDivElement> &
   IComponentBaseProps & {
     value: number
+    size?: string
+    thickness?: string
+    color?: ComponentColor
   }
 
 const RadialProgress = forwardRef<HTMLDivElement, RadialProgressProps>(
-  ({ value, dataTheme, className, children, ...props }, ref): JSX.Element => {
-    const classes = twMerge('radial-progress', className)
+  ({
+    value,
+    size = '4rem',
+    thickness = '4px',
+    color,
+    dataTheme,
+    className,
+    children,
+    ...props
+  }, ref): JSX.Element => {
+    const classes = twMerge(
+      'radial-progress',
+      className,
+      clsx({
+        [`text-${color}`]: color,
+      })
+    )
 
     const displayedValue = Math.min(100, Math.max(0, value))
-    const progressStyle: Record<string, number> = { '--value': displayedValue }
+    const progressStyle: Record<string, string | number> = {
+      '--value': displayedValue,
+      '--size': size,
+      '--thickness': thickness,
+    }
 
     return (
       <div