feat(#1613):additional badge types and custom icon

Author: twjeffery

libs/angular-components/src/lib/components/badge/badge.ts

@@ -1,4 +1,4 @@
-import { GoabBadgeType } from "@abgov/ui-components-common";
+import { GoabBadgeType, GoabIconType } from "@abgov/ui-components-common";
 import {
   CUSTOM_ELEMENTS_SCHEMA,
   Component,
@@ -14,6 +14,7 @@ import { GoabBaseComponent } from "../base.component";
     <goa-badge
       [attr.type]="type"
       [attr.icon]="icon"
+      [attr.icontype]="iconType"
       [attr.arialabel]="ariaLabel"
       [attr.content]="content"
       [attr.testid]="testId"
@@ -37,5 +38,6 @@ export class GoabBadge extends GoabBaseComponent {
   @Input() type?: GoabBadgeType;
   @Input() content?: string;
   @Input({ transform: booleanAttribute }) icon?: boolean;
+  @Input() iconType?: GoabIconType;
   @Input() ariaLabel?: string;
 }

libs/common/src/lib/common.ts

@@ -89,7 +89,27 @@ export type GoabBadgeType =
   | "emergency"
   | "dark"
   | "midtone"
-  | "light";
+  | "light"
+  | "archived"
+  | "aqua"
+  | "black"
+  | "blue"
+  | "green"
+  | "orange"
+  | "pink"
+  | "red"
+  | "violet"
+  | "white"
+  | "yellow"
+  | "aqua-light"
+  | "black-light"
+  | "blue-light"
+  | "green-light"
+  | "orange-light"
+  | "pink-light"
+  | "red-light"
+  | "violet-light"
+  | "yellow-light";
 
 export type GoabPaginationVariant = "all" | "links-only";
 

libs/react-components/src/lib/badge/badge.spec.tsx

@@ -4,11 +4,11 @@ import { GoabBadge } from "./badge";
 configure({ testIdAttribute: "testId" });
 
 describe("GoabBadge", () => {
-  it("should render", () => {
+  it("should render with default behavior (no icon)", () => {
     const { container } = render(<GoabBadge type="information" content="Text Content" />);
 
     const el = container.querySelector("goa-badge");
-    expect(el?.getAttribute("icon")).toBeNull();
+    expect(el?.getAttribute("icon")).toBe("false");
   });
 
   it("should render the properties", () => {
@@ -35,4 +35,103 @@ describe("GoabBadge", () => {
     expect(el?.getAttribute("ml")).toBe("xl");
     expect(el?.getAttribute("arialabel")).toBe("text");
   });
+
+  it("should render custom icon type when icontype is provided", () => {
+    const { container } = render(
+      <GoabBadge
+        type="information"
+        content="Custom Icon"
+        iconType="home"
+      />,
+    );
+    const el = container.querySelector("goa-badge");
+
+    expect(el?.getAttribute("icontype")).toBe("home");
+    expect(el?.getAttribute("icon")).toBe("true");
+  });
+
+  it("should not render icontype when not provided", () => {
+    const { container } = render(
+      <GoabBadge
+        type="success"
+        content="Default Icon"
+        icon
+      />,
+    );
+    const el = container.querySelector("goa-badge");
+
+    expect(el?.getAttribute("icontype")).toBeNull();
+    expect(el?.getAttribute("icon")).toBe("true");
+  });
+
+  it("should pass icon=false correctly to web component", () => {
+    const { container } = render(
+      <GoabBadge
+        type="success"
+        content="No Icon"
+        icon={false}
+        iconType="star"
+      />,
+    );
+    const el = container.querySelector("goa-badge");
+
+    expect(el?.getAttribute("icon")).toBe("false");
+    expect(el?.getAttribute("icontype")).toBe("star");
+  });
+
+  it("should pass icon='true' when icon={true} explicitly", () => {
+    const { container } = render(
+      <GoabBadge
+        type="information"
+        content="Show Icon"
+        icon={true}
+      />,
+    );
+    const el = container.querySelector("goa-badge");
+
+    expect(el?.getAttribute("icon")).toBe("true");
+    expect(el?.getAttribute("icontype")).toBeNull();
+  });
+
+  it("should pass icon='false' when icon={false} without iconType", () => {
+    const { container } = render(
+      <GoabBadge
+        type="success"
+        content="No Icon"
+        icon={false}
+      />,
+    );
+    const el = container.querySelector("goa-badge");
+
+    expect(el?.getAttribute("icon")).toBe("false");
+    expect(el?.getAttribute("icontype")).toBeNull();
+  });
+
+  it("should pass icon='false' when icon={undefined}", () => {
+    const { container } = render(
+      <GoabBadge
+        type="important"
+        content="Undefined Icon"
+        icon={undefined}
+      />,
+    );
+    const el = container.querySelector("goa-badge");
+
+    expect(el?.getAttribute("icon")).toBe("false");
+  });
+
+  it("should pass icon='true' when iconType and icon={true} both provided", () => {
+    const { container } = render(
+      <GoabBadge
+        type="success"
+        content="Custom Star"
+        icon={true}
+        iconType="star"
+      />,
+    );
+    const el = container.querySelector("goa-badge");
+
+    expect(el?.getAttribute("icon")).toBe("true");
+    expect(el?.getAttribute("icontype")).toBe("star");
+  });
 });

libs/react-components/src/lib/badge/badge.tsx

@@ -1,4 +1,4 @@
-import { GoabBadgeType, Margins } from "@abgov/ui-components-common";
+import { GoabBadgeType, Margins, GoabIconType } from "@abgov/ui-components-common";
 import type { JSX } from "react";
 
 interface WCProps extends Margins {
@@ -7,6 +7,7 @@ interface WCProps extends Margins {
   content?: string;
   arialabel?: string;
   testid?: string;
+  icontype?: GoabIconType;
 }
 
 declare module "react" {
@@ -24,6 +25,25 @@ export interface GoabBadgeProps extends Margins {
   content?: string;
   testId?: string;
   ariaLabel?: string;
+  iconType?: GoabIconType;
+}
+
+/**
+ * Determines the icon display logic for the badge component.
+ * Priority order:
+ * 1. icon={true} - always show icon, starting with default
+ * 2. icon={false} - always hide icon (overrides iconType)
+ * 3. iconType provided - show custom icon
+ * 4. default/no icon or iconType set - hide icon
+ */
+function getIconValue(icon?: boolean, iconType?: GoabIconType): "true" | "false" {
+  // Explicit icon prop takes precedence
+  if (icon !== undefined) {
+    return icon ? "true" : "false";
+  }
+
+  // Show custom icon if iconType is provided
+  return iconType ? "true" : "false";
 }
 
 export function GoabBadge({
@@ -36,14 +56,17 @@ export function GoabBadge({
   mb,
   ml,
   ariaLabel,
+  iconType,
 }: GoabBadgeProps): JSX.Element {
   return (
     <goa-badge
       type={type}
       content={content}
-      icon={icon ? "true" : undefined}
+      // Handle icon display priority: explicit icon prop takes precedence over iconType
+      icon={getIconValue(icon, iconType)}
       testid={testId}
       arialabel={ariaLabel}
+      icontype={iconType}
       mt={mt}
       mr={mr}
       mb={mb}

libs/web-components/src/components/badge/Badge.html-data.json

@@ -27,6 +27,66 @@
         },
         {
           "name": "light"
+        },
+        {
+          "name": "archived"
+        },
+        {
+          "name": "aqua"
+        },
+        {
+          "name": "black"
+        },
+        {
+          "name": "blue"
+        },
+        {
+          "name": "green"
+        },
+        {
+          "name": "orange"
+        },
+        {
+          "name": "pink"
+        },
+        {
+          "name": "red"
+        },
+        {
+          "name": "violet"
+        },
+        {
+          "name": "white"
+        },
+        {
+          "name": "yellow"
+        },
+        {
+          "name": "aqua-light"
+        },
+        {
+          "name": "black-light"
+        },
+        {
+          "name": "blue-light"
+        },
+        {
+          "name": "green-light"
+        },
+        {
+          "name": "orange-light"
+        },
+        {
+          "name": "pink-light"
+        },
+        {
+          "name": "red-light"
+        },
+        {
+          "name": "violet-light"
+        },
+        {
+          "name": "yellow-light"
         }
       ]
     },
@@ -37,6 +97,11 @@
       "default": "false",
       "valueSet": "boolean"
     },
+    {
+      "name": "icontype",
+      "description": "Custom icon type to override the default icon for the badge type",
+      "type": "string"
+    },
     {
       "name": "content",
       "description": "Text label of the badge",