initial commit

SpareBank1 · Aug 30, 2016 · ff19ef8 · ff19ef8
1 parent e613992
commit ff19ef8
Show file tree

Hide file tree

Showing 21 changed files with 417 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,15 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.less]
+indent_style = space
+indent_size = 4
+
+[package.json]
+indent_style = space
+indent_size = 2
diff --git a/.gemini.yml b/.gemini.yml
@@ -0,0 +1,16 @@
+rootUrl: ***REMOVED***
+gridUrl: 'overidden by test script to point towards dockerized browser'
+screenshotsDir: './visual-tests/baseline-screenshots'
+browsers:
+  firefox-small:
+    windowSize: 479x1
+    desiredCapabilities:
+      browserName: firefox
+  firefox-medium:
+    windowSize: 767x1
+    desiredCapabilities:
+      browserName: firefox
+  firefox-large:
+    windowSize: 1023x1
+    desiredCapabilities:
+      browserName: firefox
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+* text=auto
+*.less text eol=lf
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,45 @@
+examples/examples.css
+gemini-report
+.idea
+*.iml
+*.swp
+example/fonts
+example.css
+target
+
+# 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
diff --git a/.npmignore b/.npmignore
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+git-tag-version=false
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/README.md b/README.md
@@ -1 +1,44 @@
 # ffe-tables
