material-ui - npm Package Compare versions

Comparing version 0.1.28 to 0.1.29

docs/dist/js/drop-down-icon.jsx

@@ -17,3 +17,3 @@ /**
 
-	mixins: [Classable, ClickAwayable],
+  mixins: [Classable, ClickAwayable],
 
@@ -26,6 +26,5 @@ propTypes: {
   getInitialState: function() {
-  	return {
-      open: false,
-      selectedIndex: 0
-  	}
+    return {
+      open: false
+    }
   },
@@ -50,8 +49,8 @@
     return (
-    	<div className={classes}>
-        	<div className="mui-menu-control" onClick={this._onControlClick}>
-          		<Icon icon={this.props.icon} />
-        	</div>
-        	<Menu ref="menuItems" selectedIndex={this.state.selectedIndex} menuItems={this.props.menuItems} hideable={true} visible={this.state.open} onItemClick={this._onMenuItemClick} />
-      	</div>
+      <div className={classes}>
+          <div className="mui-menu-control" onClick={this._onControlClick}>
+              <Icon icon={this.props.icon} />
+          </div>
+          <Menu ref="menuItems" menuItems={this.props.menuItems} hideable={true} visible={this.state.open} onItemClick={this._onMenuItemClick} />
+        </div>
     );
@@ -65,7 +64,4 @@ },
   _onMenuItemClick: function(e, key, payload) {
-    if (this.props.onChange && this.state.selectedIndex !== key) this.props.onChange(e, key, payload);
-    this.setState({ 
-      selectedIndex: key,
-      open: false
-    });
+    if (this.props.onChange) this.props.onChange(e, key, payload);
+    this.setState({ open: false });
   }
@@ -75,2 +71,2 @@
 
-module.exports = DropDownIcon;
+module.exports = DropDownIcon;

docs/dist/js/left-nav.jsx

@@ -15,7 +15,8 @@ /**
   propTypes: {
+    docked: React.PropTypes.bool,
+    header: React.PropTypes.element,
+    isInitiallyOpen: React.PropTypes.bool,
     onChange: React.PropTypes.func,
-    header: React.PropTypes.element,
     menuItems: React.PropTypes.array.isRequired,
-    selectedIndex: React.PropTypes.number,
-    isInitiallyOpen: React.PropTypes.bool
+    selectedIndex: React.PropTypes.number
   },
@@ -25,2 +26,3 @@
     return {
+      docked: true,
       isInitiallyOpen: true
@@ -45,10 +47,16 @@ };
   render: function() {
+    console.log('docked', this.props.docked);
     var classes = this.getClasses('mui-left-nav', {
         'mui-closed': !this.state.open
       }),
-      selectedIndex = this.props.selectedIndex;
+      selectedIndex = this.props.selectedIndex,
+      overlay;
 
+    if (!this.props.docked) {
+      overlay = <div className="mui-overlay" onClick={this._onOverlayClick}></div>;
+    }
+
     return (
       <div className={classes}>
-        <div className="mui-overlay" onClick={this._onOverlayClick}></div>
+        {overlay}
         <Paper ref="clickAwayableElement" className="mui-left-nav-menu" zDepth={2} rounded={false}>
@@ -55,0 +63,0 @@ {this.props.header}

docs/gulp/tasks/browserify.js

 /* browserify task
    ---------------
    Bundle javascripty things with browserify!
-
-   If the watch task is running, this uses watchify instead
-   of browserify for faster bundling using caching.
+   This task is set up to generate multiple separate bundles, from
+   different sources, and to use Watchify when run from the default task.
+   See browserify.bundleConfigs in gulp/config.js
 */
 
-var gulp         = require('gulp');
 var browserify   = require('browserify');
 var watchify     = require('watchify');
-var source       = require('vinyl-source-stream');
 var bundleLogger = require('../util/bundleLogger');
+var gulp         = require('gulp');
 var handleErrors = require('../util/handleErrors');
+var source       = require('vinyl-source-stream');
+var config       = require('../config').browserify;
 
