feat(CSidebarBrand): allows to rendering the component as a link

Author: mrholek

packages/coreui-react/src/components/sidebar/CSidebarBrand.tsx

@@ -1,25 +1,35 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-export interface CSidebarBrandProps extends HTMLAttributes<HTMLDivElement> {
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
+export interface CSidebarBrandProps extends HTMLAttributes<HTMLAnchorElement | HTMLDivElement> {
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   *
+   * @since 5.0.0-rc.0
+   */
+  as?: ElementType
   /**
    * A string of all className you want applied to the component.
    */
   className?: string
 }
 
-export const CSidebarBrand = forwardRef<HTMLDivElement, CSidebarBrandProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <div className={classNames('sidebar-brand', className)} ref={ref} {...rest}>
-        {children}
-      </div>
-    )
-  },
-)
+export const CSidebarBrand: PolymorphicRefForwardingComponent<'a', CSidebarBrandProps> = forwardRef<
+  HTMLAnchorElement | HTMLDivElement,
+  CSidebarBrandProps
+>(({ children, as: Component = 'a', className, ...rest }, ref) => {
+  return (
+    <Component className={classNames('sidebar-brand', className)} ref={ref} {...rest}>
+      {children}
+    </Component>
+  )
+})
 
 CSidebarBrand.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
 }