diff --git a/src/constants/componentCustomizations.tsx b/src/constants/componentCustomizations.tsx index d4a1b1f..5a5f732 100644 --- a/src/constants/componentCustomizations.tsx +++ b/src/constants/componentCustomizations.tsx @@ -460,6 +460,14 @@ export const CustomizedPinInput = { }, }; +export const CustomizedProgress = { + baseStyle: { + track: { + borderRadius: 'full', + }, + }, +}; + export const CustomizedTextarea = { sizes: { xl: { diff --git a/src/index.tsx b/src/index.tsx index 46a7ca4..25bf4a1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -61,6 +61,7 @@ export { MenuButton, MenuList, MenuItem, + Progress, Select, SimpleGrid, Spacer, diff --git a/src/stories/components/Progress.stories.tsx b/src/stories/components/Progress.stories.tsx new file mode 100644 index 0000000..0bd8eae --- /dev/null +++ b/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; + +const Template: StoryFn = (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, +}; diff --git a/src/utils/getTheme.ts b/src/utils/getTheme.ts index b6c223d..98cab33 100644 --- a/src/utils/getTheme.ts +++ b/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,