Document usage of the three components

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## v.2.0.3
+## v.2.0.4
 * Document and refactor internally.
 * Deprecate `text` prop in favor of `children`
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ffe-spinner-react",
-  "version": "2.0.3",
-  "author": "Sparebank 1",
+  "version": "2.0.4",
+  "author": "SpareBank 1",
   "main": "lib/index.js",
   "scripts": {
     "build": "babel -d lib/. --ignore=*.test.js src/.",

src/InlineSpinner.md

@@ -0,0 +1,8 @@
+# Inline spinner
+
+Brukes inline med tekst eller små komponenter for å vise at man venter på ekstern data. Et
+eksempel kan være en nedtrekksliste som henter valgene sine fra en server.
+
+```js
+<InlineSpinner /> Vennligst vent litt
+```

src/LargeSpinner.md

@@ -0,0 +1,8 @@
+# Stor inline spinner
+
+Brukes med større komponenter for å vise at man venter på ekstern data. Et
+eksempel kan være en graf som venter på data fra en server før den kan rendres.
+
+```js
+<LargeSpinner>Vennligst vent litt</LargeSpinner>
+```

src/Spinner.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { bool, node } from 'prop-types'
+import { bool, node } from 'prop-types';
 
 const Spinner = ({ text, children, large = false, center = true }) => (
     <div className={ `ffe-content-container ${ !center ? 'ffe-content-container--text-left' : '' }` }>

src/Spinner.md

@@ -0,0 +1,25 @@
+# Spinner
+
+En selvstendig komponent for å vise at man venter på innholdet siden avhenger av.
+
+```js
+<Spinner />
+```
+
+Den kan ha en tekst under seg som forklarer ventetiden:
+
+```js
+<Spinner>Kalkulerer pris...</Spinner>
+```
+
+Den kan være venstrestilt:
+
+```js
+<Spinner center={false} />
+```
+
+Den kan være stor:
+
+```js
+<Spinner large={true} />
+```