Added badge component.

docs/src/app/app-routes.jsx

@@ -22,6 +22,7 @@ const InlineStyles = require('./components/pages/customization/inline-styles');
 const Components = require('./components/pages/components');
 const AppBar = require('./components/pages/components/app-bar');
 const Avatars = require('./components/pages/components/avatars');
+const Badge = require('./components/pages/components/badge');
 const Buttons = require('./components/pages/components/buttons');
 const Cards = require('./components/pages/components/cards');
 const DatePicker = require('./components/pages/components/date-picker');
@@ -77,6 +78,7 @@ const AppRoutes = (
     <Route path="components" component={Components}>
       <Route path="appbar" component={AppBar} />
       <Route path="avatars" component={Avatars} />
+      <Route path="badge" component={Badge} />
       <Route path="buttons" component={Buttons} />
       <Route path="cards" component={Cards} />
       <Route path="date-picker" component={DatePicker} />

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

@@ -7,6 +7,7 @@ export default class Components extends React.Component {
     let menuItems = [
       { route: '/components/appbar', text: 'AppBar'},
       { route: '/components/avatars', text: 'Avatars'},
+      { route: '/components/badge', text: 'Badge'},
       { route: '/components/buttons', text: 'Buttons'},
       { route: '/components/cards', text: 'Cards'},
       { route: '/components/date-picker', text: 'Date Picker'},

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

@@ -0,0 +1,88 @@
+let React = require('react');
+let { FontIcon, IconButton, Badge } = require('material-ui');
+let ComponentDoc = require('../../component-doc');
+let ActionGrade = require('svg-icons/action/grade');
+let ActionHome = require('svg-icons/action/home');
+let Code = require('badge-code');
+let CodeExample = require('../../code-example/code-example');
+
+export default class BadgePage extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.desc = 'This component generates a small badge to the top-right of it\'s child(ren)';
+
+    this.componentInfo = [
+      {
+        name: 'Props',
+        infoArray: [
+          {
+            name: 'primaryText',
+            type: 'string',
+            header: 'required',
+            desc: 'This is the text content rendered within the badge.',
+          },
+          {
+            name: 'backgroundColor',
+            type: 'string',
+            header: 'optional',
+            desc: 'Override the badge\'s background color.',
+          },
+          {
+            name: 'color',
+            type: 'string',
+            header: 'optional',
+            desc: 'Override the badge\'s text color.',
+          },
+          {
+            name: 'primary',
+            type: 'bool',
+            header: 'default: false',
+            desc: 'If true, the badge will use the primary badge colors.',
+          },
+          {
+            name: 'secondary',
+            type: 'bool',
+            header: 'default: false',
+            desc: 'If true, the badge will use the secondary badge colors.',
+          },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the badge\'s root element.',
+          },
+        ],
+      },
+    ];
+  }
+
+  render() {
+    return (
+      <ComponentDoc
+        name="Badge"
+        desc={this.desc}
+        componentInfo={this.componentInfo}>
+        <CodeExample code={Code}>
+          <Badge primaryText="4" style={{marginRight: '60px'}}>Todos</Badge>
+
+          <Badge primaryText="7" primary={true} style={{marginRight: '60px'}}>
+            <FontIcon className="material-icons">
+              notifications
+            </FontIcon>
+          </Badge>
+
+          <IconButton tooltip="Notifications" disabled={true}>
+            <Badge primaryText="4" secondary={true}>
+              <FontIcon className="material-icons">
+                shopping_cart
+              </FontIcon>
+            </Badge>
+          </IconButton>
+
+        </CodeExample>
+      </ComponentDoc>
+    );
+  }
+
+}

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

@@ -0,0 +1,15 @@
+<Badge primaryText="4" style={{marginRight: '60px'}}>Todos</Badge>
+
+<Badge primaryText="7" primary={true} style={{marginRight: '60px'}}>
+  <FontIcon className="material-icons">
+    notifications
+  </FontIcon>
+</Badge>
+
+<IconButton tooltip="Notifications" disabled={true}>
+  <Badge primaryText="4" secondary={true}>
+    <FontIcon className="material-icons">
+      shopping_cart
+    </FontIcon>
+  </Badge>
+</IconButton>

src/badge.jsx

