Added breadcumb & nav providers

example/components/MainNav.tsx

@@ -1,5 +1,5 @@
+import { Nav } from '@the-curve-consulting/texmo-react-components';
 import { NavLink } from 'react-router-dom';
-import { NavItem, NavContext } from '@the-curve-consulting/texmo-react-components';
 
 export interface NavItemProps {
   route: string;
@@ -9,23 +9,23 @@ export interface NavItemProps {
 
 const Navbar = () => {
   return (
-    <NavContext.Provider value={NavLink}>
-      <NavItem
+    <Nav navLink={NavLink}>
+      <Nav.Item
         route={'/'} 
         icon={'house'}
         label={'Home'}
       />
-      <NavItem
+      <Nav.Item
         route={'/form'} 
         icon={'ui-checks'}
         label={'Form'}
       />
-      <NavItem
+      <Nav.Item
         route={'/list'} 
         icon={'list-task'}
         label={'List'}
       />
-    </NavContext.Provider>
+    </Nav>
   )
 }
 

example/pages/ListPage.tsx

@@ -1,13 +1,14 @@
 import { Chip, List, ProgressBar, SearchBar, Title, Breadcrumb, FilterButton } from '@the-curve-consulting/texmo-react-components';
 import { Col, Row } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
 
 const ListPage = () => {
   return (
     <div className="mt-5">
 
     <Row className="mt-4">
       <Col>
-        <Breadcrumb>
+        <Breadcrumb link={Link}>
           <Breadcrumb.Item
             text='Home' 
             route='/' 
@@ -34,7 +35,7 @@ const ListPage = () => {
       </Col>
     </Row>
 
-    <List>
+    <List className='mt-4'>
       <List.Head>
         <List.Cell>Head 1</List.Cell>
         <List.Cell>Head 2</List.Cell>

src/components/breadcrumb/BreadCrumbContext.tsx

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+import { Link } from 'react-router-dom';
+
+const BreadcrumbContext = createContext<typeof Link>(Link);
+
+export default BreadcrumbContext;

src/components/breadcrumb/Breadcrumb.tsx

@@ -1,21 +1,27 @@
 import React from 'react';
 import BreadcrumbItem from './components/BreadcrumbItem';
+import { Link } from 'react-router-dom';
+import BreadcrumbContext from './BreadCrumbContext';
 
-interface BreadcrumbProps extends React.HTMLProps<HTMLHeadingElement> {}
+interface BreadcrumbProps extends React.HTMLProps<HTMLHeadingElement> {
+  link: typeof Link;
+}
 
-const Breadcrumb = ({ children, ...rest }: BreadcrumbProps) => {
+const Breadcrumb = ({ link, children, ...rest }: BreadcrumbProps) => {
   const childrenArray = React.Children.toArray(children);
 
   return (
     <h5 {...rest}>
-      {childrenArray.map((child, index) => {
-        const childElement = child as React.ReactElement;
+      <BreadcrumbContext.Provider value={link}>
+        {childrenArray.map((child, index) => {
+          const childElement = child as React.ReactElement;
 
-        return React.cloneElement(childElement, {
-          key: index,
-          showSlash: index !== 0,
-        });
-      })}
+          return React.cloneElement(childElement, {
+            key: index,
+            showSlash: index !== 0,
+          });
+        })}
+      </BreadcrumbContext.Provider>
     </h5>
   );
 };

src/components/breadcrumb/components/BreadcrumbItem.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import BreadcrumbContext from '../BreadCrumbContext';
 
 export interface BreadcrumbItemProps extends React.HTMLProps<HTMLSpanElement> {
   text: string;
@@ -15,6 +16,8 @@ const BreadcrumbItem = ({
   className,
   ...rest
 }: BreadcrumbItemProps) => {
+  const Link = useContext(BreadcrumbContext);
+
   if (active) {
     return (
       <span className={`gray-text ${className}`} {...rest}>
@@ -24,14 +27,16 @@ const BreadcrumbItem = ({
     );
   }
 
-  const baseUrl = window.location.origin;
-
   return (
     <span className={className} {...rest}>
       {showSlash ? ' / ' : null}
-      <a className="breadcrumb-item" href={`${baseUrl}${route}`}>
-        {text}
-      </a>
+      {route ? (
+        <Link className="breadcrumb-item" to={route}>
+          {text}
+        </Link>
+      ) : (
+        text
+      )}
     </span>
   );
 };

src/components/nav/Nav.tsx

@@ -1,22 +1,29 @@
 import React from 'react';
+import NavContext from './NavContext';
+import { NavLink } from 'react-router-dom';
+import NavItem from './components/NavItem';
 import {
   Nav as BootstrapNav,
   NavProps as BootstrapNavProps,
 } from 'react-bootstrap';
 
-export interface NavProps extends BootstrapNavProps {}
+export interface NavProps extends BootstrapNavProps {
+  navLink: typeof NavLink;
+}
 
-const Nav = ({ className, children, ...rest }: NavProps) => {
+const Nav = ({ navLink, className, children, ...rest }: NavProps) => {
   return (
     <BootstrapNav
       navbar={false}
       variant="pills"
-      className={`flex-column mb-auto mx-auto text-center main-nav ${className}`}
+      className={`${className} flex-column mb-auto mx-auto text-center main-nav`}
       {...rest}
     >
-      {children}
+      <NavContext.Provider value={navLink}>{children}</NavContext.Provider>
     </BootstrapNav>
   );
 };
 
+Nav.Item = NavItem;
+
 export default Nav;

src/components/navItem/NavItem.tsx → src/components/nav/components/NavItem.tsx

@@ -1,7 +1,6 @@
+import NavContext from 'components/nav/NavContext';
 import React, { useContext } from 'react';
 import Nav from 'react-bootstrap/Nav';
-// import { NavLink as RouterNavLink } from 'react-router-dom';
-import NavContext from './NavContext';
 
 export interface NavItemProps {
   route: string;
@@ -11,6 +10,7 @@ export interface NavItemProps {
 
 const NavItem = ({ route, label, icon }: NavItemProps) => {
   const NavLink = useContext(NavContext);
+
   const linkClass = (isActive: boolean): string => {
     return isActive ? 'nav-link active' : 'nav-link link-dark';
   };

src/components/sideNavbar/SideNavBar.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import Nav from '../nav/Nav';
 
 export interface SideNavbarProps extends React.HTMLProps<HTMLDivElement> {}
 
@@ -9,7 +8,7 @@ const SideNavbar = ({ className, children, ...rest }: SideNavbarProps) => {
       className={`d-none d-md-flex flex-column flex-shrink-0 sticky-top sidebar-bg-grey p-3 ${className}`}
       {...rest}
     >
-      <Nav>{children}</Nav>
+      {children}
     </div>
   );
 };

src/index.ts

@@ -10,13 +10,12 @@ import SideNavbar from './components/sideNavbar/SideNavBar';
 import InfoTile from './components/infoTile/InfoTile';
 import Header from './components/header/Header';
 import UserProfile from './components/userProfile/UserProfile';
-import Nav from './components/nav/Nav';
 import Footer from './components/footer/Footer';
 import SearchBar from './components/searchBar/SearchBar';
 import Breadcrumb from './components/breadcrumb/Breadcrumb';
 import FilterButton from './components/filterButton/FilterButton';
-import NavItem from './components/navItem/NavItem';
-import NavContext from 'components/navItem/NavContext';
+import NavItem from './components/nav/components/NavItem';
+import Nav from './components/nav/Nav';
 import '../scss/texmo-react-components.scss';
 
 export {
@@ -32,11 +31,10 @@ export {
   InfoTile,
   Header,
   UserProfile,
-  Nav,
   Footer,
   SearchBar,
   Breadcrumb,
   FilterButton,
   NavItem,
-  NavContext,
+  Nav,
 };