From 1a599a55b9a372584c8b017c8b552279f8e077ec Mon Sep 17 00:00:00 2001
From: Erik Salhus <erik.salhus@sparebank1.no>
Date: Mon, 2 Oct 2017 16:16:13 +0200
Subject: [PATCH] DIG-24399 Adding support for multiple vertical lines

---
 examples/accordion.html | 152 +++++++++++++++++++++++-----------------
 examples/examples.less  |   8 ++-
 less/ffe-accordion.less |  27 ++++---
 3 files changed, 113 insertions(+), 74 deletions(-)

diff --git a/examples/accordion.html b/examples/accordion.html
index 2c9a5157e4..dac781d38a 100644
--- a/examples/accordion.html
+++ b/examples/accordion.html
@@ -32,31 +32,37 @@ <h3 class="ffe-h3">Blå</h3>
                         <li class="ffe-accordion-item ffe-accordion-item--blue"
                             aria-expanded="false">
                             <button class="ffe-accordion-item__toggler ffe-accordion-item__toggler--blue">
-                                <div class="ffe-accordion-item__title">What is Lorem Ipsum?</div>
-                                <svg class="ffe-accordion-item__icon ffe-accordion-item__icon--blue"
-                                     viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
-                                    <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
-                                </svg>
+                                <span class="ffe-accordion-item__toggler-content ffe-accordion-item__toggler--blue">
+                                    <span class="ffe-accordion-item__title">What is Lorem Ipsum?</span>
+                                    <svg class="ffe-accordion-item__icon ffe-accordion-item__icon--blue"
+                                         viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
+                                        <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
+                                    </svg>
+                                </span>
                             </button>
                         </li>
                         <li class="ffe-accordion-item ffe-accordion-item--blue"
                             aria-expanded="false">
                             <button class="ffe-accordion-item__toggler ffe-accordion-item__toggler--blue">
-                                <div class="ffe-accordion-item__title">Why do we use it?</div>
-                                <svg class="ffe-accordion-item__icon ffe-accordion-item__icon--blue"
-                                     viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
-                                    <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
-                                </svg>
+                                <span class="ffe-accordion-item__toggler-content ffe-accordion-item__toggler--blue">
+                                    <span class="ffe-accordion-item__title">Why do we use it?</span>
+                                    <svg class="ffe-accordion-item__icon ffe-accordion-item__icon--blue"
+                                         viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
+                                        <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
+                                    </svg>
+                                </span>
                             </button>
                         </li>
                         <li class="ffe-accordion-item ffe-accordion-item--blue"
                             aria-expanded="true">
-                            <button class="ffe-accordion-item__toggler ffe-accordion-item__toggler--blue">
-                                <div class="ffe-accordion-item__title">Where does it come from?</div>
-                                <svg class="ffe-accordion-item__icon ffe-accordion-item__icon--blue ffe-accordion-item__icon--open"
-                                     viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
-                                    <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
-                                </svg>
+                            <button class="ffe-accordion-item__toggler ffe-accordion-item__toggler--open ffe-accordion-item__toggler--blue">
+                                <span class="ffe-accordion-item__toggler-content ffe-accordion-item__toggler-content--blue">
+                                    <span class="ffe-accordion-item__title">Where does it come from?</span>
+                                    <svg class="ffe-accordion-item__icon ffe-accordion-item__icon--blue ffe-accordion-item__icon--open"
+                                         viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
+                                        <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
+                                    </svg>
+                                </span>
                             </button>
                             <div class="ffe-accordion-item__content ffe-accordion-item__content--blue">
                                 It is a long established fact that a reader will be distracted by
@@ -74,11 +80,13 @@ <h3 class="ffe-h3">Blå</h3>
                         <li class="ffe-accordion-item ffe-accordion-item--blue"
                             aria-expanded="false">
                             <button class="ffe-accordion-item__toggler ffe-accordion-item__toggler--blue">
-                                <div class="ffe-accordion-item__title">Where can I get some?</div>
-                                <svg class="ffe-accordion-item__icon ffe-accordion-item__icon--blue"
-                                     viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
-                                    <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
-                                </svg>
+                                <span class="ffe-accordion-item__toggler-content ffe-accordion-item__toggler--blue">
+                                    <span class="ffe-accordion-item__title">Where can I get some?</span>
+                                    <svg class="ffe-accordion-item__icon ffe-accordion-item__icon--blue"
+                                         viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
+                                        <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
+                                    </svg>
+                                </span>
                             </button>
                         </li>
                     </ul>