+
+Pakken inneholder styling til ffe-tables
+
+## Bruke
+ffe-tables har en peerDependency på ffe-core
+
+```
+$ npm install --save-dev ffe-core ffe-tables
+```
+ffe-tables brukes på samme måte som ffe-core. Importer `ffe-tables/less/tables.less` for å ta i bruk alle listene.
+
+## Screenshot
+![icons](visual-tests/baseline-screenshots/example/plain/firefox-large.png)
+
+## Utvikling
+
+
+For å teste endringer i en reell app lokalt kan man kjøre i dette prosjektes mappe:
+
+```
+sudo npm link
+```
+
+Og i prosjektet som skal bruke endringene gjort lokalt kan man kjøre:
+
+```
+npm link ffe-tables
+```
+
+Når endringene dine er gjort må du oppdatere de visuelle regresjonstestene. Dette krever at Docker og
+[Gemini](https://github.com/gemini-testing/gemini) er installert på din maskin:
+
+```
+./update_visual_regression_test_baseline.sh
+```
+
+Verifiser ved å kjøre testene:
+
+```
+./run_visual_regression_test.sh
+```
+
+Commit endringene med oppdaterte baselines og lag en pull request.
diff --git a/build.sh b/build.sh
@@ -0,0 +1,3 @@
+#!/bin/bash -e
+
+npm install
diff --git a/example/example.html b/example/example.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no" />
+    <title>ffe-tables</title>
+    <link href="example.css" rel="stylesheet" type="text/css">
+</head>
+
+<body class="ffe-body-text">
+    <div class="ffe-section-wrapper">
+        <div class="ffe-content-container">
+            <h1 class="ffe-h1">Tabeller</h1>
+        </div>
+
+        <div id="ffedoc">
+            <div class="ffe-content-container ffe-content-container--text-left">
+                <h2 class="ffe-h2">Responsiv tabell</h2>
+                <table class="ffe-responsive-table">
+                    <thead>
+                        <tr>
+                            <th><span class="ffe-h4">Type</span></th>
+                            <th><span class="ffe-h4">Byggeår</span></th>
+                            <th><span class="ffe-h4">Bruttoareal</span></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td data-th="Type">
+                                <div class="ffe-responsive-table__content">Carport</div>
+                            </td>
+                            <td data-th="Byggeår">
+                                <div class="ffe-responsive-table__content">1985</div>
+                            </td>
+                            <td data-th="Bruttoareal">
+                                <div class="ffe-responsive-table__content">20</div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td data-th="Type">
+                                <div class="ffe-responsive-table__content">Uthus (uisolert)</div>
+                            </td>
+                            <td data-th="Byggeår">
+                                <div class="ffe-responsive-table__content">1990</div>
+                            </td>
+                            <td data-th="Bruttoareal">
+                                <div class="ffe-responsive-table__content">12</div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td data-th="Type">
+                                <div>Annen type bygning (uisolert)</div>
+                            </td>
+                            <td data-th="Byggeår">
+                                <div>2005</div>
+                            </td>
+                            <td data-th="Bruttoareal">
+                                <div>45</div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/example/example.less b/example/example.less
@@ -0,0 +1,4 @@
+@import "../node_modules/ffe-core/less/ffe";
+@import "../less/tables";
+
+@base-url: ".";
diff --git a/flow.sh b/flow.sh
@@ -0,0 +1,42 @@
+#!/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
+        bob ci job build --jobname ffe-design-system_build_deploy
+    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
diff --git a/less/responsive-table.less b/less/responsive-table.less
@@ -0,0 +1,86 @@
+.ffe-responsive-table {
+    margin: 20px 0;
+    min-width: 100%;
+    text-align: left;
+
+    > caption {
+        &:extend(.ffe-h4);
+    }
+
+    > thead {
+        display: none;
+
+        @media (min-width: @breakpoint-md) {
+            display: table-header-group;
+        }
+    }
+
+    > tfoot {
+        border-top: 2px solid @ffe-blue-royal;
+    }
+
+    > thead > tr,
+    > tbody > tr,
+    > tfoot > tr {
+        border-bottom: 1px solid @ffe-grey-light;
+        display: block;
+        padding: 10px 0;
+
+        @media (min-width: @breakpoint-md) {
+            display: table-row;
+        }
+    }
+
+    > thead > tr > th,
+    > tbody > tr > th,
+    > tfoot > tr > th {
+        &:extend(.ffe-strong-text);
+        text-align: left;
+    }
+
+    > tbody > tr > td,
+    > tfoot > tr > td {
+        display: block;
+    }
+
+    &__content {
+        display: inline-block;
+        vertical-align: top;
+        max-width: ~"calc(100% - 105px)";
+
+        @media (min-width: @breakpoint-md) {
+            display: block;
+            max-width: none;
+        }
+    }
+
+    > tbody > tr > [data-th]:before,
+    > tfoot > tr > td:before {
+        content: attr(data-th); // who knew you could do this? The internet, that's who.
+        width: 100px;
+        display: inline-block;
+        &:extend(.ffe-strong-text);
+
+        @media (min-width: @breakpoint-md) {
+            display: none;
+        }
+    }
+
+    &--small-header > tbody > tr > [data-th]:before,
+    &--small-header > tfoot > tr > td:before {
+        width: 65px;
+    }
+
+    > thead > tr > th,
+    > thead > tr > td,
+    > tbody > tr > th,
+    > tbody > tr > td,
+    > tfoot > tr > th,
+    > tfoot > tr > td {
+
+        @media (min-width: @breakpoint-md) {
+            display: table-cell;
+            padding: 10px;
+        }
+    }
+}
diff --git a/less/tables.less b/less/tables.less
@@ -0,0 +1 @@
+@import 'responsive-table';
diff --git a/package.json b/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "ffe-tables",
+  "version": "1.0.0",
+  "main": "less/tables.less",
+  "scripts": {
+    "compile": "npm run lint && lessc example/example.less example/example.css && cp -R node_modules/ffe-core/fonts/ example/fonts/ && echo \"$(date +%T): Updated example\"",
+    "lint": "lessc --lint example/example.less",
+    "start": "opn examples/examples.html & watch \"npm run -s compile\" less/",
+    "test:nsp": "nsp check",
+    "test": "npm run lint && npm run test:nsp",
+    "has-published": "npm show . versions -s | grep -q ${npm_package_version}",
+    "preversion": "npm run lint"
+  },
+  "repository": {
+    "type": "git",
+    "url": "***REMOVED***"
+  },
+  "homepage": "***REMOVED***",
+  "documentation": [
+    {
+      "type": "html",
+      "file": "example/example.html",
+      "select": "#ffedoc"
+    },
+    {
+      "type": "markdown",
+      "file": "README.md"
+    }
+  ],
+  "devDependencies": {
+    "ffe-core": "^7.0.1",
+    "ffe-visual-tests-support": "1.0.1",
+    "gemini": "4.3.0",
+    "less": "^2.7.1",
+    "nsp": "^2.2.0",
+    "opn-cli": "^3.1.0",
+    "watch": "^0.19.2"
+  },
+  "peerDependencies": {
+    "ffe-core": "7.x"
+  },
+  "publishConfig": {
+    "registry": "***REMOVED***"
+  },
+  "files": [
+    "less"
+  ],
+  "author": "SpareBank1",
+  "license": "UNLICENSED"
+}
diff --git a/run_visual-tests.sh b/run_visual-tests.sh
@@ -0,0 +1,7 @@
+#!/bin/bash
+
+source node_modules/ffe-visual-tests-support/run_gemini_command.lib
+
+rm -rf gemini-report/
+
+run_gemini_command test  --reporter html --reporter flat