chore(docs): docs according to new component API

src/components/CircularProgressBar.story.md

@@ -9,29 +9,25 @@ It is required.
 The total number of steps in the progress bar. Default value is 100.
 It is required.
 
-### ringSize
-The size of the ring.
-The type of the value should be a string with a valid CSS unit (e.g. '42px', '2rem', '5em'). Default value is 42px.
-
-### ringBarWidth
-The width of the ring bar in pixels.
-The type of the value should be a string with a valid CSS unit (e.g. '10px', '0.5rem', '1em'). Default value is 10px.
+### showPercentage
+If true, the percentage of the progress will be shown in the center of the circle. Else, the absolute value of the current step will be shown. Default value is false.
 
-### innerTextFontSize
-The font size of the inner text.
-The type of the value should be a string with a valid CSS unit (e.g. '16px', '1rem', '2em'). Default value is 16px.
+### size
+The size of the progress bar. Default value is 'md'.
+Available options are 'xs', 'sm', 'md', 'lg', 'xl'.
 
-### progressColor
-The color of the how much progress has been made. Default value is #333 (dark grey).
+### variant
+The variant of the progress bar. Default value is 'solid'. 
+Available options are 'solid', 'outline'.
 
-### progressRemainingColor
-The color of the remaining progress. Default value is #888 (light grey).
+When the variant is 'solid', the progress bar will be filled with the progress color. When the variant is 'outline', the progress bar will be an outline with the progress color.
 
-### progressCompleteColor
-The color of the completed progress. Default value is #76f7be (light green).
+### theme
+The theme of the progress bar. Default value is 'black'.
+Available options are 'black', 'red', 'green', 'blue', 'orange'.
 
-### isOuterCircleFilledOnComplete
-If true, the outer circle will be filled with the `progressCompleteColor` when the progress is completed. Else, the inner circle will be filled with the `progressCompleteColor`. Default value is false.
+If a string is passed, the predefined theme will be used, and if the color does not match any predefined theme, the default theme will be used.
+If a custom theme is needed, an object with primary and secondary colors can be passed.
 
-### showPercentage
-If true, the percentage of the progress will be shown in the center of the circle. Else, the absolute value of the current step will be shown. Default value is false.
+### progressCompleteColor
+The color of the completed progress. Default value is #76f7be (light green).

src/components/CircularProgressBar.story.vue

@@ -37,8 +37,8 @@
         <CircularProgressBar
           :step="9"
           :totalSteps="9"
-          progressCompleteColor="lightgreen"
           variant="solid"
+          progressCompleteColor="lightgreen"
         />
       </div>
     </Variant>