Merge pull request SpareBank1#1 in FFE/ffe-spinner-react from add_the…

…_code to master

* commit '2438713b15e427b821abb3b8d17765b4e8c3be19':
  Add the code
  Generated sources.

.babelrc

@@ -0,0 +1,9 @@
+{
+    "presets": [
+        "es2015",
+        "react"
+    ],
+    "plugins": [
+        'transform-object-rest-spread'
+    ]
+}

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.js]
+indent_style = space
+indent_size = 4
+
+[*.{json,yml}]
+indent_style = space
+indent_size = 4

.eslintrc

@@ -0,0 +1,75 @@
+{
+    "env": {
+        "es6": true,
+        "browser": true,
+        "node": true,
+        "mocha": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "ecmaFeatures": {
+            "arrowFunctions": true,
+            "experimentalObjectRestSpread": true,
+            "jsx": true
+        },
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "arrow-spacing": 2,
+        "brace-style": [2, "1tbs", { "allowSingleLine": true }],
+        "block-scoped-var": 2,
+        "camelcase": 2,
+        "comma-style": [2, "last"],
+        "curly": [2, "multi-line"],
+        "jsx-quotes": [2, "prefer-double"],
+        "linebreak-style": [2,"unix"],
+        "no-caller": 2,
+        "no-cond-assign": [2, "except-parens"],
+        "no-console": 1,
+        "no-constant-condition": 1,
+        "no-debugger": 2,
+        "no-empty": 2,
+        "no-eval": 2,
+        "no-extend-native": 2,
+        "no-irregular-whitespace": 2,
+        "no-iterator": 2,
+        "no-loop-func": 2,
+        "no-multi-str": 2,
+        "no-multiple-empty-lines": [2, {"max": 3, "maxEOF": 1}],
+        "no-new": 2,
+        "no-proto": 2,
+        "no-script-url": 2,
+        "no-sequences": 2,
+        "no-undef": 2,
+        "no-unused-vars": [2, { "vars": "all", "args": "none" }],
+        "no-with": 2,
+        "object-curly-spacing": [2, "always"],
+        "semi": [2, "always"],
+        "keyword-spacing": [2, {"before": true, "after": true}],
+        "space-before-function-paren": [2, "never"],
+        "space-before-blocks": [2, "always"],
+        "strict": 2,
+        "valid-typeof": 2,
+        "react/jsx-curly-spacing": [2, "always"],
+        "react/jsx-boolean-value": 0,
+        "react/jsx-no-duplicate-props": 2,
+        "react/jsx-no-undef": 2,
+        "react/jsx-uses-react": 2,
+        "react/jsx-uses-vars": 2,
+        "react/no-danger": 2,
+        "react/no-did-update-set-state": 1,
+        "react/no-direct-mutation-state": 2,
+        "react/no-multi-comp": 1,
+        "react/no-unknown-property": 2,
+        "react/react-in-jsx-scope": 2,
+        "react/self-closing-comp": 2,
+
+        // new
+        "dot-notation": [2, { "allowKeywords": true }],
+        "quotes": [2, "single"]
+    }
+}

.gitattributes

@@ -0,0 +1,2 @@
+* text=auto
+*.js text eol=lf

.gitignore

@@ -0,0 +1,38 @@
+/lib
+# Created by https://www.gitignore.io/api/node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+

.npmrc

@@ -0,0 +1 @@
+git-tag-version=false

README.md

@@ -0,0 +1,86 @@
+# ffe-spinner-react
+
+## Install
+
+```
+$ npm install --save ffe-spinner-react
+```
+
+>`ffe-spinner-react` depends on `ffe-core` being present and imported in your project.
+>More specifically, the CSS classes related to spinner in ffe-core should be in your CSS Object Model when using this component.
+
+## Usage
+
+The default usage exposes a centered block-level spinner:
+
+```javascript
+import Spinner from 'ffe-spinner-react';
+
+<Spinner />
+```
+
+If you want to have a loading text you can supply that as well:
+
+```javascript
+<Spinner text="Loading..." />
+```
+
+>The text can either be a string, or a some other renderable node.
+
+In case you prefer to use children you can also do that:
+
+```javascript
+
+<Spinner>
+    Loading...
+</Spinner>
+```
+
+>The two examples above are functionally equivalent.
+
+If you want a left-aligned spinner, you can disable the centering:
+
+```javascript
+<Spinner center={ false } />
+```
+
+If you want a large spinner you can get that as well:
+
+```javascript
+<Spinner large={ true }/>
+```
+
+Using all of the settings:
+
+```javascript
+import Spinner from 'ffe-spinner-react';
+
+<Spinner center={ false } large={ true } text="Loading..." />
+```
+
+### LargeSpinner
+
+In case you want to be a bit more explicit when you use a large spinner, you can also use the `<LargeSpinner>` component:
+
+```javascript
+import { LargeSpinner } from 'ffe-spinner-react';
+
+<LargeSpinner center={ false } text="Loading..." />
+```
+
+It works exactly like `<Spinner>`, but without the `large` property.
+
+### InlineSpinner
+
+In case you need a non-block level spinner you can use `<InlineSpinner>`:
+
+```javascript
+import { InlineSpinner } from 'ffe-spinner-react';
+
+<div>
+    <InlineSpinner large={ true } /> Loading...
+</div>
+```
+
+The only property available here is `large`, which is defaulted to `false`. As it's an inline component, any loading text or
+suchlike has to be supplied outside of the component itself.

