fix(crumb): ensure all props in interface are passed down and remove …

…href as required prop

Removes `href` as required props and ensures all props defined in interface are passed down to
rendered element

fix #6105

cypress/components/breadcrumbs/breadcrumbs.cy.js

@@ -77,6 +77,31 @@ context("Testing Breadcrumbs component", () => {
           });
       }
     });
+
+    it("should call the onClick callback when clicked", () => {
+      const callback = cy.stub().as("onClick");
+      CypressMountWithProviders(
+        <testStories.DefaultCrumb onClick={callback} />
+      );
+
+      crumb(0).click();
+      cy.get("@onClick").should("have.been.calledOnce");
+    });
+
+    it("should not set the onClick or href props when isCurrent is true", () => {
+      const callback = cy.stub().as("onClick");
+      CypressMountWithProviders(
+        <testStories.DefaultCrumb
+          href={CHARACTERS.STANDARD}
+          onClick={callback}
+          isCurrent
+        />
+      );
+
+      crumb(0).click();
+      cy.get("@onClick").should("not.have.been.called");
+      crumb(0).find("a").should("not.have.attr", "href");
+    });
   });
 
   describe("Accessibility tests for Breadcrumbs component", () => {

src/components/breadcrumbs/crumb/crumb.component.tsx

@@ -25,20 +25,20 @@ export interface CrumbProps
     TagProps {
   /** This sets the Crumb to current, does not render Link */
   isCurrent?: boolean;
-  /** The href string for Crumb Link */
-  href: string;
 }
 
 const Crumb = React.forwardRef<HTMLLinkElement, CrumbProps>(
-  ({ href, isCurrent, children, ...rest }: CrumbProps, ref) => (
+  ({ href, isCurrent, children, onClick, ...rest }: CrumbProps, ref) => (
     <li>
       <StyledCrumb
         ref={ref}
         isCurrent={isCurrent}
         aria-current={isCurrent ? "page" : undefined}
         {...tagComponent("crumb", rest)}
+        {...rest}
         {...(!isCurrent && {
           href,
+          onClick,
         })}
       >
         {children}

src/components/breadcrumbs/crumb/crumb.spec.tsx

@@ -43,20 +43,20 @@ describe("Crumb", () => {
     const link = screen.getByText(LINK_TEXT);
     await userEvent.click(link);
 
-    expect(handleClickFn).toHaveBeenCalledTimes(0);
+    expect(handleClickFn).toHaveBeenCalledTimes(1);
   });
 
   it("does not call the handleClick callback if one is passed and isCurrent is true", async () => {
     const handleClickFn = jest.fn();
 
     render(
-      <Crumb href="#" onClick={handleClickFn}>
+      <Crumb href="#" onClick={handleClickFn} isCurrent>
         {LINK_TEXT}
       </Crumb>
     );
     const link = screen.getByText(LINK_TEXT);
     await userEvent.click(link);
 
-    expect(handleClickFn).not.toHaveBeenCalledTimes(1);
+    expect(handleClickFn).toHaveBeenCalledTimes(0);
   });
 });