fix(side nav) Pass ref to SideNavBase and write a test

src/components/SideNavigation/SideNavigationBase/SideNavigationBase.tsx

@@ -25,6 +25,10 @@ export type Props<C> = PropsWithSpread<
      * The navigation item's status.
      */
     status?: ReactNode;
+    /**
+     * A ref to pass to the element.
+     */
+    forwardRef?: React.Ref<C> | null;
   },
   C
 >;
@@ -35,10 +39,11 @@ const SideNavigationBase = <C,>({
   icon,
   label,
   status,
+  forwardRef,
   ...props
 }: Props<C>) => {
   return (
-    <Component {...props}>
+    <Component ref={forwardRef} {...props}>
       {icon ? (
         <Icon name={icon} light={dark} className="p-side-navigation__icon" />
       ) : null}

src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx

@@ -42,3 +42,9 @@ it("can use a custom link component", () => {
     "p-side-navigation__link",
   );
 });
+
+it("gets the ref and checks if it can be used to get the element's position", () => {
+  const ref = React.createRef<HTMLAnchorElement>();
+  render(<SideNavigationLink label="Test content" forwardRef={ref} />);
+  expect(ref.current?.getBoundingClientRect()).toBeDefined();
+});

src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx

@@ -1,16 +1,19 @@
 import React from "react";
 import classNames from "classnames";
-import type { HTMLProps } from "react";
+import type { HTMLProps, ReactNode } from "react";
 
 import type { SideNavigationBaseProps } from "../SideNavigationBase";
 import SideNavigationBase from "../SideNavigationBase";
 
 export type LinkDefaultElement = HTMLProps<HTMLAnchorElement>;
 
-export type Props<L = LinkDefaultElement, E = HTMLAnchorElement> = Omit<
-  SideNavigationBaseProps<L>,
-  "component"
+export type Props<L = LinkDefaultElement, E = HTMLAnchorElement> = Partial<
+  Omit<SideNavigationBaseProps<L>, "component">
 > & {
+  /**
+   * The navigation item's label.
+   */
+  label: ReactNode;
   /**
    * The component or element to use for the link element e.g. `a` or `NavLink`.
    * @default a
@@ -36,8 +39,8 @@ const SideNavigationLink = <L = LinkDefaultElement, E = HTMLAnchorElement>({
     <SideNavigationBase
       className={classNames("p-side-navigation__link", className)}
       component={component ?? "a"}
+      forwardRef={forwardRef}
       {...props}
-      ref={forwardRef}
     />
   );
 };