Skip to content

Commit 6493e09

Browse files
asvetliakovasvetliakov
committed
Breadcrumbs: #25
Removed icon prop from breadcrumb divider, now support icon as child Adjusted examples
1 parent 483d23b commit 6493e09

File tree

4 files changed

+76
-35
lines changed

4 files changed

+76
-35
lines changed

‎src/components/collections/breadcrumb/__tests__/divider-test.jsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import { expect } from 'chai';
33
import { shallow } from 'enzyme';
44
import { itShouldConsumeOwnAndPassCustomProps } from '../../../test-utils';
55
import Divider from '../divider';
6+
import Icon from '../../../elements/icon/icon';
67

78
const consumedProps = {
89
component: 'div',
9-
defaultClasses: true,
10-
icon: 'right chevron'
10+
defaultClasses: true
1111
};
1212

1313
describe('collections/breadcrumb/divider', () => {
@@ -24,9 +24,19 @@ describe('collections/breadcrumb/divider', () => {
2424
expect(wrapper).to.have.className('divider');
2525
});
2626

27-
it('can be icon divider', () => {
28-
const wrapper = shallow(<Divider icon="right chevron"/>);
29-
expect(wrapper).to.have.className('right chevron icon divider');
27+
it('Should render child content', () => {
28+
const wrapper = shallow(<Divider>/</Divider>);
29+
expect(wrapper.children()).to.have.text('/');
30+
});
31+
32+
describe('When has icon child', () => {
33+
it('Should render divider icon instead divider', () => {
34+
const wrapper = shallow(<Divider component="a"><Icon name="right arrow"/></Divider>);
35+
expect(wrapper.is(Icon)).to.be.true;
36+
expect(wrapper).to.have.tagName('i');
37+
expect(wrapper).to.have.className('divider');
38+
expect(wrapper.shallow()).to.have.className('icon');
39+
});
3040
});
3141

3242
itShouldConsumeOwnAndPassCustomProps(Divider, consumedProps);

‎src/components/collections/breadcrumb/divider.jsx‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,53 @@ import React from 'react';
22
import classNames from 'classnames';
33
import shallowCompare from 'react-addons-shallow-compare';
44
import DefaultProps from '../../defaultProps';
5+
import { hasFirstChild } from '../../utilities';
6+
import Icon from '../../elements/icon/icon';
57

68
/**
79
* Divider for breadcrumb
810
*/
911
export default class BreadcrumbDivider extends React.Component {
1012
static propTypes = {
11-
...DefaultProps.propTypes,
12-
/**
13-
* Icon divider
14-
*/
15-
icon: React.PropTypes.string
13+
...DefaultProps.propTypes
1614
};
1715

1816
static defaultProps = {
1917
...DefaultProps.defaultProps
2018
};
2119

20+
/* eslint-disable */
21+
static Components = {
22+
Icon: Icon
23+
};
24+
/* eslint-enable */
25+
2226
shouldComponentUpdate(nextProps, nextState) {
2327
return shallowCompare(this, nextProps, nextState);
2428
}
2529

2630
render() {
27-
const { component, defaultClasses, icon, ...other } = this.props;
31+
const { component, defaultClasses, children, ...other } = this.props;
2832
other.className = classNames(other.className, this.getClasses());
29-
const Component = component;
30-
return (
31-
<Component {...other}/>
32-
);
33+
let Component = component;
34+
35+
// If divider has icon child return only icon
36+
if (hasFirstChild(children, BreadcrumbDivider.Components.Icon)) {
37+
const [ iconChild, ...otherChilds ] = React.Children.toArray(children);
38+
return React.cloneElement(iconChild, {
39+
className: classNames(iconChild.props.className, this.getClasses())
40+
});
41+
} else {
42+
return (
43+
<Component {...other}>
44+
{children}
45+
</Component>
46+
);
47+
}
3348
}
3449

3550
getClasses() {
3651
return {
37-
[this.props.icon]: !!this.props.icon,
38-
icon: this.props.icon,
3952
divider: this.props.defaultClasses
4053
}
4154
}

‎src/components/collections/breadcrumb/examples/breadcrumb.examples.md‎

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,29 @@ A standard breadcrumb
33
```example
44
<Breadcrumb>
55
<BreadcrumbSection component="a">Home</BreadcrumbSection>
6-
<BreadcrumbDivider/>
6+
<BreadcrumbDivider>{' / '}</BreadcrumbDivider>
77
<BreadcrumbSection component="a">Store</BreadcrumbSection>
8-
<BreadcrumbDivider/>
8+
<BreadcrumbDivider>{' / '}</BreadcrumbDivider>
99
<BreadcrumbSection active component="a">T-Shirt</BreadcrumbSection>
1010
</Breadcrumb>
1111
```
1212

1313
```example
1414
<Breadcrumb>
1515
<BreadcrumbSection component="a">Home</BreadcrumbSection>
16-
<BreadcrumbDivider icon="right angle"/>
16+
<BreadcrumbDivider><Icon name="right angle"/></BreadcrumbDivider>
1717
<BreadcrumbSection component="a">Store</BreadcrumbSection>
18-
<BreadcrumbDivider icon="right angle"/>
18+
<BreadcrumbDivider><Icon name="right angle"/></BreadcrumbDivider>
19+
<BreadcrumbSection active component="a">T-Shirt</BreadcrumbSection>
20+
</Breadcrumb>
21+
```
22+
23+
```example
24+
<Breadcrumb>
25+
<BreadcrumbSection component="a">Home</BreadcrumbSection>
26+
<BreadcrumbDivider><Icon name="right angle" color="red"/></BreadcrumbDivider>
27+
<BreadcrumbSection component="a">Store</BreadcrumbSection>
28+
<BreadcrumbDivider><Icon name="right angle" color="red"/></BreadcrumbDivider>
1929
<BreadcrumbSection active component="a">T-Shirt</BreadcrumbSection>
2030
</Breadcrumb>
2131
```
@@ -26,57 +36,57 @@ A standard breadcrumb
2636
<Segment>
2737
<Breadcrumb size="mini">
2838
<BreadcrumbSection component="a">Home</BreadcrumbSection>
29-
<BreadcrumbDivider icon="right chevron"/>
39+
<BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
3040
<BreadcrumbSection component="a">Registration</BreadcrumbSection>
31-
<BreadcrumbDivider icon="right chevron"/>
41+
<BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
3242
<BreadcrumbSection component="a">Personal Information</BreadcrumbSection>
3343
</Breadcrumb>
3444
<br/>
3545
<Breadcrumb size="tiny">
3646
<BreadcrumbSection component="a">Home</BreadcrumbSection>
37-
<BreadcrumbDivider icon="right chevron"/>
47+
<BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
3848
<BreadcrumbSection component="a">Registration</BreadcrumbSection>
39-
<BreadcrumbDivider icon="right chevron"/>
49+
<BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
4050
<BreadcrumbSection component="a">Personal Information</BreadcrumbSection>
4151
</Breadcrumb>
4252
<br/>
4353
<Breadcrumb size="small">
4454
<BreadcrumbSection component="a">Home</BreadcrumbSection>
45-
<BreadcrumbDivider icon="right chevron"/>
55+
<BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
4656
<BreadcrumbSection component="a">Registration</BreadcrumbSection>
47-
<BreadcrumbDivider icon="right chevron"/>
57+
<BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
4858
<BreadcrumbSection component="a">Personal Information</BreadcrumbSection>
4959
</Breadcrumb>
5060
<br/>
5161
<Breadcrumb size="large">
5262
<BreadcrumbSection component="a">Home</BreadcrumbSection>
53-
<BreadcrumbDivider icon="right chevron"/>
63+
<BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
5464
<BreadcrumbSection component="a">Registration</BreadcrumbSection>
55-
<BreadcrumbDivider icon="right chevron"/>
65+
<BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
5666
<BreadcrumbSection component="a">Personal Information</BreadcrumbSection>
5767
</Breadcrumb>
5868
<br/>
5969
<Breadcrumb size="big">
6070
<BreadcrumbSection component="a">Home</BreadcrumbSection>
61-
<BreadcrumbDivider icon="right chevron"/>
71+
<BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
6272
<BreadcrumbSection component="a">Registration</BreadcrumbSection>
63-
<BreadcrumbDivider icon="right chevron"/>
73+
<BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
6474
<BreadcrumbSection component="a">Personal Information</BreadcrumbSection>
6575
</Breadcrumb>
6676
<br/>
6777
<Breadcrumb size="huge">
6878
<BreadcrumbSection component="a">Home</BreadcrumbSection>
69-
<BreadcrumbDivider icon="right chevron"/>
79+
<BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
7080
<BreadcrumbSection component="a">Registration</BreadcrumbSection>
71-
<BreadcrumbDivider icon="right chevron"/>
81+
<BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
7282
<BreadcrumbSection component="a">Personal Information</BreadcrumbSection>
7383
</Breadcrumb>
7484
<br/>
7585
<Breadcrumb size="massive">
7686
<BreadcrumbSection component="a">Home</BreadcrumbSection>
77-
<BreadcrumbDivider icon="right chevron"/>
87+
<BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
7888
<BreadcrumbSection component="a">Registration</BreadcrumbSection>
79-
<BreadcrumbDivider icon="right chevron"/>
89+
<BreadcrumbDivider><Icon name="right chevron"/></BreadcrumbDivider>
8090
<BreadcrumbSection component="a">Personal Information</BreadcrumbSection>
8191
</Breadcrumb>
8292
</Segment>

‎styleguide.config.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,14 @@ module.exports = {
5353
});
5454
}
5555
},
56+
{
57+
name: 'Collections - Breadcrumb',
58+
components: () => {
59+
return glob.sync(path.resolve(__dirname, 'src/components/collections/breadcrumb/**/*.jsx')).filter(module => {
60+
return !(/(__tests__|examples)/.test(module));
61+
});
62+
}
63+
},
5664
{
5765
name: 'Modules',
5866
components: () => {

0 commit comments

Comments
 (0)