Breadcrumbs: #25

Removed icon prop from breadcrumb divider, now support icon as child Adjusted examples
hallister · Jul 31, 2016 · 6493e09 · 6493e09
1 parent 483d23b
commit 6493e09
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 35 deletions.
diff --git a/src/components/collections/breadcrumb/__tests__/divider-test.jsx b/src/components/collections/breadcrumb/__tests__/divider-test.jsx
@@ -3,11 +3,11 @@ import { expect } from 'chai';
 import { shallow } from 'enzyme';
 import { itShouldConsumeOwnAndPassCustomProps } from '../../../test-utils';
 import Divider from '../divider';
+import Icon from '../../../elements/icon/icon';
 
 const consumedProps = {
     component: 'div',
-    defaultClasses: true,
-    icon: 'right chevron'
+    defaultClasses: true
 };
 
 describe('collections/breadcrumb/divider', () => {
@@ -24,9 +24,19 @@ describe('collections/breadcrumb/divider', () => {
         expect(wrapper).to.have.className('divider');
     });
 
-    it('can be icon divider', () => {
-        const wrapper = shallow(<Divider icon="right chevron"/>);
-        expect(wrapper).to.have.className('right chevron icon divider');
+    it('Should render child content', () => {
+        const wrapper = shallow(<Divider>/</Divider>);
+        expect(wrapper.children()).to.have.text('/');
+    });
+
+    describe('When has icon child', () => {
+        it('Should render divider icon instead divider', () => {
+            const wrapper = shallow(<Divider component="a"><Icon name="right arrow"/></Divider>);
+            expect(wrapper.is(Icon)).to.be.true;
+            expect(wrapper).to.have.tagName('i');
+            expect(wrapper).to.have.className('divider');
+            expect(wrapper.shallow()).to.have.className('icon');
+        });
     });
 
     itShouldConsumeOwnAndPassCustomProps(Divider, consumedProps);

diff --git a/src/components/collections/breadcrumb/divider.jsx b/src/components/collections/breadcrumb/divider.jsx
@@ -2,40 +2,53 @@ import React from 'react';
 import classNames from 'classnames';
 import shallowCompare from 'react-addons-shallow-compare';
 import DefaultProps from '../../defaultProps';
+import { hasFirstChild } from '../../utilities';
+import Icon from '../../elements/icon/icon';
 
 /**
  * Divider for breadcrumb
  */
 export default class BreadcrumbDivider extends React.Component {
     static propTypes = {
-        ...DefaultProps.propTypes,
-        /**
-         * Icon divider
-         */
-        icon: React.PropTypes.string
+        ...DefaultProps.propTypes
     };
 
     static defaultProps = {
         ...DefaultProps.defaultProps
     };
 
+    /* eslint-disable */
+    static Components = {
+        Icon: Icon
+    };
+    /* eslint-enable */
+
     shouldComponentUpdate(nextProps, nextState) {
         return shallowCompare(this, nextProps, nextState);
     }
 
     render() {
-        const { component, defaultClasses, icon, ...other } = this.props;
+        const { component, defaultClasses, children, ...other } = this.props;
         other.className = classNames(other.className, this.getClasses());
-        const Component = component;
-        return (
-            <Component {...other}/>
-        );
+        let Component = component;
+
+        // If divider has icon child return only icon
+        if (hasFirstChild(children, BreadcrumbDivider.Components.Icon)) {
+            const [ iconChild, ...otherChilds ] = React.Children.toArray(children);
+            return React.cloneElement(iconChild, {
+                className: classNames(iconChild.props.className, this.getClasses())
+            });
+        } else {
+            return (
+                <Component {...other}>
+                    {children}
+                </Component>
+            );
+        }
     }
 
     getClasses() {
         return {
-            [this.props.icon]: !!this.props.icon,
-            icon: this.props.icon,
             divider: this.props.defaultClasses
         }
     }

diff --git a/src/components/collections/breadcrumb/examples/breadcrumb.examples.md b/src/components/collections/breadcrumb/examples/breadcrumb.examples.md
@@ -3,19 +3,29 @@ A standard breadcrumb
 ```example
 <Breadcrumb>
     <BreadcrumbSection component="a">Home</BreadcrumbSection>
-    <BreadcrumbDivider/>
+    <BreadcrumbDivider>{' / '}</BreadcrumbDivider>
     <BreadcrumbSection component="a">Store</BreadcrumbSection>
-    <BreadcrumbDivider/>
+    <BreadcrumbDivider>{' / '}</BreadcrumbDivider>
     <BreadcrumbSection active component="a">T-Shirt</BreadcrumbSection>
 </Breadcrumb>
 ```
 
 ```example
 <Breadcrumb>
     <BreadcrumbSection component="a">Home</BreadcrumbSection>
-    <BreadcrumbDivider icon="right angle"/>
+    <BreadcrumbDivider><Icon name="right angle"/></BreadcrumbDivider>
     <BreadcrumbSection component="a">Store</BreadcrumbSection>
-    <BreadcrumbDivider icon="right angle"/>
+    <BreadcrumbDivider><Icon name="right angle"/></BreadcrumbDivider>
+    <BreadcrumbSection active component="a">T-Shirt</BreadcrumbSection>
+</Breadcrumb>
+```
+
+```example
+<Breadcrumb>
+    <BreadcrumbSection component="a">Home</BreadcrumbSection>
+    <BreadcrumbDivider><Icon name="right angle" color="red"/></BreadcrumbDivider>
+    <BreadcrumbSection component="a">Store</BreadcrumbSection>
+    <BreadcrumbDivider><Icon name="right angle" color="red"/></BreadcrumbDivider>
     <BreadcrumbSection active component="a">T-Shirt</BreadcrumbSection>
 </Breadcrumb>
 ```
@@ -26,57 +36,57 @@ A standard breadcrumb
 <Segment>
     <Breadcrumb size="mini">
         <BreadcrumbSection component="a">Home</BreadcrumbSection>
-        <BreadcrumbDivider icon="right chevron"/>
+        <BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
         <BreadcrumbSection component="a">Registration</BreadcrumbSection>
-        <BreadcrumbDivider icon="right chevron"/>
+        <BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
         <BreadcrumbSection component="a">Personal Information</BreadcrumbSection>
     </Breadcrumb>
     <br/>
     <Breadcrumb size="tiny">
         <BreadcrumbSection component="a">Home</BreadcrumbSection>
-        <BreadcrumbDivider icon="right chevron"/>
+        <BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
         <BreadcrumbSection component="a">Registration</BreadcrumbSection>
-        <BreadcrumbDivider icon="right chevron"/>
+        <BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
         <BreadcrumbSection component="a">Personal Information</BreadcrumbSection>
     </Breadcrumb>
     <br/>
     <Breadcrumb size="small">
         <BreadcrumbSection component="a">Home</BreadcrumbSection>
-        <BreadcrumbDivider icon="right chevron"/>
+        <BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
         <BreadcrumbSection component="a">Registration</BreadcrumbSection>
-        <BreadcrumbDivider icon="right chevron"/>
+        <BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
         <BreadcrumbSection component="a">Personal Information</BreadcrumbSection>
     </Breadcrumb>
     <br/>
     <Breadcrumb size="large">
         <BreadcrumbSection component="a">Home</BreadcrumbSection>
-        <BreadcrumbDivider icon="right chevron"/>
+        <BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
         <BreadcrumbSection component="a">Registration</BreadcrumbSection>
-        <BreadcrumbDivider icon="right chevron"/>
+        <BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
         <BreadcrumbSection component="a">Personal Information</BreadcrumbSection>
     </Breadcrumb>
     <br/>
     <Breadcrumb size="big">
         <BreadcrumbSection component="a">Home</BreadcrumbSection>
-        <BreadcrumbDivider icon="right chevron"/>
+        <BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
         <BreadcrumbSection component="a">Registration</BreadcrumbSection>
-        <BreadcrumbDivider icon="right chevron"/>
+        <BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
         <BreadcrumbSection component="a">Personal Information</BreadcrumbSection>
     </Breadcrumb>
     <br/>
     <Breadcrumb size="huge">
         <BreadcrumbSection component="a">Home</BreadcrumbSection>
-        <BreadcrumbDivider icon="right chevron"/>
+        <BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
         <BreadcrumbSection component="a">Registration</BreadcrumbSection>
-        <BreadcrumbDivider icon="right chevron"/>
+        <BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
         <BreadcrumbSection component="a">Personal Information</BreadcrumbSection>
     </Breadcrumb>
     <br/>
     <Breadcrumb size="massive">
         <BreadcrumbSection component="a">Home</BreadcrumbSection>
-        <BreadcrumbDivider icon="right chevron"/>
+        <BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
         <BreadcrumbSection component="a">Registration</BreadcrumbSection>
-        <BreadcrumbDivider icon="right chevron"/>
+        <BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
         <BreadcrumbSection component="a">Personal Information</BreadcrumbSection>
     </Breadcrumb>
 </Segment>

diff --git a/styleguide.config.js b/styleguide.config.js
@@ -53,6 +53,14 @@ module.exports = {
                 });
             }
         },
+        {
+            name: 'Collections - Breadcrumb',
+            components: () => {
+                return glob.sync(path.resolve(__dirname, 'src/components/collections/breadcrumb/**/*.jsx')).filter(module => {
+                    return !(/(__tests__|examples)/.test(module));
+                });
+            }
+        },
         {
             name: 'Modules',
             components: () => {