Update README, CONTRIBUTE, CHANGELOG, and scripts

Adds "start", "test:nsp", and more

.npmrc

@@ -1 +1,2 @@
 git-tag-version=false
+registry=***REMOVED***

CHANGELOG.md

@@ -22,6 +22,88 @@
 * Cleaned up example files. Removed navigation, javascript and unused styling.
 * Added a description for migrating to v8.0.0
 
+### Migrating to v.8.0.0
+
+_ffe-core_ has been split in several packages, and a few things have been removed.
+
+#### Installing the latest FFE
+
+To upgrade from 7.x you will need to install these packages:
+
+```bash
+$ npm install --save ffe-core ffe-buttons ffe-form ffe-lists ffe-tables ffe-tabs ffe-spinner
+```
+
+Remember to also update your Less imports
+(example below is given [less-plugin-npm-import](https://github.com/less/less-plugin-npm-import) is used):
+
+```less
+@import "npm://ffe-core/less/ffe";
+@import "npm://ffe-buttons/less/buttons";
+@import "npm://ffe-form/less/form";
+@import "npm://ffe-lists/less/lists";
+@import "npm://ffe-tables/less/tables";
+@import "npm://ffe-tabs/less/tabs";
+@import "npm://ffe-spinner/less/spinner";
+```
+
+#### Other breaking changes
+
+`ffe-info-message` has been renamed to `ffe-field-info-message` (in `ffe-form`)
+`ffe-info-message--error` is now `ffe-field-error-message`
+`ffe-info-message--success` is now `ffe-field-success-message`
+
+`ffe-clearfix` has been removed, which has consequences for `ffe-section-wrapper`.
+
+If your design is dependent on the clearfix you must add it to your project yourself:
+
+ ```less
+ /* In your Less, after importing ffe-core */
+ .ffe-section-wrapper {
+     &:before,
+     &:after {
+         display: table;
+         content: "";
+     }
+     &:after {
+         clear: both;
+     }
+ }
+ ```
+
+`ffe-button-group` was removed, but has been reintroduced in `ffe-buttons@2.1.0`.
+
+If you want to keep using it and don't plan on upgrading to `ffe-buttons@2.1.0` soon you can add the following to your project:
+
+```less
+.ffe-button-group {
+    padding: 40px 0;
+
+    &--thin {
+        padding: 0;
+    }
+}
+
+.ffe-button-group [class^="ffe-"][class$="-button"] {
+    margin: 0 auto 10px;
+
+    @media screen and (min-width: @breakpoint-sm) {
+        display: inline-block;
+        margin: 0 0 10px 10px;
+        width: auto;
+
+        &:first-child {
+            margin-left: 0;
+        }
+    }
+}
+```
+
+#### "Gotchas"
+
+* `ffe-tab-button` is in `ffe-tabs`, not `ffe-buttons`
+
+
 ## v.7.0.1
 * Minor fix: make button texts of loading buttons unselectable, the text is only of interest for
   screen readers and ought to remain invisible under all circumstances.

CONTRIBUTE.md

@@ -1,20 +1,83 @@
 # Contribute
+
 Det er viktig for oss at våre forskjellige team bidrar til å utvikle og vedlikeholde FFE. Det hjelper bl.a. med å sikre
 at frontenden til løsningene er levende og i sync på tvers av løsninger i vårt økosystem.
 
-## Pull Requests
-* Gjøres mot master.
+## TL;DR
+
+* Klon (ikke fork) repoet
+* Branch fra `master`
+* Gjør endringen, kjør tester, og oppdater visuelle testers baseline om det trengs
 * Oppdater `CHANGELOG.md`
-* Oppdater versjonsnummeret i package.json ifølge SemVer (dette trigger en publisering av pakken ved bygg når branchen er merget).
+* Oppdater versjonsnummeret i `package.json`. Følg SemVer.
+* Squash alle commits til én enkelt commit.
+* Lag en PR fra feature/bugfix-branch til `master`
 * Legg til et godt antall reviewers som har vært involvert i koden du endrer eller som bør ha en mening om den.
-* Squash alle commits til en enkelt commit.
 * Sørg for at branchen bygger grønt før merge.
+    [Jenkins bygger automatisk feature branches](***REMOVED***_BUILDS-ALL-BRANCHES/)
+    i FFE-repoet (derfor viktig at det ikke forkes, så Jenkins finner branchen)
+* Merge til `master`. Dersom `package.json` har en ny versjon publiserer
+    [Jenkins](***REMOVED***_master/) pakken til Nexus.
+
+## Hvordan lage en ny feature eller bugfix
+
+Start ved å klone repositoriet. Det er viktig at du _ikke forker_ repoet for at endringen enkelt skal kunne merges inn senere.
+Når repoet er klonet må du kjøre `$ npm install`.
+
+```
+$ git clone ***REMOVED***
+$ cd ffe-core/
+$ npm install
+$ npm start
+```
+
+Branch ut fra master og gi branchen et beskrivende navn:
+
+```
+$ git checkout -b feature/unicorn-factory
+$ git checkout -b bugfix/you-saw-nothing
+```
+
+Gjør endringen din og bekreft at den fungerer på eksempelsiden. Kjør også testene lokalt før du lager en pull request.
+
+Det finnes et utility-script som bygger og kjører testene for deg: `./build.sh`
+
+Om endringen krever en ny versjon av pakken på Nexus oppdaterer du versjonen i `package.json` i henhold til [Semantic Versioning (SemVer)](http://semver.org/):
+
+Kort fortalt:
+
+    * Bugfixer er PATCH
+    * Nye features er MINOR
+    * En breaking change (endret klassenavn og liknende) er MAJOR
+
+Oppdater `CHANGELOG.md` dersom endringen vil lage en ny versjon av pakken. Ved en MAJOR, skriv hvilke endringer en konsument må gjøre for å oppgradere.
+
+### Visuell regresjonstestning
+
+Det utføres visuell regresjonstestning på Jenkins med Gemini.
+
+Ved endringer som gjør at testene feiler må det aktuelle baseline-screenshotet oppdateres. Dette gjøres med scriptet `./update_visual-tests-baselines.sh`.
+
+## Utviklermiljø
+
+Om du vil finnes det et ferdig miljø med alle avhengiheter satt opp som enkelt kan startes med Vagrant:
+
+[vagrant-dev](***REMOVED***)
+
+De visuelle testene (Gemini) bruker native-moduler, så miljøet du bruker må ha g++-compiler tilgjengelig før du kjører testene:
+
+SpareBank1s RHEL-baserte utviklerplatform:
+
+`$ sudo yum install gcc-c++`
+
+Legacy Ubuntu-basert virtuell utviklerplatform:
+
+`$ sudo apt-get install -y g++`
+
+Du vil så klart også trenge Node og NPM installert.
 
-## Publisering
-Projektet publiseres til Nexus av byggserver ved bygg av master-branchen dersom versjonsnummeret i `package.json` ikke
-er publisert tidligere.
+## Tidligere releaseprosedyrer
 
-## Tidligere release prosedyrer
 Tidligere laget vi en egen pull request for å publisere ny versjon. Dette erfarte vi som problematisk da det til tider
 ble laget en "backlog" av ikke-publiserte endringer på master. De som da publiserte pakken var ikke godt nok kjent med
 tidligere endringer til å ta en god avgjørelse på versjonsnummer (major, minor, patch?). Ulempen med ny release-prosedyre

README.md

@@ -1,89 +1,82 @@
-# Felles Front End Framework
-Inneholder generell styling for bruk utenom komponenter. F.eks. typografi, knapper, farger, o.l. Vi følger
-[BEM](https://en.bem.info/) for å sørge for god organisasjon av CSS-koden.
+# Felles Frontend
 
-FFE ivaretar fargekontrastkravene som spesifisert i WCAG 2.0-standarden (AA-nivå).
+Felles frontend (FFE) inneholder Less og JavaScript for felles bruk.
 
-Nettleser som ikke støttes av FFE:
+**ffe-core** inneholder Less som er felles for alle delte komponenter i FFE - for eksempel
+typografi, farger, og liknende.
 
- * Internet Explorer 8 og tidligere; Internet Explorer 9 kan brukes, men begrensede visuelle avvik må aksepteres.
- * Android Browser-versjoner tidligere enn 4.4
+## TL;DR
 
-## Kom i gang
-Konfigurer npm til å bruke SB1's lokale og private repo (proxy med cache til NPM public).
-
-    npm set registry ***REMOVED***
-
-Installer som vanlig
-
-    npm install ffe-core --save-dev
+```
+$ npm install --save ffe-core
+$ npm install --save-dev less less-plugin-npm-import    # less-plugin er valgfri, men forenkler imports
+```
 
-## Migrering til v.8.0.0
+```less
+/* Ditt prosjekts .less */
+@import "npm://ffe-core/less/ffe";                      // med less-plugin
+@import "../path/to/node_modules/ffe-core/less/ffe";    // uten less-plugin
 
-I versjon 8.0.0 ble det gjort en større job ved å splitte ffe-core opp i mindre pakker. For å få samme styling som før 8.0.0 må man ha følgende pakker som en dependency.
+/* FFE trenger at det er definert en konstant 'base-url'. Denne må inneholde rot-pathen i appens URL */
+/* FFEs fonter må kopieres til en mappe 'fonts' som publiseres på denne pathen, f.eks. /privat/forsikring/fonts */
+@base-url: '/privat/forsikring/';
 
-```
-ffe-core
-ffe-buttons
-ffe-form
-ffe-lists
-ffe-tables
-ffe-tabs
-ffe-spinner
+/* Om du vil ha element styling finnes det en annen import */
+/* Det anbefales ikke å bruke denne siden det kan skape problemer med andre CSS-regler */
+@import "npm://ffe-core/less/ffe-element-styling";
 ```
 
-Man må også legge til tilsvarende `@import`'s i .less for prosjektet.
+## Kom i gang med FFE
 
-## Bruk
-Modulen inneholder LESS-filer som kan importeres direkte fra node_modules til prosjektets CSS/LESS.
+Koden for FFE pakkes i flere forskjellige NPM-moduler som publiseres på et internt
+repository: [Nexus](***REMOVED***).
 
-### Import
-Anbefalt er å importere gatewayfilen som i sin tur importerar alle de andre filene. Det garanterer at prosjektet ditt følger den grafiske profilen til SpareBank 1.
+For å bruke Nexus i ditt prosjekt må du konfigurere NPM til ikke å gå mot det eksterne NPM registry.
 
-    @import ffe.less
+Det anbefales å opprette en `.npmrc` i hvert enkelt prosjekt og sjekke inn denne i Git så hvert
+teammedlem får riktig konfigurasjon:
 
-Hvis du ønsker styling på elementer (body, a, p, h1-h5, etc. Se `element-map.less`) så ær dette muligt  æven om det ikke rekommenderas.
+```
+# .npmrc
+registry=***REMOVED***
+```
 
-    @import ffe-element-styling.less
+Etter dette kan du gjøre `$ npm install` som vanlig.
 
-Det er også mulig å importere enkelte filer etter behov.
+For en fullstendig installasjon av stylingen i FFE må du installere flere pakker:
+
+```bash
+$ npm install --save ffe-core ffe-buttons ffe-form ffe-lists ffe-tables ffe-tabs ffe-spinner
+```
 
-    @import colors.less
-    @import radio-button.less
+For en fullstendig liste over tilgjengelige pakker i FFE, se
+[prosjektoversikten på Bitbucket](***REMOVED***)
 
-### Variabler
-Det er forventet at det defineres en LESS-variabel som inneholder rot-pathen til applikasjonen.
+## Bruk av FFEs pakker
 
-    @import ffe.less
-    @base-url: '/my-project/app/';
+Pakkene i FFE-prosjektet publiserer enten rå Less eller JavaScript ES2015 eller nyere.
+Enkelte komponenter inneholder React-komponenter med JSX-kode.
 
-### Fonts
-SpareBank 1's profil-font er også inkludert i OpenType format og må kopieres fra node_modules.
-Dette kan f.eks. gjøres via en Grunt task.
+Med andre ord vil du trenge ett eller flere byggsteg for å ta i bruk FFE, avhengig av hvilke pakker du vil bruke.
+Pakken du vil bruke har som oftest en fungerende konfigurasjon (for å kunne bygge eksempelsider) som du kan ta utgangspunkt i.
+Ellers kan du følge dokumentasjonen for de forskjellige verktøyene.
 
-    copy: {
-        fonts: {
-            files: [
-                { cwd: 'node_modules/ffe-core/fonts', expand: true, src: ['*.otf'], dest: 'app/open/fonts/' }
-            ]
-        }
-    }
+    * Kompilering av [Less](http://lesscss.org/)
+    * Transpilering av [ES2015+ til ES5](https://babeljs.io/)
+    * Kompilering av [JSX](https://facebook.github.io/react/)
 
-### Style guide
-Klargjør stilguide ved å kjøre følgende kommando:
+I koden vil du måtte `import`e Less og JavaScript fra de enkelte pakkene. Se pakkens README for hvordan dette bør gjøres.
 
-    npm run examples
+## Forvaltning av FFE
 
-## Visuell regressionstestning
-Det utførs visuell regressiontestning av stilguiden på byggserver med Gemini. Vid ændringar som medfør att testerna
-brekker måste det aktuella baseline-screenshotet uppdateras, detta gørs med `./update_visual-tests-baselines.sh`.
+Se [CONTRIBUTE.md](***REMOVED***) for hvordan du bidrar med features og bugfixes.
 
-Gemini bruker native-moduler varfør du bør ha g++-compiler tillgænglig innan du kør tester i detta paketet:
+Vi følger [BEM](https://en.bem.info/) for å sørge for god organisasjon av CSS-koden.
 
-SpareBank1:s RHEL-baserade utvecklingsplattform:
+FFE skal ivareta fargekontrastkravene som spesifisert i WCAG 2.0-standarden (AA-nivå).
 
-    $ sudo yum install gcc-c++
+Nettleser som _ikke_ støttes av FFE:
 
-Legacy Ubuntu-baserad virtuell utvecklingsmiljø:
+    * Internet Explorer 8 og tidligere; Internet Explorer 9 kan brukes, men begrensede visuelle avvik må aksepteres.
+    * Android Browser-versjoner tidligere enn 4.4
 
-    $ sudo apt-get install -y g++

build.sh

@@ -2,7 +2,7 @@
 
 main() {
     npm install
-    npm run examples
+    npm run compile
 
     rm -rf target/
     mkdir -p target/archive

package.json

@@ -5,9 +5,13 @@
   "less": "ffe.less",
   "main": "index.js",
   "scripts": {
-    "examples": "lessc --source-map-map-inline --source-map-less-inline examples/examples.less examples/examples.css && echo Now open /examples/index.html to see styleguide.",
-    "test": "npm run examples && ./run_visual-tests.sh",
-    "has-published": "npm show . versions -s | grep -q ${npm_package_version}"
+    "compile": "lessc examples/examples.less examples/examples.css && echo \"$(date +%T): Updated examples\"",
+    "lint": "lessc --lint examples/examples.less",
+    "start": "opn examples/colors.html & opn examples/layout.html & opn examples/typo.html & watch \"npm run -s compile\" less/",
+    "test": "npm run lint && npm run test:nsp && npm run compile && ./run_visual-tests.sh",
+    "test:nsp": "nsp check",
+    "has-published": "npm show . versions -s | grep -q ${npm_package_version}",
+    "preversion": "npm run lint"
   },
   "repository": {
     "type": "git",
@@ -38,8 +42,11 @@
   "author": "Glenn A. Brownlee <glenn.brownlee@sparebank1.no>",
   "license": "ISC",
   "devDependencies": {
+    "ffe-visual-tests-support": "1.0.1",
     "gemini": "4.3.0",
-    "less": "2.5.1",
-    "ffe-visual-tests-support": "1.0.1"
+    "less": "^2.7.1",
+    "nsp": "^2.6.1",
+    "opn-cli": "^3.1.0",
+    "watch": "^0.19.2"
   }
 }