|
1 | | -import React, { forwardRef, HTMLAttributes } from 'react' |
| 1 | +import React, { ElementType, forwardRef, HTMLAttributes } from 'react' |
2 | 2 | import PropTypes from 'prop-types' |
3 | 3 | import classNames from 'classnames' |
4 | 4 |
|
5 | | -export interface CSidebarBrandProps extends HTMLAttributes<HTMLDivElement> { |
| 5 | +import { PolymorphicRefForwardingComponent } from '../../helpers' |
| 6 | + |
| 7 | +export interface CSidebarBrandProps extends HTMLAttributes<HTMLAnchorElement | HTMLDivElement> { |
| 8 | + /** |
| 9 | + * Component used for the root node. Either a string to use a HTML element or a component. |
| 10 | + * |
| 11 | + * @since 5.0.0-rc.0 |
| 12 | + */ |
| 13 | + as?: ElementType |
6 | 14 | /** |
7 | 15 | * A string of all className you want applied to the component. |
8 | 16 | */ |
9 | 17 | className?: string |
10 | 18 | } |
11 | 19 |
|
12 | | -export const CSidebarBrand = forwardRef<HTMLDivElement, CSidebarBrandProps>( |
13 | | - ({ children, className, ...rest }, ref) => { |
14 | | - return ( |
15 | | - <div className={classNames('sidebar-brand', className)} ref={ref} {...rest}> |
16 | | - {children} |
17 | | - </div> |
18 | | - ) |
19 | | - }, |
20 | | -) |
| 20 | +export const CSidebarBrand: PolymorphicRefForwardingComponent<'a', CSidebarBrandProps> = forwardRef< |
| 21 | + HTMLAnchorElement | HTMLDivElement, |
| 22 | + CSidebarBrandProps |
| 23 | +>(({ children, as: Component = 'a', className, ...rest }, ref) => { |
| 24 | + return ( |
| 25 | + <Component className={classNames('sidebar-brand', className)} ref={ref} {...rest}> |
| 26 | + {children} |
| 27 | + </Component> |
| 28 | + ) |
| 29 | +}) |
21 | 30 |
|
22 | 31 | CSidebarBrand.propTypes = { |
| 32 | + as: PropTypes.elementType, |
23 | 33 | children: PropTypes.node, |
24 | 34 | className: PropTypes.string, |
25 | 35 | } |
|
0 commit comments