feat(progress-bar): add inverted colors

core-ds · Nov 22, 2024 · b6dd4ed · b6dd4ed
1 parent cfc22b7
commit b6dd4ed
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 7 deletions.
diff --git a/.changeset/dry-timers-grab.md 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
@@ -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<HTMLDivElement, ProgressBarProps>(
-    ({ 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<HTMLDivElement, ProgressBarProps>(
                 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
@@ -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"
   >
     <div
@@ -23,7 +23,7 @@ exports[`ProgressBar Snapshots tests should match snapshot 1`] = `
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="20"
-    class="container size-8"
+    class="container container size-8"
     role="progressbar"
   >
     <div
@@ -40,7 +40,7 @@ exports[`ProgressBar Snapshots tests should match with view snapshot 1`] = `
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="20"
-    class="container size-8"
+    class="container container size-8"
     role="progressbar"
   >
     <div

diff --git a/packages/progress-bar/src/default.module.css b/packages/progress-bar/src/default.module.css
@@ -0,0 +1,5 @@
+@import './vars.css';
+
+.container {
+    background-color: var(--progressbar-bg-color);
+}
diff --git a/packages/progress-bar/src/index.module.css b/packages/progress-bar/src/index.module.css
@@ -1,8 +1,6 @@
 @import './vars.css';
 
 .container {
-    background: var(--progressbar-bg-color);
-
     display: flex;
     overflow: hidden;
 

diff --git a/packages/progress-bar/src/inverted.module.css b/packages/progress-bar/src/inverted.module.css
@@ -0,0 +1,5 @@
+@import './vars.css';
+
+.container {
+    background-color: var(--progressbar-bg-color-inverted);
+}
diff --git a/packages/progress-bar/src/vars.css b/packages/progress-bar/src/vars.css
@@ -3,6 +3,7 @@
 :root {
     /* bg */
     --progressbar-bg-color: var(--color-light-neutral-translucent-300);
+    --progressbar-bg-color-inverted: var(--color-light-neutral-translucent-300-inverted);
 
     /* positive */
     --progressbar-positive-color: var(--color-light-status-positive);