Merge branch 'master' of https://github.com/p3ol/junipero

examples/components/App.js

@@ -14,6 +14,7 @@ import SelectFieldPage from '../containers/SelectFieldPage';
 import SliderPage from '../containers/SliderPage';
 import SwitchPage from '../containers/SwitchPage';
 import DateFieldPage from '../containers/DateFieldPage';
+import ButtonPage from '../containers/ButtonPage';
 
 import Toolbox from '../containers/Toolbox';
 
@@ -48,6 +49,7 @@ class App extends React.Component {
               <Route exact path="/slider" component={SliderPage} />
               <Route exact path="/switch" component={SwitchPage} />
               <Route exact path="/date-field" component={DateFieldPage} />
+              <Route exact path="/button" component={ButtonPage} />
             </Switch>
           </Router>
 

examples/components/ButtonPage.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { Button } from '@poool/junipero';
+
+class ButtonPage extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      default: 0,
+      primary: 0,
+      danger: 0,
+    };
+  }
+
+  onClick(name) {
+    this.setState({ [name]: this.state[name] + 1 });
+  }
+
+  render() {
+    return (
+      <div className="container">
+        <p><Link to="/">Back</Link></p>
+        <h1>Button example</h1>
+
+        <h2 className="mt-5">Default</h2>
+        <div className="row mt-5">
+          <div className="col-6">
+            <Button
+              disabled={this.props.disabled}
+              onClick={this.onClick.bind(this, 'default')}
+            >
+              Label
+            </Button>
+          </div>
+          <div className="col-6">
+            <p>Current state :</p>
+            <pre>Clicked : { this.state.default }</pre>
+          </div>
+        </div>
+
+        <h2 className="mt-5">Primary</h2>
+        <div className="row mt-5">
+          <div className="col-6">
+            <p>
+              <Button
+                type="primary"
+                disabled={this.props.disabled}
+                onClick={this.onClick.bind(this, 'primary')}
+              >
+                Label
+              </Button>
+              <Button
+                className="ml-2"
+                type="primary"
+                reversed={true}
+                disabled={this.props.disabled}
+                onClick={this.onClick.bind(this, 'primary')}
+              >
+                Label
+              </Button>
+            </p>
+            <p className="mt-4">
+              <Button
+                type="primary"
+                size="big"
+                disabled={this.props.disabled}
+                onClick={this.onClick.bind(this, 'primary')}
+              >
+                Label
+              </Button>
+              <Button
+                className="ml-2"
+                type="primary"
+                size="big"
+                reversed={true}
+                disabled={this.props.disabled}
+                onClick={this.onClick.bind(this, 'primary')}
+              >
+                Label
+              </Button>
+            </p>
+          </div>
+          <div className="col-6">
+            <p>Current state :</p>
+            <pre>Clicked : { this.state.primary }</pre>
+          </div>
+        </div>
+
+        <h2 className="mt-5">Danger</h2>
+        <div className="row mt-5">
+          <div className="col-6">
+            <p>
+              <Button
+                type="danger"
+                disabled={this.props.disabled}
+                onClick={this.onClick.bind(this, 'danger')}
+              >
+                Label
+              </Button>
+              <Button
+                className="ml-2"
+                type="danger"
+                reversed={true}
+                disabled={this.props.disabled}
+                onClick={this.onClick.bind(this, 'danger')}
+              >
+                Label
+              </Button>
+            </p>
+            <p className="mt-4">
+              <Button
+                type="danger"
+                size="big"
+                disabled={this.props.disabled}
+                onClick={this.onClick.bind(this, 'danger')}
+              >
+                Label
+              </Button>
+              <Button
+                className="ml-2"
+                type="danger"
+                size="big"
+                reversed={true}
+                disabled={this.props.disabled}
+                onClick={this.onClick.bind(this, 'danger')}
+              >
+                Label
+              </Button>
+            </p>
+          </div>
+          <div className="col-6">
+            <p>Current state :</p>
+            <pre>Clicked : { this.state.danger }</pre>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default ButtonPage;

examples/components/Home.js

@@ -13,6 +13,7 @@ const Home = () => (
       <li><Link to="/slider">Slider</Link></li>
       <li><Link to="/switch">Switch</Link></li>
       <li><Link to="/date-field">DateField</Link></li>
+      <li><Link to="/button">Button</Link></li>
     </ul>
   </div>
 );

examples/components/TextFieldPage.js

@@ -9,6 +9,7 @@ class TextFieldPage extends React.Component {
     super(props);
     this.state = {
       default: {},
+      number: {},
       password: {},
       suffix: {},
       showPassword: false,
@@ -48,6 +49,26 @@ class TextFieldPage extends React.Component {
           </div>
         </div>
 
+        <h2 className="mt-5">Number</h2>
+        <div className="row mt-5">
+          <div className="col-6">
+            <TextField
+              label="Label"
+              required={true}
+              boxed={this.props.boxed}
+              error={this.props.error}
+              placeholder={this.props.placeholder}
+              disabled={this.props.disabled}
+              value={0}
+              onChange={this.onChange.bind(this, 'number')}
+            />
+          </div>
+          <div className="col-6">
+            <p>Current state :</p>
+            <pre>{ JSON.stringify(this.state.number, null, 2)}</pre>
+          </div>
+        </div>
+
         <h2 className="mt-5">Password</h2>
         <div className="row mt-5">
           <div className="col-6">

examples/containers/ButtonPage.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+
+import ButtonPage from '../components/ButtonPage';
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    ...ownProps,
+    disabled: state.tools.disabled,
+  };
+};
+
+export default connect(mapStateToProps)(ButtonPage);

src/components/Button.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import '../theme/components/Button.styl';
+
+const propTypes = {
+  disabled: PropTypes.bool,
+  tag: PropTypes.string,
+  type: PropTypes.string,
+  submit: PropTypes.bool,
+  reversed: PropTypes.bool,
+  size: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+const defaultProps = {
+  disabled: false,
+  tag: 'a',
+  type: 'default',
+  submit: false,
+  reversed: false,
+  size: 'default',
+  onClick: () => {},
+};
+
+class Button extends React.Component {
+
+  onClick(e) {
+    if (this.props.disabled) {
+      return;
+    }
+
+    this.props.onClick(e);
+  }
+
+  render() {
+    const {
+      tag: Tag,
+      submit,
+      type,
+      size,
+      reversed,
+      disabled,
+      className,
+      children,
+    } = this.props;
+
+    return (
+      <Tag
+        className={[
+          'junipero',
+          'button',
+          type,
+          reversed ? 'reversed' : null,
+          disabled ? 'disabled' : null,
+          `size-${size}`,
+          className,
+        ].join(' ')}
+        onClick={this.onClick.bind(this)}
+        type={submit ? 'submit' : Tag === 'button' ? 'button' : null}
+        disabled={disabled}
+      >
+        { children }
+      </Tag>
+    );
+  }
+
+}
+
+Button.propTypes = propTypes;
+Button.defaultProps = defaultProps;
+
+export default Button;

src/components/TextField.js

@@ -5,7 +5,7 @@ import '../theme/components/TextField.styl';
 
 const propTypes = {
   className: PropTypes.string,
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   type: PropTypes.string,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   placeholder: PropTypes.string,
@@ -82,13 +82,17 @@ class TextField extends React.Component {
   }
 
   onChange(e) {
-    const value = e.target.value;
+    let value = e.target.value;
     const valid = this.props.validate(value);
 
     this.setState({
       value,
       valid,
     }, () => {
+      if (typeof this.props.value === 'number') {
+        value = Number(value) || 0;
+      }
+
       this.props.onChange({
         value,
         valid,

src/index.js

@@ -4,6 +4,7 @@ import SelectField from './components/SelectField';
 import Slider from './components/Slider';
 import Switch from './components/Switch';
 import DateField from './components/DateField';
+import Button from './components/Button';
 
 import './theme/index.styl';
 
@@ -14,4 +15,5 @@ export {
   Slider,
   Switch,
   DateField,
+  Button,
 };