fix(root-layout): remove fixed height on header/footer (#1236)

* fix(root-layout): remove fixed height on header/footer

This reverts commit 5a212df.

* fix tests

components/root_layout/root_layout.stories.js

@@ -12,8 +12,8 @@ import DtRootLayoutDefaultTemplate from './root_layout_default.story.vue';
 // Default Prop Values
 export const argsData = {
   sidebarPosition: 'left',
-  header: '<div class="d-bgc-purple-200 d-h100p">Header</div>',
-  footer: '<div class="d-bgc-gold-200 d-h100p">Footer</div>',
+  header: '<div class="d-bgc-purple-200 d-h64 d-h100p">Header</div>',
+  footer: '<div class="d-bgc-gold-200 d-h64 d-h100p">Footer</div>',
   sidebar:
     '<div class="d-bgc-black-200 d-hmn100p"><div>Sidebar item 1</div><div>Sidebar item 2</div><div>Sidebar item 3</div></div>',
   default: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim eleifend condimentum.

components/root_layout/root_layout.test.js

@@ -1,14 +1,15 @@
 import { createLocalVue, mount } from '@vue/test-utils';
 import DtRootLayout from './root_layout.vue';
+import { ROOT_LAYOUT_SIDEBAR_POSITIONS } from '@/components/root_layout/root_layout_constants';
 
 const baseProps = {
-  headerHeight: '32px',
-  footerHeight: '64px',
 };
 
 const baseSlots = {
   header: 'header slot content',
   footer: 'footer slot content',
+  sidebar: 'sidebar slot content',
+  default: 'content slot content',
 };
 
 let mockProps = {};
@@ -19,6 +20,9 @@ describe('DtRootLayout Tests', () => {
   let wrapper;
   let header;
   let footer;
+  let body;
+  let sidebar;
+  let content;
 
   const updateWrapper = () => {
     wrapper = mount(DtRootLayout, {
@@ -29,6 +33,9 @@ describe('DtRootLayout Tests', () => {
 
     header = wrapper.find('[data-qa="dt-root-layout-header"]');
     footer = wrapper.find('[data-qa="dt-root-layout-footer"]');
+    body = wrapper.find('[data-qa="dt-root-layout-body"]');
+    sidebar = wrapper.find('[data-qa="dt-root-layout-sidebar"]');
+    content = wrapper.find('[data-qa="dt-root-layout-content"]');
   };
 
   beforeAll(() => {
@@ -57,6 +64,14 @@ describe('DtRootLayout Tests', () => {
       it('footer should exist', () => {
         expect(footer.exists()).toBe(true);
       });
+
+      it('sidebar should exist', () => {
+        expect(sidebar.exists()).toBe(true);
+      });
+
+      it('content should exist', () => {
+        expect(content.exists()).toBe(true);
+      });
     });
 
     describe('When slot content renders', () => {
@@ -67,15 +82,13 @@ describe('DtRootLayout Tests', () => {
       it('footer slot is passed down correctly', () => {
         expect(footer.text()).toBe(baseSlots.footer);
       });
-    });
 
-    describe('When dynamic inline styles are set', () => {
-      it('should set the header height', () => {
-        expect(header.element.style.getPropertyValue('height')).toBe(baseProps.headerHeight);
+      it('sidebar slot is passed down correctly', () => {
+        expect(sidebar.text()).toBe(baseSlots.sidebar);
       });
 
-      it('should set the footer height', () => {
-        expect(footer.element.style.getPropertyValue('height')).toBe(baseProps.footerHeight);
+      it('content slot is passed down correctly', () => {
+        expect(content.text()).toBe(baseSlots.default);
       });
     });
 
@@ -92,6 +105,21 @@ describe('DtRootLayout Tests', () => {
         expect(header.classes('d-root-layout__header--sticky')).toBe(true);
       });
     });
+
+    describe('When sidebarPosition is set to left', () => {
+      it('Has correct class', async () => {
+        await wrapper.setProps({ sidebarPosition: ROOT_LAYOUT_SIDEBAR_POSITIONS.LEFT });
+
+        expect(body.classes('d-root-layout__body--invert')).toBe(false);
+      });
+    });
+    describe('When sidebarPosition is set to right', () => {
+      it('Has correct class', async () => {
+        await wrapper.setProps({ sidebarPosition: ROOT_LAYOUT_SIDEBAR_POSITIONS.LEFT });
+
+        expect(body.classes('d-root-layout__body--invert')).toBe(false);
+      });
+    });
   });
 
   describe('Accessibility Tests', () => {
@@ -106,5 +134,17 @@ describe('DtRootLayout Tests', () => {
         expect(footer.element.tagName).toBe('FOOTER');
       });
     });
+
+    describe('When sidebar is rendered', () => {
+      it('Uses `aside` tag', () => {
+        expect(sidebar.element.tagName).toBe('ASIDE');
+      });
+    });
+
+    describe('When content is rendered', () => {
+      it('Uses `main` tag', () => {
+        expect(content.element.tagName).toBe('MAIN');
+      });
+    });
   });
 });

components/root_layout/root_layout.vue

@@ -4,53 +4,49 @@
     data-qa="dt-root-layout"
   >
     <header
-      v-if="$slots.header"
       :class="['d-root-layout__header', { 'd-root-layout__header--sticky': headerSticky }, headerClass]"
-      :style="{ 'height': headerHeight, 'min-height': headerHeight }"
       data-qa="dt-root-layout-header"
     >
-      <!-- @slot Slot for header content -->
+      <!-- @slot Slot for header content be sure to set a height on the element inside this
+        if you want a fixed height. -->
       <slot name="header" />
     </header>
-    <dt-root-layout-body
-      :body-class="bodyClass"
-      :content-class="contentClass"
-      :sidebar-class="sidebarClass"
-      :sidebar-width="sidebarWidth"
-      :sidebar-position="sidebarPosition"
-      :header-height="$slots.header ? headerHeight : '0px'"
-      :footer-height="$slots.footer ? footerHeight : '0px'"
-      :fixed="fixed"
+    <div
+      ref="root-layout-body"
+      :class="['d-root-layout__body', bodyClasses]"
+      data-qa="dt-root-layout-body"
     >
-      <template
-        v-if="$slots.sidebar"
-        #sidebar
+      <aside
+        ref="root-layout-sidebar"
+        :class="['d-root-layout__sidebar', { 'd-root-layout__sidebar--sticky': fixed }, sidebarClass]"
+        :style="{ 'flex-basis': sidebarWidth }"
+        data-qa="dt-root-layout-sidebar"
       >
         <!-- @slot Slot for the sidebar -->
         <slot name="sidebar" />
-      </template>
-      <template
-        v-if="$slots.default"
-        #content
+      </aside>
+      <main
+        ref="root-layout-content"
+        :class="['d-root-layout__content', contentClass]"
+        data-qa="dt-root-layout-content"
+        tabindex="0"
       >
-        <!-- @slot Slot for main content -->
-        <slot name="default" />
-      </template>
-    </dt-root-layout-body>
+        <!-- @slot Slot for the main content -->
+        <slot />
+      </main>
+    </div>
     <footer
-      v-if="$slots.footer"
       :class="['d-root-layout__footer', footerClass]"
-      :style="{ 'height': footerHeight, 'min-height': footerHeight }"
       data-qa="dt-root-layout-footer"
     >
-      <!-- @slot Slot for footer content -->
+      <!-- @slot Slot for footer content be sure to set a height on the element inside this
+        if you want a fixed height. -->
       <slot name="footer" />
     </footer>
   </div>
 </template>
 
 <script>
-import DtRootLayoutBody from './root_layout_body.vue';
 import { ROOT_LAYOUT_SIDEBAR_POSITIONS, ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS } from './root_layout_constants';
 
 /**
@@ -59,10 +55,6 @@ import { ROOT_LAYOUT_SIDEBAR_POSITIONS, ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS } fro
 export default {
   name: 'DtRootLayout',
 
-  components: {
-    DtRootLayoutBody,
-  },
-
   props: {
     /**
      * When true, the header, footer and sidebar will be locked in position and the content will
@@ -83,8 +75,7 @@ export default {
     },
 
     /**
-     * The height of the header
-     * Possible units rem|px|%|em
+     * DEPRECATED: set the height of the inner element instead.
      */
     headerHeight: {
       type: String,
@@ -153,8 +144,7 @@ export default {
     },
 
     /**
-     * The height of the footer
-     * Possible units rem|px|%|em
+     * DEPRECATED: set the height of the inner element instead.
      */
     footerHeight: {
       type: String,
@@ -177,6 +167,13 @@ export default {
       if (!this.responsiveBreakpoint) return;
       return `d-root-layout__responsive--${this.responsiveBreakpoint}`;
     },
+
+    bodyClasses () {
+      return [
+        this.bodyClass,
+        { 'd-root-layout__body--invert': this.sidebarPosition === ROOT_LAYOUT_SIDEBAR_POSITIONS.RIGHT },
+      ];
+    },
   },
 };
 </script>