fix(#3102): add ability to set leading icon for the MenuButton

Author: chrisolsen

libs/angular-components/src/lib/components/menu-button/menu-button.spec.ts

@@ -0,0 +1,91 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { GoabMenuButton } from "./menu-button";
+import { GoabMenuAction } from "./menu-action";
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+import { GoabButtonType, GoabIconType } from "@abgov/ui-components-common";
+import { By } from "@angular/platform-browser";
+import { fireEvent } from "@testing-library/dom";
+
+@Component({
+  template: `
+    <goab-menu-button
+      [text]="text"
+      [type]="type"
+      [leadingIcon]="leadingIcon"
+      [testId]="testId"
+      (onAction)="onAction($event)">
+      <goab-menu-action
+        text="Action 1"
+        action="action1"
+        icon="person-circle">
+      </goab-menu-action>
+      <goab-menu-action
+        text="Action 2"
+        action="action2"
+        icon="notifications">
+      </goab-menu-action>
+    </goab-menu-button>
+  `
+})
+class TestMenuButtonComponent {
+  text?: string;
+  type?: GoabButtonType;
+  leadingIcon?: GoabIconType;
+  testId?: string;
+
+  onAction(event: unknown) {
+    /* do nothing */
+  }
+}
+
+describe("GoabMenuButton", () => {
+  let fixture: ComponentFixture<TestMenuButtonComponent>;
+  let component: TestMenuButtonComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GoabMenuButton, GoabMenuAction],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [TestMenuButtonComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestMenuButtonComponent);
+    component = fixture.componentInstance;
+    component.text = "Menu actions";
+    component.type = "primary";
+    component.leadingIcon = "alarm";
+    component.testId = "test-menu-button";
+    fixture.detectChanges();
+  });
+
+  it("should render the properties", () => {
+    const menuButtonElement = fixture.debugElement.query(By.css("goa-menu-button")).nativeElement;
+    expect(menuButtonElement.getAttribute("text")).toBe("Menu actions");
+    expect(menuButtonElement.getAttribute("type")).toBe("primary");
+    expect(menuButtonElement.getAttribute("leading-icon")).toBe("alarm");
+    expect(menuButtonElement.getAttribute("testid")).toBe("test-menu-button");
+  });
+
+  it("should render with leading icon", () => {
+    const menuButtonElement = fixture.debugElement.query(By.css("goa-menu-button")).nativeElement;
+    expect(menuButtonElement.getAttribute("leading-icon")).toBe("alarm");
+  });
+
+  it("should render without leading icon when not provided", () => {
+    component.leadingIcon = undefined;
+    fixture.detectChanges();
+
+    const menuButtonElement = fixture.debugElement.query(By.css("goa-menu-button")).nativeElement;
+    expect(menuButtonElement.getAttribute("leading-icon")).toBeNull();
+  });
+
+  it("should respond to action event", () => {
+    const onAction = jest.spyOn(component, "onAction");
+    const menuButtonElement = fixture.debugElement.query(By.css("goa-menu-button")).nativeElement;
+
+    const mockDetail = { action: "action1", text: "Action 1" };
+    fireEvent(menuButtonElement, new CustomEvent("_action", { detail: mockDetail }));
+
+    expect(onAction).toHaveBeenCalledWith(mockDetail);
+  });
+});

libs/angular-components/src/lib/components/menu-button/menu-button.ts

@@ -1,5 +1,15 @@
-import { GoabButtonType, GoabMenuButtonOnActionDetail } from "@abgov/ui-components-common";
-import { CUSTOM_ELEMENTS_SCHEMA, Component, Input, Output, EventEmitter } from "@angular/core";
+import {
+  GoabButtonType,
+  GoabIconType,
+  GoabMenuButtonOnActionDetail,
+} from "@abgov/ui-components-common";
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+} from "@angular/core";
 
 @Component({
   standalone: true,
@@ -9,6 +19,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, Component, Input, Output, EventEmitter } from "
     <goa-menu-button
       [attr.text]="text"
       [attr.type]="type"
+      [attr.leading-icon]="leadingIcon"
       [attr.testid]="testId"
       (_action)="_onAction($event)"
     >
@@ -20,6 +31,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, Component, Input, Output, EventEmitter } from "
 export class GoabMenuButton {
   @Input() text?: string;
   @Input() type?: GoabButtonType;
+  @Input() leadingIcon?: GoabIconType;
   @Input() testId?: string;
   @Output() onAction = new EventEmitter<GoabMenuButtonOnActionDetail>();
 

libs/react-components/specs/menu-button.browser.spec.tsx

@@ -123,4 +123,26 @@ describe("MenuButton", () => {
     expect(onAction.mock.calls[0][0].action).toBe("first");
     expect(onAction.mock.calls[1][0].action).toBe("second");
   });
+
+
+  it("should render with leadingIcon", async () => {
+    const onAction = vi.fn();
+
+    const Component = () => {
+      return (
+        <GoabMenuButton text="Dual icons" testId="menu-button" leadingIcon="calendar" onAction={onAction}>
+          <GoabMenuAction text="Add item" action="add" testId="menu-action-add" icon="add" />
+          <GoabMenuAction text="Delete item" action="delete" testId="menu-action-delete" icon="trash" />
+        </GoabMenuButton>
+      );
+    };
+
+    const result = render(<Component />);
+
+    // Verify leading icon on button
+    await vi.waitFor(async () => {
+      const leadingIcon = result.getByTestId("icon-calendar");
+      expect(leadingIcon).toBeDefined();
+    });
+  });
 });

