chore(ffe-header): Add html example files

SpareBank1 · Jan 29, 2018 · 9036099 · 9036099
1 parent 1f63634
commit 9036099
Show file tree

Hide file tree

Showing 4 changed files with 152 additions and 1 deletion.
diff --git a/packages/ffe-header/examples/examples.js b/packages/ffe-header/examples/examples.js
@@ -0,0 +1,29 @@
+(function() {
+    var qs = document.querySelector.bind(document);
+
+    qs('.ffe-header__user-button').onclick = function() {
+        toggleModifier('ffe-header__user-nav-list', 'visible');
+        toggleModifier('ffe-header__user-chevron', 'expanded');
+    };
+
+    qs('.ffe-header__site-nav-button').onclick = function() {
+        toggleModifier('ffe-header__site-nav-list', 'visible');
+        toggleModifier('ffe-header__site-nav-hamburger', 'expanded');
+    };
+
+    qs('.ffe-header__search-button').onclick = function() {
+        toggleModifier('ffe-header__search', 'visible');
+    };
+
+    function toggleModifier(be, m) {
+        toggleClass(qs('.' + be), be + '--' + m);
+    }
+
+    function toggleClass(el, className) {
+        if (el.className.indexOf(className) == -1) {
+            el.className += ' ' + className;
+        } else {
+            el.className = el.className.replace(className, '');
+        }
+    }
+})();
diff --git a/packages/ffe-header/examples/examples.less b/packages/ffe-header/examples/examples.less
@@ -0,0 +1,20 @@
+@import '../node_modules/ffe-core/less/fonts';
+@import (reference) '../node_modules/ffe-core/less/ffe';
+@base-url: '.';
+
+body {
+    margin: 0;
+    min-height: 300px;
+}
+
+.lorem-ipsum {
+    margin: 0;
+    padding: 0 20px;
+    color: @ffe-grey-silver;
+    font-family: 'MuseoSans-500', arial, sans-serif;
+    font-size: 16px;
+    line-height: 26px;
+    @media screen and (min-width: @breakpoint-md) {
+        line-height: 24px;
+    }
+}
diff --git a/packages/ffe-header/examples/index.html b/packages/ffe-header/examples/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>ffe-header</title>
+
+    <link href="examples.css" rel="stylesheet" type="text/css">
+    <link href="ffe-header.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+
+<header class="ffe-header">
+    <div class="ffe-header__border">
+        <div class="ffe-header__wrapper">
+            <!-- <button class="ffe-header__icon-button ffe-header__search-button">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" class="ffe-header__svg-icon ffe-header__search-icon">
+                    <path d="M84.4 0c-22 0-42.7 8.6-58.2 24.2-15.6 15.5-24 36.2-24 58.2s8.4 42.7 24 58.3c15.5 15.5 36.2 24 58.2 24 18.3 0 35.6-5.8 49.8-16.7l50 50c2.6 2.6 6.7 2.6 9.3 0l3-3c2.5-2.5 2.5-6.6 0-9.2l-49.7-49.6c13-15 20-33.8 20-53.8 0-22-8.6-42.7-24-58.2C127 8.6 106.3.2 84.3.2zm0 17.3c17.4 0 33.8 6.8 46 19 12.3 12.4 19 28.7 19 46 0 17.5-6.7 34-19 46.2-12.2 12.2-28.6 19-46 19s-33.7-6.8-46-19-19-28.7-19-46c0-17.5 6.7-33.8 19-46s28.6-19.2 46-19.2z"/>
+                </svg>
+            </button> -->
+
+            <nav class="ffe-header__secondary-nav" role="navigation">
+                <ul class="ffe-header__list ffe-header__secondary-nav-list">
+                    <li class="ffe-header__list-item"><a class="ffe-header__link ffe-header__link--active" href="#">Privat</a></li>
+                    <li class="ffe-header__list-item"><a class="ffe-header__link" href="#">Bedrift</a></li>
+                    <li class="ffe-header__list-item"><a class="ffe-header__link" href="#">Om oss</a></li>
+                </ul>
+            </nav>
+
+            <div class="ffe-header__logo">
+                <a href="#">
+                    <img src="../images/logo-sb1.svg" class="ffe-header__logo-svg" alt="SpareBank1 logo">
+                </a>
+            </div>
+
+
+            <button class="ffe-header__icon-button ffe-header__user-button">
+                <span class="ffe-header__user-name">
+                    Jomar Beate Skrothaug 
+                    <span class="ffe-header__user-chevron">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" class="ffe-header__svg-icon ffe-header__user-chevron-icon">
+                            <path d="m16.171492,41.999998c-4.143269,0-8.2852797,1.57464-11.4277496,4.706478-6.3249899,6.283609-6.3249899,16.499474,0,22.803034l84.0286676,83.76282c6.30496,6.30356,16.54928,6.30356,22.87426,0l83.60959-83.26412c6.32499-6.28361,6.32499-16.499477,0-22.803038-6.30496-6.30356-16.55553-6.30356-22.88051,0l-72.13806,71.893768-72.613438-72.373767c-3.14247-3.151781-7.29074-4.725174-11.433999-4.725174h-0.0188z"/>
+                        </svg>
+                    </span>
+                </span>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" class="ffe-header__svg-icon ffe-header__user-icon">
+                    <path d="M99.656,0c-21.96,0-39.812,17.913-39.812,39.938v13.468c0,22.025,17.852,39.938,39.812,39.938h0.684c21.97,0,39.82-17.913,39.82-39.938v-13.468c0-22.025-17.86-39.938-39.82-39.938h-0.684zm0,14.031h0.684c14.24,0,25.82,11.625,25.82,25.907v13.437c0,14.284-11.58,25.906-25.82,25.906h-0.684c-14.24,0-25.812-11.622-25.812-25.906v-13.437c0-14.282,11.572-25.907,25.812-25.907zm-46.094,87.749c-0.973,0.1-1.932,0.46-2.781,1.1-14.196,10.54-22.781,27.37-22.781,45.28v40.46c0,6.29,5.082,11.38,11.344,11.38h121.32c6.26,0,11.34-5.09,11.34-11.38v-40.46c0-17.91-8.59-34.74-22.78-45.28-2.72-2.02-6.59-1.19-8.28,1.74l-1.35,2.32c-1.42,2.46-0.83,5.64,1.44,7.34,10.57,7.93,16.97,20.5,16.97,33.88v37.81h-116v-37.81c0-13.38,6.399-25.96,16.969-33.88,2.276-1.7,2.859-4.88,1.437-7.34l-1.344-2.32c-1.163-2.01-3.359-3.05-5.5-2.84z"
+                    />
+                </svg>
+                <span class="ffe-header__notification-bubble">5</span>
+            </button>
+
+            <button class="ffe-header__icon-button ffe-header__site-nav-button">
+                <span class="ffe-header__site-nav-hamburger">
+                    <span class="ffe-header__site-nav-hamburger__bar">
+                    </span>
+                </span>
+            </button>
+        </div>
+    </div>
+
+    <div class="ffe-header__border">
+        <div class="ffe-header__wrapper">
+            <nav class="ffe-header__user-nav" role="navigation">
+                <ul class="ffe-header__list ffe-header__user-nav-list">
+                    <li class="ffe-header__list-item"><a class="ffe-header__link" href="#">Huskeliste <span class="ffe-header__notification-bubble">1</span></a></li>
+                    <li class="ffe-header__list-item"><a class="ffe-header__link" href="#">Postkasse <span class="ffe-header__notification-bubble">22</span></a></li>
+                    <li class="ffe-header__list-item"><a class="ffe-header__link" href="#">Innstillinger</a></li>
+                    <li class="ffe-header__list-item ffe-header__list-item--centered">
+                        <a class="ffe-header__button ffe-header__button--log-out" href="#">Logg ut</a>
+                    </li>
+                </ul>
+            </nav>
+
+            <nav class="ffe-header__site-nav" role="navigation">
+                <ul class="ffe-header__list ffe-header__site-nav-list">
+                    <li class="ffe-header__list-item"><a class="ffe-header__link" href="#">Oversikt</a></li>
+                    <li class="ffe-header__list-item"><a class="ffe-header__link" href="#">Betaling</a></li>
+                    <li class="ffe-header__list-item"><a class="ffe-header__link" href="#">Kort</a></li>
+                    <li class="ffe-header__list-item"><a class="ffe-header__link" href="#">Lån</a></li>
+                    <li class="ffe-header__list-item"><a class="ffe-header__link" href="#">Sparing</a></li>
+                    <li class="ffe-header__list-item"><a class="ffe-header__link" href="#">Forsikring</a></li>
+                    <li class="ffe-header__list-item"><a class="ffe-header__link" href="#">Kundeservice</a></li>
+                </ul>
+            </nav>
+
+            <div class="ffe-header__search" role="search">
+                <p>Søk etter saker og ting</p>
+            </div>
+        </div>
+    </div>
+</header>
+
+<div class="lorem-ipsum">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus in quam iaculis molestie ut nec turpis. Curabitur feugiat turpis dignissim ex scelerisque ultricies in vitae est. Proin bibendum tellus leo, non vulputate elit tempor sed. Cras efficitur justo nisi, non vehicula metus faucibus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
+</div>
+
+<script src="examples.js"></script>
+</body>
+</html>
diff --git a/packages/ffe-header/package.json b/packages/ffe-header/package.json
@@ -4,7 +4,8 @@
     "description": "Felles header for SpareBank 1",
     "main": "index.js",
     "scripts": {
-        "compile": "lessc less/ffe-header-nodeps.less examples/ffe-header.css --autoprefix",
+        "build":
+            "lessc less/ffe-header-nodeps.less examples/ffe-header.css --autoprefix && lessc examples/examples.less examples/examples.css && mkdirp examples/fonts && cp -R node_modules/ffe-core/fonts/* examples/fonts/",
         "lint": "stylelint less/*.less"
     },
     "repository": {