From a0fc246d5068cfb2e81245a74a3f77fc16250c3c Mon Sep 17 00:00:00 2001 From: Stanislav Date: Wed, 21 Jan 2026 14:00:05 +0100 Subject: [PATCH] ECHOES-1134 Add severity levels to BadgeSeverity (#611) --- i18n/keys.json | 12 ++ src/components/badges/BadgeSeverity.tsx | 176 ++++++++++++++--------- stories/badges/BadgeSeverity-stories.tsx | 6 +- 3 files changed, 128 insertions(+), 66 deletions(-) diff --git a/i18n/keys.json b/i18n/keys.json index 86a32c1db..518b6c832 100644 --- a/i18n/keys.json +++ b/i18n/keys.json @@ -140,6 +140,18 @@ "defaultMessage": "Clear select field", "description": "Screen reader-only text to indicate that the select field can be cleared with a button" }, + "severity.CRITICAL": { + "defaultMessage": "Critical", + "description": "Label for critical severity level" + }, + "severity.MAJOR": { + "defaultMessage": "Major", + "description": "Label for major severity level" + }, + "severity.MINOR": { + "defaultMessage": "Minor", + "description": "Label for minor severity level" + }, "severity_impact.BLOCKER": { "defaultMessage": "Blocker", "description": "Label for blocker severity level" diff --git a/src/components/badges/BadgeSeverity.tsx b/src/components/badges/BadgeSeverity.tsx index 9e739fc19..9643b5872 100644 --- a/src/components/badges/BadgeSeverity.tsx +++ b/src/components/badges/BadgeSeverity.tsx @@ -46,6 +46,10 @@ export enum BadgeSeverityLevel { Medium = 'medium', Low = 'low', Info = 'info', + // Standard mode + Critical = 'critical', + Major = 'major', + Minor = 'minor', } export enum BadgeSeverityVariety { @@ -153,6 +157,22 @@ export const BadgeSeverity = forwardRef(( defaultMessage: 'Medium', description: 'Label for medium severity level', }), + // Standard mode labels + [BadgeSeverityLevel.Critical]: formatMessage({ + id: 'severity.CRITICAL', + defaultMessage: 'Critical', + description: 'Label for critical severity level', + }), + [BadgeSeverityLevel.Major]: formatMessage({ + id: 'severity.MAJOR', + defaultMessage: 'Major', + description: 'Label for major severity level', + }), + [BadgeSeverityLevel.Minor]: formatMessage({ + id: 'severity.MINOR', + defaultMessage: 'Minor', + description: 'Label for minor severity level', + }), }; const severityLabel = BADGE_SEVERITY_LABEL[severity]; @@ -310,72 +330,98 @@ const BADGE_SEVERITY_ICON = { SeverityIcon: IconSeverityMedium, severityIconColor: 'echoes-severity-badge-colors-foreground-medium-icon-default', }, -} as const; - -const BADGE_SEVERITY_STYLES = { - [BadgeSeverityLevel.Blocker]: { - '--badge-severity-color': cssVar('severity-badge-colors-foreground-blocker-text-default'), - '--badge-severity-border-color': cssVar('severity-badge-colors-borders-blocker-default'), - '--badge-severity-background-color': cssVar( - 'severity-badge-colors-background-severity-blocker-prefix-default', - ), - '--badge-severity-icon-background-color': cssVar( - 'severity-badge-colors-background-severity-blocker-suffix-default', - ), - '--badge-severity-icon-background-color-hover': cssVar( - 'severity-badge-colors-background-severity-blocker-suffix-hover', - ), - }, - [BadgeSeverityLevel.High]: { - '--badge-severity-color': cssVar('severity-badge-colors-foreground-high-text-default'), - '--badge-severity-border-color': cssVar('severity-badge-colors-borders-high-default'), - '--badge-severity-background-color': cssVar( - 'severity-badge-colors-background-severity-high-prefix-default', - ), - '--badge-severity-icon-background-color': cssVar( - 'severity-badge-colors-background-severity-high-suffix-default', - ), - '--badge-severity-icon-background-color-hover': cssVar( - 'severity-badge-colors-background-severity-high-suffix-hover', - ), - }, - [BadgeSeverityLevel.Info]: { - '--badge-severity-color': cssVar('severity-badge-colors-foreground-info-text-default'), - '--badge-severity-border-color': cssVar('severity-badge-colors-borders-info-default'), - '--badge-severity-background-color': cssVar( - 'severity-badge-colors-background-severity-info-prefix-default', - ), - '--badge-severity-icon-background-color': cssVar( - 'severity-badge-colors-background-severity-info-suffix-default', - ), - '--badge-severity-icon-background-color-hover': cssVar( - 'severity-badge-colors-background-severity-info-suffix-hover', - ), + // Standard mode icons + [BadgeSeverityLevel.Critical]: { + SeverityIcon: IconSeverityHigh, + severityIconColor: 'echoes-severity-badge-colors-foreground-high-icon-default', }, - [BadgeSeverityLevel.Low]: { - '--badge-severity-color': cssVar('severity-badge-colors-foreground-low-text-default'), - '--badge-severity-border-color': cssVar('severity-badge-colors-borders-low-default'), - '--badge-severity-background-color': cssVar( - 'severity-badge-colors-background-severity-low-prefix-default', - ), - '--badge-severity-icon-background-color': cssVar( - 'severity-badge-colors-background-severity-low-suffix-default', - ), - '--badge-severity-icon-background-color-hover': cssVar( - 'severity-badge-colors-background-severity-low-suffix-hover', - ), + [BadgeSeverityLevel.Major]: { + SeverityIcon: IconSeverityMedium, + severityIconColor: 'echoes-severity-badge-colors-foreground-medium-icon-default', }, - [BadgeSeverityLevel.Medium]: { - '--badge-severity-color': cssVar('severity-badge-colors-foreground-medium-text-default'), - '--badge-severity-border-color': cssVar('severity-badge-colors-borders-medium-default'), - '--badge-severity-background-color': cssVar( - 'severity-badge-colors-background-severity-medium-prefix-default', - ), - '--badge-severity-icon-background-color': cssVar( - 'severity-badge-colors-background-severity-medium-suffix-default', - ), - '--badge-severity-icon-background-color-hover': cssVar( - 'severity-badge-colors-background-severity-medium-suffix-hover', - ), + [BadgeSeverityLevel.Minor]: { + SeverityIcon: IconSeverityLow, + severityIconColor: 'echoes-severity-badge-colors-foreground-low-icon-default', }, +} as const; + +const BADGE_SEVERITY_BLOCKER_STYLE = { + '--badge-severity-color': cssVar('severity-badge-colors-foreground-blocker-text-default'), + '--badge-severity-border-color': cssVar('severity-badge-colors-borders-blocker-default'), + '--badge-severity-background-color': cssVar( + 'severity-badge-colors-background-severity-blocker-prefix-default', + ), + '--badge-severity-icon-background-color': cssVar( + 'severity-badge-colors-background-severity-blocker-suffix-default', + ), + '--badge-severity-icon-background-color-hover': cssVar( + 'severity-badge-colors-background-severity-blocker-suffix-hover', + ), +}; + +const BADGE_SEVERITY_HIGH_STYLE = { + '--badge-severity-color': cssVar('severity-badge-colors-foreground-high-text-default'), + '--badge-severity-border-color': cssVar('severity-badge-colors-borders-high-default'), + '--badge-severity-background-color': cssVar( + 'severity-badge-colors-background-severity-high-prefix-default', + ), + '--badge-severity-icon-background-color': cssVar( + 'severity-badge-colors-background-severity-high-suffix-default', + ), + '--badge-severity-icon-background-color-hover': cssVar( + 'severity-badge-colors-background-severity-high-suffix-hover', + ), +}; + +const BADGE_SEVERITY_LOW_STYLE = { + '--badge-severity-color': cssVar('severity-badge-colors-foreground-low-text-default'), + '--badge-severity-border-color': cssVar('severity-badge-colors-borders-low-default'), + '--badge-severity-background-color': cssVar( + 'severity-badge-colors-background-severity-low-prefix-default', + ), + '--badge-severity-icon-background-color': cssVar( + 'severity-badge-colors-background-severity-low-suffix-default', + ), + '--badge-severity-icon-background-color-hover': cssVar( + 'severity-badge-colors-background-severity-low-suffix-hover', + ), +}; + +const BADGE_SEVERITY_MEDIUM_STYLE = { + '--badge-severity-color': cssVar('severity-badge-colors-foreground-medium-text-default'), + '--badge-severity-border-color': cssVar('severity-badge-colors-borders-medium-default'), + '--badge-severity-background-color': cssVar( + 'severity-badge-colors-background-severity-medium-prefix-default', + ), + '--badge-severity-icon-background-color': cssVar( + 'severity-badge-colors-background-severity-medium-suffix-default', + ), + '--badge-severity-icon-background-color-hover': cssVar( + 'severity-badge-colors-background-severity-medium-suffix-hover', + ), +}; + +const BADGE_SEVERITY_INFO_STYLE = { + '--badge-severity-color': cssVar('severity-badge-colors-foreground-info-text-default'), + '--badge-severity-border-color': cssVar('severity-badge-colors-borders-info-default'), + '--badge-severity-background-color': cssVar( + 'severity-badge-colors-background-severity-info-prefix-default', + ), + '--badge-severity-icon-background-color': cssVar( + 'severity-badge-colors-background-severity-info-suffix-default', + ), + '--badge-severity-icon-background-color-hover': cssVar( + 'severity-badge-colors-background-severity-info-suffix-hover', + ), +}; +const BADGE_SEVERITY_STYLES = { + [BadgeSeverityLevel.Blocker]: BADGE_SEVERITY_BLOCKER_STYLE, + [BadgeSeverityLevel.High]: BADGE_SEVERITY_HIGH_STYLE, + [BadgeSeverityLevel.Info]: BADGE_SEVERITY_INFO_STYLE, + [BadgeSeverityLevel.Low]: BADGE_SEVERITY_LOW_STYLE, + [BadgeSeverityLevel.Medium]: BADGE_SEVERITY_MEDIUM_STYLE, + // Standard mode styles + [BadgeSeverityLevel.Critical]: BADGE_SEVERITY_HIGH_STYLE, + [BadgeSeverityLevel.Minor]: BADGE_SEVERITY_LOW_STYLE, + [BadgeSeverityLevel.Major]: BADGE_SEVERITY_MEDIUM_STYLE, }; diff --git a/stories/badges/BadgeSeverity-stories.tsx b/stories/badges/BadgeSeverity-stories.tsx index b65d98aec..d4de8d552 100644 --- a/stories/badges/BadgeSeverity-stories.tsx +++ b/stories/badges/BadgeSeverity-stories.tsx @@ -19,7 +19,7 @@ */ import type { Meta, StoryObj } from '@storybook/react-vite'; -import { BadgeSeverity, BadgeSeverityLevel, DropdownMenu } from '../../src'; +import { BadgeSeverity, BadgeSeverityLevel, DropdownMenu, Label } from '../../src'; import { BadgeSeverityVariety } from '../../src/components/badges/BadgeSeverity'; import { iconsComponentsArgType } from '../helpers/arg-types'; import { basicWrapperDecorator } from '../helpers/BasicWrapper'; @@ -89,6 +89,10 @@ export const AllSeverities: Story = { + + + + ), };