diff --git a/.changeset/dry-timers-grab.md b/.changeset/dry-timers-grab.md new file mode 100644 index 0000000000..a4db093b3f --- /dev/null +++ b/.changeset/dry-timers-grab.md @@ -0,0 +1,5 @@ +--- +'@alfalab/core-components-progress-bar': minor +--- + +Добавлен inverted цвет diff --git a/packages/progress-bar/src/Component.tsx b/packages/progress-bar/src/Component.tsx index 9c8d114b1d..13a88ce3d8 100644 --- a/packages/progress-bar/src/Component.tsx +++ b/packages/progress-bar/src/Component.tsx @@ -1,7 +1,9 @@ import React from 'react'; import cn from 'classnames'; +import defaultColors from './default.module.css'; import styles from './index.module.css'; +import invertedColors from './inverted.module.css'; export type ProgressBarProps = { /** @@ -37,6 +39,11 @@ export type ProgressBarProps = { * Id компонента для тестов */ dataTestId?: string; + + /** + * Набор цветов для компонента + */ + colors?: 'default' | 'inverted'; }; export const SIZE_TO_CLASSNAME_MAP = { @@ -46,8 +53,13 @@ export const SIZE_TO_CLASSNAME_MAP = { 8: 'size-8', }; +const colorStyles = { + default: defaultColors, + inverted: invertedColors, +}; + export const ProgressBar = React.forwardRef( - ({ className, value, view = 'positive', size = 8, dataTestId }, ref) => { + ({ className, value, view = 'positive', size = 8, dataTestId, colors = 'default' }, ref) => { const translateX = Math.max(-100, Math.min(0, value - 100)); return ( @@ -56,7 +68,12 @@ export const ProgressBar = React.forwardRef( aria-valuenow={Math.round(value)} aria-valuemin={0} aria-valuemax={100} - className={cn(styles.container, styles[SIZE_TO_CLASSNAME_MAP[size]], className)} + className={cn( + styles.container, + colorStyles[colors].container, + styles[SIZE_TO_CLASSNAME_MAP[size]], + className, + )} data-test-id={dataTestId} ref={ref} > diff --git a/packages/progress-bar/src/__snapshots__/Component.test.tsx.snap b/packages/progress-bar/src/__snapshots__/Component.test.tsx.snap index 982fd93f27..08a4bfb574 100644 --- a/packages/progress-bar/src/__snapshots__/Component.test.tsx.snap +++ b/packages/progress-bar/src/__snapshots__/Component.test.tsx.snap @@ -6,7 +6,7 @@ exports[`ProgressBar Snapshots tests should fill all progress bar and match view aria-valuemax="100" aria-valuemin="0" aria-valuenow="150" - class="container size-8" + class="container container size-8" role="progressbar" >