Merge pull request #1 from KaiVolland/introduce-buttons

Introduces buttons
terrestris · Sep 6, 2017 · ac6b7f4 · ac6b7f4
2 parents 86e5441 + 46664bf
commit ac6b7f4
Show file tree

Hide file tree

Showing 26 changed files with 1,019 additions and 20 deletions.
diff --git a/.babelrc b/.babelrc
@@ -5,6 +5,11 @@
     "react"
   ],
   "env": {
+    "build": {
+      "plugins": [
+        "babel-plugin-transform-import-extension-jsx-to-js"
+      ]
+    },
     "coverage": {
       "plugins": [
         [

diff --git a/.eslintrc b/.eslintrc
@@ -14,16 +14,30 @@
   },
   "parser": "babel-eslint",
   "globals": {
-    "ol": false
+    "ol": false,
+    "Promise": false
   },
   "rules": {
     "indent": ["error", 2, { "SwitchCase": 1 }],
     "linebreak-style": ["error", "unix"],
     "quotes": ["error", "single", { "allowTemplateLiterals": true }],
     "semi": ["error", "always"],
+    "one-var": ["error", "never"],
+    "no-confusing-arrow": "error",
     "key-spacing": ["error", {
       "beforeColon": false,
       "afterColon": true
+    }],
+    "react/jsx-tag-spacing": ["error", {
+      "beforeSelfClosing": "always"
+    }],
+    "require-jsdoc": ["error", {
+      "require": {
+        "FunctionDeclaration": true,
+        "MethodDefinition": true,
+        "ClassDeclaration": true,
+        "ArrowFunctionExpression": true
+      }
     }]
   }
 }
diff --git a/example-templates/basic.html b/example-templates/basic.html
@@ -10,6 +10,15 @@
   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
   <script>/*global hljs*/ hljs.initHighlightingOnLoad();</script>
 </head>
+<style>
+.example-block {
+  padding: 20px;
+}
+.example-block > span {
+  margin-right: 10px;
+}
+</style>
+
 <body>
   <h2>{{ title }}</h2>
   <div id="exampleContainer" class="app"></div>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-geo",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "description": "A set of geo related modules. To use in combination with react, antd and ol.",
   "license": "BSD-2-Clause",
   "author": "terrestris GmbH & Co. KG <info@terrestris.de>",
@@ -39,6 +39,7 @@
     "type": "git",
     "url": "https://github.com/terrestris/react-geo.git"
   },
+  "main": "dist/index.js",
   "files": [
     "dist"
   ],
@@ -53,15 +54,18 @@
     "build:examples": "rimraf ./build/examples/* && node tasks/build-examples.js && webpack --config webpack.examples.config.js",
     "build:docs": "jsdoc --package ./package.json --readme ./README.md -c .jsdoc",
     "build:js": "webpack --config webpack.development.config.js && webpack -p --config webpack.production.config.js",
-    "build": "npm run test && npm run build:examples && npm run build:docs && npm run build:js"
+    "build:dist": "BABEL_ENV=build babel src -d dist",
+    "build": "npm run test && npm run build:examples && npm run build:docs && npm run build:js && npm run build:dist"
   },
   "dependencies": {
     "antd": "2.12.8",
     "lodash": "4.17.4",
     "loglevel": "1.4.1",
     "ol": "4.3.2",
+    "prop-types": "15.5.10",
     "react": "15.6.1",
-    "react-dom": "15.6.1"
+    "react-dom": "15.6.1",
+    "react-fa": "4.2.0"
   },
   "devDependencies": {
     "babel-cli": "6.26.0",
@@ -70,6 +74,7 @@
     "babel-loader": "7.1.2",
     "babel-plugin-import": "1.4.0",
     "babel-plugin-istanbul": "4.1.4",
+    "babel-plugin-transform-import-extension-jsx-to-js": "0.1.0",
     "babel-polyfill": "6.26.0",
     "babel-preset-es2015": "6.24.1",
     "babel-preset-react": "6.24.1",
@@ -79,6 +84,7 @@
     "enzyme": "2.9.1",
     "eslint": "4.6.1",
     "eslint-plugin-html": "3.2.1",
+    "css-loader": "0.28.7",
     "eslint-plugin-markdown": "1.0.0-beta.7",
     "eslint-plugin-react": "7.3.0",
     "expect.js": "0.3.1",
@@ -109,6 +115,7 @@
     "rimraf": "2.6.1",
     "sinon": "3.2.1",
     "style-loader": "0.18.2",
+    "url-loader": "0.5.9",
     "webpack": "3.5.5",
     "webpack-dev-server": "2.7.1",
     "whatwg-fetch": "2.0.3"

diff --git a/src/Button/SimpleButton/SimpleButton.example.jsx b/src/Button/SimpleButton/SimpleButton.example.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { render } from 'react-dom';
+import SimpleButton from './SimpleButton.jsx'; //@react-geo@
+
+render(
+  <div>
+    <div className="example-block">
+      <span>Just a SimpleButton:</span>
+
+      {/* A SimpleButton without any configuration*/}
+      <SimpleButton />
+
+    </div>
+    <div className="example-block">
+      <span>Tooltip:</span>
+
+      {/* A SimpleButton with a tooltip and a tooltipPlacement*/}
+      <SimpleButton
+        tooltip="bottom tooltip"
+        tooltipPlacement="bottom"
+      />
+
+    </div>
+    <div className="example-block">
+      <span>Icon:</span>
+
+      {/* A SimpleButton with an icon. Just use the font-awesome name.*/}
+      <SimpleButton
+        icon="bullhorn"
+      />
+
+    </div>
+  </div>,
+  document.getElementById('exampleContainer')
+);
diff --git a/src/Button/SimpleButton/SimpleButton.example.md b/src/Button/SimpleButton/SimpleButton.example.md
@@ -0,0 +1,9 @@
+---
+layout: basic.html
+title: SimpleButton example
+description: This is a example using an SimpleButton.
+collection: Examples
+---
+
+This demonstrates the use of SimpleButtons. Please have a look at [https://ant.design/components/button/](https://ant.design/components/button/)
+for more documentation and examples.
diff --git a/src/Button/SimpleButton/SimpleButton.jsx b/src/Button/SimpleButton/SimpleButton.jsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button,
+  Tooltip
+} from 'antd';
+import { Icon } from 'react-fa';
+
+import Logger from '../../Util/Logger';
+
+import './SimpleButton.less';
+
+/**
+ * The SimpleButton.
+ *
+ * @class The SimpleButton
+ * @extends React.Component
+ */
+class SimpleButton extends React.Component {
+
+  /**
+   * The properties.
+   * @type {Object}
+   */
+  static propTypes = {
+    icon: PropTypes.string,
+    fontIcon: PropTypes.string,
+    shape: PropTypes.string,
+    size: PropTypes.string,
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func,
+    tooltip: PropTypes.string,
+    tooltipPlacement: PropTypes.string
+  };
+
+  /**
+   * The default properties.
+   * @type {Object}
+   */
+  static defaultProps = {
+    type: 'primary',
+    icon: '',
+    shape: 'circle',
+    size: 'default',
+    disabled: false
+  }
+
+  /**
+   * Create the SimpleButton.
+   *
+   * @constructs SimpleButton
+   */
+  constructor(props) {
+    super(props);
+  }
+
+  /**
+   * Handles the given click callback.
+   */
+  onClick = () => {
+    if (this.props.onClick) {
+      this.props.onClick();
+    } else {
+      Logger.debug('No onClick method given. Please provide it as ' +
+          'prop to this instance.');
+    }
+  }
+
+  /**
+   * The render function.
+   */
+  render() {
+    const {
+      tooltip,
+      tooltipPlacement,
+      icon,
+      fontIcon,
+      ...antBtnProps
+    } = this.props;
+
+    return (
+      <Tooltip
+        title={tooltip}
+        placement={tooltipPlacement}
+      >
+        <Button
+          className="btn-simple"
+          onClick={this.onClick}
+          {...antBtnProps}
+        >
+          <Icon
+            name={icon}
+            className={fontIcon}
+          />
+        </Button>
+      </Tooltip>
+    );
+  }
+}
+
+export default SimpleButton;
diff --git a/src/Button/SimpleButton/SimpleButton.less b/src/Button/SimpleButton/SimpleButton.less
@@ -0,0 +1,22 @@
+@import '../../style/variables.less';
+
+.btn-simple {
+  color: #fff;
+  background-color: @primary-color;
+  border-color: @primary-color;
+
+  &:focus{
+    background-color: lighten(@primary-color, 10);
+    border-color: lighten(@component-background, 10);
+  }
+
+  &:hover {
+    background-color: lighten(@primary-color, 10);
+    border-color: lighten(@component-background, 10);
+  }
+
+  &:disabled {
+    background-color: @component-background;
+    border-color: darken(@component-background, 10);
+  }
+}
diff --git a/src/Button/SimpleButton/SimpleButton.spec.jsx b/src/Button/SimpleButton/SimpleButton.spec.jsx
@@ -0,0 +1,68 @@
+/*eslint-env mocha*/
+import expect from 'expect.js';
+import sinon from 'sinon';
+
+import TestUtils from '../../Util/TestUtils';
+import Logger from '../../Util/Logger';
+
+import SimpleButton from './SimpleButton.jsx';
+
+describe('<SimpleButton />', () => {
+  it('is defined', () => {
+    expect(SimpleButton).not.to.be(undefined);
+  });
+
+  it('can be rendered', () => {
+    const wrapper = TestUtils.mountComponent(SimpleButton);
+    expect(wrapper).not.to.be(undefined);
+  });
+
+  it('allows to set some props', () => {
+    const wrapper = TestUtils.mountComponent(SimpleButton);
+
+    wrapper.setProps({
+      type: 'secondary',
+      icon: 'bath',
+      shape: 'circle',
+      size: 'small',
+      disabled: true
+    });
+
+    expect(wrapper.props().type).to.equal('secondary');
+    expect(wrapper.props().icon).to.equal('bath');
+    expect(wrapper.props().shape).to.equal('circle');
+    expect(wrapper.props().size).to.equal('small');
+    expect(wrapper.props().disabled).to.equal(true);
+
+    expect(wrapper.find('button.ant-btn-secondary').length).to.equal(1);
+    expect(wrapper.find('span.fa-bath').length).to.equal(1);
+    expect(wrapper.find('button.ant-btn-circle').length).to.equal(1);
+    expect(wrapper.find('button.ant-btn-sm').length).to.equal(1);
+    expect(wrapper.find({disabled: true}).length).to.equal(1);
+  });
+
+  it('warns if no click callback method is given', () => {
+    const wrapper = TestUtils.mountComponent(SimpleButton);
+    const logSpy = sinon.spy(Logger, 'debug');
+
+    wrapper.find('button').simulate('click');
+
+    expect(logSpy).to.have.property('callCount', 1);
+
+    Logger.debug.restore();
+  });
+
+  it('calls a given click callback method onClick', () => {
+    const wrapper = TestUtils.mountComponent(SimpleButton);
+    const onClick = sinon.spy();
+
+    wrapper.setProps({
+      onClick: onClick
+    });
+
+    wrapper.find('button').simulate('click');
+
+    expect(onClick).to.have.property('callCount', 1);
+  });
+
+});
diff --git a/src/Button/ToggleButton/ToggleButton.example.jsx b/src/Button/ToggleButton/ToggleButton.example.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { render } from 'react-dom';
+import ToggleButton from './ToggleButton.jsx'; //@react-geo@
+
+render(
+  <div>
+    <div className="example-block">
+      <span>Just a ToggleButton:</span>
+
+      {/* A ToggleButton without any configuration*/}
+      <ToggleButton />
+
+    </div>
+
+    <div className="example-block">
+      <span>Initialy pressed ToggleButton:</span>
+
+      {/* A ToggleButton without any configuration*/}
+      <ToggleButton
+        pressed={true}
+      />
+
+    </div>
+
+    <div className="example-block">
+      <span>pressedIcon:</span>
+
+      {/* A ToggleButton with an icon and a pressedIcon*/}
+      <ToggleButton
+        icon="frown-o"
+        pressedIcon="smile-o"
+      />
+
+    </div>
+
+  </div>,
+  document.getElementById('exampleContainer')
+);