fix(root-layout): convert to pure CSS grid method (#1253)

* fix(root-layout): convert to pure CSS grid method * separate classes * fix storybook booleans * fix test * map fixed prop correctly * remove sidebar sticky
dialpad · Oct 13, 2023 · db3ba06 · db3ba06
1 parent a37dc1e
commit db3ba06
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 64 deletions.
diff --git a/components/root_layout/root_layout.stories.js b/components/root_layout/root_layout.stories.js
@@ -8,14 +8,15 @@ import {
 import DtRootLayout from './root_layout.vue';
 
 import DtRootLayoutDefaultTemplate from './root_layout_default.story.vue';
+import DtRootLayoutStickyTemplate from './root_layout_sticky.story.vue';
 
 // Default Prop Values
 export const argsData = {
   sidebarPosition: 'left',
-  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>',
+  header: '<div class="d-bgc-purple-200 d-h64">Header</div>',
+  footer: '<div class="d-bgc-gold-200 d-h64">Footer</div>',
   sidebar:
-    '<div class="d-bgc-black-200 d-h100p d-w264"><div>Sidebar item 1</div><div>Sidebar item 2</div><div>Sidebar item 3</div></div>',
+    '<div class="d-bgc-black-200 d-wmn264 d-h100p"><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.
   Vestibulum euismod leo at finibus mattis. Integer ut dui id ligula tincidunt pellentesque. Vestibulum a ullamcorper
   risus. Ut tristique sapien eget magna lacinia, non interdum lacus malesuada. Proin augue lacus, finibus eget aliquam
@@ -95,11 +96,19 @@ export const argTypesData = {
 
   responsiveBreakpoint: {
     defaultValue: null,
+    options: ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS,
     control: {
       type: 'select',
-      options: ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS,
     },
   },
+
+  headerSticky: {
+    control: 'boolean',
+  },
+
+  fixed: {
+    control: 'boolean',
+  },
 };
 
 // Story Collection
@@ -109,11 +118,16 @@ export default {
   args: argsData,
   argTypes: argTypesData,
   excludeStories: /.*Data$/,
+  parameters: {
+    layout: 'fullscreen',
+  },
 };
 
 // Templates
 const DefaultTemplate = (args, { argTypes }) =>
   createTemplateFromVueFile(args, argTypes, DtRootLayoutDefaultTemplate);
+const StickyTemplate = (args, { argTypes }) =>
+  createTemplateFromVueFile(args, argTypes, DtRootLayoutStickyTemplate);
 
 export const Default = {
   render: DefaultTemplate,
@@ -124,7 +138,7 @@ export const Default = {
 };
 
 export const StickyHeader = {
-  render: DefaultTemplate,
+  render: StickyTemplate,
 
   args: {
     headerSticky: true,

diff --git a/components/root_layout/root_layout.test.js b/components/root_layout/root_layout.test.js
@@ -20,7 +20,6 @@ describe('DtRootLayout Tests', () => {
   let wrapper;
   let header;
   let footer;
-  let body;
   let sidebar;
   let content;
 
@@ -33,7 +32,6 @@ 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"]');
   };
@@ -110,14 +108,14 @@ describe('DtRootLayout Tests', () => {
       it('Has correct class', async () => {
         await wrapper.setProps({ sidebarPosition: ROOT_LAYOUT_SIDEBAR_POSITIONS.LEFT });
 
-        expect(body.classes('d-root-layout__body--invert')).toBe(false);
+        expect(wrapper.classes('d-root-layout--inverted')).toBe(false);
       });
     });
     describe('When sidebarPosition is set to right', () => {
       it('Has correct class', async () => {
-        await wrapper.setProps({ sidebarPosition: ROOT_LAYOUT_SIDEBAR_POSITIONS.LEFT });
+        await wrapper.setProps({ sidebarPosition: ROOT_LAYOUT_SIDEBAR_POSITIONS.RIGHT });
 
-        expect(body.classes('d-root-layout__body--invert')).toBe(false);
+        expect(wrapper.classes('d-root-layout--inverted')).toBe(true);
       });
     });
   });

diff --git a/components/root_layout/root_layout.vue b/components/root_layout/root_layout.vue
@@ -1,6 +1,14 @@
 <template>
   <div
-    :class="['root-layout d-root-layout', { 'd-root-layout--fixed': fixed }, responsiveClass]"
+    :class="[
+      'root-layout',
+      'd-root-layout',
+      {
+        'd-root-layout--fixed': fixed,
+        'd-root-layout--inverted': isInverted,
+        [`d-root-layout__responsive--${responsiveBreakpoint}`]: !!responsiveBreakpoint,
+      },
+    ]"
     data-qa="dt-root-layout"
   >
     <header
@@ -11,29 +19,23 @@
         if you want a fixed height. -->
       <slot name="header" />
     </header>
-    <div
-      ref="root-layout-body"
-      :class="['d-root-layout__body', bodyClasses]"
-      data-qa="dt-root-layout-body"
+    <aside
+      ref="root-layout-sidebar"
+      :class="['d-root-layout__sidebar', sidebarClass]"
+      data-qa="dt-root-layout-sidebar"
     >
-      <aside
-        ref="root-layout-sidebar"
-        :class="['d-root-layout__sidebar', { 'd-root-layout__sidebar--sticky': fixed }, sidebarClass]"
-        data-qa="dt-root-layout-sidebar"
-      >
-        <!-- @slot Slot for sidebar content, be sure to set a width on the element within this. -->
-        <slot name="sidebar" />
-      </aside>
-      <main
-        ref="root-layout-content"
-        :class="['d-root-layout__content', contentClass]"
-        data-qa="dt-root-layout-content"
-        tabindex="0"
-      >
-        <!-- @slot Slot for the main content -->
-        <slot />
-      </main>
-    </div>
+      <!-- @slot Slot for sidebar content, be sure to set a width on the element within this. -->
+      <slot name="sidebar" />
+    </aside>
+    <main
+      ref="root-layout-content"
+      :class="['d-root-layout__content', contentClass]"
+      data-qa="dt-root-layout-content"
+      tabindex="0"
+    >
+      <!-- @slot Slot for the main content -->
+      <slot />
+    </main>
     <footer
       :class="['d-root-layout__footer', footerClass]"
       data-qa="dt-root-layout-footer"
@@ -81,14 +83,6 @@ export default {
       default: '64px',
     },
 
-    /**
-     * Additional class name for the body
-     */
-    bodyClass: {
-      type: [String, Array, Object],
-      default: '',
-    },
-
     /**
      * Scroll the header with the page
      * @values true, false
@@ -115,7 +109,7 @@ export default {
     },
 
     /**
-     * DEPRECATED: set the height of the inner element instead.
+     * DEPRECATED: set the min-width of the inner element instead.
      */
     sidebarWidth: {
       type: String,
@@ -161,17 +155,97 @@ export default {
   },
 
   computed: {
-    responsiveClass () {
-      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 },
-      ];
+    isInverted () {
+      return this.sidebarPosition === ROOT_LAYOUT_SIDEBAR_POSITIONS.RIGHT;
     },
   },
 };
 </script>
+
+<style lang="less">
+.d-root-layout {
+  position: relative;
+  display: grid;
+  grid-template-areas:
+    'header header'
+    'sidebar body'
+    'footer footer';
+  grid-template-columns: min-content 1fr;
+  min-height: 100vh;
+
+  &--inverted {
+    grid-template-areas:
+      'header header'
+      'body sidebar'
+      'footer footer';
+    grid-template-columns: 1fr min-content;
+  }
+
+  &--fixed {
+    height: 100vh;
+  }
+
+  &__header {
+    grid-area: header;
+
+    &--sticky {
+      position: sticky;
+      top: 0;
+      z-index: var(--zi-base1);
+    }
+  }
+
+  &__sidebar {
+    grid-area: sidebar;
+    height: 100%;
+    box-shadow: none;
+  }
+
+  &__content {
+    grid-area: body;
+    box-shadow: none;
+    overflow-y: auto;
+
+    &:focus-visible {
+      box-shadow: none;
+    }
+  }
+
+  &__footer {
+    grid-area: footer;
+  }
+}
+
+@media (max-width: 480px) {
+  .d-root-layout__responsive--sm {
+    grid-template-areas:
+    'header'
+    'sidebar'
+    'body'
+    'footer';
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .d-root-layout__responsive--md {
+    grid-template-areas:
+    'header'
+    'sidebar'
+    'body'
+    'footer';
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 980px) {
+  .d-root-layout__responsive--lg {
+    grid-template-areas:
+    'header'
+    'sidebar'
+    'body'
+    'footer';
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/components/root_layout/root_layout_default.story.vue b/components/root_layout/root_layout_default.story.vue
@@ -1,7 +1,6 @@
 <!-- eslint-disable vue/no-static-inline-styles -->
 <template>
   <dt-root-layout
-    :body-class="bodyClass"
     :header-class="headerClass"
     :header-sticky="headerSticky"
     :content-class="contentClass"

diff --git a/components/root_layout/root_layout_sticky.story.vue b/components/root_layout/root_layout_sticky.story.vue
@@ -1,35 +1,26 @@
 <template>
   <dt-root-layout
-    :body-class="bodyClass"
     :header-class="headerClass"
     :header-sticky="headerSticky"
-    :header-height="headerHeight"
     :content-class="contentClass"
-    :content-wrap-width-percent="contentWrapWidthPercent"
     :sidebar-class="sidebarClass"
     :sidebar-position="sidebarPosition"
-    :sidebar-width="sidebarWidth"
     :footer-class="footerClass"
-    :footer-height="footerHeight"
     :fixed="fixed"
+    :responsive-breakpoint="responsiveBreakpoint"
   >
     <template
-      v-if="header"
       #header
     >
       <span v-html="header" />
     </template>
     <template
-      v-if="sidebar"
       #sidebar
     >
       <span v-html="sidebar" />
     </template>
-    <template v-if="defaultSlot">
-      <div v-html="defaultSlot" />
-    </template>
+    <span v-html="defaultSlot" />
     <template
-      v-if="footer"
       #footer
     >
       <span v-html="footer" />