Add Progress to config

Author: lialila

src/constants/componentCustomizations.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
 import { CaretDown } from '@phosphor-icons/react';
 
+export const CustomizedProgress = {
+  baseStyle: {
+    borderRadius: 'full',
+    colorScheme: 'primary',
+  },
+};
+
 export const CustomizedHeading = {
   baseStyle: {
     fontWeight: 'semibold',

src/index.tsx

@@ -61,6 +61,7 @@ export {
   MenuButton,
   MenuList,
   MenuItem,
+  Progress,
   Select,
   SimpleGrid,
   Spacer,

src/stories/components/Progress.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Progress } from '../..';
+import { COLOR_SCHEMES } from '../../constants/colorSchemes';
+
+export default {
+  title: 'Components/Progress',
+  component: Progress,
+  argTypes: {
+    size: { options: ['xs', 'sm', 'md', 'lg'], control: { type: 'radio' } },
+    colorScheme: {
+      options: COLOR_SCHEMES,
+      control: { type: 'radio' },
+    },
+    hasStripe: { control: { type: 'boolean' } },
+  },
+} as Meta<typeof Progress>;
+
+const Template: StoryFn<typeof Progress> = (args) => <Progress {...args} />;
+
+// const defaultArgs = {
+//   value: 50,
+//   size: 'md',
+//   borderRadius: 'full',
+//   width: 'sm',
+// };
+export const Primary = Template.bind({});
+Primary.args = {
+  colorScheme: 'primary',
+};
+
+export const ColorScheme = Template.bind({});
+ColorScheme.args = {
+  colorScheme: 'red',
+};
+
+export const WithStripe = Template.bind({});
+WithStripe.args = {
+  colorScheme: 'primary',
+  hasStripe: true,
+};

src/utils/getTheme.ts

@@ -11,6 +11,7 @@ import {
   CustomizedList,
   CustomizedNumberInput,
   CustomizedPinInput,
+  CustomizedProgress,
   CustomizedSelect,
   CustomizedTable,
   CustomizedText,
@@ -62,6 +63,7 @@ const getTheme = ({ customColors, customFonts, customRadii }: Options) => {
       List: CustomizedList,
       NumberInput: CustomizedNumberInput,
       PinInput: CustomizedPinInput,
+      Progress: CustomizedProgress,
       Select: CustomizedSelect,
       Table: CustomizedTable,
       Text: CustomizedText,