vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Add documentation and examples for cards

old
Javi Velasco 2015-10-31 18:54:55 +01:00
parent 1e662d12bf
commit 211cb97544
9 changed files with 109 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/card/index.jsx
View File

@ -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'

66
components/card/readme.md
View File

@ -1,38 +1,56 @@
# Card
```
var Card = require('react-toolbox/components/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.
<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} />
<!-- example -->
```
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>
```

14
docs/app/components/editor/style.scss
View File

@ -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);
}
}

2
docs/app/components/layout/main/components/navigation.jsx
View File

@ -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}>

13
docs/app/components/layout/main/components/playground.jsx
View File

@ -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>
);
}

31
docs/app/components/layout/main/components/playground.scss
View File

@ -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;
}

4
docs/app/components/layout/main/modules/components.js
View File

@ -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',

17
docs/app/components/layout/main/modules/examples/card_example_1.txt Normal file
View File

@ -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 />;

2
docs/app/components/preview/style.scss
View File

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