diff --git a/projects/ion/src/lib/badge/_badge.theme.scss b/projects/ion/src/lib/badge/_badge.theme.scss index ca747647a..f26617ea6 100644 --- a/projects/ion/src/lib/badge/_badge.theme.scss +++ b/projects/ion/src/lib/badge/_badge.theme.scss @@ -24,6 +24,10 @@ $default: ( background-color: ion-theme(negative-6), text-color: ion-theme(positive-1), ), + warning: ( + background-color: ion-theme(warning-6), + text-color: ion-theme(neutral-1), + ), ); @include register-component( diff --git a/projects/ion/src/lib/badge/badge.component.scss b/projects/ion/src/lib/badge/badge.component.scss index 19dcce2c7..08ac59023 100644 --- a/projects/ion/src/lib/badge/badge.component.scss +++ b/projects/ion/src/lib/badge/badge.component.scss @@ -19,7 +19,7 @@ } } -@each $variant in primary, secondary, neutral, negative { +@each $variant in primary, secondary, neutral, negative, warning { .badge-#{$variant} { background-color: ion-theme(badge-#{$variant}-background-color); color: ion-theme(badge-#{$variant}-text-color); diff --git a/projects/ion/src/lib/badge/badge.component.spec.ts b/projects/ion/src/lib/badge/badge.component.spec.ts index e5ba98c43..596f44e83 100644 --- a/projects/ion/src/lib/badge/badge.component.spec.ts +++ b/projects/ion/src/lib/badge/badge.component.spec.ts @@ -43,7 +43,7 @@ describe('BadgeComponent', () => { } ); - it.each(['primary', 'secondary', 'neutral', 'negative'])( + it.each(['primary', 'secondary', 'neutral', 'negative', 'warning'])( 'should render 99+ when value is %i (bigger than 100)', async (type: BadgeType) => { await sut({ type, label: type }); diff --git a/projects/ion/src/lib/core/types/badge.ts b/projects/ion/src/lib/core/types/badge.ts index c3ff0ae06..926350197 100644 --- a/projects/ion/src/lib/core/types/badge.ts +++ b/projects/ion/src/lib/core/types/badge.ts @@ -1,6 +1,11 @@ import { IconType } from './icon'; -export type BadgeType = 'primary' | 'secondary' | 'neutral' | 'negative'; +export type BadgeType = + | 'primary' + | 'secondary' + | 'neutral' + | 'negative' + | 'warning'; export interface BadgeProps { label?: string;