build.sh

@@ -0,0 +1,5 @@
+#!/bin/bash -e
+
+npm install
+npm test
+npm run lint

flow.sh

@@ -0,0 +1,41 @@
+#!/bin/bash
+
+# Makes functions inherit trap ERR
+set -E
+
+
+trap 'executionFailed ${LINENO}' ERR
+
+function main() {
+    ./build.sh
+
+    if should_publish; then
+        npm run has-published -s || npm publish
+    fi
+}
+
+function should_publish() {
+    [[ $GIT_BRANCH =~ ^(origin/)?master$ ]]
+}
+
+# Fail the build if someone tries to send it parameters since script doesn't handle params at the moment.
+if [ $# -ne 0 ] ; then
+    echo "Failed the build. flow.sh does not support input parameters. Input parameters were '$@'"
+    exit 1;
+fi
+
+function executionFailed() {
+   # Called when some command fail execution
+   local self=$(basename "$0")
+   local parent_lineno="$1"
+   local message="$2"
+   local resultCode="${3:-1}"
+   if [[ -n "$message" ]]; then
+       echo "${self}: Error on or near line ${parent_lineno}: ${message}; exiting with status ${resultCode}"
+   else
+       echo "${self}: Error on or near line ${parent_lineno}; exiting with status ${resultCode}"
+   fi
+   exit "${resultCode}"
+}
+
+main

package.json

@@ -0,0 +1,49 @@
+{
+  "name": "ffe-spinner-react",
+  "version": "1.0.0",
+  "author": "Sparebank 1",
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "babel -d lib/. --ignore=*.test.js src/.",
+    "lint": "eslint src/.",
+    "test:nsp": "nsp check",
+    "test:spec": "mocha --require babel-register --reporter mocha-tap13 src/**/*.test.js",
+    "test": "npm run test:spec && npm run test:nsp",
+    "prepublish": "npm run build",
+    "has-published": "npm show . versions -s | grep -q ${npm_package_version}"
+  },
+  "devDependencies": {
+    "eslint-plugin-react": "^4.2.2",
+    "react": "^15.0.0",
+    "react-addons-test-utils": "^15.0.0",
+    "enzyme": "^2.0.0",
+    "react-dom": "^15.0.0",
+    "babel-core": "^6.5.2",
+    "babel-plugin-transform-object-rest-spread": "^6.5.0",
+    "babel-cli": "^6.4.5",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.5.0",
+    "babel-register": "^6.4.3",
+    "chai": "^3.5.0",
+    "eslint": "^2.4.0",
+    "mocha": "^2.4.5",
+    "mocha-tap13": "0.0.3",
+    "nsp": "^2.2.0"
+  },
+  "peerDependencies": {
+      "ffe-core": "^5.5.3"
+  },
+  "publishConfig": {
+    "registry": "***REMOVED***"
+  },
+  "files": [
+    "lib",
+    "*.js"
+  ],
+  "babel": {
+    "presets": [
+      "react",
+      "es2015"
+    ]
+  }
+}

src/index.js

@@ -0,0 +1,6 @@
+import Spinner from './spinner';
+
+export { default as InlineSpinner } from './inline-spinner';
+export { default as LargeSpinner } from './large-spinner';
+export { Spinner };
+export default Spinner;

src/index.test.js

@@ -0,0 +1,25 @@
+import { expect } from 'chai';
+import DefaultSpinner, { Spinner, InlineSpinner, LargeSpinner } from './index';
+
+describe('entrypoint', () => {
+
+    it('shall export a default spinner', () => {
+        expect(DefaultSpinner).to.exist;
+    });
+
+    it('shall export a Spinner', () => {
+        expect(Spinner).to.exist;
+    });
+
+    it('shall export an InlineSpinner', () => {
+        expect(InlineSpinner).to.exist;
+    });
+
+    it('shall export a LargeSpinner', () => {
+        expect(LargeSpinner).to.exist;
+    });
+
+    it('shall export the default spinner as the same as Spinner', () => {
+        expect(DefaultSpinner).to.be.equal(Spinner);
+    });
+});

src/inline-spinner.jsx

@@ -0,0 +1,11 @@
+import React, { PropTypes } from 'react';
+
+const InlineSpinner = ({ large = false }) => (
+    <span className={ `ffe-loading-spinner ${ large ? 'ffe-loading-spinner--large' : '' }` } />
+);
+
+InlineSpinner.propTypes = {
+    large: PropTypes.bool
+};
+
+export default InlineSpinner;

src/inline-spinner.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+import InlineSpinner from './inline-spinner';
+
+describe('<InlineSpinner />', () => {
+
+    it('shall render a spinner span', () => {
+        const wrapper = shallow(<InlineSpinner />);
+        expect(wrapper.find('span.ffe-loading-spinner')).to.have.lengthOf(1);
+        expect(wrapper.find('span.ffe-loading-spinner--large')).to.have.lengthOf(0);
+    });
+
+    it('shall render a large spinner span', () => {
+        const wrapper = shallow(<InlineSpinner large={ true } />);
+        expect(wrapper.find('span.ffe-loading-spinner')).to.have.lengthOf(1);
+        expect(wrapper.find('span.ffe-loading-spinner--large')).to.have.lengthOf(1);
+    });
+});