split up component css files

Author: Joe Seifi

01-react-css3/solution/App.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
-import { AddToCartButton, BuyNowButton , FoodItem, BuyStrip } from './components/index'
+import { FoodItem, BuyStrip } from './components/index'
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
 
-import { foodList } from './api'
+import { foodListData } from './api'
 import './app.css'
 
 export default class App extends Component {
@@ -34,8 +34,8 @@ export default class App extends Component {
         </header>
         <section className="order">
           <main className="food">
-            <figure className="food_photo">
-              <img className="food_photo_image" src="../../workshop/img/taco.jpg" />
+            <figure className="food_header">
+              <img className="food_header_image" src="../../workshop/img/taco.jpg" />
             </figure>
             <ReactCSSTransitionGroup
               transitionName="closefoods"
@@ -45,7 +45,7 @@ export default class App extends Component {
             <div className="food_menu">
               <ul className="food_items">
               {
-                foodList.map( ({ id, name, price, photoPath }) => {
+                foodListData.map( ({ id, name, price, photoPath }) => {
                   return <FoodItem 
                     key={ id }
                     name={ name }

01-react-css3/solution/api.js

@@ -1,4 +1,4 @@
-const foodList = [
+const foodListData = [
   {
     id: 1231,
     name: 'Carne Asada',
@@ -25,4 +25,4 @@ const foodList = [
   }
 ]
 
-export { foodList }
+export { foodListData }

01-react-css3/solution/app.css

@@ -1,2 +1,2 @@
 @import url("../../public/workshop/css/reset.css");
-@import url("../../public/workshop/css/main.css")
+@import url("../../public/workshop/css/app.css")

01-react-css3/solution/components/AddToCartButton.js

@@ -1,7 +1,7 @@
-import React, { Component } from 'react'
-import classnames from 'classnames'
+import React, { Component, PropTypes } from 'react'
 import { Button } from './index'
 import '../../../public/workshop/css/button-icons.css'
+import '../../../public/workshop/css/add-to-cart-button.css'
 
 export class AddToCartButton extends Component {
 
@@ -10,6 +10,11 @@ export class AddToCartButton extends Component {
     buttonText: 'Add'
   }
 
+  static propTypes = {
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func.isRequired
+  }
+
   onButtonClicked = () => {
     this.props.onClick(!this.state.depressed)
     this.setState({
@@ -20,12 +25,11 @@ export class AddToCartButton extends Component {
 
   render () {
     const { buttonText, depressed } = this.state
-    const { classNames, onClick, disabled, ...otherProps } = this.props
-    const buttonClassNames = classnames('icon icon-add', classNames)
+    const { onClick, disabled, ...otherProps } = this.props
 
     return (
       <Button 
-        classNames={ buttonClassNames } 
+        classNames="icon icon-add add_to_cart_button"
         depressed={ depressed }
         disabled={ disabled }
         onClick={ this.onButtonClicked }

01-react-css3/solution/components/BuyNowButton.js

@@ -1,5 +1,6 @@
-import React, { Component } from 'react'
+import React, { Component, PropTypes } from 'react'
 import { Button } from './index'
+import '../../../public/workshop/css/buy-now-button.css'
 
 export class BuyNowButton extends Component {
 
@@ -8,6 +9,10 @@ export class BuyNowButton extends Component {
     buttonText: 'Buy Now'
   }
 
+  static propTypes = {
+    onClick: PropTypes.func.isRequired
+  }
+
   onButtonClicked = () => {
     this.props.onClick()
     this.setState({
@@ -19,11 +24,11 @@ export class BuyNowButton extends Component {
 
   render () {
     const { buttonText, depressed, disabled } = this.state
-    const { classNames, onClick, ...otherProps } = this.props
+    const { onClick, ...otherProps } = this.props
 
     return (
       <Button 
-        classNames={ classNames } 
+        classNames="buy_now_button"
         depressed={ depressed }
         disabled={ disabled }
         onClick={ this.onButtonClicked }

01-react-css3/solution/components/BuyStrip.js

@@ -1,13 +1,19 @@
-import React, { Component } from 'react'
+import React, { Component, PropTypes } from 'react'
 import { BuyNowButton } from './index'
 import numeral from 'numeral'
+import '../../../public/workshop/css/buy-strip.css'
 
 export class BuyStrip extends Component {
 
   state = {
     confirmed: false
   }
 
+  static propTypes = {
+    totalPrice: PropTypes.number,
+    onBuy: PropTypes.func.isRequired
+  }
+
   buyNowClicked () {
     this.props.onBuy()
     this.setState({ confirmed: true })
@@ -28,7 +34,6 @@ export class BuyStrip extends Component {
         <div className="buy_title">Total:<span className="buy_total">{ formattedPrice }</span></div>
         <BuyNowButton 
           onClick={ this.buyNowClicked.bind(this) }
-          classNames="buy_button"
           disabled={ totalPrice === 0 }>
           Buy Now
         </BuyNowButton>

01-react-css3/solution/components/FoodItem.js

@@ -1,13 +1,23 @@
-import React, { Component } from 'react'
+import React, { Component, PropTypes } from 'react'
 import { AddToCartButton } from './index'
 import numeral from 'numeral'
+import '../../../public/workshop/css/food-item.css'
 
 export class FoodItem extends Component {
 
   state = {
     inCart: false
   }
 
+  static propTypes = {
+    id: PropTypes.number,
+    name: PropTypes.string,
+    price: PropTypes.number,
+    photoPath: PropTypes.string,
+    disabled: PropTypes.bool,
+    updateTotal: PropTypes.func.isRequired
+  }
+
   addToCart (inCart) {
     this.props.updateTotal(this.props.price, inCart)
   }
@@ -18,11 +28,10 @@ export class FoodItem extends Component {
 
     return (
       <li className="food_item">
-        <figure className="food_item_image"><img className="food_item_photo" src={ photoPath } /></figure>
+        <figure className="food_item_figure"><img className="food_item_image" src={ photoPath } /></figure>
         <div className="food_item_name">{ name }<span className="food_item_price">{ numeral(price).format('$0.00') }</span></div>
         <AddToCartButton 
           onClick={ this.addToCart.bind(this) } 
-          classNames="food_add_button" 
           disabled={ disabled }
         />
       </li>

01-react-css3/solution/components/index.js

@@ -1,4 +1,5 @@
 export { Button } from './Button'
+
 export { AddToCartButton } from './AddToCartButton'
 export { BuyNowButton } from './BuyNowButton'
 

05-react-css-modules/lessons/Button/Button.js

@@ -3,7 +3,7 @@ import CSSModules from 'react-css-modules'
 import styles from './button.css'
 import classnames from 'classnames'
 
-@CSSModules(styles, {allowMultiple: true})
+@CSSModules(styles, { allowMultiple: true })
 export class Button extends Component {
 
   state = { depressed: false }
@@ -13,13 +13,11 @@ export class Button extends Component {
   })
 
   render () {
-    const buttonClassNames = classnames('btn', {
-      'depressed': this.state.depressed
-    })
     return (
       <button
-        styleName={buttonClassNames}
-        onClick={this.onButtonClicked}>
+        styleName="btn"
+        className={ this.state.depressed && styles.depressed }
+        onClick={ this.onButtonClicked }>
         {this.props.children}
       </button>
     )

public/workshop/css/add-to-cart-button.css

@@ -0,0 +1,5 @@
+/* Custom styling for Add to Cart Button */
+
+.add_to_cart_button {
+  min-width: 110px;
+}

public/workshop/css/all.css

@@ -1,4 +1,15 @@
 @import url("./reset.css");
+
 @import url("./button.css");
 @import url("./button-icons.css");
-@import url("./main.css")
+@import url("./add-to-cart-button.css");
+@import url("./buy-now-button.css");
+
+@import url("./food.css");
+@import url("./food-item.css");
+
+@import url("./buy-strip.css");
+
+@import url("./app.css");
+
+

public/workshop/css/app.css

@@ -0,0 +1,137 @@
+/* app specific */
+
+body {
+  background-color: #E1E1E1;
+  font-size: 16px;
+}
+
+@media screen and (min-width: 608px) {
+  body {
+    font-size: 15px;
+  }
+}
+
+body, input, button {  
+  font-family: helvetica;
+}
+
+body, a {
+  color: #222324;
+}
+
+.app {
+  min-width: 320px;
+}
+
+/* header section */
+
+.header {
+  display: flex;
+  margin: 0 auto;
+  position: relative;
+  justify-content: center;
+  height: 70px;
+  align-items: center;
+  background-color: #02573A;
+  color: #fff;
+}
+
+.logo {
+  background-image: url(../img/logo.png);
+  width: 800px;
+  height: 54px;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: 80%;
+}
+
+@media screen and (min-width: 608px) {
+  .logo {
+    background-size: 50%;
+  }
+}
+
+.logo span {
+  display: none;
+}
+
+/* order section */
+
+@media screen and (min-width: 608px) {
+  .order {
+    max-width: 900px;
+    margin: 30px auto 0;
+  }
+}
+
+/* order food header */
+.order .food .food_header {
+  max-width: 100%;
+  max-height: 224px;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+@media screen and (min-width: 608px) {
+  .order .food .food_header {
+    max-height: 226px;
+  }
+}
+
+.order .food .food_header .food_header_image {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* order food menu */
+
+.food_menu {
+  background-color: #fff;
+}
+
+.food_items {
+  transition: 300ms all ease-in;
+}
+
+@media screen and (min-width: 608px) {
+  .food_items {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding: 32px;
+  }
+}
+
+/* animate close food list */
+.closefoods-enter {
+  opacity: 0.01;
+  max-height: 0;
+}
+
+.closefoods-enter-active {
+  opacity: 1;
+  max-height: 1000;
+  transition: all 500ms ease-in;
+}
+
+.closefoods-leave {
+  max-height: 1000px;
+  opacity: 1;
+}
+
+.closefoods-leave-active {
+  opacity: 0.01;
+  max-height: 0;
+  transition: all 600ms ease;
+}
+
+/* footer section */
+
+.footer {
+  text-align: center;
+  padding: 20px;
+  font-size: 12px;
+}

public/workshop/css/buy-now-button.css

@@ -0,0 +1,17 @@
+/* Custom styling for Buy Now Button */
+
+.buy_now_button {
+  background-color: #fff;
+  color: #000;
+  box-shadow: 1px -1px 2px rgba(0, 0, 0, .2);
+  width: 110px;
+}
+
+.buy_now_button:hover {
+  background-color: #000;
+  color: #fff;
+}
+
+.btn.buy_now_button.depressed {
+  box-shadow: 1px -1px 2px rgba(0, 0, 0, 0);
+}