Merge 8b83ab3 into 1da24ce

SAP · Jan 29, 2019 · 4bc960c · 4bc960c
2 parents 1da24ce + 8b83ab3
commit 4bc960c
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 28 deletions.
diff --git a/src/Breadcrumb/Breadcrumb.Component.js b/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>

diff --git a/src/Breadcrumb/Breadcrumb.js b/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,30 +14,37 @@ 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
 };
 
 BreadcrumbItem.propDescriptions = {
-    name: 'Localized display text of the link (for either `link` or `url`).',
-    link: 'Enables use of react-router `Link` component. Path name to be applied to Link\'s `to` prop. Should use either `link` or `url`, but not both.',
-    url: 'Enables use of `<a>` element. Value to be applied to the anchor\'s `href` attribute. Should use either `link` or `url`, but not both.'
+    name: 'Text for the internal anchor tag.',
+    url: 'An anchor tag will be generated and set to the url prop. Name or child text must be provided.'
 };
diff --git a/src/Breadcrumb/Breadcrumb.test.js b/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>
     );