libs/react-components/src/lib/menu-button/menu-button.tsx

@@ -6,7 +6,7 @@
  * It also includes TypeScript interfaces for improved type checking and development experience.
  */
 
-import { GoabButtonType, GoabMenuButtonOnActionDetail } from "@abgov/ui-components-common";
+import { GoabButtonType, GoabIconType, GoabMenuButtonOnActionDetail } from "@abgov/ui-components-common";
 import { ReactNode, type JSX, useRef, useEffect } from "react";
 
 /**
@@ -15,12 +15,14 @@ import { ReactNode, type JSX, useRef, useEffect } from "react";
  *
  * @property {string} text - The text label to be displayed on the button.
  * @property {GoabButtonType} type - The button type, e.g., "primary", "secondary", etc.
+ * @property {GoaIconType} leadingIcon - Optional leading icon appearing within the button.
  * @property {string} [testid] - A test identifier for automated testing purposes.
  * @property {React.RefObject<HTMLElement | null>} ref - A reference object pointing to the Web Component's DOM element.
  */
 interface WCProps {
   text: string;
   type: GoabButtonType;
+  "leading-icon"?: GoabIconType;
   testid?: string;
   ref: React.RefObject<HTMLElement | null>;
 }
@@ -45,13 +47,15 @@ declare module "react" {
  *
  * @property {string} text - The text label to display on the button.
  * @property {GoabButtonType} [type="primary"] - The button type, e.g., "primary", "secondary". Defaults to "primary".
+ * @property {GoaIconType} leadingIcon - Optional leading icon appearing within the button.
  * @property {string} [testId] - A test identifier for automated testing purposes.
  * @property {Function} [onAction] - Callback function invoked when an action event is emitted by the component.
  * @property {ReactNode} [children] - Optional child elements to be rendered inside the button.
  */
 export interface GoabMenuButtonProps {
   text: string;
   type?: GoabButtonType;
+  leadingIcon?: GoabIconType;
   testId?: string;
   onAction?: (detail: GoabMenuButtonOnActionDetail) => void;
   children?: ReactNode;
@@ -83,6 +87,7 @@ export interface GoabMenuButtonProps {
 export function GoabMenuButton({
   text,
   type = "primary",
+  leadingIcon,
   testId,
   onAction,
   children,
@@ -111,7 +116,7 @@ export function GoabMenuButton({
   }, [el, onAction]);
 
   return (
-    <goa-menu-button ref={el} text={text} type={type} testid={testId}>
+    <goa-menu-button ref={el} text={text} type={type} testid={testId} leading-icon={leadingIcon}>
       {children}
     </goa-menu-button>
   );

libs/web-components/src/components/menu-button/MenuButton.spec.ts

@@ -13,7 +13,7 @@ describe("GoAMenuButton", () => {
   it("should render with testid", async () => {
     const { container } = render(GoAMenuButton, {
       text: "Menu Button",
-      testid: "menu-button-test"
+      testid: "menu-button-test",
     });
 
     expect(container.innerHTML).toContain('data-testid="menu-button-test"');
@@ -24,7 +24,7 @@ describe("GoAMenuButton", () => {
       it(`should render ${type} type`, async () => {
         const { container } = render(GoAMenuButton, {
           text: "Menu Button",
-          type: type as "primary" | "secondary" | "tertiary"
+          type: type as "primary" | "secondary" | "tertiary",
         });
 
         expect(container.innerHTML).toContain(`type="${type}"`);
@@ -88,4 +88,27 @@ describe("GoAMenuButton", () => {
       expect(container.innerHTML).toContain('slot="target"');
     });
   });
+
+  describe("leading icon", () => {
+    it("should render without leadingIcon by default", async () => {
+      const { container } = render(GoAMenuButton, {
+        text: "Menu Button",
+      });
+
+      const button = container.querySelector("goa-button");
+      expect(button).toBeTruthy();
+      expect(button?.getAttribute("leadingicon")).toBeNull();
+    });
+
+    it("should render with leadingIcon when provided", async () => {
+      const { container } = render(GoAMenuButton, {
+        text: "Menu Button",
+        leadingIcon: "add",
+      });
+
+      const button = container.querySelector("goa-button");
+      expect(button).toBeTruthy();
+      expect(button?.getAttribute("leadingicon")).toBe("add");
+    });
+  });
 });

libs/web-components/src/components/menu-button/MenuButton.svelte

@@ -1,6 +1,8 @@
-<svelte:options
-  customElement={{
+<svelte:options customElement={{
     tag: "goa-menu-button",
+    props: {
+      leadingIcon: { attribute: "leading-icon", type: "String" },
+    }
   }}
 />
 
@@ -15,6 +17,7 @@
   export let text: string;
   export let type: "primary" | "secondary" | "tertiary" = "primary";
   export let testid: string = "";
+  export let leadingIcon: GoAIconType | undefined = undefined;
 
   // Private props
 
@@ -140,6 +143,7 @@
     bind:this={_targetEl}
     data-testid={testid}
     slot="target"
+    leadingicon={leadingIcon}
     {type}
     trailingicon={_icon}
   >