feat: Remove React Router from Breadcrumbs (#294)

* Saving state

* Updating menu to factor out react-router

* Update linting

* Reverting menu for easier PR

* Update breadcrumb documentation

* Fix doc issue

* PR feedback

* Removing unused prop

* Updating desc text

* Update documentation

Author: jeffredodd

src/Breadcrumb/Breadcrumb.Component.js

@@ -1,18 +1,25 @@
+import { Link } from 'react-router-dom';
 import React from 'react';
 import { Breadcrumb, BreadcrumbItem } from '../';
 import { Description, DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground';
 
 export const BreadcrumbComponent = () => {
     const breadcrumbHrefCode = `<Breadcrumb>
-    <BreadcrumbItem url="#" name="Link Text"/>
-    <BreadcrumbItem url="#" name="Link Text"/>
-    <BreadcrumbItem url="#" name="Link Text"/>
+    <BreadcrumbItem name='Link Text' url='#' />
+    <BreadcrumbItem name='Link Text' url='#' />
+    <BreadcrumbItem name='Link Text' url='#' />
 </Breadcrumb>`;
 
-    const breadcrumbLinkCode = ` <Breadcrumb>
-    <BreadcrumbItem link="/" name="Link Text" />
-    <BreadcrumbItem link="/" name="Link Text" />
-    <BreadcrumbItem link="/" name="Link Text" />
+    const breadcrumbLinkCode = `<Breadcrumb>
+    <BreadcrumbItem>
+        <Link to='#'>Link Text</Link>
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+        <Link to='#'>Link Text</Link>
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+        <Link to='#'>Link Text</Link>
+    </BreadcrumbItem>
 </Breadcrumb>`;
 
     return (
@@ -43,12 +50,18 @@ export const BreadcrumbComponent = () => {
 
             <Separator />
 
-            <h2>Using link (routerLink)</h2>
+            <h2>Using Link from React Router</h2>
             <DocsTile>
                 <Breadcrumb>
-                    <BreadcrumbItem link='/' name='Link Text' />
-                    <BreadcrumbItem link='/' name='Link Text' />
-                    <BreadcrumbItem link='/' name='Link Text' />
+                    <BreadcrumbItem>
+                        <Link to='#'>Link Text</Link>
+                    </BreadcrumbItem>
+                    <BreadcrumbItem>
+                        <Link to='#'>Link Text</Link>
+                    </BreadcrumbItem>
+                    <BreadcrumbItem>
+                        <Link to='#'>Link Text</Link>
+                    </BreadcrumbItem>
                 </Breadcrumb>
             </DocsTile>
             <DocsText>{breadcrumbLinkCode}</DocsText>

src/Breadcrumb/Breadcrumb.js

@@ -1,7 +1,6 @@
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { BrowserRouter, Link } from 'react-router-dom';
 
 export const Breadcrumb = ({ children, ...props }) => {
     return <ul {...props} className='fd-breadcrumb'>{children}</ul>;
@@ -15,25 +14,33 @@ Breadcrumb.propDescriptions = {
     children: 'List item (`BreadcrumbItem`) nodes.'
 };
 
-export const BreadcrumbItem = ({ url, link, name, className, ...props }) => {
+export const BreadcrumbItem = ({ url, name, className, children, ...props }) => {
+    const renderLink = () => {
+        if (!children && url) {
+            return (
+                <a className='fd-breadcrumb__link' href={url}>{name}</a>
+            );
+        } else if (children) {
+            return React.cloneElement(children, {
+                'className': 'fd-breadcrumb__link'
+            });
+        }
+    };
+
     const breadcrumbItemClasses = classnames(
         'fd-breadcrumb__item',
         className
     );
 
     return (
-        <BrowserRouter>
-            <li {...props} className={breadcrumbItemClasses}>
-                {link && <Link className='fd-breadcrumb__link' to={{ pathname: link }}>{name}</Link>}
-                {url && <a className='fd-breadcrumb__link' href={url}>{name}</a>}
-            </li>
-        </BrowserRouter>
+        <li {...props} className={breadcrumbItemClasses}>
+            {renderLink()}
+        </li>
     );
 };
 
 BreadcrumbItem.propTypes = {
-    name: PropTypes.string.isRequired,
-    link: PropTypes.string,
+    name: PropTypes.string,
     url: PropTypes.string
 };
 

src/Breadcrumb/Breadcrumb.test.js

@@ -1,8 +1,8 @@
-import { MemoryRouter } from 'react-router-dom';
 import { mount } from 'enzyme';
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { Breadcrumb, BreadcrumbItem } from './Breadcrumb';
+import { Link, MemoryRouter } from 'react-router-dom';
 
 describe('<Breadcrumb />', () => {
     const defaultBreadCrumb = (
@@ -16,9 +16,13 @@ describe('<Breadcrumb />', () => {
     const breadCrumbRouterLink = (
         <MemoryRouter>
             <Breadcrumb className='blue'>
-                <BreadcrumbItem className='blue' name='Link Text' />
-                <BreadcrumbItem link='/' name='Link Text' />
-                <BreadcrumbItem link='/' name='Link Text' />
+                <BreadcrumbItem className='blue' />
+                <BreadcrumbItem>
+                    <Link to='/'>Link Text</Link>
+                </BreadcrumbItem>
+                <BreadcrumbItem>
+                    <Link to='/'>Link Text</Link>
+                </BreadcrumbItem>
             </Breadcrumb>
         </MemoryRouter>
     );