FFE-31 Preserve info and tip message

SpareBank1 · Nov 7, 2016 · 58e249b · 58e249b
1 parent 2dce795
commit 58e249b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 78 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,4 @@
 # CHANGELOG
 
 ## Version 0.0.1
-First version. Ffe-system-message used as baseline.
+First version. ffe-system-message used as baseline.
diff --git a/examples/ffe-context-message.html b/examples/ffe-context-message.html
@@ -10,47 +10,22 @@
     <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">
+            <div class="ffe-context-message-wrapper ffe-context-message-wrapper--info">
+                <div class="ffe-context-message ffe-content-container ffe-content-container--lg">
+                    <div class="ffe-context-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">
+                    <p class="ffe-context-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">
+                    <div class="ffe-context-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>
@@ -62,43 +37,19 @@ <h4 class="example-container__header">info</h4>
 
         <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">
+            <div class="ffe-context-message-wrapper ffe-context-message-wrapper--tip">
+                <div class="ffe-context-message ffe-content-container ffe-content-container--lg">
+                    <div class="ffe-context-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">
+                    <p class="ffe-context-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">
+                    <div class="ffe-context-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>
@@ -109,8 +60,8 @@ <h4 class="example-container__header">success</h4>
         </div>
 
         <script>
-            document.querySelector('.ffe-system-message__close').addEventListener('click', function () {
-                var element = document.querySelector('.ffe-system-message-wrapper');
+            document.querySelector('.ffe-context-message__close').addEventListener('click', function () {
+                var element = document.querySelector('.ffe-context-message-wrapper');
                 element.style.height = element.offsetHeight + 'px';
                 setTimeout(function () {
                     element.style.height = 0;

diff --git a/less/ffe-context-message.less b/less/ffe-context-message.less
@@ -1,31 +1,21 @@
-.ffe-system-message-wrapper {
+.ffe-context-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 {
+    &--tip {
         color: @ffe-white;
         background-color: @ffe-black;
         fill: @ffe-white;
     }
-
-    &--success {
-        background-color: @ffe-green-wcag-20;
-        fill: @ffe-black;
-    }
 }
 
-.ffe-system-message {
+.ffe-context-message {
 
     position: relative;
     margin: 0 auto;
@@ -72,19 +62,19 @@
 }
 
 @media screen and (min-width: 460px) {
-    .ffe-system-message__content {
+    .ffe-context-message__content {
         width: 84%;
     }
 }
 
 @media screen and (min-width: 600px) {
-    .ffe-system-message__content {
+    .ffe-context-message__content {
         font-size: 16px;
     }
 }
 
 @media screen and (min-width: 720px) {
-    .ffe-system-message__content {
+    .ffe-context-message__content {
         width: 90%;
     }
 }