@@ -0,0 +1,119 @@
+const React = require('react');
+const Typography = require('./styles/typography');
+const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme');
+const ThemeManager = require('./styles/theme-manager');
+
+// Badge
+export default React.createClass({
+  contextTypes: {
+    muiTheme: React.PropTypes.object,
+  },
+  //for passing default theme context to children
+  childContextTypes: {
+    muiTheme: React.PropTypes.object,
+  },
+  getChildContext () {
+    return {
+      muiTheme: this.state.muiTheme,
+    };
+  },
+  propTypes: {
+    className: React.PropTypes.string,
+    primary: React.PropTypes.bool,
+    secondary: React.PropTypes.bool,
+    primaryText: React.PropTypes.string.isRequired,
+    color: React.PropTypes.string,
+    backgroundColor: React.PropTypes.string,
+    style: React.PropTypes.object,
+  },
+  getInitialState() {
+    return {
+      muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
+    };
+  },
+  componentWillReceiveProps(nextProps, nextContext) {
+    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
+    this.setState({
+      muiTheme: newMuiTheme,
+    });
+  },
+  _getBackgroundColor() {
+    return this.props.backgroundColor
+      ? this.props.backgroundColor
+      : this.props.primary
+        ? this.getTheme().primaryColor
+        : this.props.secondary
+          ? this.getTheme().secondaryColor
+          : this.getTheme().color;
+  },
+  _getLabelColor() {
+    return this.props.labelColor
+      ? this.props.labelColor
+        : this.props.primary
+          ? this.getTheme().primaryTextColor
+          : this.props.secondary
+            ? this.getTheme().secondaryTextColor
+            : this.getTheme().textColor;
+  },
+  getThemeBadge() {
+    return this.state.muiTheme.badge;
+  },
+  getTheme() {
+    return this.state.muiTheme.raisedButton;
+  },
+  getStyles() {
+    const style = {
+      root: {
+        backgroundColor: 'none',
+        position: 'relative',
+        display: 'inline-block',
+        marginRight: '20px',
+      },
+      badge: {
+        display: '-webkit-box; display: -webkit-flex; display: flex',
+        WebkitBoxOrient: 'horizontal',
+        WebkitBoxDirection: 'normal',
+        WebkitFlexDirection: 'row',
+        msFlexDirection: 'row',
+        flexDirection: 'row',
+        WebkitFlexWrap: 'wrap',
+        msFlexWrap: 'wrap',
+        flexWrap: 'wrap',
+        WebkitBoxPack: 'center',
+        WebkitJustifyContent: 'center',
+        msFlexPack: 'center',
+        justifyContent: 'center',
+        WebkitAlignContent: 'center',
+        msFlexLinePack: 'center',
+        alignContent: 'center',
+        WebkitBoxAlign: 'center',
+        WebkitAlignItems: 'center',
+        msFlexAlign: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        top: '-11px',
+        right: '-24px',
+        fontWeight: Typography.fontWeightMedium,
+        fontSize: '12px',
+        width: '22px',
+        height: '22px',
+        borderRadius: '50%',
+        backgroundColor: this._getBackgroundColor(),
+        color: this._getLabelColor(),
+      },
+    };
+    for (let item in (this.props.style || {})) {
+      style.root[item] = this.props.style[item];
+    }
+    return style;
+  },
+  render() {
+    const style = this.getStyles();
+    return (
+      <div style={style.root}>
+        {this.props.children}
+        <span style={style.badge}>{this.props.primaryText}</span>
+      </div>
+    );
+  },
+});

src/index.js

@@ -2,6 +2,7 @@ module.exports = {
   AppBar: require('./app-bar'),
   AppCanvas: require('./app-canvas'),
   Avatar: require('./avatar'),
+  Badge: require('./badge'),
   BeforeAfterWrapper: require('./before-after-wrapper'),
   Card: require('./card/card'),
   CardActions: require('./card/card-actions'),

src/styles/theme-manager.js

@@ -16,6 +16,14 @@ module.exports = {
       avatar: {
         borderColor: 'rgba(0, 0, 0, 0.08)',
       },
+      badge: {
+        color: rawTheme.palette.alternateTextColor,
+        textColor: rawTheme.palette.textColor,
+        primaryColor: rawTheme.palette.accent1Color,
+        primaryTextColor: rawTheme.palette.alternateTextColor,
+        secondaryColor: rawTheme.palette.primary1Color,
+        secondaryTextColor: rawTheme.palette.alternateTextColor,
+      },
       button: {
         height: 36,
         minWidth: 88,