Javi Velasco
commit
87e8272d4e
|
|
@ -27,7 +27,7 @@ import React from 'react';
|
|||
import Button from 'react-toolbox/lib/button';
|
||||
|
||||
const CustomButton = () => (
|
||||
<Button label="Hello world" kind="raised" accent />
|
||||
<Button label="Hello world" raised accent />
|
||||
);
|
||||
|
||||
export default CustomButton;
|
||||
|
|
|
|||
|
|
@ -7,12 +7,11 @@ describe('Button', function () {
|
|||
let button;
|
||||
|
||||
describe('#render', function () {
|
||||
|
||||
it('uses flat and primary styles by default', function () {
|
||||
it('uses flat and neutral styles by default', function () {
|
||||
button = utils.shallowRenderComponent(Button);
|
||||
|
||||
expect(button.props.className).toContain(style.flat);
|
||||
expect(button.props.className).toContain(style.primary);
|
||||
expect(button.props.className).toContain(style.neutral);
|
||||
});
|
||||
|
||||
it('renders accent button with accent style', function () {
|
||||
|
|
@ -22,11 +21,11 @@ describe('Button', function () {
|
|||
expect(button.props.className).toContain(style.accent);
|
||||
});
|
||||
|
||||
it('1 renders mini button with mini style', function () {
|
||||
button = utils.shallowRenderComponent(Button, { mini: true });
|
||||
it('renders mini button with mini style', function () {
|
||||
button = utils.shallowRenderComponent(Button, { floating: true, mini: true });
|
||||
|
||||
expect(button.props.className).toContain(style.flat);
|
||||
expect(button.props.className).toContain(style.primary);
|
||||
expect(button.props.className).toContain(style.floating);
|
||||
expect(button.props.className).toContain(style.neutral);
|
||||
expect(button.props.className).toContain(style.mini);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,21 @@
|
|||
$button-neutral-color: unquote("rgb(#{$color-white})") !default;
|
||||
$button-neutral-color-contrast: unquote("rgb(#{$palette-grey-900})") !default;
|
||||
$button-neutral-color-hover: unquote("rgba(#{$palette-grey-900}, 0.20)") !default;
|
||||
$button-primary-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
|
||||
$button-primary-color-hover: unquote("rgba(#{$color-primary}, 0.20)") !default;
|
||||
$button-primary-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$button-accent-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
|
||||
$button-accent-color-hover: unquote("rgba(#{$color-accent}, 0.20)") !default;
|
||||
$button-accent-color: unquote("rgb(#{$color-accent})") !default;
|
||||
$button-border-radius: 0.2 * $unit;
|
||||
$button-default-text-color: unquote("rgb(#{$color-black})") !default;
|
||||
$button-disabled-text-color: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
$button-flat-color-hover: unquote("rgba(#{$color-black}, 0.26)") !default;
|
||||
$button-border-radius: 0.2 * $unit;
|
||||
$button-floating-font-size: $unit * 2.4;
|
||||
$button-floating-height-mini: $unit * 4;
|
||||
$button-floating-mini-font-size: $button-floating-height-mini / 2.25;
|
||||
$button-floating-height: $unit * 5.6;
|
||||
$button-height: $unit * 3.6;
|
||||
$button-primary-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
|
||||
$button-primary-color-hover: unquote("rgba(#{$color-primary}, 0.20)") !default;
|
||||
$button-primary-color: unquote("rgb(#{$color-primary})") !default;
|
||||
$button-solid-background-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
|
||||
$button-solid-disabled-background-color: unquote("rgba(#{$color-black}, 0.12)") !default;
|
||||
$button-squared-icon-margin: $unit * .6;
|
||||
|
|
|
|||
|
|
@ -10,13 +10,16 @@ class Button extends React.Component {
|
|||
accent: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
disabled: React.PropTypes.bool,
|
||||
flat: React.PropTypes.bool,
|
||||
floating: React.PropTypes.bool,
|
||||
icon: React.PropTypes.string,
|
||||
kind: React.PropTypes.string,
|
||||
label: React.PropTypes.string,
|
||||
loading: React.PropTypes.bool,
|
||||
mini: React.PropTypes.bool,
|
||||
primary: React.PropTypes.bool,
|
||||
raised: React.PropTypes.bool,
|
||||
ripple: React.PropTypes.bool,
|
||||
toggle: React.PropTypes.bool,
|
||||
tooltip: React.PropTypes.string,
|
||||
type: React.PropTypes.string
|
||||
};
|
||||
|
|
@ -24,11 +27,14 @@ class Button extends React.Component {
|
|||
static defaultProps = {
|
||||
accent: false,
|
||||
className: '',
|
||||
kind: 'flat',
|
||||
flat: false,
|
||||
floating: false,
|
||||
loading: false,
|
||||
mini: false,
|
||||
primary: false,
|
||||
ripple: true
|
||||
raised: false,
|
||||
ripple: true,
|
||||
toggle: false
|
||||
};
|
||||
|
||||
handleMouseDown = (event) => {
|
||||
|
|
@ -38,27 +44,29 @@ class Button extends React.Component {
|
|||
};
|
||||
|
||||
render () {
|
||||
let className = style[this.props.kind];
|
||||
const {label, icon, loading, ripple, primary, accent, mini, kind, tooltip, ...others} = this.props;
|
||||
const {accent, flat, floating, href, icon, label, loading, mini,
|
||||
primary, raised, ripple, toggle, tooltip, ...others} = this.props;
|
||||
const element = href ? 'a' : 'button';
|
||||
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
||||
const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : toggle ? 'toggle' : 'flat';
|
||||
let className = `${style[shape]} ${style[level]}`;
|
||||
|
||||
if (this.props.className) className += ` ${this.props.className}`;
|
||||
if (!primary && !accent) className += ` ${style.primary}`;
|
||||
if (primary) className += ` ${style.primary}`;
|
||||
if (accent) className += ` ${style.accent}`;
|
||||
if (mini) className += ` ${style.mini}`;
|
||||
|
||||
return (
|
||||
<button
|
||||
data-react-toolbox='button'
|
||||
{...others}
|
||||
className={className}
|
||||
disabled={this.props.disabled || this.props.loading}
|
||||
onMouseDown={this.handleMouseDown}
|
||||
>
|
||||
{ ripple ? <Ripple ref='ripple' loading={loading}/> : null }
|
||||
{ icon ? <FontIcon className={style.icon} value={icon}/> : null }
|
||||
{ label ? <abbr className={style.label}>{label}</abbr> : null }
|
||||
{ tooltip ? <Tooltip label={tooltip}/> : null }
|
||||
</button>
|
||||
const props = {
|
||||
...others,
|
||||
href,
|
||||
className,
|
||||
disabled: this.props.disabled || this.props.loading,
|
||||
onMouseDown: this.handleMouseDown
|
||||
};
|
||||
|
||||
return React.createElement(element, props,
|
||||
ripple ? <Ripple ref='ripple' loading={loading}/> : null,
|
||||
tooltip ? <Tooltip className={style.tooltip} label={tooltip}/> : null,
|
||||
icon ? <FontIcon className={style.icon} value={icon}/> : null,
|
||||
label ? label : this.props.children
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,13 +6,28 @@ A [button](https://www.google.com/design/spec/components/buttons.html) clearly c
|
|||
```jsx
|
||||
import Button from 'react-toolbox/lib/button';
|
||||
|
||||
const GithubIcon = () => (
|
||||
<svg viewBox="0 0 284 277">
|
||||
<g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const TestButtons = () => (
|
||||
<div>
|
||||
<Button label="Flat button" />
|
||||
<Button kind="raised" label="Raised" />
|
||||
<Button kind="raised" label="Raised accent" accent icon="favorite" />
|
||||
<Button className="primary" kind="floating" icon="add" />
|
||||
<Button mini kind="floating" icon="add" accent />
|
||||
<Button href='http://github.com/javivelasco' target='_blank' raised>
|
||||
<GithubIcon /> Github
|
||||
</Button>
|
||||
<Button icon='bookmark' label='Bookmark' accent />
|
||||
<Button icon='bookmark' label='Bookmark' raised primary />
|
||||
<Button icon='inbox' label='Inbox' flat />
|
||||
<Button icon='add' floating />
|
||||
<Button icon='add' floating accent mini />
|
||||
<Button icon='mood' toggle />
|
||||
<Button toggle primary>
|
||||
<GithubIcon />
|
||||
</Button>
|
||||
<Button icon='add' label='Add this' flat primary />
|
||||
<Button icon='add' label='Add this' flat disabled />
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
|
@ -21,14 +36,22 @@ const TestButtons = () => (
|
|||
|
||||
| Name | Type | Default | Description|
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `accent` | `Bool` | `false` | Indicates if the button should have accent color.|
|
||||
| `accent` | `Boolean` | `false` | Indicates if the button should have accent color.|
|
||||
| `className` | `String` | `''` | Set a class to style the Component.|
|
||||
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
|
||||
| `flat` | `Boolean` | `false` | If true, the button will have a flat look. |
|
||||
| `floating` | `Boolean` | `false` | If true, the button will have a floating look. |
|
||||
| `icon` | `String` | | Value of the icon (See icon component). |
|
||||
| `kind` | `String` | `flat` | Type of the component, overwrite this property if you need set a different stylesheet.|
|
||||
| `label` | `String` | | The text string to use for the name of the button.|
|
||||
| `loading` | `Boolean` | `false` | If true, component will be disabled and show a loading animation.|
|
||||
| `mini` | `Boolean` | `false` | To be used with floating button. If true the button will be smaller.|
|
||||
| `onClick` | `Function` | | Callback called when the button is clicked.|
|
||||
| `primary` | `false` | | If true, component will have the primary color.|
|
||||
| `primary` | `false` | `false` | Indicates if the button should have primary color.|
|
||||
| `raised` | `Boolean` | `false` | If true, the button will have a raised look. |
|
||||
| `ripple` | `Boolean` | `true` | If true, component will have a ripple effect on click.|
|
||||
| `toggle` | `Boolean` | `false` | If true, the button will have a toggle icon look. |
|
||||
| `tooptip` | `String` | | The value will be shown as a tooltip when the button is hovered. |
|
||||
|
||||
By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time.
|
||||
|
||||
The `Button` component also accept children so if you want to provide a custom component and text instead of a `label` and `icon` you can do it too. Just check the examples.
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@
|
|||
display: inline-block;
|
||||
height: $button-height;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $button-default-text-color;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
|
@ -16,18 +18,28 @@
|
|||
border: 0;
|
||||
outline: none;
|
||||
transition: box-shadow .2s $animation-curve-fast-out-linear-in,
|
||||
background-color .2s $animation-curve-default,
|
||||
color .2s $animation-curve-default;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
|
||||
background-color .2s $animation-curve-default,
|
||||
color .2s $animation-curve-default;
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
> span:not(.tooltip) {
|
||||
@include typo-button();
|
||||
display: inline-block;
|
||||
line-height: $button-height;
|
||||
vertical-align: middle;
|
||||
}
|
||||
> svg {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
font-size: 120%;
|
||||
vertical-align: middle;
|
||||
fill: currentColor;
|
||||
}
|
||||
> * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[data-react-toolbox="ripple"] {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -42,6 +54,9 @@
|
|||
font-size: 120%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
> svg {
|
||||
margin-right: .5 * $unit;
|
||||
}
|
||||
}
|
||||
|
||||
%disabled {
|
||||
|
|
@ -50,11 +65,6 @@
|
|||
cursor: auto;
|
||||
}
|
||||
|
||||
.label {
|
||||
@include typo-button();
|
||||
line-height: $button-height;
|
||||
}
|
||||
|
||||
.flat {
|
||||
@extend %button;
|
||||
@extend %squared;
|
||||
|
|
@ -70,6 +80,33 @@
|
|||
}
|
||||
}
|
||||
|
||||
.toggle {
|
||||
@extend %button;
|
||||
@extend %toggle;
|
||||
width: $button-height;
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
&:hover {
|
||||
background: $button-flat-color-hover;
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
background: $button-flat-color-hover;
|
||||
}
|
||||
&[disabled] {
|
||||
@extend %disabled;
|
||||
}
|
||||
.icon {
|
||||
font-size: 120%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.icon {
|
||||
line-height: $button-height;
|
||||
}
|
||||
[data-react-toolbox="ripple"] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.raised {
|
||||
@extend %button;
|
||||
@extend %squared;
|
||||
|
|
@ -121,7 +158,7 @@
|
|||
color: $button-primary-color-contrast;
|
||||
background: $button-primary-color;
|
||||
}
|
||||
&.flat {
|
||||
&.flat, &.toggle {
|
||||
color: $button-primary-color;
|
||||
&:hover {
|
||||
background: $button-primary-color-hover;
|
||||
|
|
@ -137,7 +174,7 @@
|
|||
color: $button-accent-color-contrast;
|
||||
background-color: $button-accent-color;
|
||||
}
|
||||
&.flat {
|
||||
&.flat, &.toggle {
|
||||
color: $button-accent-color;
|
||||
&:hover {
|
||||
background: $button-accent-color-hover;
|
||||
|
|
@ -148,6 +185,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
.neutral:not([disabled]) {
|
||||
&.raised, &.floating {
|
||||
color: $button-neutral-color-contrast;
|
||||
background-color: $button-neutral-color;
|
||||
}
|
||||
&.flat, &.toggle {
|
||||
color: $button-neutral-color-contrast;
|
||||
&:hover {
|
||||
background: $button-neutral-color-hover;
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
background: $button-neutral-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mini.floating {
|
||||
width: $button-floating-height-mini;
|
||||
height: $button-floating-height-mini;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ class DrawerTest extends React.Component {
|
|||
render () {
|
||||
return (
|
||||
<div>
|
||||
<Button kind='raised' accent label='Show Drawer' onClick={this.handleToggle} />
|
||||
<Button label='Show Drawer' raised accent onClick={this.handleToggle} />
|
||||
<Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
|
||||
<h5>This is your Drawer.</h5>
|
||||
<p>You can embed any content you want, for example a Menu.</p>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@ const FontIcon = props => {
|
|||
let className = style[props.value];
|
||||
if (props.className) className += ` ${props.className}`;
|
||||
return (
|
||||
<span data-react-toolbox='icon' {...props} className={className}>
|
||||
<i data-react-toolbox='icon' {...props} className={className}>
|
||||
{props.children}
|
||||
</span>
|
||||
</i>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@ const links = [
|
|||
];
|
||||
|
||||
const actions = [
|
||||
{ label: 'Alarm', kind: 'raised', icon: 'access-alarm'},
|
||||
{ label: 'Location', kind: 'raised', accent: true, icon: 'room'}
|
||||
{ label: 'Alarm', raised: true, icon: 'access-alarm'},
|
||||
{ label: 'Location', raised: true, accent: true, icon: 'room'}
|
||||
];
|
||||
|
||||
const NavigationTest = () => (
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@ class Snackbar extends React.Component {
|
|||
return (
|
||||
<Button
|
||||
className={style.button}
|
||||
kind='flat'
|
||||
label={this.props.action}
|
||||
onClick={this.props.onClick}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ class SnackbarTest extends React.Component {
|
|||
render () {
|
||||
return (
|
||||
<section>
|
||||
<Button label='Show Snackbar' kind='raised' onClick={this.handleClick} />
|
||||
<Button label='Show Snackbar' raised onClick={this.handleClick} />
|
||||
<Snackbar
|
||||
action='Nice'
|
||||
icon='question-answer'
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import Tooltip from 'react-toolbox/lib/tooltip';
|
|||
const TooltipTest = () => (
|
||||
<div>
|
||||
<p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.</p>
|
||||
<Button label='Button with tooltip' kind='raised' accent tooltip='This is a tooltip by property' />
|
||||
<Button label='Button with tooltip' raised accent tooltip='This is a tooltip by property' />
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
|
|
|||
|
|
@ -6,6 +6,18 @@ import Navigation from '../../navigation';
|
|||
import style from './style';
|
||||
import authors from './modules/authors';
|
||||
|
||||
const GithubIcon = () => (
|
||||
<svg viewBox="0 0 284 277">
|
||||
<g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const TwitterIcon = () => (
|
||||
<svg viewBox="0 0 274 223">
|
||||
<g><path d="M273.39,26.301 C263.331,30.762 252.521,33.777 241.175,35.133 C252.756,28.191 261.649,17.199 265.837,4.102 C255,10.529 242.996,15.197 230.22,17.713 C219.988,6.812 205.411,0 189.279,0 C158.302,0 133.188,25.113 133.188,56.088 C133.188,60.484 133.685,64.765 134.641,68.87 C88.025,66.531 46.696,44.201 19.032,10.267 C14.204,18.551 11.438,28.186 11.438,38.465 C11.438,57.924 21.341,75.092 36.391,85.15 C27.196,84.859 18.548,82.336 10.985,78.135 C10.981,78.369 10.981,78.604 10.981,78.84 C10.981,106.016 30.315,128.686 55.974,133.838 C51.267,135.12 46.312,135.805 41.196,135.805 C37.582,135.805 34.068,135.454 30.644,134.799 C37.781,157.083 58.495,173.299 83.039,173.752 C63.843,188.795 39.658,197.762 13.38,197.762 C8.853,197.762 4.388,197.497 0,196.979 C24.822,212.893 54.305,222.178 85.98,222.178 C189.148,222.178 245.564,136.711 245.564,62.592 C245.564,60.16 245.51,57.741 245.402,55.336 C256.36,47.428 265.87,37.549 273.39,26.301" /></g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const Home = () => (
|
||||
<article>
|
||||
<header className={style.header}>
|
||||
|
|
@ -38,7 +50,7 @@ const Home = () => (
|
|||
</p>
|
||||
|
||||
<Link to='/components'>
|
||||
<Button label='Try it now!' kind='raised' accent />
|
||||
<Button label='Try it now!' raised accent />
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
|
|
@ -48,8 +60,21 @@ const Home = () => (
|
|||
{
|
||||
authors.map((author, index) => {
|
||||
author.actions.map((action) => {
|
||||
const url = `https:\\\\${ action.label }.com\\${ author.subtitle }`;
|
||||
action.onClick = () => { window.open(url.toLowerCase(), '_blank'); };
|
||||
if (action.id === 'github') {
|
||||
action.style = {color: '#000'};
|
||||
action.children = [
|
||||
<GithubIcon key={`gicon-${author.subtitle}`} />,
|
||||
<span key={`glabel-${author.subtitle}`}>Github</span>
|
||||
];
|
||||
action.id = null;
|
||||
} else {
|
||||
action.style = {color: '#55acee'};
|
||||
action.children = [
|
||||
<TwitterIcon key={`ticon-${author.subtitle}`} />,
|
||||
<span key={`tlabel-${author.subtitle}`}>Twitter</span>
|
||||
];
|
||||
action.id = null;
|
||||
}
|
||||
});
|
||||
return <Card key={index} {...author} />;
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ export default [
|
|||
title: 'Javi Velasco',
|
||||
subtitle: 'javivelasco',
|
||||
actions: [
|
||||
{ label: 'Github' },
|
||||
{ label: 'Twitter' }
|
||||
{ id: 'github', href: 'http://github.com/javivelasco', target: '_blank' },
|
||||
{ id: 'twitter', href: 'http://twitter.com/javivelasco', target: '_blank' }
|
||||
],
|
||||
image: '/images/javivelasco.jpg',
|
||||
text: 'Software gardener • Film, music & comic lover • Frontend Engineer at SocialBro • Any biographer in the room?',
|
||||
|
|
@ -14,8 +14,8 @@ export default [
|
|||
title: 'Javi Jimenez',
|
||||
subtitle: 'soyjavi',
|
||||
actions: [
|
||||
{ label: 'Github' },
|
||||
{ label: 'Twitter' }
|
||||
{ id: 'github', href: 'http://github.com/soyjavi', target: '_blank' },
|
||||
{ id: 'twitter', href: 'http://twitter.com/soyjavi', target: '_blank' }
|
||||
],
|
||||
image: '/images/soyjavi.jpg',
|
||||
text: 'Creative Doer · A complicated #human who builds stuff · #author · #opensource lover · #traveller · with a dark past being CEO & CTO',
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import React from 'react';
|
|||
import Button from 'react-toolbox/lib/button';
|
||||
|
||||
const CustomButton = () => (
|
||||
<Button label="Hello world" kind="raised" accent />
|
||||
<Button label="Hello world" raised accent />
|
||||
);
|
||||
|
||||
export default CustomButton;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
@import "../config";
|
||||
|
||||
|
||||
.editor, .preview {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@ import style from './style';
|
|||
const LoadExampleButton = (props) => {
|
||||
return (
|
||||
<Button
|
||||
raised
|
||||
accent
|
||||
kind='raised'
|
||||
icon='code'
|
||||
label='Load in playground'
|
||||
onClick={props.onClick}
|
||||
|
|
@ -76,9 +76,9 @@ class Main extends React.Component {
|
|||
<Appbar className={style.appbar}/>
|
||||
<Button
|
||||
accent
|
||||
floating
|
||||
className={style['playground-button']}
|
||||
icon={this.state.playground ? 'close' : 'code'}
|
||||
kind='floating'
|
||||
onClick={this.handlePlayGroundClick}
|
||||
/>
|
||||
<MainNavigation className={style.navigation} />
|
||||
|
|
|
|||
|
|
@ -1,10 +1,28 @@
|
|||
const GithubIcon = () => (
|
||||
<svg viewBox="0 0 284 277">
|
||||
<g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const ButtonsTest = () => (
|
||||
<div>
|
||||
<Button label="Flat button" />
|
||||
<Button kind="raised" label="Raised" />
|
||||
<Button kind="raised" label="Raised accent" accent icon="favorite" />
|
||||
<Button className="primary" kind="floating" icon="add" />
|
||||
<Button mini kind="floating" icon="add" accent />
|
||||
<Button href='http://github.com/javivelasco' target='_blank' raised>
|
||||
<GithubIcon /> Github
|
||||
</Button>
|
||||
<Button icon='bookmark' label='Bookmark' accent />
|
||||
<Button icon='bookmark' label='Bookmark' raised primary />
|
||||
<Button icon='inbox' label='Inbox' flat />
|
||||
<Button icon='add' floating />
|
||||
<Button icon='add' floating primary />
|
||||
<Button icon='add' floating primary disabled />
|
||||
<Button icon='add' floating accent mini />
|
||||
<Button icon='mood' toggle />
|
||||
<Button toggle primary>
|
||||
<GithubIcon />
|
||||
</Button>
|
||||
<Button icon='add' label='Add this' flat primary />
|
||||
<Button icon='add' label='Add this' flat disabled />
|
||||
<Button icon='bookmark' label='Bookmark' raised primary loading />
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ class DrawerTest extends React.Component {
|
|||
render () {
|
||||
return (
|
||||
<div>
|
||||
<Button kind='raised' accent label='Show Drawer' onClick={this.handleToggle} />
|
||||
<Button raised accent label='Show Drawer' onClick={this.handleToggle} />
|
||||
<Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
|
||||
<h5>This is your Drawer.</h5>
|
||||
<p>You can embed any content you want, for example a Menu.</p>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ const links = [
|
|||
];
|
||||
|
||||
const actions = [
|
||||
{ label: 'Alarm', kind: 'raised', icon: 'access-alarm'},
|
||||
{ label: 'Location', kind: 'raised', accent: true, icon: 'room'}
|
||||
{ label: 'Alarm', raised: true, icon: 'access-alarm'},
|
||||
{ label: 'Location', raised: true, accent: true, icon: 'room'}
|
||||
];
|
||||
|
||||
const NavigationTest = () => (
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ class SnackbarTest extends React.Component {
|
|||
render () {
|
||||
return (
|
||||
<section>
|
||||
<Button label='Show snackbar' kind='raised' onClick={this.handleClick} />
|
||||
<Button label='Show snackbar' raised primary onClick={this.handleClick} />
|
||||
<Snackbar
|
||||
action='Dismiss'
|
||||
active={this.state.active}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
const TooltipTest = () => (
|
||||
<div>
|
||||
<p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.</p>
|
||||
<Button label='Button with tooltip' kind='raised' accent tooltip='This is a tooltip by property' />
|
||||
<Button label='Button with tooltip' raised accent tooltip='This is a tooltip by property' />
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ $documentation-table-font-size: 1.4 * $unit;
|
|||
text-align: left;
|
||||
> button {
|
||||
height: $documentation-playground-button-height;
|
||||
> abbr {
|
||||
> span {
|
||||
font-size: $documentation-playground-button-font-size;
|
||||
line-height: $documentation-playground-button-height;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,32 @@
|
|||
import React from 'react';
|
||||
import Button from '../../components/button';
|
||||
|
||||
const GithubIcon = () => (
|
||||
<svg viewBox="0 0 284 277">
|
||||
<g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const ButtonTest = () => (
|
||||
<section>
|
||||
<h5>Buttons</h5>
|
||||
<p>lorem ipsum...</p>
|
||||
<Button kind='raised' primary label='Bookmark' icon='bookmark' />
|
||||
<Button kind='flat' accent label='Inbox' icon='inbox' />
|
||||
<Button kind='floating' primary icon='add' />
|
||||
<Button kind='floating' primary disabled icon='add' />
|
||||
<Button kind='floating' accent mini icon='add' />
|
||||
<Button kind='flat' primary icon='add' label='Add this' />
|
||||
<Button kind='raised' primary label='Bookmark' icon='bookmark' loading />
|
||||
<Button kind='flat' disabled icon='add' label='Add this' />
|
||||
|
||||
<Button href='http://github.com/javivelasco' target='_blank' raised>
|
||||
<GithubIcon /> Github
|
||||
</Button>
|
||||
<Button icon='bookmark' label='Bookmark' accent />
|
||||
<Button icon='bookmark' label='Bookmark' raised primary />
|
||||
<Button icon='inbox' label='Inbox' flat />
|
||||
<Button icon='add' floating />
|
||||
<Button icon='add' floating primary />
|
||||
<Button icon='add' floating primary disabled />
|
||||
<Button icon='add' floating accent mini />
|
||||
<Button icon='mood' toggle />
|
||||
<Button toggle primary><GithubIcon /></Button>
|
||||
<Button icon='add' label='Add this' flat primary />
|
||||
<Button icon='add' label='Add this' flat disabled />
|
||||
<Button icon='bookmark' label='Bookmark' raised primary loading />
|
||||
</section>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ class DialogTest extends React.Component {
|
|||
}
|
||||
|
||||
actions = [
|
||||
{ label: 'Disagree', type: 'flat', className: 'primary', onClick: this.handleToggle },
|
||||
{ label: 'Agree', type: 'flat', className: 'primary', onClick: this.handleToggle }
|
||||
{ label: 'Disagree', primary: true, onClick: this.handleToggle },
|
||||
{ label: 'Agree', primary: true, onClick: this.handleToggle }
|
||||
];
|
||||
|
||||
render () {
|
||||
|
|
@ -24,7 +24,7 @@ class DialogTest extends React.Component {
|
|||
<section>
|
||||
<h5>Dialog</h5>
|
||||
<p>lorem ipsum...</p>
|
||||
<Button kind='raised' label='Show Dialog' onClick={this.handleToggle} />
|
||||
<Button label='Show Dialog' raised primary onClick={this.handleToggle} />
|
||||
<Dialog
|
||||
actions={this.actions}
|
||||
active={this.state.active}
|
||||
|
|
|
|||
|
|
@ -29,12 +29,12 @@ class DrawerTest extends React.Component {
|
|||
</Drawer>
|
||||
|
||||
<Drawer active={this.state.rightActive} type='right'>
|
||||
<Button label='Close' onClick={this.handleToggleRight} />
|
||||
<Button primary label='Close' onClick={this.handleToggleRight} />
|
||||
</Drawer>
|
||||
|
||||
<nav>
|
||||
<Button accent label='Drawer left' kind='raised' onClick={this.handleToggleLeft} />
|
||||
<Button primary label='Drawer right' kind='raised' onClick={this.handleToggleRight} />
|
||||
<Button label='Drawer left' raised primary onClick={this.handleToggleLeft} />
|
||||
<Button label='Drawer right' raised accent onClick={this.handleToggleRight} />
|
||||
</nav>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ class SnackbarTest extends React.Component {
|
|||
<section>
|
||||
<h5>Snackbars & Toasts</h5>
|
||||
<p>lorem ipsum...</p>
|
||||
<Button label='Show snackbar' kind='raised' onClick={this.handleClick} />
|
||||
<Button label='Show snackbar' primary raised onClick={this.handleClick} />
|
||||
<Snackbar
|
||||
action='Dismiss'
|
||||
active={this.state.active}
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@ const TooltipTest = () => (
|
|||
<section>
|
||||
<h5>Tooltip</h5>
|
||||
<p>Give information on :hover</p>
|
||||
<Button kind='raised' primary label='Bookmark' icon='bookmark' tooltip='Bookmark Tooltip' />
|
||||
<Button kind='floating' primary accent icon='add' tooltip='Floating Tooltip' />
|
||||
<Button kind='floating' primary disabled icon='add' tooltip='Floating can not show' />
|
||||
<Button label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' />
|
||||
<Button icon='add' floating accent tooltip='Floating Tooltip' />
|
||||
<Button icon='add' floating disabled tooltip='Floating can not be shown' />
|
||||
<Input tooltip='lorem ipsum...'/>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ const Root = () => (
|
|||
accent
|
||||
className={style.github}
|
||||
icon='web'
|
||||
kind='floating'
|
||||
floating
|
||||
onClick={_hrefProject}
|
||||
/>
|
||||
</AppBarToolbox>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
$offset: 1.8 * $unit;
|
||||
|
||||
.app {
|
||||
padding: (8.2 * $unit) $offset $offset $offset;
|
||||
padding: (8.2 * $unit) $offset $offset;
|
||||
background-color: #f5f5f5;
|
||||
> section {
|
||||
padding: $offset;
|
||||
margin-bottom: $offset;
|
||||
background-color: white;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0, 0.25);
|
||||
> h5 {
|
||||
color: rgb(48, 63, 159);
|
||||
|
|
@ -48,7 +48,3 @@ $offset: 1.8 * $unit;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
// height: $unit;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue