Add support for form label tooltips.

* Make form labels inline-block by default and add block modifier. * Make input field and dropdown block by default and add inline modifier. * Bump version to 2.0.0 as these changes are potentially breaking.
SpareBank1 · Sep 20, 2016 · 8fa8b95 · 8fa8b95
1 parent 99f2809
commit 8fa8b95
Show file tree

Hide file tree

Showing 11 changed files with 141 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changelog
 
+## v2.0.0
+
+* **Potentially breaking change:** in order to support tooltips for form labels, the block-level relationship between labels and fields has been inverted:
+    * `ffe-form-label` is now an `inline-block`. In order to keep the old behaviour add the new class `ffe-form-label--block` to your labels.
+    * Input fields and dropdowns are now `block`s.In order to keep the old behaviour add the corresponding `--inline` modifier class, i.e.:
+        * `ffe-input-field` - `ffe-input-field--inline`
+        * `ffe-dropdown` - `ffe-dropdown--inline`
+* Added `ffe-tooltip` for form label tooltips.
+
 ## v1.1.0
 * Moved styling from ffe-dropdown into this package
 * Updated examples with dropdown in error state

diff --git a/examples/tooltip.html b/examples/tooltip.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+
+<head lang="nb">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="examples.css">
+</head>
+
+<body class="ffe-body-text">
+<main class="styleguide-wrapper">
+    <section class="ffe-section-wrapper">
+
+        <div class="ffe-content-container ffe-content-container--text-left">
+            <h2 class="ffe-h2">Input-felt med hjelpetekst</h2>
+            <div class="ffe-content-container ffe-content-container--text-left">
+                <h2 class="ffe-h4">Lukket</h2>
+                <p class="ffe-body-paragraph">Trykk på ? for å åpne/lukke</p>
+                <div class="ffe-input-group" aria-live="polite">
+                    <label for="cvv" id="cvv-label" class="ffe-form-label">
+                        Normal with info
+                    </label>
+                    <button id="cvv-tooltip-button" class="ffe-tooltip__icon">?</button>
+
+                    <p id="cvv-tooltip" class="ffe-tooltip__text ffe-small-text">
+                        Hjelpetekst
+                    </p>
+
+                    <input type="text" id="cvv" class="ffe-input-field ffe-input-field--large" name="cvv" maxlength="3"
+                           autocomplete="off">
+                </div>
+            </div>
+            <div class="ffe-content-container ffe-content-container--text-left">
+                <h2 class="ffe-h4">Åpen</h2>
+
+
+                <div class="ffe-input-group" aria-live="polite">
+                    <label for="cvv-open" class="ffe-form-label">
+                        CVV2
+                    </label>
+                    <button class="ffe-tooltip__icon ffe-tooltip__icon--active">?</button>
+
+                    <p class="ffe-tooltip__text ffe-tooltip__text--active ffe-small-text" style="max-height: 22px">
+                        Hjelpetekst
+                    </p>
+
+                    <input type="text" id="cvv-open" class="ffe-input-field ffe-input-field--medium" name="cvv"
+                           maxlength="3" autocomplete="off">
+                </div>
+            </div>
+        </div>
+
+        <script>
+            document.getElementById('cvv-tooltip-button').onclick = function () {
+                var tooltip = document.getElementById('cvv-tooltip');
+                var displayHeight = tooltip.clientHeight;
+                var scrollHeight = tooltip.scrollHeight;
+                displayHeight ? document.getElementById('cvv-tooltip-button').classList.remove('ffe-tooltip__icon--active') : document.getElementById('cvv-tooltip-button').classList.add('ffe-tooltip__icon--active');
+                displayHeight ? tooltip.classList.remove('ffe-tooltip__text--active') : tooltip.classList.add('ffe-tooltip__text--active');
+                displayHeight ? tooltip.style = '' : tooltip.style = 'max-height: ' + scrollHeight + 'px;';
+            };
+        </script>
+
+    </section>
+</main>
+
+</body>
+
+</html>
diff --git a/less/dropdown.less b/less/dropdown.less
@@ -20,6 +20,7 @@
     font-family: MuseoSans-300,arial,sans-serif;
     min-width: 175px;
     transition: all 0.15s ease-in-out;
+    display: block;
 
     &:hover {
         border-color: @ffe-blue-royal-light-wcag;
@@ -42,5 +43,9 @@
 
     }
 
+    &--inline {
+        display: inline-block;
+    }
+
 }
 
diff --git a/less/form-label.less b/less/form-label.less
@@ -2,6 +2,10 @@
     &:extend(.ffe-h4);
     margin: 0;
     padding: 8px 0;
-    display: block;
+    display: inline-block;
     position: relative;
+
+    &--block {
+        display: block;
+    }
 }
diff --git a/less/form.less b/less/form.less
@@ -14,6 +14,7 @@
 @import "input-group";
 @import "form-label";
 @import "fieldset";
+@import "tooltip";
 
 /* Validation */
 @import "field-info-message";

diff --git a/less/input-field.less b/less/input-field.less
@@ -1,5 +1,5 @@
 .ffe-input-field {
-    display: inline-block;
+    display: block;
     height: 45px;
     padding: 0 13px;
     font-family: MuseoSans-300, arial, sans-serif;
@@ -32,4 +32,8 @@
         width: 160px;
     }
 
+    &--inline {
+        display: inline-block;
+    }
+
 }
diff --git a/less/tooltip.less b/less/tooltip.less
@@ -0,0 +1,46 @@
+.ffe-tooltip {
+
+    @ffe-tooltip-size: 25px;
+
+    &__icon {
+        background: @ffe-white;
+        border-radius: 50%;
+        border: 2px solid @ffe-grey-light;
+        color: @ffe-blue-royal-light-wcag;
+        cursor: help;
+        display: inline-block;
+        font-size: 18px;
+        height: @ffe-tooltip-size;
+        line-height: @ffe-tooltip-size;
+        margin: 0 0 4px 13px;
+        padding: 0 0 0 1px;
+        text-align: center;
+        vertical-align: middle;
+        width: @ffe-tooltip-size;
+
+        &:hover, &:focus {
+            border-color: @ffe-blue-royal-light-wcag;
+        }
+
+        &:focus {
+            box-shadow: 0 0 0 2px @ffe-blue-focus;
+            outline: none;
+        }
+
+        &:active, &--active {
+            border-color: @ffe-blue-royal;
+            color: @ffe-blue-royal;
+        }
+    }
+
+    &__text {
+        margin: 0;
+        max-height: 0;
+        overflow: hidden;
+        transition: all 0.3s ease-in-out;
+
+        &--active {
+            margin-bottom: 12px
+        }
+    }
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ffe-form",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Form-/skjemapakke for Felles Front End",
   "main": "less/form.less",
   "scripts": {

diff --git a/visual-tests/baseline-screenshots/tooltip/plain/firefox-large.png b/visual-tests/baseline-screenshots/tooltip/plain/firefox-large.png
diff --git a/visual-tests/baseline-screenshots/tooltip/plain/firefox-medium.png b/visual-tests/baseline-screenshots/tooltip/plain/firefox-medium.png
diff --git a/visual-tests/baseline-screenshots/tooltip/plain/firefox-small.png b/visual-tests/baseline-screenshots/tooltip/plain/firefox-small.png