Add documentation and examples for cards

Author: javivelasco

components/card/index.jsx

@@ -5,20 +5,20 @@ import style from './style';
 
 class Card extends React.Component {
   static propTypes = {
+    actions: React.PropTypes.array,
     className: React.PropTypes.string,
     color: React.PropTypes.string,
     image: React.PropTypes.string,
-    text: React.PropTypes.string,
     loading: React.PropTypes.bool,
     onClick: React.PropTypes.func,
+    text: React.PropTypes.string,
     title: React.PropTypes.string,
-    type: React.PropTypes.string
+    type: React.PropTypes.oneOf(['wide', 'event', 'image'])
   };
 
   static defaultProps = {
     className: '',
-    loading: false,
-    type: 'default'
+    loading: false
   };
 
   handleMouseDown = (event) => {
@@ -41,8 +41,8 @@ class Card extends React.Component {
     if (this.props.title || this.props.image) {
       return (
         <figure className={style.figure} style={styleFigure}>
-          { this.props.subtitle ? <small>{this.props.subtitle}</small> : null }
-          { this.props.title ? <h5>{this.props.title}</h5> : null }
+          { this.props.title ? <h5 data-role='title'>{this.props.title}</h5> : null }
+          { this.props.subtitle ? <small data-role='subtitle'>{this.props.subtitle}</small> : null }
           { this.props.color ? <div className={style.overflow} style={styleOverflow}></div> : null }
         </figure>
       );
@@ -52,7 +52,7 @@ class Card extends React.Component {
   renderActions () {
     if (this.props.actions) {
       return (
-        <Navigation className={style.navigation} actions={this.props.actions} />
+        <Navigation data-role='actions' className={style.navigation} actions={this.props.actions} />
       );
     }
   }
@@ -73,7 +73,7 @@ class Card extends React.Component {
         onMouseDown={this.handleMouseDown}
       >
         { this.renderTitle() }
-        { this.props.text ? <p className={style.text}>{this.props.text}</p> : null }
+        { this.props.text ? <p data-role='text' className={style.text}>{this.props.text}</p> : null }
         { this.renderActions() }
         <Ripple
           ref='ripple'

components/card/readme.md

@@ -1,38 +1,56 @@
 # Card
 
+A [card](https://www.google.com/design/spec/components/cards.html) is a piece of paper with unique related data that serves as an entry point to more detailed information. For example, a card could contain a photo, text, and a link about a single subject.
+
+<!-- example -->
 ```
-var Card = require('react-toolbox/components/card');
-
-<Card title="Default Card" />
-<Card title="Default Card with text" text={text} />
-<Card title="Default Card with legend" legend={legend} />
-<Card title="Default Card with actions" actions={actions} />
-<Card title="Defaulr Card with text & image" text={text} image="http://" />
-<Card title="Default Card with text, color & onClick event" text={text}
-    color="#e91e63" onClick={@onClick} />
-<Card type="small" title="Small Card with text & onClick event"
-    text={text} color="#00bcd4" onClick={@onClick} />
+import Card from 'react-toolbox/card';
+
+const actions = [
+  { label: 'Play', icon: 'play-arrow'},
+  { label: 'Close' }
+];
+
+const TestCards = () => (
+  <Card
+    image='http://pitchfork-cdn.s3.amazonaws.com/longform/221/Deerhunter-Fading-Frontier640.jpg'
+    text='A Deerhunter album rollout usually coincides with some pithy and provocative statements from Bradford Cox on pop culture...'
+    title='Deerhunter - Fading Frontier'
+    color="rgba(0,0,0,.4)"
+    actions={actions}
+  />
+);
 ```
 
 ## Properties
 
 | Name              | Type          | Default         | Description|
 |:-                 |:-:            | :-              |:-|
-| **className**     | String        |                 | Sets the class-styles of the Component.|
-| **color**         | String        |                 | Sets HEX of the Component.|
-| **image**         | String        |                 | Sets a background image url.|
-| **text**          | String        |                 | Sets a complementary text.|
-| **legend**        | String        |                 | Sets a legend text.|
-| **loading**       | Boolean       |                 | If true, component will be disabled and show a loading animation.|
-| **onClick**       | Function      |                 | Callback function that is fired when the components's is clicked.|
-| **title**         | String        | "text"          | Sets the title of the component.|
-| **type**          | String        | "text"          | Type of the component, overwrite this property if you need set a different stylesheet.|
+| actions       | Array        |               | Array of objects describing actions. These actions will be rendered as buttons and the object fields will be transferred to those.|
+| className     | String        |     `''`            | Sets a class to give customized styles to the card.|
+| color         | String        |                 | Sets HEX or RGBA color to add a colored layer to the heading.|
+| image         | String        |                 | URL to sets a background image in the heading.|
+| loading       | Boolean       | `false`                | If true, component will be disabled and showing a loading animation.|
+| onClick       | Function      |                 | Callback function that is fired when the components's is clicked. It also will display a ripple effect on click. |
+| subtitle      | String        |                 | Sets a complementary smaller text under the title.|
+| text          | String        |                 | Sets a complementary text display as a card description.|
+| title         | String        |           | Sets the title of the card.|
+| type          | String        | `default`          | Type of the component to display general modifications. It can be `wide` for a larger card, `image` if it's an image card or `event` which shows just a title on top. |
 
-## Methods
+## Structure
 
-#### loading
-If true, component will be disabled and show a loading animation.
+This can generate different structures depending on the props. A complicated one can be as follows:
 
 ```
-card_instance.loading(true);
+<div data-react-toolbox="card">
+  <figure>
+    <h5 data-role='title'>Title</h5>
+    <small data-role='subtitle'>Subtitle</small>
+  </figure>
+  <p data-role='text'>Description</p>
+  <nav data-role='actions'>
+    <button data-react-toolbox="button">...</button>
+    <button data-react-toolbox="button">...</button>
+  </nav>
+</div>
 ```

docs/app/components/editor/style.scss

@@ -1,8 +1,6 @@
 @import "../globals";
 @import "../mixins";
 
-$documentation-code-background: rgba(0, 0, 0, .0588235);
-
 .editor {
   position: relative;
 
@@ -11,16 +9,4 @@ $documentation-code-background: rgba(0, 0, 0, .0588235);
     @import "solarized";
     @import "custom";
   }
-
-  &:before {
-    display: block;
-    width: 100%;
-    padding: 3px 7px;
-    font-size: $font-size-tiny;
-    font-weight: $font-weight-bold;
-    font-family: $code-font-family;
-    color: $color-text;
-    content: "React Toolbox Virtual Console";
-    background-color: rgba(0,0,0,0.1);
-  }
 }

docs/app/components/layout/main/components/navigation.jsx

@@ -38,7 +38,7 @@ const MainNavigation = React.createClass({
 
     return (
       <aside className={className}>
-        <List className={style.list} selectable>
+        <List className={style.list} selectable ripple>
           { this.renderDrawerItems() }
         </List>
         <footer className={style.footer}>

docs/app/components/layout/main/components/playground.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Editor from '../../../editor';
 import Preview from '../../../preview';
 import codeText from '../modules/examples/example.txt';
+import style from './playground.scss';
 
 class Playground extends React.Component {
   static propTypes = {
@@ -19,8 +20,16 @@ class Playground extends React.Component {
   render () {
     return (
       <aside className={this.props.className}>
-        <Editor ref='editor' codeText={this.state.code} onChange={this.handleCodeChange} />
-        <Preview code={this.state.code} />
+        <Editor
+          ref='editor'
+          className={style.editor}
+          codeText={this.state.code}
+          onChange={this.handleCodeChange}
+        />
+        <Preview
+          className={style.preview}
+          code={this.state.code}
+        />
       </aside>
     );
   }

docs/app/components/layout/main/components/playground.scss

@@ -1,8 +1,29 @@
 @import "../config";
 
-.root {
-  width: $playground-width;
-  height: 100%;
-  overflow-y: auto;
-  background-color: $color-background;
+.editor {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 60%;
+  left: 0;
+  overflow-y: scroll;
+  div:global(.CodeMirror) {
+    display: flex;
+    height: 100%;
+    min-height: 100%;
+    max-height: 100%;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+}
+
+.preview {
+  position: absolute;
+  top: 40%;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  overflow-y: scroll;
+  border-top: 1px solid $color-divider;
 }

docs/app/components/layout/main/modules/components.js

@@ -26,6 +26,7 @@ import TimePicker from 'react-toolbox/time_picker/readme';
 // Examples for the Playground
 import ButtonExample1 from './examples/button_example_1.txt';
 import AutocompleteExample1 from './examples/autocomplete_example_1.txt';
+import CardExample1 from './examples/card_example_1.txt';
 
 export default {
   app_bar: {
@@ -48,7 +49,8 @@ export default {
   card: {
     name: 'Card',
     docs: Card,
-    path: '/components/card'
+    path: '/components/card',
+    examples: [CardExample1]
   },
   checkbox: {
     name: 'Checkbox',

docs/app/components/layout/main/modules/examples/card_example_1.txt

@@ -0,0 +1,17 @@
+const actions = [
+  { label: 'Play', icon: 'play-arrow'},
+  { label: 'Close' }
+];
+
+const TestCards = () => (
+  <Card
+    image='http://pitchfork-cdn.s3.amazonaws.com/longform/221/Deerhunter-Fading-Frontier640.jpg'
+    text='A Deerhunter album rollout usually coincides with some pithy and provocative statements from Bradford Cox on pop culture...'
+    title='Deerhunter'
+    subtitle='Fading Frontier'
+    color="rgba(0,0,0,.4)"
+    actions={actions}
+  />
+);
+
+return <TestCards />;

docs/app/components/preview/style.scss

@@ -11,7 +11,7 @@ $preview-error-color: #fff;
 
 .content {
   flex-grow: 1;
-  padding: $unit;
+  margin: 2 * $unit;
 }
 
 .error {