Use classNames everywhere with dynamic classNames

Fixes GH-141, and keeps it from being introduced on Banner

src/components/banner/banner.jsx

@@ -1,3 +1,4 @@
+var classNames = require('classnames');
 var React = require('react');
 
 require('./banner.scss');
@@ -8,8 +9,12 @@ var Banner = React.createClass({
         onRequestDismiss: React.PropTypes.func
     },
     render: function () {
+        var classes = classNames(
+            'banner',
+            this.props.className
+        );
         return (
-            <div className={'banner ' + this.props.className}>
+            <div className={classes}>
                 <div className="inner">
                     {this.props.children}
                     {this.props.onRequestDismiss ? [

src/components/box/box.jsx

@@ -1,3 +1,4 @@
+var classNames = require('classnames');
 var React = require('react');
 
 require('./box.scss');
@@ -11,8 +12,12 @@ var Box = React.createClass({
         moreProps: React.PropTypes.object
     },
     render: function () {
+        var classes = classNames(
+            'box',
+            this.props.className
+        );
         return (
-            <div className={'box ' + this.props.className}>
+            <div className={classes}>
                 <div className="box-header">
                     <h4>{this.props.title}</h4>
                     <p>

src/components/carousel/carousel.jsx

@@ -1,3 +1,4 @@
+var classNames = require('classnames');
 var defaults = require('lodash.defaults');
 var React = require('react');
 var Slider = require('react-slick');
@@ -31,9 +32,12 @@ var Carousel = React.createClass({
             variableWidth: true
         });
         var arrows = this.props.items.length > settings.slidesToShow;
-
+        var classes = classNames(
+            'carousel',
+            this.props.className
+        );
         return (
-            <Slider className={'carousel ' + this.props.className} arrows={arrows} {... settings}>
+            <Slider className={classes} arrows={arrows} {... settings}>
                 {this.props.items.map(function (item) {
                     var href = '';
                     switch (item.type) {

src/views/hoc/hoc.jsx

@@ -1,3 +1,4 @@
+var classNames = require('classnames');
 var React = require('react');
 var render = require('../../lib/render.jsx');
 
@@ -20,9 +21,13 @@ var Hoc = React.createClass({
         });
     },
     render: function () {
+        var classes = classNames(
+            'top-banner',
+            this.state.bgClass
+        );
         return (
             <div>
-                <div className={'top-banner ' + this.state.bgClass}>
+                <div className={classes}>
                     <h1>Get Creative with Coding</h1>
                     <p>
                         With Scratch, you can program your own stories, games, and animations —