Skip to content

Instantly share code, notes, and snippets.

@oliverbenns
Created July 14, 2015 23:38
Show Gist options
  • Save oliverbenns/21ff754c2a30b77c6fb2 to your computer and use it in GitHub Desktop.
Save oliverbenns/21ff754c2a30b77c6fb2 to your computer and use it in GitHub Desktop.
.button {
margin-left: 10px;
}
.button:first-child {
margin-left: 0;
}
import React, { Component } from 'react';
import styles from './style.css';
import Button from '../button';
export default class ButtonSet extends Component {
buildButtons(buttons) {
return buttons.map(function(button) {
return (
<Button theme={ button.theme } href={ button.href } size={ button.size } className={ styles.button }>{ button.label }</Button>
)
});
}
render() {
return (
<div className={ styles.container }>
{ this.buildButtons(this.props.buttons) }
</div>
);
}
}
.ele {
background-color: 'light-grey';
border: 0;
cursor: pointer;
padding: .5em 1em;
font-size: 16px;
}
/* look at postCSS plugin for nesting this */
.ele:hover {
background-color: grey;
color: white;
}
.primary {
background-color: $brandColor;
color: white;
}
.primary:hover {
background-color: $blueDark;
}
.success {
background-color: $green;
color: white;
}
.success:hover {
background-color: $greenDark;
}
.info {
background-color: $blueLight;
color: white;
}
.info:hover {
/* look into tool for color transformations */
background-color: $blue;
}
.danger {
background-color: $red;
color: white;
}
.danger:hover {
background-color: $redDark;
}
.large {
padding: 1em 2em;
}
import React, { Component } from 'react';
import classNames from 'classnames';
import styles from './style.css';
export default class Button extends Component {
render() {
var classes = classNames(
styles.ele,
this.props.theme ? styles[this.props.theme] : '',
this.props.size ? styles[this.props.size] : '',
this.props.className ? this.props.className : ''
);
return (
<a href={ this.props.href } className={ classes } onClick={ this.props.handler } role="button">
{this.props.children}
</a>
);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment