feat(CNav): add the underline variant

Author: mrholek

packages/coreui-react/src/components/nav/CNav.tsx

@@ -19,7 +19,7 @@ export interface CNavProps
   /**
    * Set the nav variant to tabs or pills.
    */
-  variant?: 'tabs' | 'pills'
+  variant?: 'pills' | 'tabs' | 'underline'
 }
 
 export const CNav = forwardRef<HTMLDivElement | HTMLUListElement | HTMLOListElement, CNavProps>(
@@ -49,7 +49,7 @@ CNav.propTypes = {
   className: PropTypes.string,
   component: PropTypes.elementType,
   layout: PropTypes.oneOf(['fill', 'justified']),
-  variant: PropTypes.oneOf(['tabs', 'pills']),
+  variant: PropTypes.oneOf(['pills', 'tabs', 'underline']),
 }
 
 CNav.displayName = 'CNav'

packages/docs/content/components/navs-tabs.mdx

@@ -172,7 +172,7 @@ Takes the basic nav from above and adds the `variant="tabs"` class to generate a
 
 ### Pills
 
-Take that same HTML, but use `variant="pills"` instead:
+Take that same code, but use `variant="pills"` instead:
 
 ```jsx preview
 <CNav variant="pills">
@@ -195,6 +195,31 @@ Take that same HTML, but use `variant="pills"` instead:
 </CNav>
 ```
 
+### Underline
+
+Take that same code, but use `variant="underline"` instead:
+
+```jsx preview
+<CNav variant="underline">
+  <CNavItem>
+    <CNavLink href="#" active>
+      Active
+    </CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#">Link</CNavLink>
+  </CNavItem>
+  <CNavItem>
+    <CNavLink href="#" disabled>
+      Disabled
+    </CNavLink>
+  </CNavItem>
+</CNav>
+```
+
 ### Fill and justify
 
 Force your `<CNav>`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.