@@ -90,29 +98,35 @@ <h3 class="ffe-h3">Hvit</h3>
                             <li class="ffe-accordion-item"
                                 aria-expanded="false">
                                 <button class="ffe-accordion-item__toggler">
-                                    <div class="ffe-accordion-item__title">What is Lorem Ipsum?</div>
-                                    <svg class="ffe-accordion-item__icon"
-                                         viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
-                                        <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
-                                    </svg>
+                                    <span class="ffe-accordion-item__toggler-content">
+                                        <span class="ffe-accordion-item__title">What is Lorem Ipsum?</span>
+                                        <svg class="ffe-accordion-item__icon"
+                                             viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
+                                            <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
+                                        </svg>
+                                    </span>
                                 </button>
                             </li>
                             <li class="ffe-accordion-item" aria-expanded="false">
                                 <button class="ffe-accordion-item__toggler">
-                                    <div class="ffe-accordion-item__title">Why do we use it?</div>
-                                    <svg class="ffe-accordion-item__icon"
-                                         viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
-                                        <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
-                                    </svg>
+                                    <span class="ffe-accordion-item__toggler-content">
+                                        <span class="ffe-accordion-item__title">Why do we use it?</span>
+                                        <svg class="ffe-accordion-item__icon"
+                                             viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
+                                            <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
+                                        </svg>
+                                    </span>
                                 </button>
                             </li>
                             <li class="ffe-accordion-item" aria-expanded="true">
                                 <button class="ffe-accordion-item__toggler">
-                                    <div class="ffe-accordion-item__title">Where does it come from?</div>
-                                    <svg class="ffe-accordion-item__icon ffe-accordion-item__icon--open"
-                                         viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
-                                        <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
-                                    </svg>
+                                    <span class="ffe-accordion-item__toggler-content">
+                                        <span class="ffe-accordion-item__title">Where does it come from?</span>
+                                        <svg class="ffe-accordion-item__icon ffe-accordion-item__icon--open"
+                                             viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
+                                            <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
+                                        </svg>
+                                    </span>
                                 </button>
                                 <div>
                                     <span></span>
@@ -137,11 +151,13 @@ <h3 class="ffe-h3">Hvit</h3>
                             <li class="ffe-accordion-item"
                                 aria-expanded="false">
                                 <button class="ffe-accordion-item__toggler">
-                                    <div class="ffe-accordion-item__title">Where can I get some?</div>
-                                    <svg class="ffe-accordion-item__icon"
-                                         viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
-                                        <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
-                                    </svg>
+                                    <span class="ffe-accordion-item__toggler-content">
+                                        <span class="ffe-accordion-item__title">Where can I get some?</span>
+                                        <svg class="ffe-accordion-item__icon"
+                                             viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
+                                            <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
+                                        </svg>
+                                    </span>
                                 </button>
                             </li>
                         </ul>
@@ -154,32 +170,38 @@ <h3 class="ffe-h3">Hvit med flere linjer</h3>
                             <li class="ffe-accordion-item"
                                 aria-expanded="false">
                                 <button class="ffe-accordion-item__toggler">
-                                    <div class="ffe-accordion-item__title">
-                                        <div>What is Lorem Ipsum?</div>
-                                        <div class="ffe-small-text">Sub-description of the contents</div>
-                                    </div>
-                                    <svg class="ffe-accordion-item__icon"
-                                         viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
-                                        <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
-                                    </svg>
+                                    <span class="ffe-accordion-item__toggler-content">
+                                        <span class="ffe-accordion-item__title">
+                                            <span>What is Lorem Ipsum?</span>
+                                            <span class="ffe-small-text">Sub-description of the contents</span>
+                                        </span>
+                                        <svg class="ffe-accordion-item__icon"
+                                             viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
+                                            <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
+                                        </svg>
+                                    </span>
                                 </button>
                             </li>
                             <li class="ffe-accordion-item" aria-expanded="false">
                                 <button class="ffe-accordion-item__toggler">
