Adjust Header for as prop

primer · Dec 19, 2024 · 956014f · 956014f
1 parent 4c48ca2
commit 956014f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 21 deletions.
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
@@ -1,24 +1,23 @@
 import type {Location, Pathname} from 'history'
 import type {SxProp} from '../sx'
-import type {ComponentProps} from '../utils/types'
 import React from 'react'
 import {clsx} from 'clsx'
 import classes from './Header.module.css'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import Box from '../Box'
 
-type StyledHeaderProps = React.ComponentProps<'header'> & SxProp
-type StyledHeaderItemProps = React.ComponentProps<'div'> & SxProp & {full?: boolean}
-type StyledHeaderLinkProps = React.ComponentProps<'a'> & SxProp & {to?: Location | Pathname}
+export type HeaderProps = React.ComponentProps<'header'> & SxProp & {as?: React.ElementType}
+export type HeaderItemProps = React.ComponentProps<'div'> & SxProp & {full?: boolean}
+export type HeaderLinkProps = React.ComponentProps<'a'> & SxProp & {to?: Location | Pathname; as?: React.ElementType}
 
-const Header = React.forwardRef<HTMLElement, StyledHeaderProps>(function Header(
-  {children, className, sx: sxProp = defaultSxProp, ...rest},
+const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header(
+  {children, className, sx: sxProp = defaultSxProp, as = 'header', ...rest},
   forwardRef,
 ) {
-  if (sxProp !== defaultSxProp) {
+  if (sxProp !== defaultSxProp || as !== 'header') {
     return (
-      <Box as={'header'} sx={sxProp} ref={forwardRef} className={clsx(className, classes.Header)} {...rest}>
+      <Box as={as} sx={sxProp} ref={forwardRef} className={clsx(className, classes.Header)} {...rest}>
         {children}
       </Box>
     )
@@ -28,12 +27,12 @@ const Header = React.forwardRef<HTMLElement, StyledHeaderProps>(function Header(
       {children}
     </header>
   )
-}) as PolymorphicForwardRefComponent<'header', StyledHeaderProps>
+}) as PolymorphicForwardRefComponent<'header', HeaderProps>
 
 Header.displayName = 'Header'
 
-const HeaderItem = React.forwardRef<HTMLDivElement, StyledHeaderItemProps>(function HeaderItem(
-  {children, className, sx: sxProp = defaultSxProp, ...rest},
+const HeaderItem = React.forwardRef<HTMLDivElement, HeaderItemProps>(function HeaderItem(
+  {children, className, sx: sxProp = defaultSxProp, full, ...rest},
   forwardRef,
 ) {
   if (sxProp !== defaultSxProp) {
@@ -43,29 +42,29 @@ const HeaderItem = React.forwardRef<HTMLDivElement, StyledHeaderItemProps>(funct
         sx={sxProp}
         ref={forwardRef}
         className={clsx(className, classes.HeaderItem)}
-        data-full={rest.full}
+        data-full={full}
         {...rest}
       >
         {children}
       </Box>
     )
   }
   return (
-    <div ref={forwardRef} className={clsx(className, classes.HeaderItem)} data-full={rest.full} {...rest}>
+    <div ref={forwardRef} className={clsx(className, classes.HeaderItem)} data-full={full} {...rest}>
       {children}
     </div>
   )
 })
 
 HeaderItem.displayName = 'Header.Item'
 
-const HeaderLink = React.forwardRef<HTMLAnchorElement, StyledHeaderLinkProps>(function HeaderLink(
-  {children, className, sx: sxProp = defaultSxProp, ...rest},
+const HeaderLink = React.forwardRef<HTMLAnchorElement, HeaderLinkProps>(function HeaderLink(
+  {children, className, sx: sxProp = defaultSxProp, as = 'a', ...rest},
   forwardRef,
 ) {
-  if (sxProp !== defaultSxProp) {
+  if (sxProp !== defaultSxProp || as !== 'a') {
     return (
-      <Box as={'a'} sx={sxProp} ref={forwardRef} className={clsx(className, classes.HeaderLink)} {...rest}>
+      <Box as={as} sx={sxProp} ref={forwardRef} className={clsx(className, classes.HeaderLink)} {...rest}>
         {children}
       </Box>
     )
@@ -79,7 +78,4 @@ const HeaderLink = React.forwardRef<HTMLAnchorElement, StyledHeaderLinkProps>(fu
 
 HeaderLink.displayName = 'Header.Link'
 
-export type HeaderProps = ComponentProps<typeof Header>
-export type HeaderLinkProps = ComponentProps<typeof HeaderLink>
-export type HeaderItemProps = ComponentProps<typeof HeaderItem>
 export default Object.assign(Header, {Link: HeaderLink, Item: HeaderItem})
diff --git a/packages/react/src/__tests__/Header.test.tsx b/packages/react/src/__tests__/Header.test.tsx
@@ -13,7 +13,7 @@ describe('Header', () => {
   })
 
   describe('Header.Item', () => {
-    behavesAsComponent({Component: Header.Item})
+    behavesAsComponent({Component: Header.Item, options: {skipAs: true}})
 
     it('accepts and applies className', () => {
       expect(render(<Header.Item className="primer" />).props.className).toContain('primer')