Chore: Moving header into container (#849)

* Chore: Moving header into container * Chore: removing extra bp-is-hidden class
box · Oct 8, 2018 · 9528761 · 9528761
1 parent 70eae04
commit 9528761
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 44 deletions.
diff --git a/src/lib/PreviewUI.js b/src/lib/PreviewUI.js
@@ -3,24 +3,25 @@ import shellTemplate from './shell.html';
 import Notification from './Notification';
 import { insertTemplate } from './util';
 import {
-    CLASS_HIDDEN,
-    CLASS_INVISIBLE,
     CLASS_BOX_PREVIEW_BASE_HEADER,
     CLASS_BOX_PREVIEW_HAS_HEADER,
     CLASS_BOX_PREVIEW_HAS_NAVIGATION,
     CLASS_BOX_PREVIEW_HEADER,
     CLASS_BOX_PREVIEW_THEME_DARK,
+    CLASS_HIDDEN,
+    CLASS_INVISIBLE,
     CLASS_PREVIEW_LOADED,
-    SELECTOR_BOX_PREVIEW_CONTAINER,
-    SELECTOR_BOX_PREVIEW,
-    SELECTOR_BOX_PREVIEW_BTN_PRINT,
     SELECTOR_BOX_PREVIEW_BTN_DOWNLOAD,
     SELECTOR_BOX_PREVIEW_BTN_LOADING_DOWNLOAD,
+    SELECTOR_BOX_PREVIEW_BTN_PRINT,
+    SELECTOR_BOX_PREVIEW_CONTAINER,
     SELECTOR_BOX_PREVIEW_CRAWLER_WRAPPER,
+    SELECTOR_BOX_PREVIEW_HEADER_CONTAINER,
     SELECTOR_BOX_PREVIEW_LOADING_TEXT,
     SELECTOR_BOX_PREVIEW_LOADING_WRAPPER,
     SELECTOR_BOX_PREVIEW_LOGO_CUSTOM,
     SELECTOR_BOX_PREVIEW_LOGO_DEFAULT,
+    SELECTOR_BOX_PREVIEW,
     SELECTOR_NAVIGATION_LEFT,
     SELECTOR_NAVIGATION_RIGHT
 } from './constants';
@@ -368,7 +369,10 @@ class PreviewUI {
      * @return {void}
      */
     setupHeader(headerTheme, logoUrl) {
-        const headerEl = this.container.firstElementChild;
+        const headerContainerEl = this.container.querySelector(SELECTOR_BOX_PREVIEW_HEADER_CONTAINER);
+        headerContainerEl.classList.remove(CLASS_HIDDEN);
+
+        const headerEl = headerContainerEl.firstElementChild;
         headerEl.className = `${CLASS_BOX_PREVIEW_HEADER} ${CLASS_BOX_PREVIEW_BASE_HEADER}`;
         this.contentContainer.classList.add(CLASS_BOX_PREVIEW_HAS_HEADER);
 

diff --git a/src/lib/__tests__/PreviewUI-test.html b/src/lib/__tests__/PreviewUI-test.html
@@ -1 +1,8 @@
-<div class="ui"></div>
+<div class="ui">
+    <div class="bp-header-container">
+        <div>
+            <span class="bp-default-logo"></span>
+            <img class="bp-is-hidden bp-custom-logo"></img>
+        </div>
+    </div>
+</div>
diff --git a/src/lib/__tests__/PreviewUI-test.js b/src/lib/__tests__/PreviewUI-test.js
@@ -318,16 +318,64 @@ describe('lib/PreviewUI', () => {
             ui.replaceHeader('.bp-invalid-header');
 
             const baseHeader = containerEl.querySelector('.bp-base-header');
-            expect(newHeader).to.have.class('bp-is-hidden');
-            expect(baseHeader).to.not.have.class('bp-is-hidden');
+            expect(newHeader).to.have.class(constants.CLASS_HIDDEN);
+            expect(baseHeader).to.not.have.class(constants.CLASS_HIDDEN);
         });
 
         it('should hide all headers and then show the specified header', () => {
             ui.replaceHeader('.bp-draw-header');
 
             const baseHeader = containerEl.querySelector('.bp-base-header');
-            expect(newHeader).to.not.have.class('bp-is-hidden');
-            expect(baseHeader).to.have.class('bp-is-hidden');
+            expect(newHeader).to.not.have.class(constants.CLASS_HIDDEN);
+            expect(baseHeader).to.have.class(constants.CLASS_HIDDEN);
+        });
+    });
+
+    describe('setupHeader()', () => {
+        beforeEach(() => {
+            containerEl = ui.setup(options);
+        });
+
+        afterEach(() => {
+            ui.cleanup();
+        });
+
+        it('should show the header container and default header', () => {
+            const headerContainerEl = containerEl.querySelector(constants.SELECTOR_BOX_PREVIEW_HEADER_CONTAINER);
+            headerContainerEl.classList.add(constants.CLASS_HIDDEN);
+
+            ui.setupHeader();
+
+            const uiHeaderContainerEl = ui.container.querySelector(constants.SELECTOR_BOX_PREVIEW_HEADER_CONTAINER);
+            expect(uiHeaderContainerEl).to.not.have.class(constants.CLASS_HIDDEN);
+            const baseHeaderEl = uiHeaderContainerEl.firstElementChild;
+            expect(baseHeaderEl).to.have.class(constants.CLASS_BOX_PREVIEW_HEADER);
+            expect(baseHeaderEl).to.have.class(constants.CLASS_BOX_PREVIEW_BASE_HEADER);
+        });
+
+        it('should set the header theme to dark', () => {
+            expect(containerEl).to.not.have.class(constants.CLASS_BOX_PREVIEW_THEME_DARK);
+
+            ui.setupHeader('dark');
+
+            expect(containerEl).to.have.class(constants.CLASS_BOX_PREVIEW_THEME_DARK);
+        });
+
+        it('should override the logo url if specified', () => {
+            const url = 'http://test/foo';
+
+            expect(containerEl.querySelector(constants.SELECTOR_BOX_PREVIEW_LOGO_DEFAULT)).to.not.have.class(
+                constants.CLASS_HIDDEN
+            );
+
+            ui.setupHeader('', url);
+
+            const customLogoEl = containerEl.querySelector(constants.SELECTOR_BOX_PREVIEW_LOGO_CUSTOM);
+            expect(containerEl.querySelector(constants.SELECTOR_BOX_PREVIEW_LOGO_DEFAULT)).to.have.class(
+                constants.CLASS_HIDDEN
+            );
+            expect(customLogoEl).to.not.have.class(constants.CLASS_HIDDEN);
+            expect(customLogoEl.src).to.equal(url);
         });
     });
 });
