Fix(web-react): HeaderDialogLink now accept a NextLink #DS-1003

lmc-eu · Dec 1, 2023 · 5bf52c1 · 5bf52c1
1 parent 48bb80b
commit 5bf52c1
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 41 deletions.
diff --git a/packages/web-react/src/components/Header/HeaderDialogLink.tsx b/packages/web-react/src/components/Header/HeaderDialogLink.tsx
@@ -1,24 +1,33 @@
-import React from 'react';
+import React, { ElementType, forwardRef } from 'react';
 import classNames from 'classnames';
 import { useStyleProps } from '../../hooks';
-import { HeaderDialogLinkProps } from '../../types';
+import { PolymorphicRef, SpiritDialogHeaderLinkProps } from '../../types';
 import { useHeaderStyleProps } from './useHeaderStyleProps';
 
-const HeaderDialogLink = (props: HeaderDialogLinkProps) => {
-  const { children, isCurrent, ...restProps } = props;
-
+/* We need an exception for components exported with forwardRef */
+/* eslint no-underscore-dangle: ['error', { allow: ['_HeaderDialogLink'] }] */
+const _HeaderDialogLink = <E extends ElementType = 'a'>(
+  props: SpiritDialogHeaderLinkProps<E>,
+  ref: PolymorphicRef<E>,
+): JSX.Element => {
+  const { elementType: ElementTag = 'a', children, isCurrent, ...restProps } = props;
   const { classProps } = useHeaderStyleProps({ isCurrentLink: isCurrent });
   const { styleProps, props: otherProps } = useStyleProps(restProps);
 
   return (
-    <a
+    <ElementTag
       {...otherProps}
       className={classNames(classProps.headerDialogLink, styleProps.className)}
       style={styleProps.style}
+      ref={ref}
     >
       {children}
-    </a>
+    </ElementTag>
   );
 };
 
+export const HeaderDialogLink = forwardRef<HTMLAnchorElement, SpiritDialogHeaderLinkProps<ElementType>>(
+  _HeaderDialogLink,
+);
+
 export default HeaderDialogLink;
diff --git a/packages/web-react/src/components/Header/README.md b/packages/web-react/src/components/Header/README.md
@@ -6,38 +6,19 @@ your specific design goals.
 
 The Header is a composition of several subcomponents:
 
-- [Header and HeaderDialog](#header-and-headerdialog)
-  - [Accessibility Guidelines](#accessibility-guidelines)
-  - [Minimal Header](#minimal-header)
-  - [Color Variants](#color-variants)
-  - [Simple Header](#simple-header)
-  - [API](#api)
-  - [Supported Content](#supported-content)
-  - [Header](#header)
-    - [Mobile-Only Actions](#mobile-only-actions)
-      - [Custom Mobile Actions](#custom-mobile-actions)
-      - [API](#api-1)
-    - [Desktop-Only Actions](#desktop-only-actions)
-      - [API](#api-2)
-      - [Navigation](#navigation)
-      - [Other Content](#other-content)
-        - [HeaderNav API](#headernav-api)
-        - [HeaderNavItem API](#headernavitem-api)
-        - [HeaderLink API](#headerlink-api)
-        - [HeaderButton API](#headerbutton-api)
-  - [Header Dialog](#header-dialog)
-    - [API](#api-3)
-    - [Close Button](#close-button)
-      - [API](#api-4)
-    - [Primary and Secondary Actions](#primary-and-secondary-actions)
-      - [API](#api-5)
-      - [Navigation](#navigation-1)
-        - [HeaderDialogNav API](#headerdialognav-api)
-        - [HeaderDialogNavItem API](#headerdialognavitem-api)
-        - [HeaderDialogLink API](#headerdialoglink-api)
-        - [HeaderDialogButton API](#headerdialogbutton-api)
-        - [HeaderDialogText API](#headerdialogtext-api)
-  - [Composition](#composition)
+- [Header](#minimal-header)
+  - [HeaderMobileActions](#mobile-only-actions)
+  - [HeaderDesktopActions](#desktop-only-actions)
+    - [HeaderNav](#navigation)
+      - [HeaderNavItem](#navigation)
+        - [HeaderLink](#navigation)
+- [HeaderDialog](#header-dialog)
+  - [HeaderDialogCloseButton](#close-button)
+  - [HeaderDialogActions](#primary-and-secondary-actions)
+    - [HeaderDialogNav](#navigation-1)
+      - [HeaderDialogNavItem](#navigation-1)
+        - [HeaderDialogLink](#navigation-1)
+        - [HeaderDialogText](#navigation-1)
 
 ## Accessibility Guidelines
 
@@ -418,6 +399,7 @@ The component further inherits properties from the [`<li>`][mdn-li-element] elem
 | Name               | Type            | Default | Required | Description          |
 | ------------------ | --------------- | ------- | -------- | -------------------- |
 | `children`         | `ReactNode`     | —       | ✕        | Children node        |
+| `elementType`      | `ElementType`   | `a`     | ✕        | Type of element      |
 | `isCurrent`        | `bool`          | `false` | ✕        | Mark link as current |
 | `UNSAFE_className` | `string`        | —       | ✕        | Custom class name    |
 | `UNSAFE_style`     | `CSSProperties` | —       | ✕        | Custom style         |

diff --git a/packages/web-react/src/components/Header/__tests__/HeaderDialogLink.test.tsx b/packages/web-react/src/components/Header/__tests__/HeaderDialogLink.test.tsx
@@ -22,4 +22,15 @@ describe('HeaderDialogLink', () => {
     const element = dom.container.querySelector('a') as HTMLElement;
     expect(element.textContent).toBe('Hello World');
   });
+
+  it('should render button element', () => {
+    const dom = render(
+      <HeaderDialogLink id="test" elementType="button">
+        Hello World
+      </HeaderDialogLink>,
+    );
+
+    const element = dom.container.querySelector('button') as HTMLElement;
+    expect(element.textContent).toBe('Hello World');
+  });
 });
diff --git a/packages/web-react/src/types/header.ts b/packages/web-react/src/types/header.ts
@@ -2,7 +2,6 @@ import { ElementType } from 'react';
 import {
   ChildrenProps,
   ClickEvent,
-  SpiritAnchorElementProps,
   SpiritButtonElementProps,
   SpiritDialogElementProps,
   SpiritElementProps,
@@ -52,10 +51,21 @@ export interface HeaderDialogCloseButtonProps extends Omit<SpiritButtonElementPr
   label?: string;
 }
 
-export interface HeaderDialogLinkProps extends SpiritAnchorElementProps, ChildrenProps {
+export interface BaseHeaderDialogLinkProps extends ChildrenProps, StyleProps, TransferProps {
   isCurrent?: boolean;
 }
 
+export type HeaderDialogLinkProps<E extends ElementType = 'a'> = {
+  /**
+   * The HTML element or React element used to render the Link, e.g. 'a'.
+   * @default 'a'
+   */
+  elementType?: E;
+} & BaseHeaderDialogLinkProps;
+
+export type SpiritDialogHeaderLinkProps<E extends ElementType = 'a'> = HeaderDialogLinkProps<E> &
+  SpiritPolymorphicElementPropsWithRef<E, HeaderDialogLinkProps<E>>;
+
 export interface HeaderDialogNavProps extends SpiritUListElementProps, ChildrenProps {}
 
 export interface HeaderDialogNavItemProps extends SpiritLItemElementProps, ChildrenProps {}