FFE-31 Copied ffe-system-message

SpareBank1 · Nov 7, 2016 · 2dce795 · 2dce795
commit 2dce795
Show file tree

Hide file tree

Showing 15 changed files with 349 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+#IDEA
+*.iml
+
+#npm
+node_modules/
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,4 @@
+# CHANGELOG
+
+## Version 0.0.1
+First version. Ffe-system-message used as baseline.
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+# ffe-context-message
+
+## Intro
+
+System messages for SpareBank 1.
diff --git a/build.sh b/build.sh
@@ -0,0 +1,3 @@
+#!/bin/bash -e
+
+npm install
diff --git a/examples/examples.less b/examples/examples.less
@@ -0,0 +1,4 @@
+@import "../node_modules/ffe-core/less/ffe";
+@import "../less/ffe-context-message";
+
+@base-url: ".";
diff --git a/examples/ffe-context-message.html b/examples/ffe-context-message.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+    <head lang="no">
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Eksempelside for Systemmeldinger</title>
+        <link href="examples.css" rel="stylesheet" type="text/css">
+    </head>
+
+    <body class="ffe-body-text">
+        <h3 class="ffe-h4">Eksempler</h3>
+
+        <div class="example-container">
+            <h4 class="example-container__header">error</h4>
+            <div class="ffe-system-message-wrapper ffe-system-message-wrapper--error">
+                <div class="ffe-system-message ffe-content-container ffe-content-container--lg">
+                    <div class="ffe-system-message__icon">
+                        <svg class="" focusable="false" viewBox="0 0 200 200" width="150" height="150" x="1050"
+                             y="900" style="transform: rotateX(180deg);">
+                            <path d="M101.8 89.83h-3.575c-3.799 0-6.257 2.346-6.257 6.257v46.26c0 3.799 2.346 6.257 6.257 6.257h3.575c3.799 0 6.034-2.346 6.034-6.257v-46.26c0-3.911-2.235-6.257-6.034-6.257zM102.3 56.87h-4.693c-3.799 0-6.034 2.346-6.034 6.257v6.704c0 3.799 2.235 6.034 6.034 6.034h4.693c3.799 0 6.034-2.235 6.034-6.034v-6.704c0-3.911-2.235-6.257-6.034-6.257z"></path>
+                            <path d="M100 200C44.92 200 0 155.1 0 100 0 44.92 44.92 0 100 0c55.1 0 100 44.92 100 100s-44.92 100-100 100zm0-186.3c-47.6 0-86.26 38.66-86.26 86.26S52.4 186.22 100 186.22s86.26-38.66 86.26-86.26S147.6 13.7 100 13.7z"></path>
+                        </svg>
+                    </div>
+                    <p class="ffe-system-message__content">
+                        Vi opplever for tiden problemer med nettbank og kortbetaling.  Vi gir en lyd så snart dette er løst. Lom sociis natoque penatibus et magnis dis parturient monte.
+                    </p>
+                    <div class="ffe-system-message__close" role="button" aria-label="Lukk" tabindex="0">
+                        <svg class="" focusable="false" viewBox="0 0 200 200" width="150" height="150" x="1200"
+                             y="600">
+                            <path d="M18.77 0c-3.562 0-7.125 1.347-9.834 4.044L4.507 8.483c-5.381 5.394-5.381 14.25 0 19.68l71.19 71.83-71.66 71.83c-5.381 5.394-5.381 14.25 0 19.68l4.429 4.439c5.381 5.394 14.22 5.394 19.64 0l71.66-71.83 71.65 71.83c5.381 5.394 14.23 5.394 19.65 0l4.429-4.439c5.381-5.394 5.381-14.25 0-19.68l-71.19-71.83 71.66-71.83c5.381-4.914 5.381-13.78 0-19.21l-4.429-4.423c-5.381-5.394-14.22-5.394-19.64 0l-72.13 71.34-71.17-71.83c-2.691-2.697-6.257-4.044-9.819-4.044z"></path>
+                        </svg>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <div class="example-container">
+            <h4 class="example-container__header">info</h4>
+            <div class="ffe-system-message-wrapper ffe-system-message-wrapper--info">
+                <div class="ffe-system-message ffe-content-container ffe-content-container--lg">
+                    <div class="ffe-system-message__icon">
+                        <svg class="" focusable="false" viewBox="0 0 200 200" width="150" height="150" x="1050"
+                             y="900">
+                            <path d="M101.8 89.83h-3.575c-3.799 0-6.257 2.346-6.257 6.257v46.26c0 3.799 2.346 6.257 6.257 6.257h3.575c3.799 0 6.034-2.346 6.034-6.257v-46.26c0-3.911-2.235-6.257-6.034-6.257zM102.3 56.87h-4.693c-3.799 0-6.034 2.346-6.034 6.257v6.704c0 3.799 2.235 6.034 6.034 6.034h4.693c3.799 0 6.034-2.235 6.034-6.034v-6.704c0-3.911-2.235-6.257-6.034-6.257z"></path>
+                            <path d="M100 200C44.92 200 0 155.1 0 100 0 44.92 44.92 0 100 0c55.1 0 100 44.92 100 100s-44.92 100-100 100zm0-186.3c-47.6 0-86.26 38.66-86.26 86.26S52.4 186.22 100 186.22s86.26-38.66 86.26-86.26S147.6 13.7 100 13.7z"></path>
+                        </svg>
+                    </div>
+                    <p class="ffe-system-message__content">
+                        Her kan det stå en nyhet eller informasjon som ikke er kritisk. Maecenas sed diam eget risus varius blandit sit ame.
+
+                    </p>
+                    <div class="ffe-system-message__close" role="button" aria-label="Lukk" tabindex="0">
+                        <svg class="" focusable="false" viewBox="0 0 200 200" width="150" height="150" x="1200"
+                             y="600">
+                            <path d="M18.77 0c-3.562 0-7.125 1.347-9.834 4.044L4.507 8.483c-5.381 5.394-5.381 14.25 0 19.68l71.19 71.83-71.66 71.83c-5.381 5.394-5.381 14.25 0 19.68l4.429 4.439c5.381 5.394 14.22 5.394 19.64 0l71.66-71.83 71.65 71.83c5.381 5.394 14.23 5.394 19.65 0l4.429-4.439c5.381-5.394 5.381-14.25 0-19.68l-71.19-71.83 71.66-71.83c5.381-4.914 5.381-13.78 0-19.21l-4.429-4.423c-5.381-5.394-14.22-5.394-19.64 0l-72.13 71.34-71.17-71.83c-2.691-2.697-6.257-4.044-9.819-4.044z"></path>
+                        </svg>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="example-container">
+            <h4 class="example-container__header">news</h4>
+            <div class="ffe-system-message-wrapper ffe-system-message-wrapper--news">
+                <div class="ffe-system-message ffe-content-container ffe-content-container--lg">
+                    <div class="ffe-system-message__icon">
+                        <svg class="" focusable="false" viewBox="0 0 200 200" width="150" height="150" x="1050"
+                             y="900">
+                            <path d="M101.8 89.83h-3.575c-3.799 0-6.257 2.346-6.257 6.257v46.26c0 3.799 2.346 6.257 6.257 6.257h3.575c3.799 0 6.034-2.346 6.034-6.257v-46.26c0-3.911-2.235-6.257-6.034-6.257zM102.3 56.87h-4.693c-3.799 0-6.034 2.346-6.034 6.257v6.704c0 3.799 2.235 6.034 6.034 6.034h4.693c3.799 0 6.034-2.235 6.034-6.034v-6.704c0-3.911-2.235-6.257-6.034-6.257z"></path>
+                            <path d="M100 200C44.92 200 0 155.1 0 100 0 44.92 44.92 0 100 0c55.1 0 100 44.92 100 100s-44.92 100-100 100zm0-186.3c-47.6 0-86.26 38.66-86.26 86.26S52.4 186.22 100 186.22s86.26-38.66 86.26-86.26S147.6 13.7 100 13.7z"></path>
+                        </svg>
+                    </div>
+                    <p class="ffe-system-message__content">
+                        Velkommen til betaversjonen av nye Sparebank1.no. En egen farge for nyheter som dette.
+                    </p>
+                    <div class="ffe-system-message__close" role="button" aria-label="Lukk" tabindex="0">
+                        <svg class="" focusable="false" viewBox="0 0 200 200" width="150" height="150" x="1200"
+                             y="600">
+                            <path d="M18.77 0c-3.562 0-7.125 1.347-9.834 4.044L4.507 8.483c-5.381 5.394-5.381 14.25 0 19.68l71.19 71.83-71.66 71.83c-5.381 5.394-5.381 14.25 0 19.68l4.429 4.439c5.381 5.394 14.22 5.394 19.64 0l71.66-71.83 71.65 71.83c5.381 5.394 14.23 5.394 19.65 0l4.429-4.439c5.381-5.394 5.381-14.25 0-19.68l-71.19-71.83 71.66-71.83c5.381-4.914 5.381-13.78 0-19.21l-4.429-4.423c-5.381-5.394-14.22-5.394-19.64 0l-72.13 71.34-71.17-71.83c-2.691-2.697-6.257-4.044-9.819-4.044z"></path>
+                        </svg>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="example-container">
+            <h4 class="example-container__header">success</h4>
+            <div class="ffe-system-message-wrapper ffe-system-message-wrapper--success">
+                <div class="ffe-system-message ffe-content-container ffe-content-container--lg">
+                    <div class="ffe-system-message__icon">
+                        <svg class="" focusable="false" viewBox="0 0 200 200" width="150" height="150" x="900"
+                             y="300">
+                            <path d="M136.2 53.5c2.9-.1 6.1 1.5 5.2 4.6-15 26.4-30.5 52.6-45.8 78.9-2.4 5.3-7.4 12.6-13.9 7.6-9-11.5-17-23.8-25.6-35.6-5.5-4.7.6-10.4 6.2-7.8 8.4 10.6 16 21.9 24 32.8l45.8-78.5c.7-1.2 2.3-1.9 4.1-2z"></path>
+                            <path d="M100 12c48.5 0 88 39.5 88 88s-39.5 88-88 88-88-39.5-88-88 39.5-88 88-88m0-12C44.8 0 0 44.8 0 100s44.8 100 100 100 100-44.8 100-100S155.2 0 100 0z"></path>
+                        </svg>
+                    </div>
+                    <p class="ffe-system-message__content">
+                        En gladnyhet. Nå er nettbanken oppe og går igjen!
+                    </p>
+                    <div class="ffe-system-message__close" role="button" aria-label="Lukk" tabindex="0">
+                        <svg class="" focusable="false" viewBox="0 0 200 200" width="150" height="150" x="1200"
+                             y="600">
+                            <path d="M18.77 0c-3.562 0-7.125 1.347-9.834 4.044L4.507 8.483c-5.381 5.394-5.381 14.25 0 19.68l71.19 71.83-71.66 71.83c-5.381 5.394-5.381 14.25 0 19.68l4.429 4.439c5.381 5.394 14.22 5.394 19.64 0l71.66-71.83 71.65 71.83c5.381 5.394 14.23 5.394 19.65 0l4.429-4.439c5.381-5.394 5.381-14.25 0-19.68l-71.19-71.83 71.66-71.83c5.381-4.914 5.381-13.78 0-19.21l-4.429-4.423c-5.381-5.394-14.22-5.394-19.64 0l-72.13 71.34-71.17-71.83c-2.691-2.697-6.257-4.044-9.819-4.044z"></path>
+                        </svg>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script>
+            document.querySelector('.ffe-system-message__close').addEventListener('click', function () {
+                var element = document.querySelector('.ffe-system-message-wrapper');
+                element.style.height = element.offsetHeight + 'px';
+                setTimeout(function () {
+                    element.style.height = 0;
+                }, 50);
+            });
+        </script>
+    </body>
+
+</html>
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/ffe-context-message.less b/less/ffe-context-message.less
@@ -0,0 +1,90 @@
+.ffe-system-message-wrapper {
+
+    transition: height 0.3s;
+    overflow: hidden;
+
+    &--error {
+        background-color: @ffe-orange-wcag-20;
+        fill: @ffe-black;
+    }
+
+    &--info {
+        background-color: @ffe-blue-royal-light-20;
+        fill: @ffe-black;
+    }
+
+    &--news {
+        color: @ffe-white;
+        background-color: @ffe-black;
+        fill: @ffe-white;
+    }
+
+    &--success {
+        background-color: @ffe-green-wcag-20;
+        fill: @ffe-black;
+    }
+}
+
+.ffe-system-message {
+
+    position: relative;
+    margin: 0 auto;
+    padding: 10px 20px;
+    text-align: left;
+
+    &__icon {
+        display: inline-block;
+        vertical-align: middle;
+        height: 1.7em;
+        width: 1.7em;
+        margin-right: 15px;
+
+        > svg {
+            height: 100%;
+            width: 100%;
+        }
+    }
+
+    &__content {
+        display: inline-block;
+        vertical-align: middle;
+        margin: 0;
+        padding: 0;
+        width: 75%;
+        font-size: 14px;
+    }
+
+    &__close {
+        display: inline-block;
+        vertical-align: middle;
+        position: absolute;
+        right: 20px;
+        top: 13px;
+        cursor: pointer;
+        height: 14px;
+        width: 14px;
+
+        > svg {
+            height: 100%;
+            width: 100%;
+        }
+    }
+}
+
+@media screen and (min-width: 460px) {
+    .ffe-system-message__content {
+        width: 84%;
+    }
+}
+
+@media screen and (min-width: 600px) {
+    .ffe-system-message__content {
+        font-size: 16px;
+    }
+}
+
+@media screen and (min-width: 720px) {
+    .ffe-system-message__content {
+        width: 90%;
+    }
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "ffe-context-message",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "examples": "lessc examples/examples.less examples/examples.css && mkdirp examples/fonts && cp -r node_modules/ffe-core/fonts/* examples/fonts && echo Now open /examples/ffe-system-message.html to see styleguide",
+    "postpublish": "git tag ${npm_package_version} && git push --tags",
+    "has-published": "npm show . versions -s | grep -q ${npm_package_version}",
+    "test": "./run_visual-tests.sh",
+    "update-baseline": "./update_visual-tests-baselines.sh"
+  },
+  "repository": {
+    "type": "git",
+    "url": "***REMOVED***"
+  },
+  "publishConfig": {
+    "registry": "***REMOVED***"
+  },
+  "author": "SpareBank 1",
+  "peerDependencies": {
+    "ffe-core": "8.x"
+  },
+  "devDependencies": {
+    "ffe-core": "8.1.0",
+    "ffe-visual-tests-support": "2.0.0",
+    "gemini": "4.12.2",
+    "less": "2.7.1",
+    "mkdirp": "0.5.1"
+  }
+}
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
diff --git a/update_visual-tests-baselines.sh b/update_visual-tests-baselines.sh
@@ -0,0 +1,5 @@
+#!/bin/bash
+
+source node_modules/ffe-visual-tests-support/run_gemini_command.lib
+
+run_gemini_command update
diff --git a/visual-tests/baseline-screenshots/ffe-system-message/plain/firefox-large.png b/visual-tests/baseline-screenshots/ffe-system-message/plain/firefox-large.png
diff --git a/visual-tests/baseline-screenshots/ffe-system-message/plain/firefox-medium.png b/visual-tests/baseline-screenshots/ffe-system-message/plain/firefox-medium.png
diff --git a/visual-tests/baseline-screenshots/ffe-system-message/plain/firefox-small.png b/visual-tests/baseline-screenshots/ffe-system-message/plain/firefox-small.png
diff --git a/visual-tests/spec/test.js b/visual-tests/spec/test.js
@@ -0,0 +1,31 @@
+var fs = require('fs');
+
+var HTML_PATTERN = /\.html$/
+
+fs.readdirSync('./examples')
+  .filter(function(f) { return f.match(HTML_PATTERN) && f.match(HTML_PATTERN)})
+  .forEach(function(f) {
+    gemini.suite(f.replace(HTML_PATTERN, ''), function(suite) {
+      suite.setUrl('/' + f)
+           .setCaptureElements('body')
+           .before(function(actions, find) {
+                actions.executeJS(function() {
+                      // Removes spinning/animation elements that impair test stability
+                      Array.prototype.forEach.call(
+                          document.querySelectorAll(
+                              '.ffe-loading-spinner, ' +
+                              '.ffe-action-button__label-spinner, ' +
+                              '.ffe-primary-button__label-spinner, ' +
+                              '.ffe-secondary-button__label-spinner, ' +
+                              '.visual-test-hidden'
+                          ),
+                          function(el) {
+                              el && el.parentNode.removeChild(el);
+                          }
+                      );
+                  })
+                  .wait(500);  // for checkbox animations to reach steady state
+           })
+           .capture('plain');
+    })
+  });