feat: add branding variant to badge (#1080)

Co-authored-by: Afzal <afzal@glints.com>

Author: Afsal102

src/@next/Badge/Badge.tsx

@@ -13,6 +13,7 @@ const badgeStatusVariant = [
   'enticing',
   'attention',
   'primary',
+  'branding',
 ] as const;
 
 export type BadgeStatusVariant = (typeof badgeStatusVariant)[number];

src/@next/Badge/BadgeStyle.ts

@@ -17,6 +17,7 @@ const badgeBackgroundColor: {
   ['enticing']: Orange.S87,
   ['attention']: Red.B93,
   ['primary']: Blue.S99,
+  ['branding']: Blue.Brand,
 };
 
 export const badgeTextColor: {
@@ -32,6 +33,7 @@ export const badgeTextColor: {
   ['enticing']: Neutral.B100,
   ['attention']: Neutral.B100,
   ['primary']: Neutral.B100,
+  ['branding']: Neutral.B100,
 };
 
 const getBadgeBackgroundColor = (status: BadgeStatusVariant) => {

test/e2e/badge/badge.spec.ts

@@ -135,6 +135,13 @@ test('Badge - attention - small', async ({ page }) => {
   );
 });
 
+test('Badge - branding - small', async ({ page }) => {
+  page.setViewportSize({ width: 768, height: 600 });
+  const badgePage = getPage(page);
+  await badgePage.goto('args=status:branding');
+  await expect(badgePage.container).toHaveScreenshot('branding.png');
+});
+
 test('Badge - primary - small', async ({ page }) => {
   page.setViewportSize({ width: 768, height: 600 });
   const badgePage = getPage(page);