FFE-40 condensed table

SpareBank1 · May 23, 2017 · 91981b5 · 91981b5
1 parent 76afee7
commit 91981b5
Show file tree

Hide file tree

Showing 12 changed files with 42 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## v.5.1.2
+
+* Specified font size of `--condensed` modifier to 14px
+* Added example of condensed table 
+
 ## v.5.1.1
 
 * Replaced hardcoded transition properties with variables from ffe-core
@@ -28,12 +33,12 @@ To migrate, update your app to ffe-core version 9.x
 * BREAKING: Refactored styling to reflect design guidelines
 	* More vertical padding in table rows by default
 	* Added default horizontal padding in table cells on small screens
-	* `--condensed` modifier to decrease default vertical padding in table rows
 	* Changed th color to ffe-blue-royal
 	* Changed background colors in expandable rows
 	* Different border and text styling in table footers
 * Rewrote styling to less syntax
 * Specified icon height to fix IE bug where chevron causes table row height issues
+* Added `--condensed` modifier to decrease default vertical padding in table rows
 
 ## v.3.0.1
 

diff --git a/example/example.html b/example/example.html
@@ -8,6 +8,10 @@
 </head>
 
 <body class="ffe-body-text">
+    <div class="condensed-toggle">
+        <a href='#not-condensed'>regular</a> | <a href='#condensed'>condensed</a>
+    </div>
+
     <div class="ffe-section-wrapper">
         <div class="ffe-content-container">
             <h1 class="ffe-h1">Tabeller</h1>
@@ -293,5 +297,21 @@ <h1 class="ffe-h1">Tabeller</h1>
             </div>
         </div>
     </div>
+
+    <script>
+        (function () {
+            var tables = document.querySelectorAll('.ffe-responsive-table');
+
+            function toggleCondensedModifier() {
+                var func = window.location.hash === '#condensed' ? 'add' : 'remove';
+                for (var i = 0; i < tables.length; i++) {
+                    tables[i].classList[func]('ffe-responsive-table--condensed');
+                }
+            }
+
+            window.onpopstate = toggleCondensedModifier;
+            toggleModifier();
+        }());
+    </script>
 </body>
 </html>
diff --git a/example/example.less b/example/example.less
@@ -2,3 +2,12 @@
 @import "../less/tables";
 
 @base-url: ".";
+
+.ffe-responsive-table {
+	margin-top: 60px;
+}
+
+.condensed-toggle {
+	margin: 10px;
+	outline: none;
+}
diff --git a/less/responsive-table.less b/less/responsive-table.less
@@ -79,6 +79,8 @@
     }
 
     &--condensed {
+        font-size: 14px;
+
         .ffe-responsive-table__heading,
         .ffe-responsive-table__cell {
             @media screen and (min-width: @breakpoint-md) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ffe-tables",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "main": "less/tables.less",
   "scripts": {
     "compile": "npm run lint && lessc example/example.less example/example.css && cp -R node_modules/ffe-core/fonts/ example/fonts/ && echo \"$(date +%T): Updated example\"",

diff --git a/visual-tests/baseline-screenshots/example/condensed/firefox-large.png b/visual-tests/baseline-screenshots/example/condensed/firefox-large.png
diff --git a/visual-tests/baseline-screenshots/example/condensed/firefox-medium.png b/visual-tests/baseline-screenshots/example/condensed/firefox-medium.png
diff --git a/visual-tests/baseline-screenshots/example/condensed/firefox-small.png b/visual-tests/baseline-screenshots/example/condensed/firefox-small.png
diff --git a/visual-tests/baseline-screenshots/example/plain/firefox-large.png b/visual-tests/baseline-screenshots/example/plain/firefox-large.png
diff --git a/visual-tests/baseline-screenshots/example/plain/firefox-medium.png b/visual-tests/baseline-screenshots/example/plain/firefox-medium.png
diff --git a/visual-tests/baseline-screenshots/example/plain/firefox-small.png b/visual-tests/baseline-screenshots/example/plain/firefox-small.png
diff --git a/visual-tests/specs/test.js b/visual-tests/specs/test.js
@@ -25,6 +25,9 @@ fs.readdirSync('./example')
                     })
                     .wait(500);
                 })
-                .capture('plain');
+                .capture('plain')
+                .capture('condensed', (actions, find) => {
+                    actions.click(find('[href="#condensed"]'));
+                });
         })
     });