From 2b026c40954c5e680efbc19213b32e43aa7cf224 Mon Sep 17 00:00:00 2001
From: Lee Chase <leechase@live.com>
Date: Wed, 23 Sep 2020 12:46:20 +0100
Subject: [PATCH] fix: slot not updating with v-slot (#1026)

Co-authored-by: Lee Chase <lee.chase@uk.ibm.com>
---
 .../components/cv-combo-box/cv-combo-box.vue  |  4 +-
 .../_cv-data-table-row-inner.vue              |  4 +-
 .../cv-data-table/cv-data-table-row.vue       |  2 +-
 .../cv-data-table/cv-data-table-skeleton.vue  |  4 +-
 .../cv-data-table/cv-data-table.vue           |  4 +-
 .../cv-date-picker/cv-date-picker.vue         |  4 +-
 .../components/cv-dropdown/cv-dropdown.vue    |  4 +-
 .../core/src/components/cv-modal/cv-modal.vue |  4 +-
 .../cv-multi-select/cv-multi-select.vue       |  4 +-
 .../cv-number-input/cv-number-input.vue       |  4 +-
 .../src/components/cv-select/cv-select.vue    |  4 +-
 .../components/cv-text-area/cv-text-area.vue  |  4 +-
 .../cv-text-input/cv-text-input.vue           |  4 +-
 .../cv-time-picker/cv-time-picker.vue         |  4 +-
 .../src/components/cv-ui-shell/cv-header.vue  |  4 +-
 .../cv-ui-shell/cv-side-nav-link.vue          |  2 +-
 .../cv-ui-shell/cv-side-nav-menu.vue          |  4 +-
 storybook/stories/cv-ui-shell-story.js        | 58 +++++++++++--------
 18 files changed, 67 insertions(+), 55 deletions(-)

diff --git a/packages/core/src/components/cv-combo-box/cv-combo-box.vue b/packages/core/src/components/cv-combo-box/cv-combo-box.vue
index bd72cd8b9..5dd4a7ab5 100644
--- a/packages/core/src/components/cv-combo-box/cv-combo-box.vue
+++ b/packages/core/src/components/cv-combo-box/cv-combo-box.vue
@@ -189,7 +189,7 @@ export default {
     this.highlighted = this.value ? this.value : this.highlight; // override highlight with value if provided
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   computed: {
@@ -225,7 +225,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
diff --git a/packages/core/src/components/cv-data-table/_cv-data-table-row-inner.vue b/packages/core/src/components/cv-data-table/_cv-data-table-row-inner.vue
index 7f22535b0..b2e3fa8b9 100644
--- a/packages/core/src/components/cv-data-table/_cv-data-table-row-inner.vue
+++ b/packages/core/src/components/cv-data-table/_cv-data-table-row-inner.vue
@@ -86,7 +86,7 @@ export default {
   mounted() {
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   watch: {
@@ -121,7 +121,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.hasOverflowMenu = !!((this.overflowMenu && this.overflowMenu.length) || this.$slots['overflow-menu']);
     },
     onChange() {
diff --git a/packages/core/src/components/cv-data-table/cv-data-table-row.vue b/packages/core/src/components/cv-data-table/cv-data-table-row.vue
index 0bc4a06c8..9aabf404b 100644
--- a/packages/core/src/components/cv-data-table/cv-data-table-row.vue
+++ b/packages/core/src/components/cv-data-table/cv-data-table-row.vue
@@ -55,7 +55,7 @@ export default {
     },
   },
   mounted() {
-    // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+    // NOTE: this.$slots is not reactive so needs to be managed on updated
     this.dataExpandable = !!this.$slots.expandedContent;
     this.$parent.$emit('cv:mounted', this);
   },
diff --git a/packages/core/src/components/cv-data-table/cv-data-table-skeleton.vue b/packages/core/src/components/cv-data-table/cv-data-table-skeleton.vue
index 76f789bd9..097aef0ed 100644
--- a/packages/core/src/components/cv-data-table/cv-data-table-skeleton.vue
+++ b/packages/core/src/components/cv-data-table/cv-data-table-skeleton.vue
@@ -42,7 +42,7 @@ export default {
   mounted() {
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   computed: {
@@ -55,7 +55,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.hasBatchActions = !!this.$slots['batch-actions'];
       this.hasHelperText = !!this.$slots['helper-text'];
       this.hasActions = !!this.$slots['actions'];
diff --git a/packages/core/src/components/cv-data-table/cv-data-table.vue b/packages/core/src/components/cv-data-table/cv-data-table.vue
index 2967dd20a..fdd4b57a9 100644
--- a/packages/core/src/components/cv-data-table/cv-data-table.vue
+++ b/packages/core/src/components/cv-data-table/cv-data-table.vue
@@ -276,7 +276,7 @@ export default {
     this.updateRowsSelected();
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   computed: {
@@ -341,7 +341,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.hasBatchActions = !!this.$slots['batch-actions'];
       this.hasActions = !!this.$slots.actions;
       this.hasToolbar = !!(this.$slots.actions || this.$listeners.search || this.$slots['batch-actions']);
diff --git a/packages/core/src/components/cv-date-picker/cv-date-picker.vue b/packages/core/src/components/cv-date-picker/cv-date-picker.vue
index dca46ebf1..a5ae1046b 100644
--- a/packages/core/src/components/cv-date-picker/cv-date-picker.vue
+++ b/packages/core/src/components/cv-date-picker/cv-date-picker.vue
@@ -199,7 +199,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(
         this.$slots['invalid-message'] ||
         (this.invalidMessage && this.invalidMessage.length) ||
@@ -327,7 +327,7 @@ export default {
     //   this.cal.setDate([curDate, anotherDate], true);
     // }, 2000);
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   beforeDestroy() {
diff --git a/packages/core/src/components/cv-dropdown/cv-dropdown.vue b/packages/core/src/components/cv-dropdown/cv-dropdown.vue
index 8df55e390..1dc5360bb 100644
--- a/packages/core/src/components/cv-dropdown/cv-dropdown.vue
+++ b/packages/core/src/components/cv-dropdown/cv-dropdown.vue
@@ -171,7 +171,7 @@ export default {
     this.updateChildren(this.internalValue);
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     document.body.removeEventListener('click', this.checkSlots);
     this.checkSlots();
   },
@@ -252,7 +252,7 @@ export default {
       }
     },
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
diff --git a/packages/core/src/components/cv-modal/cv-modal.vue b/packages/core/src/components/cv-modal/cv-modal.vue
index 6650aa8aa..f52dbb642 100644
--- a/packages/core/src/components/cv-modal/cv-modal.vue
+++ b/packages/core/src/components/cv-modal/cv-modal.vue
@@ -121,7 +121,7 @@ export default {
     }
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   watch: {
@@ -163,7 +163,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.hasFooter = !!(this.$slots['primary-button'] || this.$slots['secondary-button']);
       this.hasHeaderLabel = !!this.$slots.label;
       this.hasSecondary = !!this.$slots['secondary-button'];
diff --git a/packages/core/src/components/cv-multi-select/cv-multi-select.vue b/packages/core/src/components/cv-multi-select/cv-multi-select.vue
index 0e96546f5..773d7ceb3 100644
--- a/packages/core/src/components/cv-multi-select/cv-multi-select.vue
+++ b/packages/core/src/components/cv-multi-select/cv-multi-select.vue
@@ -252,7 +252,7 @@ export default {
     this.highlighted = this.value ? this.value : this.highlight; // override highlight with value if provided
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   computed: {
@@ -292,7 +292,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
diff --git a/packages/core/src/components/cv-number-input/cv-number-input.vue b/packages/core/src/components/cv-number-input/cv-number-input.vue
index 1426e1b10..9c0b7e26e 100644
--- a/packages/core/src/components/cv-number-input/cv-number-input.vue
+++ b/packages/core/src/components/cv-number-input/cv-number-input.vue
@@ -132,7 +132,7 @@ export default {
     this.internalValue = this.valueAsString(this.value);
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   watch: {
@@ -162,7 +162,7 @@ export default {
       this.emitValue();
     },
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
diff --git a/packages/core/src/components/cv-select/cv-select.vue b/packages/core/src/components/cv-select/cv-select.vue
index a39f72593..2f3a02ad2 100644
--- a/packages/core/src/components/cv-select/cv-select.vue
+++ b/packages/core/src/components/cv-select/cv-select.vue
@@ -115,7 +115,7 @@ export default {
     }
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   watch: {
@@ -152,7 +152,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
diff --git a/packages/core/src/components/cv-text-area/cv-text-area.vue b/packages/core/src/components/cv-text-area/cv-text-area.vue
index 5afd22554..70acb5661 100644
--- a/packages/core/src/components/cv-text-area/cv-text-area.vue
+++ b/packages/core/src/components/cv-text-area/cv-text-area.vue
@@ -69,7 +69,7 @@ export default {
   mounted() {
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   computed: {
@@ -85,7 +85,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
diff --git a/packages/core/src/components/cv-text-input/cv-text-input.vue b/packages/core/src/components/cv-text-input/cv-text-input.vue
index 0946e6fd8..a2db95b19 100644
--- a/packages/core/src/components/cv-text-input/cv-text-input.vue
+++ b/packages/core/src/components/cv-text-input/cv-text-input.vue
@@ -96,7 +96,7 @@ export default {
   mounted() {
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   watch: {
@@ -131,7 +131,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
diff --git a/packages/core/src/components/cv-time-picker/cv-time-picker.vue b/packages/core/src/components/cv-time-picker/cv-time-picker.vue
index 137618714..ea6e5dd1b 100644
--- a/packages/core/src/components/cv-time-picker/cv-time-picker.vue
+++ b/packages/core/src/components/cv-time-picker/cv-time-picker.vue
@@ -103,7 +103,7 @@ export default {
   mounted() {
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   computed: {
@@ -133,7 +133,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
     },
   },
diff --git a/packages/core/src/components/cv-ui-shell/cv-header.vue b/packages/core/src/components/cv-ui-shell/cv-header.vue
index a70c8ab8e..afec73b95 100644
--- a/packages/core/src/components/cv-ui-shell/cv-header.vue
+++ b/packages/core/src/components/cv-ui-shell/cv-header.vue
@@ -32,10 +32,10 @@ export default {
     };
   },
   mounted() {
-    // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+    // NOTE: this.$slots is not reactive so needs to be managed on updated
     this.hasGlobalHeader = !!this.$slots['header-global'];
   },
-  beforeUpdate() {
+  updated() {
     this.hasGlobalHeader = !!this.$slots['header-global'];
   },
   computed: {
diff --git a/packages/core/src/components/cv-ui-shell/cv-side-nav-link.vue b/packages/core/src/components/cv-ui-shell/cv-side-nav-link.vue
index f8392f500..a2c9e0df5 100644
--- a/packages/core/src/components/cv-ui-shell/cv-side-nav-link.vue
+++ b/packages/core/src/components/cv-ui-shell/cv-side-nav-link.vue
@@ -40,7 +40,7 @@ export default {
       hasNavIcon: this.$slots['nav-icon'],
     };
   },
-  beforeUpdate() {
+  updated() {
     this.hasNavIcon = !!this.$slots['nav-icon'];
   },
 };
diff --git a/packages/core/src/components/cv-ui-shell/cv-side-nav-menu.vue b/packages/core/src/components/cv-ui-shell/cv-side-nav-menu.vue
index 9ed3836a7..0af26f6f8 100644
--- a/packages/core/src/components/cv-ui-shell/cv-side-nav-menu.vue
+++ b/packages/core/src/components/cv-ui-shell/cv-side-nav-menu.vue
@@ -56,10 +56,10 @@ export default {
     };
   },
   mounted() {
-    // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+    // NOTE: this.$slots is not reactive so needs to be managed on updated
     this.hasNavIcon = !!this.$slots['nav-icon'];
   },
-  beforeUpdate() {
+  updated() {
     this.hasNavIcon = !!this.$slots['nav-icon'];
   },
   computed: {
diff --git a/storybook/stories/cv-ui-shell-story.js b/storybook/stories/cv-ui-shell-story.js
index f1bd6c1ce..af0175bfe 100644
--- a/storybook/stories/cv-ui-shell-story.js
+++ b/storybook/stories/cv-ui-shell-story.js
@@ -32,9 +32,10 @@ import {
 import Fade16 from '@carbon/icons-vue/es/fade/16';
 import Notification20 from '@carbon/icons-vue/es/notification/20';
 import UserAvatar20 from '@carbon/icons-vue/es/user--avatar/20';
+import Login20 from '@carbon/icons-vue/es/login/20';
 import AppSwitcher20 from '@carbon/icons-vue/es/app-switcher/20';
 
-const storiesDefault = storiesOf('Components/CvUIShell - header', module);
+const storiesDefault = storiesOf('Components/CvUIShell', module);
 // const storiesExperimental = storiesOf('Experimental/CvUIShell - header', module);
 
 const preKnobs = {
@@ -92,7 +93,7 @@ const preKnobs = {
   },
   headerActions: {
     group: 'headerActions',
-    value: `<template slot="header-global">
+    value: `<template v-slot:header-global>
     <cv-header-global-action
       aria-label="Notifications"
       aria-controls="notifications-panel"
@@ -100,7 +101,8 @@ const preKnobs = {
       <Notification20 />
     </cv-header-global-action>
     <cv-header-global-action aria-label="User avatar" @click="actionUserAvatar" aria-controls="user-panel">
-      <UserAvatar20 />
+      <UserAvatar20 v-if="loggedIn"/>
+      <Login20 v-else />
     </cv-header-global-action>
     <cv-header-global-action
       aria-label="App switcher"
@@ -203,7 +205,7 @@ const preKnobs = {
     value: `<cv-side-nav id="side-nav" fixed expanded>
       <cv-side-nav-items>
         <cv-side-nav-menu title="L1 menu">
-          <template slot="nav-icon"><Fade16 /></template>
+          <template v-slot:nav-icon><Fade16 /></template>
           <cv-side-nav-menu-item href="javascript:void(0)" active>
             L2 menu item
           </cv-side-nav-menu-item>
@@ -215,7 +217,7 @@ const preKnobs = {
           </cv-side-nav-menu-item>
         </cv-side-nav-menu>
         <cv-side-nav-menu title="L1 menu">
-          <template slot="nav-icon"><Fade16 /></template>
+          <template v-slot:nav-icon><Fade16 /></template>
           <cv-side-nav-menu-item href="javascript:void(0)">
             L2 menu item
           </cv-side-nav-menu-item>
@@ -227,11 +229,11 @@ const preKnobs = {
           </cv-side-nav-menu-item>
         </cv-side-nav-menu>
         <cv-side-nav-link href="javascript:void(0)">
-          <template slot="nav-icon"><Fade16 /></template>
+          <template v-slot:nav-icon><Fade16 /></template>
           L1 link
         </cv-side-nav-link>
         <cv-side-nav-link href="javascript:void(0)">
-          <template slot="nav-icon"><Fade16 /></template>
+          <template v-slot:nav-icon><Fade16 /></template>
           L1 link
         </cv-side-nav-link>
       </cv-side-nav-items>
@@ -365,7 +367,7 @@ const preKnobs = {
     value: `<cv-side-nav id="side-nav">
       <cv-side-nav-items>
         <cv-side-nav-menu title="L1 menu">
-          <template slot="nav-icon"><Fade16 /></template>
+          <template v-slot:nav-icon><Fade16 /></template>
           <cv-side-nav-menu-item href="javascript:void(0)" active>
             L2 menu item
           </cv-side-nav-menu-item>
@@ -377,7 +379,7 @@ const preKnobs = {
           </cv-side-nav-menu-item>
         </cv-side-nav-menu>
         <cv-side-nav-menu title="L1 menu">
-          <template slot="nav-icon"><Fade16 /></template>
+          <template v-slot:nav-icon><Fade16 /></template>
           <cv-side-nav-menu-item href="javascript:void(0)">
             L2 menu item
           </cv-side-nav-menu-item>
@@ -389,11 +391,11 @@ const preKnobs = {
           </cv-side-nav-menu-item>
         </cv-side-nav-menu>
         <cv-side-nav-link href="javascript:void(0)">
-          <template slot="nav-icon"><Fade16 /></template>
+          <template v-slot:nav-icon><Fade16 /></template>
           L1 link
         </cv-side-nav-link>
         <cv-side-nav-link href="javascript:void(0)">
-          <template slot="nav-icon"><Fade16 /></template>
+          <template v-slot:nav-icon><Fade16 /></template>
           L1 link
         </cv-side-nav-link>
       </cv-side-nav-items>
@@ -439,7 +441,7 @@ const preKnobs = {
     value: `<cv-side-nav id="side-nav">
       <cv-side-nav-items>
         <cv-side-nav-menu title="L1 menu">
-          <template slot="nav-icon"><Fade16 /></template>
+          <template v-slot:nav-icon><Fade16 /></template>
           <cv-side-nav-menu-item href="javascript:void(0)" active>
             L2 menu item
           </cv-side-nav-menu-item>
@@ -451,7 +453,7 @@ const preKnobs = {
           </cv-side-nav-menu-item>
         </cv-side-nav-menu>
         <cv-side-nav-menu title="L1 menu">
-          <template slot="nav-icon"><Fade16 /></template>
+          <template v-slot:nav-icon><Fade16 /></template>
           <cv-side-nav-menu-item href="javascript:void(0)">
             L2 menu item
           </cv-side-nav-menu-item>
@@ -463,11 +465,11 @@ const preKnobs = {
           </cv-side-nav-menu-item>
         </cv-side-nav-menu>
         <cv-side-nav-link href="javascript:void(0)">
-          <template slot="nav-icon"><Fade16 /></template>
+          <template v-slot:nav-icon><Fade16 /></template>
           L1 link
         </cv-side-nav-link>
         <cv-side-nav-link href="javascript:void(0)">
-          <template slot="nav-icon"><Fade16 /></template>
+          <template v-slot:nav-icon><Fade16 /></template>
           L1 link
         </cv-side-nav-link>
       </cv-side-nav-items>
@@ -478,7 +480,7 @@ const preKnobs = {
     value: `<cv-side-nav id="side-nav" rail>
       <cv-side-nav-items>
         <cv-side-nav-menu title="L1 menu">
-          <template slot="nav-icon"><Fade16 /></template>
+          <template v-slot:nav-icon><Fade16 /></template>
           <cv-side-nav-menu-item href="javascript:void(0)" active>
             L2 menu item
           </cv-side-nav-menu-item>
@@ -490,7 +492,7 @@ const preKnobs = {
           </cv-side-nav-menu-item>
         </cv-side-nav-menu>
         <cv-side-nav-menu title="L1 menu">
-          <template slot="nav-icon"><Fade16 /></template>
+          <template v-slot:nav-icon><Fade16 /></template>
           <cv-side-nav-menu-item href="javascript:void(0)">
             L2 menu item
           </cv-side-nav-menu-item>
@@ -502,11 +504,11 @@ const preKnobs = {
           </cv-side-nav-menu-item>
         </cv-side-nav-menu>
         <cv-side-nav-link href="javascript:void(0)">
-          <template slot="nav-icon"><Fade16 /></template>
+          <template v-slot:nav-icon><Fade16 /></template>
           L1 link
         </cv-side-nav-link>
         <cv-side-nav-link href="javascript:void(0)">
-          <template slot="nav-icon"><Fade16 /></template>
+          <template v-slot:nav-icon><Fade16 /></template>
           L1 link
         </cv-side-nav-link>
       </cv-side-nav-items>
@@ -574,10 +576,10 @@ for (const story of storySet) {
 
       // ----------------------------------------------------------------
       const templateString = `<cv-header aria-label="Carbon header">${settings.group.headerMenuButton}${settings.group.headerName}${settings.group.headerNav}${settings.group.headerActions}
-    <template slot="left-panels" v-if="areLeftPanels">
+    <template v-slot:left-panels v-if="areLeftPanels">
       ${settings.group.leftPanels}
     </template>
-    <template slot="right-panels" v-if="areRightPanels">
+    <template v-slot:right-panels v-if="areRightPanels">
     ${settings.group.rightPanels}
   </template>
 </cv-header>
@@ -594,7 +596,7 @@ ${settings.group.leftPanels2}
       sv-padding="150px 0 50px 0"
       :sv-extra-margin="areLeftPanels ? '300px' : ''"
       >
-      <template slot="component">${templateString}</template>
+      <template v-slot:component>${templateString}</template>
     </sv-template-view>
   `;
 
@@ -621,6 +623,7 @@ ${settings.group.leftPanels2}
           CvSwitcherItemLink,
           Notification20,
           UserAvatar20,
+          Login20,
           AppSwitcher20,
           Fade16,
         },
@@ -629,6 +632,12 @@ ${settings.group.leftPanels2}
         mounted() {
           this.doActionNotification = () => action('Notifications - click');
           this.doActionSwitcher = () => action('Notifications - click');
+          this.doActionUserAvatar = () => action('User avatar - click');
+        },
+        data() {
+          return {
+            loggedIn: false,
+          };
         },
         computed: {
           areLeftPanels() {
@@ -642,7 +651,10 @@ ${settings.group.leftPanels2}
           actionNotifications() {
             this.doActionNotification();
           },
-          actionUserAvatar: action('User avatar - click'),
+          actionUserAvatar() {
+            this.loggedIn = !this.loggedIn;
+            this.doActionUserAvatar();
+          },
           actionAppSwitcher() {
             this.doActionSwitcher();
           },