[CL-421] add new notification variant to badge (#14130)

* add new notification variant to badge

libs/components/src/badge/badge.component.ts

@@ -5,7 +5,14 @@ import { Component, ElementRef, HostBinding, Input } from "@angular/core";
 
 import { FocusableElement } from "../shared/focusable-element";
 
-export type BadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
+export type BadgeVariant =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "danger"
+  | "warning"
+  | "info"
+  | "notification";
 
 const styles: Record<BadgeVariant, string[]> = {
   primary: ["tw-bg-primary-100", "tw-border-primary-700", "!tw-text-primary-700"],
@@ -14,6 +21,11 @@ const styles: Record<BadgeVariant, string[]> = {
   danger: ["tw-bg-danger-100", "tw-border-danger-700", "!tw-text-danger-700"],
   warning: ["tw-bg-warning-100", "tw-border-warning-700", "!tw-text-warning-700"],
   info: ["tw-bg-info-100", "tw-border-info-700", "!tw-text-info-700"],
+  notification: [
+    "tw-bg-notification-100",
+    "tw-border-notification-600",
+    "!tw-text-notification-600",
+  ],
 };
 
 const hoverStyles: Record<BadgeVariant, string[]> = {
@@ -27,6 +39,11 @@ const hoverStyles: Record<BadgeVariant, string[]> = {
   danger: ["hover:tw-bg-danger-600", "hover:tw-border-danger-600", "hover:!tw-text-contrast"],
   warning: ["hover:tw-bg-warning-600", "hover:tw-border-warning-600", "hover:!tw-text-black"],
   info: ["hover:tw-bg-info-600", "hover:tw-border-info-600", "hover:!tw-text-black"],
+  notification: [
+    "hover:tw-bg-notification-600",
+    "hover:tw-border-notification-600",
+    "hover:!tw-text-contrast",
+  ],
 };
 
 @Component({

libs/components/src/badge/badge.stories.ts

@@ -36,6 +36,7 @@ export const Variants: Story = {
       <button class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
       <button class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
       <button class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
+      <button class="tw-mx-1" bitBadge variant="notification" [truncate]="truncate">Notification</button>
       <br/><br/>
       <span class="tw-text-main tw-mx-1">Hover</span>
       <button class="tw-mx-1 tw-test-hover" bitBadge variant="primary" [truncate]="truncate">Primary</button>
@@ -44,6 +45,7 @@ export const Variants: Story = {
       <button class="tw-mx-1 tw-test-hover" bitBadge variant="danger" [truncate]="truncate">Danger</button>
       <button class="tw-mx-1 tw-test-hover" bitBadge variant="warning" [truncate]="truncate">Warning</button>
       <button class="tw-mx-1 tw-test-hover" bitBadge variant="info" [truncate]="truncate">Info</button>
+      <button class="tw-mx-1 tw-test-hover" bitBadge variant="notification" [truncate]="truncate">Notification</button>
       <br/><br/>
       <span class="tw-text-main tw-mx-1">Focus Visible</span>
       <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="primary" [truncate]="truncate">Primary</button>
@@ -52,6 +54,7 @@ export const Variants: Story = {
       <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="danger" [truncate]="truncate">Danger</button>
       <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="warning" [truncate]="truncate">Warning</button>
       <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="info" [truncate]="truncate">Info</button>
+      <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="notification" [truncate]="truncate">Notification</button>
       <br/><br/>
       <span class="tw-text-main tw-mx-1">Disabled</span>
       <button disabled class="tw-mx-1" bitBadge variant="primary" [truncate]="truncate">Primary</button>
@@ -60,6 +63,7 @@ export const Variants: Story = {
       <button disabled class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
       <button disabled class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
       <button disabled class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
+      <button disabled class="tw-mx-1" bitBadge variant="notification" [truncate]="truncate">Notification</button>
     `,
   }),
 };
@@ -112,6 +116,13 @@ export const Info: Story = {
   },
 };
 
+export const Notification: Story = {
+  ...Primary,
+  args: {
+    variant: "notification",
+  },
+};
+
 export const Truncated: Story = {
   ...Primary,
   args: {