Skip to content

Commit bc7ceac

Browse files
author
Nick Baroni
committed
Added badge component.
1 parent ac357ec commit bc7ceac

File tree

7 files changed

+225
-0
lines changed

7 files changed

+225
-0
lines changed

‎docs/src/app/app-routes.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const InlineStyles = require('./components/pages/customization/inline-styles');
2222
const Components = require('./components/pages/components');
2323
const AppBar = require('./components/pages/components/app-bar');
2424
const Avatars = require('./components/pages/components/avatars');
25+
const Badge = require('./components/pages/components/badge');
2526
const Buttons = require('./components/pages/components/buttons');
2627
const Cards = require('./components/pages/components/cards');
2728
const DatePicker = require('./components/pages/components/date-picker');
@@ -77,6 +78,7 @@ const AppRoutes = (
7778
<Route path="components" component={Components}>
7879
<Route path="appbar" component={AppBar} />
7980
<Route path="avatars" component={Avatars} />
81+
<Route path="badge" component={Badge} />
8082
<Route path="buttons" component={Buttons} />
8183
<Route path="cards" component={Cards} />
8284
<Route path="date-picker" component={DatePicker} />

‎docs/src/app/components/pages/components.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export default class Components extends React.Component {
77
let menuItems = [
88
{ route: '/components/appbar', text: 'AppBar'},
99
{ route: '/components/avatars', text: 'Avatars'},
10+
{ route: '/components/badge', text: 'Badge'},
1011
{ route: '/components/buttons', text: 'Buttons'},
1112
{ route: '/components/cards', text: 'Cards'},
1213
{ route: '/components/date-picker', text: 'Date Picker'},

‎docs/src/app/components/pages/components/badge.jsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
let React = require('react');
2+
let { FontIcon, IconButton, Badge } = require('material-ui');
3+
let ComponentDoc = require('../../component-doc');
4+
let Code = require('badge-code');
5+
let CodeExample = require('../../code-example/code-example');
6+
const NotificationsIcon = require('svg-icons/social/notifications');
7+
const ShoppingCartIcon = require('svg-icons/action/shopping-cart');
8+
const FolderIcon = require('svg-icons/file/folder-open');
9+
const UploadIcon = require('svg-icons/file/cloud-upload');
10+
11+
export default class BadgePage extends React.Component {
12+
constructor(props) {
13+
super(props);
14+
15+
this.desc = 'This component generates a small badge to the top-right of it\'s child(ren)';
16+
17+
this.componentInfo = [
18+
{
19+
name: 'Props',
20+
infoArray: [
21+
{
22+
name: 'badgeContent',
23+
type: 'node',
24+
header: 'required',
25+
desc: 'This is the content rendered within the badge.',
26+
},
27+
{
28+
name: 'primary',
29+
type: 'bool',
30+
header: 'default: false',
31+
desc: 'If true, the badge will use the primary badge colors.',
32+
},
33+
{
34+
name: 'secondary',
35+
type: 'bool',
36+
header: 'default: false',
37+
desc: 'If true, the badge will use the secondary badge colors.',
38+
},
39+
{
40+
name: 'style',
41+
type: 'object',
42+
header: 'optional',
43+
desc: 'Override the inline-styles of the root element.',
44+
},
45+
{
46+
name: 'badgeStyle',
47+
type: 'object',
48+
header: 'optional',
49+
desc: 'Override the inline-styles of the badge element.',
50+
},
51+
],
52+
},
53+
];
54+
}
55+
56+
render() {
57+
return (
58+
<ComponentDoc
59+
name="Badge"
60+
desc={this.desc}
61+
componentInfo={this.componentInfo}>
62+
<CodeExample code={Code}>
63+
64+
<Badge badgeContent={4} primary={true}>
65+
<NotificationsIcon />
66+
</Badge>
67+
68+
<Badge badgeContent={10} secondary={true} badgeStyle={{top:12, right:12}}>
69+
<IconButton tooltip="Go To Cart">
70+
<ShoppingCartIcon/>
71+
</IconButton>
72+
</Badge>
73+
74+
<Badge backgroundColor="#d8d8d8"
75+
badgeContent={<IconButton tooltip="Backup"><UploadIcon/></IconButton>}>
76+
<FolderIcon />
77+
</Badge>
78+
79+
<Badge badgeContent="&copy;" badgeStyle={{fontSize:20}}>
80+
<h3>Company Name</h3>
81+
</Badge>
82+
83+
</CodeExample>
84+
</ComponentDoc>
85+
);
86+
}
87+
88+
}

‎docs/src/app/components/raw-code/badge-code.txt‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<Badge badgeContent={4} primary={true}>
2+
<NotificationsIcon />
3+
</Badge>
4+
5+
//override badgeStyle to account for padding of child element
6+
<Badge badgeContent={10} secondary={true} badgeStyle={{top:12, right:12}}>
7+
<IconButton tooltip="Go To Cart">
8+
<ShoppingCartIcon/>
9+
</IconButton>
10+
</Badge>
11+
12+
<Badge backgroundColor="#d8d8d8"
13+
badgeContent={<IconButton tooltip="Backup"><UploadIcon/></IconButton>}>
14+
<FolderIcon />
15+
</Badge>
16+
17+
<Badge badgeContent="&copy;" badgeStyle={{fontSize:20}}>
18+
<h3>Company Name</h3>
19+
</Badge>

‎src/badge.jsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
const React = require('react');
2+
const Typography = require('./styles/typography');
3+
const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme');
4+
const ThemeManager = require('./styles/theme-manager');
5+
const StylePropable = require('./mixins/style-propable');
6+
7+
// Badge
8+
export default React.createClass({
9+
displayName: 'Badge',
10+
mixins: [StylePropable],
11+
contextTypes: {
12+
muiTheme: React.PropTypes.object,
13+
},
14+
//for passing default theme context to children
15+
childContextTypes: {
16+
muiTheme: React.PropTypes.object,
17+
},
18+
getChildContext () {
19+
return {
20+
muiTheme: this.state.muiTheme,
21+
};
22+
},
23+
propTypes: {
24+
className: React.PropTypes.string,
25+
badgeContent: React.PropTypes.node.isRequired,
26+
primary: React.PropTypes.bool,
27+
secondary: React.PropTypes.bool,
28+
style: React.PropTypes.object,
29+
badgeStyle: React.PropTypes.object,
30+
},
31+
getInitialState() {
32+
return {
33+
muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
34+
};
35+
},
36+
getDefaultProps() {
37+
return {
38+
className: '',
39+
primary: false,
40+
secondary: false,
41+
style: {},
42+
badgeStyle: {},
43+
};
44+
},
45+
componentWillReceiveProps(nextProps, nextContext) {
46+
let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
47+
this.setState({
48+
muiTheme: newMuiTheme,
49+
});
50+
},
51+
getStyles() {
52+
const theme = this.state.muiTheme.badge;
53+
54+
const badgeBackgroundColor = this.props.primary
55+
? theme.primaryColor
56+
: this.props.secondary
57+
? theme.secondaryColor
58+
: theme.color;
59+
60+
const badgeTextColor = this.props.primary
61+
? theme.primaryTextColor
62+
: this.props.secondary
63+
? theme.secondaryTextColor
64+
: theme.textColor;
65+
66+
const radius = 12;
67+
const radius2x = Math.floor(2*radius);
68+
69+
return {
70+
root: {
71+
position: 'relative',
72+
display: 'inline-block',
73+
padding: [radius2x+'px', radius2x+'px', radius+'px', radius+'px'].join(' '),
74+
},
75+
badge: {
76+
display: 'flex',
77+
flexDirection: 'row',
78+
flexWrap: 'wrap',
79+
justifyContent: 'center',
80+
alignContent: 'center',
81+
alignItems: 'center',
82+
position: 'absolute',
83+
top: 0,
84+
right: 0,
85+
fontWeight: Typography.fontWeightMedium,
86+
fontSize: radius,
87+
width: radius2x,
88+
height: radius2x,
89+
borderRadius: '50%',
90+
backgroundColor: badgeBackgroundColor,
91+
color: badgeTextColor,
92+
},
93+
};
94+
},
95+
render() {
96+
const styles = this.getStyles();
97+
return (
98+
<div style={this.prepareStyles(styles.root, this.props.style)} className={this.props.className}>
99+
{this.props.children}
100+
<span style={this.prepareStyles(styles.badge, this.props.badgeStyle)}>
101+
{this.props.badgeContent}
102+
</span>
103+
</div>
104+
);
105+
},
106+
});

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ module.exports = {
22
AppBar: require('./app-bar'),
33
AppCanvas: require('./app-canvas'),
44
Avatar: require('./avatar'),
5+
Badge: require('./badge'),
56
BeforeAfterWrapper: require('./before-after-wrapper'),
67
Card: require('./card/card'),
78
CardActions: require('./card/card-actions'),

‎src/styles/theme-manager.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@ module.exports = {
1616
avatar: {
1717
borderColor: 'rgba(0, 0, 0, 0.08)',
1818
},
19+
badge: {
20+
color: rawTheme.palette.alternateTextColor,
21+
textColor: rawTheme.palette.textColor,
22+
primaryColor: rawTheme.palette.accent1Color,
23+
primaryTextColor: rawTheme.palette.alternateTextColor,
24+
secondaryColor: rawTheme.palette.primary1Color,
25+
secondaryTextColor: rawTheme.palette.alternateTextColor,
26+
},
1927
button: {
2028
height: 36,
2129
minWidth: 88,

0 commit comments

Comments
 (0)