feat: some formatting

Author: Lasserich

src/components/BentoGrid/ComponentCard/ComponentCard.tsx

@@ -87,9 +87,6 @@ export const ComponentCard: React.FC<GenericHintProps & {
             <MultiPercentageBar
               segments={hintState.segments}
               className={styles.progressBar}
-              label={hintState.label}
-              showPercentage={hintState.showPercentage}
-              isHealthy={hintState.isHealthy}
               showOnlyNonZero={hintState.showOnlyNonZero ?? true}
               barWidth={
                 size === 'small' ? '80%' :
@@ -102,20 +99,50 @@ export const ComponentCard: React.FC<GenericHintProps & {
                 size === 'medium' ? '600px' :
                 'none'
               }
+              labelConfig={{
+                position: 'above',
+                displayMode: 'primary', 
+                showPercentage: hintState.showPercentage,
+                showCount: hintState.label?.includes('Roles'),
+                primaryLabelText: hintState.label,
+                hideWhenSingleFull: false,
+              }}
+              animationConfig={{
+                enableWave: size !== 'medium',
+                enableTransitions: size !== 'medium',
+                duration: size === 'medium' ? 0 : 400,
+                staggerDelay: size === 'medium' ? 0 : 100,
+              }}
+              // Legacy props for backward compatibility
+              label={hintState.label}
+              showPercentage={hintState.showPercentage}
+              isHealthy={hintState.isHealthy}
+              showSegmentLabels={hintState.label?.includes('Roles')}
+              minSegmentWidthForLabel={12}
             />
 
             {/* Second progress bar only for large and extra-large cards */}
             {(size === 'large' || size === 'extra-large') && secondarySegments && (
               <MultiPercentageBar
                 segments={secondarySegments}
                 className={styles.progressBar}
-                label={secondaryLabel}
-                showPercentage={false}
-                isHealthy={false}
                 showOnlyNonZero={true}
                 barWidth="90%"
                 barHeight="12px"
                 barMaxWidth="none"
+                labelConfig={{
+                  position: 'above',
+                  displayMode: 'primary',
+                  showPercentage: false,
+                  primaryLabelText: secondaryLabel,
+                  hideWhenSingleFull: false,
+                }}
+                animationConfig={{
+                  enableWave: true,
+                  enableTransitions: true,
+                  duration: 400,
+                  staggerDelay: 100,
+                }}
                 showSegmentLabels={true}
                 minSegmentWidthForLabel={12}
               />

src/components/BentoGrid/MultiPercentageBar/MultiPercentageBar.module.css

@@ -55,7 +55,8 @@
 }
 
 .label,
-.percentage {
+.percentage,
+.count {
   font-size: var(--label-font-size);
   font-weight: 400;
   color: var(--sapTextColor, #374151);
@@ -68,6 +69,11 @@
   font-weight: 700;
 }
 
+.count {
+  opacity: 0.7;
+  font-size: calc(var(--label-font-size) * 0.9);
+}
+
 /* Bar container */
 .barContainer {
   display: flex;
@@ -198,6 +204,28 @@
   }
 }
 
+
+
+/* No animation class for disabled animations */
+.noAnimation {
+  animation: none !important;
+}
+
+.noAnimation .segment {
+  animation: none !important;
+  transform: scaleX(1) !important;
+}
+
+.noAnimation .segmentLabel {
+  animation: none !important;
+  opacity: 1 !important;
+  transform: translateY(-50%) scale(1) !important;
+}
+
+.noAnimation .waveOverlay {
+  animation: none !important;
+}
+
 /* Theme Support */
 [data-ui5-theme-root*="dark"] .container,
 [data-ui5-theme*="dark"] .container {
@@ -210,3 +238,5 @@
 [data-ui5-theme*="dark"] .percentage {
   color: #ffffff;
 }
+
+

src/components/BentoGrid/MultiPercentageBar/MultiPercentageBar.spec.tsx

@@ -6,6 +6,7 @@ describe('MultiPercentageBar utilities', () => {
     percentage: number;
     color: string;
     label: string;
+    count?: number;
   }
 
   // Helper function to filter non-zero segments (simulating component logic)
@@ -113,4 +114,85 @@ describe('MultiPercentageBar utilities', () => {
       expect(result.segments).toBe(0);
     });
   });
+
+  describe('color configuration utilities', () => {
+    // Helper function to apply color overrides (simulating component logic)
+    const applyColorOverrides = (
+      segments: PercentageSegment[], 
+      overrides: Record<string, string>
+    ) => {
+      return segments.map(segment => ({
+        ...segment,
+        color: overrides[segment.label] || segment.color,
+      }));
+    };
+
+    it('applies color overrides correctly', () => {
+      const segments: PercentageSegment[] = [
+        { percentage: 60, color: '#28a745', label: 'Healthy' },
+        { percentage: 40, color: '#d22020ff', label: 'Unhealthy' },
+      ];
+
+      const overrides = {
+        'Healthy': '#00ff00',
+        'Unhealthy': '#ff0000',
+      };
+
+      const result = applyColorOverrides(segments, overrides);
+
+      expect(result[0].color).toBe('#00ff00');
+      expect(result[1].color).toBe('#ff0000');
+    });
+
+    it('keeps original colors when no overrides match', () => {
+      const segments: PercentageSegment[] = [
+        { percentage: 60, color: '#28a745', label: 'Healthy' },
+        { percentage: 40, color: '#d22020ff', label: 'Unknown' },
+      ];
+
+      const overrides = {
+        'Different': '#00ff00',
+      };
+
+      const result = applyColorOverrides(segments, overrides);
+
+      expect(result[0].color).toBe('#28a745');
+      expect(result[1].color).toBe('#d22020ff');
+    });
+  });
+
+  describe('label configuration utilities', () => {
+    // Helper function to determine if primary label should be hidden
+    const shouldHidePrimaryLabel = (
+      segments: PercentageSegment[], 
+      hideWhenSingleFull: boolean
+    ) => {
+      return hideWhenSingleFull && 
+        segments.length === 1 && 
+        segments[0]?.percentage === 100;
+    };
+
+    it('hides primary label when single segment is 100%', () => {
+      const segments: PercentageSegment[] = [
+        { percentage: 100, color: '#28a745', label: 'Complete' },
+      ];
+
+      expect(shouldHidePrimaryLabel(segments, true)).toBe(true);
+      expect(shouldHidePrimaryLabel(segments, false)).toBe(false);
+    });
+
+    it('shows primary label when multiple segments or not 100%', () => {
+      const multipleSegments: PercentageSegment[] = [
+        { percentage: 50, color: '#28a745', label: 'Healthy' },
+        { percentage: 50, color: '#d22020ff', label: 'Unhealthy' },
+      ];
+
+      const partialSegment: PercentageSegment[] = [
+        { percentage: 80, color: '#28a745', label: 'Partial' },
+      ];
+
+      expect(shouldHidePrimaryLabel(multipleSegments, true)).toBe(false);
+      expect(shouldHidePrimaryLabel(partialSegment, true)).toBe(false);
+    });
+  });
 });