docs: update root layout examples (#1286)

* docs: update root layout examples

* package lock

* remove color from footer slot

* add tabindex=0 on scrollable region

components/root_layout/root_layout.stories.js

@@ -10,13 +10,17 @@ import DtRootLayout from './root_layout.vue';
 import DtRootLayoutDefaultTemplate from './root_layout_default.story.vue';
 import DtRootLayoutStickyTemplate from './root_layout_sticky.story.vue';
 
+const sidebarItems = '<div>Sidebar item</div>'.repeat(45);
+
 // Default Prop Values
 export const argsData = {
   sidebarPosition: 'left',
-  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-wmn264 d-h100p"><div>Sidebar item 1</div><div>Sidebar item 2</div><div>Sidebar item 3</div></div>',
+  header: '<div class="d-h64">Header</div>',
+  headerClass: 'd-bgc-purple-200',
+  footer: '<div class="d-h64">Footer</div>',
+  footerClass: 'd-bgc-gold-200',
+  sidebar: `<div class="d-w264">${sidebarItems}</div>`,
+  sidebarClass: 'd-bgc-black-200',
   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

components/root_layout/root_layout.vue

@@ -21,6 +21,7 @@
     </header>
     <aside
       ref="root-layout-sidebar"
+      tabindex="0"
       :class="['d-root-layout__sidebar', sidebarClass]"
       data-qa="dt-root-layout-sidebar"
     >
@@ -117,7 +118,7 @@ export default {
     },
 
     /**
-     * DEPRECATED: set the min-width of the inner element instead.
+     * DEPRECATED: set the width of the inner element instead.
      */
     sidebarWidth: {
       type: String,

components/root_layout/root_layout_default.story.vue

@@ -13,24 +13,24 @@
     <template
       #header
     >
-      <v-html
+      <html-fragment
         :html="$attrs.header"
       />
     </template>
     <template
       #sidebar
     >
-      <v-html
+      <html-fragment
         :html="$attrs.sidebar"
       />
     </template>
-    <v-html
+    <html-fragment
       :html="$attrs.default"
     />
     <template
       #footer
     >
-      <v-html
+      <html-fragment
         :html="$attrs.footer"
       />
     </template>
@@ -39,10 +39,10 @@
 
 <script>
 import DtRootLayout from './root_layout.vue';
-import VHtml from '@/common/v_html';
+import { htmlFragment } from '@/common/utils';
 
 export default {
   name: 'DtRootLayoutDefault',
-  components: { DtRootLayout, VHtml },
+  components: { DtRootLayout, htmlFragment },
 };
 </script>

package.json

@@ -55,7 +55,7 @@
     "@commitlint/cli": "^17.6.6",
     "@commitlint/config-conventional": "^17.6.6",
     "@dialpad/conventional-changelog-angular": "^1.1.1",
-    "@dialpad/dialtone": "^8.21.2",
+    "@dialpad/dialtone": "^8.21.3",
     "@dialpad/semantic-release-changelog-json": "^1.0.0",
     "@percy/cli": "^1.27.3",
     "@percy/storybook": "^4.3.7",