Add activeIcon to TopNavigation and SideNavigation links (#2295)

.changeset/young-ducks-clap.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Added support for an `activeIcon` to the TopNavigation and SideNavigation links.

packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.spec.tsx

@@ -50,6 +50,15 @@ describe('PrimaryLink', () => {
     expect(getByRole('link')).toHaveAttribute('aria-current', 'page');
   });
 
+  it('should render with an active icon', () => {
+    const { getByTestId } = renderPrimaryLink(render, {
+      ...baseProps,
+      activeIcon: () => <div data-testid="active-icon" />,
+      isActive: true,
+    });
+    expect(getByTestId('active-icon')).toBeVisible();
+  });
+
   it.todo('should render with an external icon');
 
   it('should render with a suffix icon', () => {

packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.tsx

@@ -32,7 +32,8 @@ export interface PrimaryLinkProps extends PrimaryLinkType {
 }
 
 export function PrimaryLink({
-  icon: Icon,
+  icon,
+  activeIcon,
   label,
   isActive,
   isExternal,
@@ -51,6 +52,8 @@ export function PrimaryLink({
   );
   const isExternalLink = isExternal || props.target === '_blank';
 
+  const Icon = isActive && activeIcon ? activeIcon : icon;
+
   return (
     <Element
       {...props}

packages/circuit-ui/components/SideNavigation/types.ts

@@ -25,6 +25,10 @@ export interface PrimaryLinkProps
    * On narrow viewports, only the icon is displayed.
    */
   icon: IconComponentType;
+  /**
+   * Display a different icon when the link is active.
+   */
+  activeIcon?: IconComponentType;
   /**
    * Short label to describe the target of the link.
    */