feat(Progress): Export Progress from chakra-ui

src/constants/componentCustomizations.tsx

@@ -460,6 +460,14 @@ export const CustomizedPinInput = {
   },
 };
 
+export const CustomizedProgress = {
+  baseStyle: {
+    track: {
+      borderRadius: 'full',
+    },
+  },
+};
+
 export const CustomizedTextarea = {
   sizes: {
     xl: {

src/index.tsx

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

src/stories/components/Progress.stories.tsx

@@ -0,0 +1,40 @@
+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' } },
+  },
+  args: {
+    width: 'sm',
+    value: 60,
+  },
+} as Meta<typeof Progress>;
+
+const Template: StoryFn<typeof Progress> = (args) => <Progress {...args} />;
+
+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,