-                                    <div class="ffe-accordion-item__title">Why do we use it?</div>
-                                    <svg class="ffe-accordion-item__icon"
-                                         viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
-                                        <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
-                                    </svg>
+                                    <span class="ffe-accordion-item__toggler-content">
+                                        <span class="ffe-accordion-item__title">Why do we use it?</span>
+                                        <svg class="ffe-accordion-item__icon"
+                                             viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
+                                            <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
+                                        </svg>
+                                    </span>
                                 </button>
                             </li>
                             <li class="ffe-accordion-item" aria-expanded="true">
                                 <button class="ffe-accordion-item__toggler">
-                                    <div class="ffe-accordion-item__title">Where does it come from?</div>
-                                    <svg class="ffe-accordion-item__icon ffe-accordion-item__icon--open"
-                                         viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
-                                        <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
-                                    </svg>
+                                    <span class="ffe-accordion-item__toggler-content">
+                                        <span class="ffe-accordion-item__title">Where does it come from?</span>
+                                        <svg class="ffe-accordion-item__icon ffe-accordion-item__icon--open"
+                                             viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
+                                            <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
+                                        </svg>
+                                    </span>
                                 </button>
                                 <div class="ffe-accordion-item__content">
                                     It is a long established fact that a reader will be distracted by
@@ -197,11 +219,13 @@ <h3 class="ffe-h3">Hvit med flere linjer</h3>
                             <li class="ffe-accordion-item"
                                 aria-expanded="false">
                                 <button class="ffe-accordion-item__toggler">
-                                    <div class="ffe-accordion-item__title">Where can I get some?</div>
-                                    <svg class="ffe-accordion-item__icon"
-                                         viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
-                                        <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
-                                    </svg>
+                                    <span class="ffe-accordion-item__toggler-content">
+                                        <span class="ffe-accordion-item__title">Where can I get some?</span>
+                                        <svg class="ffe-accordion-item__icon"
+                                             viewBox="0 0 200 200" width="150" height="150" x="150" y="600">
+                                            <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path>
+                                        </svg>
+                                    </span>
                                 </button>
                             </li>
                         </ul>
diff --git a/examples/examples.less b/examples/examples.less
index 21ef6c65c8..f424bc0d5a 100644
--- a/examples/examples.less
+++ b/examples/examples.less
@@ -1,4 +1,10 @@
 @import "../node_modules/ffe-core/less/ffe";
 @import "../less/ffe-accordion";
 
-@base-url: ".";
\ No newline at end of file
+@base-url: ".";
+
+button {
+    // Fixing margin-bug for visual tests
+    // https://stackoverflow.com/questions/13697150/textbox-and-button-top-margin-issue-for-firefox-and-chrome
+    vertical-align: bottom;
+}
\ No newline at end of file
diff --git a/less/ffe-accordion.less b/less/ffe-accordion.less
index 49f972717e..8462a954d8 100644
--- a/less/ffe-accordion.less
+++ b/less/ffe-accordion.less
@@ -64,23 +64,19 @@
 }
 
 .ffe-accordion-item__title {
+    display: flex;
+    flex-flow: column;
     flex-grow: 1;
 }
 
 .ffe-accordion-item__toggler {
+    cursor: pointer;
     background-color: transparent;
     border: none;
     color: @ffe-blue-azure;
-    cursor: pointer;
-    display: flex;
-    flex-flow: row nowrap;
-    padding: 20px;
-    text-decoration: none;
-    text-align: left;
-    transition:
-        background-color @ffe-transition-duration @ffe-ease,
-        color @ffe-transition-duration @ffe-ease;
     width: 100%;
+    padding: 0;
+    margin: 0;
 
     &:hover,
     &:focus {
@@ -119,3 +115,16 @@
         }
     }
 }
+
+.ffe-accordion-item__toggler-content {
+    display: flex;
+    flex-flow: row nowrap;
+    padding: 20px;
+    text-decoration: none;
+    text-align: left;
+    transition:
+        background-color @ffe-transition-duration @ffe-ease,
+        color @ffe-transition-duration @ffe-ease;
+    width: 100%;
+    margin: 0;
+}