+gulp.task('browserify', function(callback) {
 
-gulp.task('browserify', function() {
+  var bundleQueue = config.bundleConfigs.length;
 
-var bundler = watchify(browserify('./src/app/app.jsx', watchify.args));
+  var browserifyThis = function(bundleConfig) {
 
-  var bundle = function(ids) {
-    // Log when bundling starts
-    bundleLogger.start();
+    var bundler = browserify({
+      // Required watchify args
+      cache: {}, packageCache: {}, fullPaths: true,
+      // Specify the entry point of your app
+      entries: bundleConfig.entries,
+      // Add file extentions to make optional in your requires
+      extensions: config.extensions,
+      // Enable source maps!
+      debug: config.debug
+    });
 
-    return bundler
-      .bundle()
-      // Report compile errors
-      .on('error', handleErrors)
-      // Use vinyl-source-stream to make the
-      // stream gulp compatible. Specifiy the
-      // desired output filename here.
-      .pipe(source('app.js'))
-      // Specify the output destination
-      .pipe(gulp.dest('./build/'))
-      // Log when bundling completes!
-      .on('end', bundleLogger.end);
+    var bundle = function() {
+      // Log when bundling starts
+      bundleLogger.start(bundleConfig.outputName);
+
+      return bundler
+        .bundle()
+        // Report compile errors
+        .on('error', handleErrors)
+        // Use vinyl-source-stream to make the
+        // stream gulp compatible. Specifiy the
+        // desired output filename here.
+        .pipe(source(bundleConfig.outputName))
+        // Specify the output destination
+        .pipe(gulp.dest(bundleConfig.dest))
+        .on('end', reportFinished);
+    };
+
+    if(global.isWatching) {
+      // Wrap with watchify and rebundle on changes
+      bundler = watchify(bundler);
+      // Rebundle on update
+      bundler.on('update', bundle);
+    }
+
+    var reportFinished = function() {
+      // Log when bundling completes
+      bundleLogger.end(bundleConfig.outputName)
+
+      if(bundleQueue) {
+        bundleQueue--;
+        if(bundleQueue === 0) {
+          // If queue is empty, tell gulp the task is complete.
+          // https://github.com/gulpjs/gulp/blob/master/docs/API.md#accept-a-callback
+          callback();
+        }
+      }
+    };
+
+    return bundle();
   };
 
-  if(global.isWatching) {
-    // Rebundle with watchify on changes.
-    bundler.on('update', bundle);
-  }
-
-  return bundle();
+  // Start bundling with Browserify for each bundleConfig specified
+  config.bundleConfigs.forEach(browserifyThis);
 });

docs/gulp/tasks/browserSync.js

 var browserSync = require('browser-sync');
 var gulp        = require('gulp');
+var config      = require('../config').browserSync;
 
 gulp.task('browserSync', ['build'], function() {
-  browserSync.init(['build/**'], {
-    server: {
-      baseDir: ['build', 'src']
-    }
-  });
+  browserSync(config);
 });

docs/gulp/tasks/fonts.js

 var gulp = require('gulp');
+var config = require('../config').fonts
 
 gulp.task('fonts', function() {
-  return gulp.src('./dist/less/material-ui-icons/fonts/**')
-    .pipe(gulp.dest('build/fonts'));
+  return gulp.src(config.src)
+    .pipe(gulp.dest(config.dest));
 });

docs/gulp/tasks/less.js

 var gulp = require('gulp'),
   less = require('gulp-less'),
-  sourcemaps = require('gulp-sourcemaps');
+  sourcemaps = require('gulp-sourcemaps'),
+  handleErrors = require('../util/handleErrors'),
+  config=require('../config').less;
 
 gulp.task('less', function() {
-  return gulp.src('src/less/main.less')
+  return gulp.src(config.src)
     .pipe(sourcemaps.init())
     .pipe(less())
+    .on('error', handleErrors)
     .pipe(sourcemaps.write())
-    .pipe(gulp.dest('build'));
+    .pipe(gulp.dest(config.dest));
 });

docs/gulp/tasks/markup.js

 var gulp = require('gulp');
+var config = require('../config').markup
 
 gulp.task('markup', function() {
-  return gulp.src('src/www/**')
-    .pipe(gulp.dest('build'));
+  return gulp.src(config.src)
+    .pipe(gulp.dest(config.dest));
 });

docs/gulp/tasks/watch.js

@@ -0,13 +1,13 @@
+
 /* Notes:
    - gulp/tasks/browserify.js handles js recompiling with watchify
-   - gulp/tasks/browserSync.js automatically reloads any files
-     that change within the directory it's serving from
+   - gulp/tasks/browserSync.js watches and reloads compiled files
 */
 
-var gulp = require('gulp');
+var gulp  = require('gulp');
+var config= require('../config');
 
 gulp.task('watch', ['setWatch', 'browserSync'], function() {
-  gulp.watch('src/www/**', ['markup']);
-  gulp.watch('src/less/**', ['less']);
-  gulp.watch('dist/less/**', ['less']);
+  gulp.watch(config.less.watch,   ['less']);
+  gulp.watch(config.markup.src, ['markup']);
 });

docs/gulp/util/bundleLogger.js

@@ -11,12 +11,12 @@ /* bundleLogger
 module.exports = {
-  start: function() {
+  start: function(filepath) {
     startTime = process.hrtime();
-    gutil.log('Running', gutil.colors.green("'bundle'") + '...');
+    gutil.log('Bundling', gutil.colors.green(filepath) + '...');
   },
 
-  end: function() {
+  end: function(filepath) {
     var taskTime = process.hrtime(startTime);
     var prettyTime = prettyHrtime(taskTime);
-    gutil.log('Finished', gutil.colors.green("'bundle'"), 'in', gutil.colors.magenta(prettyTime));
+    gutil.log('Bundled', gutil.colors.green(filepath), 'in', gutil.colors.magenta(prettyTime));
   }
-};
+};

docs/gulp/util/handleErrors.js

@@ -15,2 +15,2 @@ var notify = require("gulp-notify");
   this.emit('end');
-};
+};

docs/gulpfile.js

@@ -6,8 +6,12 @@ /*
   for creating multiple tasks, each task has been broken out into
-  its own file in gulp/tasks. Any file in that folder gets automatically
-  required by the loop in ./gulp/index.js (required below).
-
-  To add a new task, simply add a new task file to gulp/tasks.
+  its own file in gulp/tasks. Any files in that directory get
+  automatically required below.
+  To add a new task, simply add a new task file that directory.
+  gulp/tasks/default.js specifies the default set of tasks to run
+  when you run `gulp`.
 */
 
-require('./gulp');
+var requireDir = require('require-dir');
+
+// Require all tasks in gulp/tasks, including subfolders
+requireDir('./gulp/tasks', { recurse: true });

docs/package.json

@@ -21,22 +21,22 @@ {
   "devDependencies": {
-    "browser-sync": "^1.3.3",
+    "browser-sync": "^1.6.3",
     "browserify": "^6.2.0",
-    "browserify-shim": "^3.6.0",
-    "gulp": "^3.8.7",
-    "gulp-less": "^1.3.3",
-    "gulp-notify": "^1.4.2",
-    "gulp-sourcemaps": "^1.1.1",
-    "gulp-util": "^3.0.0",
-    "pretty-hrtime": "^0.2.1",
+    "browserify-shim": "^3.8.0",
+    "gulp": "^3.8.10",
+    "gulp-less": "^1.3.6",
+    "gulp-notify": "^2.0.0",
+    "gulp-sourcemaps": "^1.2.7",
+    "gulp-util": "^3.0.1",
+    "pretty-hrtime": "^0.2.2",
     "reactify": "^0.15.2",
     "require-dir": "^0.1.0",
-    "underscore": "^1.6.0",
-    "vinyl-source-stream": "^0.1.1",
-    "watchify": "^1.0.1"
+    "underscore": "^1.7.0",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.1.1"
   },
   "dependencies": {
     "jquery": "^2.1.1",
-    "backbone": "^1.1.2",
-    "react": "^0.12"
+    "react": "^0.12.0",
+    "react-router": "^0.10.2"
   }
 }

docs/src/app/app.jsx

@@ -7,10 +7,5 @@ /**
 
-	var $ = require('jquery'),
-	  Backbone = require('backbone'),
-	  React = require('react'),
-	  AppRouter = require('./app-router.js'),
-	  MasterComponent = require('./components/master.jsx');
+	var React = require('react'),
+	  AppRoutes = require('./app-routes.jsx');
 
-	Backbone.$ = $;
-
 	//Needed for React Developer Tools
@@ -20,8 +15,4 @@ window.React = React;
 	//Render the main app component
-	React.render(<MasterComponent />, document.body);
+	React.render(AppRoutes, document.body);
 
-	Backbone.history.start();
-
 })();
-
-

docs/src/app/components/app-left-nav.jsx

@@ -6,36 +6,25 @@ /**
 var React = require('react'),
+  Router = require('react-router'),
   mui = require('mui'),
-  Dispatcher = require('../app-dispatcher.js'),
-  Pages = require('./pages.jsx');
 
+  menuItems = [
+    { route: 'get-started', text: 'Get Started' },
+    { route: 'css-framework', text: 'CSS Framework' },
+    { route: 'components', text: 'Components' },
+    { type: mui.MenuItem.Types.SUBHEADER, text: 'Resources' },
+    { type: mui.MenuItem.Types.LINK, payload: 'https://github.com/callemall/material-ui', text: 'GitHub' },
+    { type: mui.MenuItem.Types.LINK, payload: 'http://facebook.github.io/react', text: 'React' },
+    { type: mui.MenuItem.Types.LINK, payload: 'https://www.google.com/design/spec/material-design/introduction.html', text: 'Material Design' }
+  ];
+
 var AppLeftNav = React.createClass({
 
-  propTypes: {
-    url: React.PropTypes.string,
-    toggle: React.PropTypes.func
-  },
+  mixins: [Router.Navigation, Router.ActiveState],
 
   getInitialState: function() {
     return {
-      menuItems: [
-
-        { payload: Pages.getStarted, text: Pages.getStarted.title },
-        { payload: Pages.cssFramework, text: Pages.cssFramework.title },
-        { payload: Pages.components, text: Pages.components.title },
-        { type: mui.MenuItem.Types.SUBHEADER, text: 'Resources' },
-        { type: mui.MenuItem.Types.LINK, payload: 'https://github.com/callemall/material-ui', text: 'GitHub' },
-        { type: mui.MenuItem.Types.LINK, payload: 'http://facebook.github.io/react', text: 'React' },
-        { type: mui.MenuItem.Types.LINK, payload: 'https://www.google.com/design/spec/material-design/introduction.html', text: 'Material Design' }
-      ]
-    }
+      selectedIndex: null
+    };
   },
 
-  componentWillMount: function() {
-    this._setSelectedIndex(this.props.url);
-  },
-
-  componentWillReceiveProps: function(newProps) {
-    this._setSelectedIndex(newProps.url);
-  },
-
   render: function() {
@@ -47,6 +36,7 @@ var header = <div className="logo" onClick={this._onHeaderClick}>material ui</div>;
         ref="leftNav"
+        docked={false}
         isInitiallyOpen={false}
         header={header}
-        menuItems={this.state.menuItems}
-        selectedIndex={this.state.selectedIndex}
+        menuItems={menuItems}
+        selectedIndex={this._getSelectedIndex()}
         onChange={this._onLeftNavChange} />
@@ -60,27 +50,18 @@ );
 
-  _setSelectedIndex: function(url) {
-    var item;
+  _getSelectedIndex: function() {
+    var currentItem;
 
-    for (var i = 0; i < this.state.menuItems.length; i++) {
-      item = this.state.menuItems[i];
-
-      //only match the root part of the url
-      if (url && item.payload && item.payload.url.split('/')[0] === url.split('/')[0]) {
-        if (i !== this.state.selectedIndex) this.setState({ selectedIndex: i});
-        return;
-      }
+    for (var i = menuItems.length - 1; i >= 0; i--) {
+      currentItem = menuItems[i];
+      if (currentItem.route && this.isActive(currentItem.route)) return i;
     };
+  },
 
-    this.setState({ selectedIndex: null});
+  _onLeftNavChange: function(e, key, payload) {
+    this.transitionTo(payload.route);
   },
 
   _onHeaderClick: function() {
-    if (this.props.url !== Pages.home.url) {
-      this.refs.leftNav.close();
-      Dispatcher.dispatchAction(Dispatcher.ActionTypes.NAV_USER_CLICK, { url: Pages.home.url } ); 
-    }
-  },
-
-  _onLeftNavChange: function(e, key, item) {
-    Dispatcher.dispatchAction(Dispatcher.ActionTypes.NAV_USER_CLICK, { url: item.payload.url } ); 
+    this.transitionTo('root');
+    this.refs.leftNav.close();
   }
@@ -87,0 +68,0 @@

docs/src/app/components/code-example/code-block.jsx

@@ -5,4 +5,3 @@ /**
 
-var $ = require('jquery'),
-	React = require('react'),
+var React = require('react'),
 	hljs = require('hljs');
@@ -9,0 +8,0 @@

docs/src/app/components/master.jsx

@@ -5,74 +5,24 @@ /**
 
-var Backbone = require('backbone'),
-  React = require('react'),
-  Dispatcher = require('../app-dispatcher.js'),
+var React = require('react'),
   mui = require('mui'),
   Menu = mui.Menu,
   Icon = mui.Icon,
-  AppStateStore = require('../stores/app-state-store.js'),
-  Pages = require('./pages.jsx'),
-	AppLeftNav = require('./app-left-nav.jsx');
+  AppLeftNav = require('./app-left-nav.jsx');
 
 var Master = React.createClass({
 
-  mixins: [Backbone.Events],
-
-  getInitialState: function() {
-    return {
-      currentUrl: AppStateStore.get('currentUrl')
-    }
-  },
-
-  componentDidMount: function() {
-    this.listenTo(AppStateStore, 'change:currentUrl', this._onStoreChange);
-  },
-
-  componentWillUnMount: function() {
-    this.stopListening();
-  },
-
   render: function() {
-    var page = Pages.getPage(this.state.currentUrl),
-      title = page.title,
-      currentMainComponent = page.mainContentComponent,
-      contentCanvasClass = page.subPages ? 'mui-app-content-canvas with-nav' : 'mui-app-content-canvas',
-      subNav;
-
-    if (page.subPages) {
-      var menuItems = [],
-        i = 0,
-        selectedIndex,
-        currentSubPage;
-
-      for (prop in page.subPages) {
-        currentSubPage = page.subPages[prop];
-
-        if (this.state.currentUrl === currentSubPage.url) {
-          selectedIndex = i;
-          currentMainComponent = currentSubPage.mainContentComponent;
-        }
-        menuItems.push({ payload: currentSubPage.url, text: currentSubPage.title });
-        i++;
-      }
-
-      subNav = (
-        <div className="subNav">
-          <Menu ref="menuItems" zDepth={0} menuItems={menuItems} selectedIndex={selectedIndex} onItemClick={this._onMenuItemClick} />
-        </div>
-      );
-    }
-
     return (
       <mui.AppCanvas predefinedLayout={1}>
-        <mui.AppBar onMenuIconClick={this._onMenuIconClick} title={title} zDepth={0}><Icon icon="github" onClick={this._onGithubClick} /></mui.AppBar>
-    		<AppLeftNav ref="leftNav" url={this.state.currentUrl} />
-    		<div className={contentCanvasClass}>
-          {subNav}
-          <div className="subContent">
-            {currentMainComponent}
-          </div>
-        </div>
+        <mui.AppBar onMenuIconClick={this._onMenuIconClick} title={this.props.activeRouteHandler().props.pageTitle} zDepth={0}>
+          <Icon icon="github" onClick={this._onGithubClick} />
+        </mui.AppBar>
+        <AppLeftNav ref="leftNav" />
+        <this.props.activeRouteHandler />
         <div className="footer">
             <Icon icon="github" onClick={this._onGithubClick} />
-            <p>Hand crafted with love by the engineers at <a href="http://call-em-all.com">Call-Em-All</a> and our awesome <a href="https://github.com/callemall/material-ui/graphs/contributors">contributors</a>.</p>
+            <p>
+              Hand crafted with love by the engineers at <a href="http://call-em-all.com">Call-Em-All</a> and our 
+              awesome <a href="https://github.com/callemall/material-ui/graphs/contributors">contributors</a>.
+            </p>
         </div>
@@ -87,14 +37,4 @@ </mui.AppCanvas>
 
-  _onMenuItemClick: function(e, key, item) {
-    Dispatcher.dispatchAction(Dispatcher.ActionTypes.NAV_USER_CLICK, { url: item.payload } ); 
-  },
-
   _onMenuIconClick: function() {
     this.refs.leftNav.toggle();
-  },
-
-  _onStoreChange: function() {
-    this.setState({
-      currentUrl: AppStateStore.get('currentUrl')
-    });
   }
@@ -101,0 +41,0 @@

docs/src/app/components/pages/get-started.jsx

@@ -35,3 +35,3 @@ /**
     return (
-      <div className="get-started-page">
+      <div className="get-started-page mui-app-content-canvas">
         <div className="full-width-section">
@@ -38,0 +38,0 @@ <h2 className="mui-font-style-headline">Installation</h2>

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

@@ -6,81 +6,96 @@ /**
 var React = require('react'),
-    Dispatcher = require('../../app-dispatcher.js'),
-    mui = require('mui'),
-    PaperButton = mui.PaperButton,
-    Icon = mui.Icon;
+  Router = require('react-router'),
+  Link = Router.Link,
+  mui = require('mui'),
+  PaperButton = mui.PaperButton,
+  Icon = mui.Icon;
 
 var HomePage = React.createClass({
 
+  mixins: [Router.Navigation],
+
   render: function() {
+
     return (
-        <div>
-        	<div className="home-page-hero full-width-section">
-                <div className="home-page-hero-content">
-                    <img className="svg-logo" src="images/material-ui-logo.svg" />
-                    <div className="tagline">
-                        <h1 className="brand-name">material ui</h1>
-                        <h2 className="mui-font-style-headline">A CSS Framework and a Set of React Components that Implement Google's Material Design</h2>
-                        <p className="mui-font-style-subhead-1">Material-UI came about from our love
-                        of <a href="http://facebook.github.io/react/">React</a> and <a href="https://www.google.com/design/spec/material-design/introduction.html">Google's
-                        Material Design</a>. We're currently using it on a project at <a href="https://www.call-em-all.com/">Call-Em-All</a> and plan on
-                        adding to it and making it better in the coming months.
-                        </p>
-                    </div>
-                </div>
-        	</div>
-            <div className="home-features">
-                <div className="feature">
-                    <div className="icon-circle" onClick={this._getStartedClick}><Icon icon="check-all" /></div>
-                    <h3>Get Started</h3>
-                    <p>
-                        The best way to get started is check out our repo and download the code. This doc site, along with its live examples, are all built with react. :)
-                    </p>
-                </div>
-                <div className="feature">
-                    <div className="icon-circle" onClick={this._cssFrameworkClick}><Icon icon="web" /></div>
-                    <h3>Css Framework</h3>
-                    <p>
-                        The Css Framework is built with <a href="http://lesscss.org">Less</a>. We've included handy things like resets, colors, and typography to help get you going.
-                    </p>
-                </div>
-                <div className="feature">
-                    <div className="icon-circle" onClick={this._componentsClick}><Icon icon="select-all" /></div>
-                    <h3>Components</h3>
-                    <p>
-                        We've started building out some material design components using react. 
-                        Here's a sneak peek at a few - with more on the way.
-                    </p>
-                </div>
+      <div className="mui-app-content-canvas">
+        <div className="home-page-hero full-width-section">
+          <div className="home-page-hero-content">
+            <img className="svg-logo" src="images/material-ui-logo.svg" />
+            <div className="tagline">
+              <h1 className="brand-name">material ui</h1>
+              <h2 className="mui-font-style-headline">
+                A CSS Framework and a Set of React Components that Implement Google's
+                Material Design
+              </h2>
+              <p className="mui-font-style-subhead-1">
+                Material-UI came about from our love of&nbsp;
+                <a href="http://facebook.github.io/react/">React</a> and&nbsp;
+                <a href="https://www.google.com/design/spec/material-design/introduction.html">
+                  Google's Material Design
+                </a>. We're currently using it on a project at&nbsp;
+                <a href="https://www.call-em-all.com/">Call-Em-All</a> and plan on adding to it 
+                and making it better in the coming months.
+              </p>
+
+              <PaperButton className="demo-button" label="Demo" onClick={this._onDemoClick} />
+              <PaperButton className="github-button" label="GitHub" onClick={this._onGithubClick} />
             </div>
-            <div className="home-contribute">
-                <div className="content-container">
-                    <h3>Want to help make this project awesome? Check out our repo.</h3>
-                    <PaperButton type={PaperButton.Types.RAISED} primary={true} label="Github" onClick={this._onGithubClick} />
-                </div>
-            </div>
+          </div>
+        </div>
 
+        <div className="home-features">
+
+          <div className="feature">
+            <Link className="icon-circle" to="get-started"><Icon icon="check-all" /></Link>
+            <h3>Get Started</h3>
+            <p>
+              The best way to get started is check out our repo and download the code. 
+              This doc site, along with its live examples, are all built with react. :)
+            </p>
+          </div>
+
+          <div className="feature">
+            <Link className="icon-circle" to="css-framework"><Icon icon="web" /></Link>
+            <h3>Css Framework</h3>
+            <p>
+              The Css Framework is built with <a href="http://lesscss.org">Less</a>. We've 
+              included handy things like resets, colors, and typography to help get you going.
+            </p>
+          </div>
+
+          <div className="feature">
+            <Link className="icon-circle" to="components"><Icon icon="select-all" /></Link>
+            <h3>Components</h3>
+            <p>
+              We've started building out some material design components using react. 
+              Here's a sneak peek at a few - with more on the way.
+            </p>
+          </div>
         </div>
-    );
-  },
 
-  _onGithubClick: function() {
-    document.location.href='https://github.com/callemall/material-ui';
-  },
+        <div className="home-contribute">
+          <div className="content-container">
+            <h3>Want to help make this project awesome? Check out our repo.</h3>
+            <PaperButton 
+              type={PaperButton.Types.RAISED} 
+              primary={true} 
+              label="Github" 
+              onClick={this._onGithubClick} />
+          </div>
+        </div>
 
-  _getStartedClick: function() {
-    Dispatcher.dispatchAction(Dispatcher.ActionTypes.NAV_USER_CLICK, { url: 'get-started' } ); 
+      </div>
+    );
   },
 
-  _cssFrameworkClick: function() {
-    Dispatcher.dispatchAction(Dispatcher.ActionTypes.NAV_USER_CLICK, { url: 'css-framework/colors' } ); 
+  _onDemoClick: function() {
+    this.transitionTo('components');
   },
 
-  _componentsClick: function() {
-    Dispatcher.dispatchAction(Dispatcher.ActionTypes.NAV_USER_CLICK, { url: 'components/buttons' } ); 
+  _onGithubClick: function() {
+    document.location.href='https://github.com/callemall/material-ui';
   }
 
-
-
 });
 
 module.exports = HomePage;

package.json

 {
   "name": "material-ui",
   "author": "Call-em-all Engineering Team",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "description": "Material Design UI components built with React",
@@ -6,0 +6,0 @@ "main": "index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

129

increased by0.78%

Worsened metrics

Total package byte prevSize

386507

decreased by-1.31%

Lines of code

5713

decreased by-3.27%

No dependency changes