diff --git a/src/lib/_common.scss b/src/lib/_common.scss
@@ -33,6 +33,12 @@ $header-height: 48px;
     }
 }
 
+.bp-header-container:not(.bp-is-hidden) {
+    + .bp:not(.bp-is-fullscreen) {
+        top: $header-height;
+    }
+}
+
 .bp-header {
     align-items: center;
     background-color: $white;
@@ -42,10 +48,6 @@ $header-height: 48px;
     justify-content: space-between;
     padding: 0 20px;
 
-    + .bp:not(.bp-is-fullscreen) {
-        top: $header-height;
-    }
-
     .bp-custom-logo {
         max-height: 30px;
     }

diff --git a/src/lib/constants.js b/src/lib/constants.js
@@ -9,6 +9,7 @@ export const CLASS_BOX_PREVIEW_FIND_BAR = 'bp-find-bar';
 export const CLASS_BOX_PREVIEW_HAS_HEADER = 'bp-has-header';
 export const CLASS_BOX_PREVIEW_HAS_NAVIGATION = 'bp-has-navigation';
 export const CLASS_BOX_PREVIEW_HEADER = 'bp-header';
+export const CLASS_BOX_PREVIEW_HEADER_CONTAINER = 'bp-header-container';
 export const CLASS_BOX_PREVIEW_BASE_HEADER = 'bp-base-header';
 export const CLASS_BOX_PREVIEW_HEADER_BTNS = 'bp-header-btns';
 export const CLASS_BOX_PREVIEW_ICON = 'bp-icon';
@@ -57,6 +58,7 @@ export const SELECTOR_BOX_PREVIEW_BTN_PRINT = '.bp-btn-print';
 export const SELECTOR_BOX_PREVIEW_BTN_DOWNLOAD = '.bp-btn-download';
 export const SELECTOR_BOX_PREVIEW_BTN_LOADING_DOWNLOAD = '.bp-btn-loading-download';
 export const SELECTOR_BOX_PREVIEW_HEADER = `.${CLASS_BOX_PREVIEW_HEADER}`;
+export const SELECTOR_BOX_PREVIEW_HEADER_CONTAINER = `.${CLASS_BOX_PREVIEW_HEADER_CONTAINER}`;
 export const SELECTOR_BOX_PREVIEW_ICON = `.${CLASS_BOX_PREVIEW_ICON}`;
 export const SELECTOR_BOX_PREVIEW_LOADING_TEXT = `.${CLASS_BOX_PREVIEW_LOADING_TEXT}`;
 export const SELECTOR_BOX_PREVIEW_LOADING_WRAPPER = `.${CLASS_BOX_PREVIEW_LOADING_WRAPPER}`;

diff --git a/src/lib/shell.html b/src/lib/shell.html
@@ -1,34 +1,36 @@
 <div class="bp-container">
-    <div class="bp-is-hidden">
-        <span class="bp-default-logo">
-            <svg height="25" width="45" viewBox="0 0 98 52" focusable="false">
-                <path d="M95.34 44.7c1.1 1.53.8 3.66-.75 4.8-1.56 1.13-3.74.84-4.93-.64l-7.8-10.23-7.82 10.23c-1.2 1.48-3.36 1.77-4.9.63-1.55-1.15-1.87-3.28-.75-4.8l9.06-11.86L68.4 21c-1.1-1.54-.8-3.67.75-4.8 1.55-1.14 3.72-.85 4.9.63l7.82 10.23 7.8-10.23c1.2-1.48 3.38-1.77 4.92-.63 1.52 1.13 1.84 3.26.73 4.8L86.3 32.84l9.04 11.85zM53.9 43.22c-5.86 0-10.6-4.65-10.6-10.4 0-5.72 4.74-10.37 10.6-10.37 5.85 0 10.6 4.65 10.6 10.38 0 5.74-4.75 10.4-10.6 10.4zm-31.23 0c-5.85 0-10.6-4.65-10.6-10.4 0-5.72 4.75-10.37 10.6-10.37 5.86 0 10.6 4.65 10.6 10.38 0 5.74-4.74 10.4-10.6 10.4zm31.22-27.7c-6.78 0-12.66 3.73-15.63 9.2-2.97-5.47-8.84-9.2-15.6-9.2-4 0-7.66 1.3-10.6 3.46V4.38C12.02 2.52 10.45 1 8.53 1 6.6 1 5.03 2.5 5 4.4v28.7c.16 9.43 8 17.03 17.67 17.03 6.77 0 12.64-3.73 15.6-9.2 2.98 5.47 8.86 9.2 15.62 9.2 9.74 0 17.66-7.75 17.66-17.32 0-9.55-7.92-17.3-17.68-17.3z"></path>
-            </svg>
-        </span>
-        <img class="bp-is-hidden bp-custom-logo"></img>
-        <div class="bp-header-btns">
-            <button class="bp-btn-plain bp-btn-annotate-draw bp-is-hidden">
-                <svg class="bp-btn-annotate-draw-enter" width="22" height="21" viewBox="0 0 14.88 14.88" focusable="false">
-                  <path d="M11.65,6.64,5.11,13.17.06,14.94,1.83,9.89,8.37,3.35Zm1.41-1.41L9.78,1.94,11.37.35a1,1,0,0,1,1.41,0l1.87,1.87a1,1,0,0,1,0,1.41Z" transform="translate(-0.06 -0.06)" fill-rule="evenodd"/>
+    <div class="bp-header-container bp-is-hidden">
+        <div>
+            <span class="bp-default-logo">
+                <svg height="25" width="45" viewBox="0 0 98 52" focusable="false">
+                    <path d="M95.34 44.7c1.1 1.53.8 3.66-.75 4.8-1.56 1.13-3.74.84-4.93-.64l-7.8-10.23-7.82 10.23c-1.2 1.48-3.36 1.77-4.9.63-1.55-1.15-1.87-3.28-.75-4.8l9.06-11.86L68.4 21c-1.1-1.54-.8-3.67.75-4.8 1.55-1.14 3.72-.85 4.9.63l7.82 10.23 7.8-10.23c1.2-1.48 3.38-1.77 4.92-.63 1.52 1.13 1.84 3.26.73 4.8L86.3 32.84l9.04 11.85zM53.9 43.22c-5.86 0-10.6-4.65-10.6-10.4 0-5.72 4.74-10.37 10.6-10.37 5.85 0 10.6 4.65 10.6 10.38 0 5.74-4.75 10.4-10.6 10.4zm-31.23 0c-5.85 0-10.6-4.65-10.6-10.4 0-5.72 4.75-10.37 10.6-10.37 5.86 0 10.6 4.65 10.6 10.38 0 5.74-4.74 10.4-10.6 10.4zm31.22-27.7c-6.78 0-12.66 3.73-15.63 9.2-2.97-5.47-8.84-9.2-15.6-9.2-4 0-7.66 1.3-10.6 3.46V4.38C12.02 2.52 10.45 1 8.53 1 6.6 1 5.03 2.5 5 4.4v28.7c.16 9.43 8 17.03 17.67 17.03 6.77 0 12.64-3.73 15.6-9.2 2.98 5.47 8.86 9.2 15.62 9.2 9.74 0 17.66-7.75 17.66-17.32 0-9.55-7.92-17.3-17.68-17.3z"></path>
                 </svg>
-            </button>
-            <button class="bp-btn-plain bp-btn-annotate-point bp-is-hidden">
-                <svg width="22" height="21" viewBox="0 0 22 21" focusable="false">
-                  <path d="M11 21l-4-4H1.99C.89 17 0 16.11 0 15V2C0 .895.89 0 1.99 0h18.02C21.11 0 22 .89 22 2v13c0 1.105-.89 2-1.99 2H15l-4 4zm-7-9.5c0-.276.228-.5.51-.5h8.98c.282 0 .51.232.51.5 0 .276-.228.5-.51.5H4.51c-.282 0-.51-.232-.51-.5zm0-3c0-.276.23-.5.5-.5h11c.276 0 .5.232.5.5 0 .276-.23.5-.5.5h-11c-.276 0-.5-.232-.5-.5zm0-3c0-.276.22-.5.498-.5h13.004c.275 0 .498.232.498.5 0 .276-.22.5-.498.5H4.498C4.223 6 4 5.768 4 5.5z" fill-rule="evenodd"/>
-                </svg>
-            </button>
-            <button class="bp-btn-plain bp-btn-print bp-is-hidden">
-                <svg height="24" viewBox="0 0 24 24" width="24" focusable="false">
-                    <path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/>
-                    <path d="M0 0h24v24H0z" fill="none"/>
-                </svg>
-            </button>
-            <button class="bp-btn-plain bp-btn-download bp-is-hidden">
-                <svg height="24" viewBox="0 0 24 24" width="24" focusable="false">
-                    <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
-                    <path d="M0 0h24v24H0z" fill="none"/>
-                </svg>
-            </button>
+            </span>
+            <img class="bp-is-hidden bp-custom-logo"></img>
+            <div class="bp-header-btns">
+                <button class="bp-btn-plain bp-btn-annotate-draw bp-is-hidden">
+                    <svg class="bp-btn-annotate-draw-enter" width="22" height="21" viewBox="0 0 14.88 14.88" focusable="false">
+                        <path d="M11.65,6.64,5.11,13.17.06,14.94,1.83,9.89,8.37,3.35Zm1.41-1.41L9.78,1.94,11.37.35a1,1,0,0,1,1.41,0l1.87,1.87a1,1,0,0,1,0,1.41Z" transform="translate(-0.06 -0.06)" fill-rule="evenodd"/>
+                    </svg>
+                </button>
+                <button class="bp-btn-plain bp-btn-annotate-point bp-is-hidden">
+                    <svg width="22" height="21" viewBox="0 0 22 21" focusable="false">
+                        <path d="M11 21l-4-4H1.99C.89 17 0 16.11 0 15V2C0 .895.89 0 1.99 0h18.02C21.11 0 22 .89 22 2v13c0 1.105-.89 2-1.99 2H15l-4 4zm-7-9.5c0-.276.228-.5.51-.5h8.98c.282 0 .51.232.51.5 0 .276-.228.5-.51.5H4.51c-.282 0-.51-.232-.51-.5zm0-3c0-.276.23-.5.5-.5h11c.276 0 .5.232.5.5 0 .276-.23.5-.5.5h-11c-.276 0-.5-.232-.5-.5zm0-3c0-.276.22-.5.498-.5h13.004c.275 0 .498.232.498.5 0 .276-.22.5-.498.5H4.498C4.223 6 4 5.768 4 5.5z" fill-rule="evenodd"/>
+                    </svg>
+                </button>
+                <button class="bp-btn-plain bp-btn-print bp-is-hidden">
+                    <svg height="24" viewBox="0 0 24 24" width="24" focusable="false">
+                        <path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/>
+                        <path d="M0 0h24v24H0z" fill="none"/>
+                    </svg>
+                </button>
+                <button class="bp-btn-plain bp-btn-download bp-is-hidden">
+                    <svg height="24" viewBox="0 0 24 24" width="24" focusable="false">
+                        <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
+                        <path d="M0 0h24v24H0z" fill="none"/>
+                    </svg>
+                </button>
+            </div>
         </div>
     </div>
     <div class="bp">