Merge pull request #25 from tommaton/CPD-11644

CPD-11644
justeat · Feb 15, 2018 · 93379e8 · 93379e8
2 parents cbe5bd8 + 70018a9
commit 93379e8
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,14 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+v0.19.0
+------------------------------
+*February 14, 2018*
+
+### Changed
+- Added class `is-navInView` to `nav` partial.
+- Added toggling funcionality of class `is-navInView` to html element to prevent users scrolling page when navigation is in viev.
+- Added tests for the toggling of class to the HTML element.
 
 v0.18.0
 ------------------------------

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@justeat/f-header",
   "description": "Fozzie Header – Header Component for Just Eat projects",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "main": "dist/js/index.js",
   "files": [
     "dist",

diff --git a/src/js/index.js b/src/js/index.js
@@ -53,6 +53,9 @@ const setupHeader = () => {
             if (navLabel) {
                 navLabel.classList.toggle('is-open');
             }
+
+            document.documentElement.classList.toggle('is-navInView');
+
         });
     }
 };

diff --git a/src/scss/partials/_nav.scss b/src/scss/partials/_nav.scss
@@ -37,6 +37,12 @@ $nav-popover-padding          : spacing(x2);
                 z-index 0s linear;
 }
 
+// removes scroll
+.is-navInView {
+    @include media('<mid') {
+        overflow: hidden;
+    }
+}
 
 // Global site-wide navigation
 .c-nav--global {

diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`header adds \`is-navInView\` class to html element 1`] = `
+"<html class=\\"is-navInView\\"><head></head><body>
+            <button data-nav-enhance=\\"\\" type=\\"button\\"></button>
+        </body></html>"
+`;
+
 exports[`header adds \`is-open\` class to nav label 1`] = `
 "
             <button data-nav-enhance=\\"\\" type=\\"button\\"></button>

diff --git a/test/index.test.js b/test/index.test.js
@@ -78,4 +78,19 @@ describe('header', () => {
         expect(html).toMatchSnapshot();
     });
 
+    it('adds `is-navInView` class to html element', () => {
+        // Arrange
+        TestUtils.setBodyHtml(`
+            <input data-nav-enhance />
+        `);
+        header();
+        const button = document.querySelector('button[data-nav-enhance]');
+
+        // Act
+        TestUtils.click(button);
+
+        // Assert
+        const html = document.documentElement.outerHTML;
+        expect(html).toMatchSnapshot();
+    });
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -53,6 +53,9 @@ const setupHeader = () => { @@
                 if (navLabel) {
                     navLabel.classList.toggle('is-open');
                 }
+                document.documentElement.classList.toggle('is-navInView');
             });
         }
     };
@@ Expand Down @@