Merge pull request #1333 from dpc-sdp/bugfix/tab-story

fix: update tabs story so tabs can be clicked

packages/ripple-ui-core/src/components/tabs/RplTabs.stories.mdx

@@ -4,15 +4,20 @@ import {
   Story,
   ArgsTable
 } from '@storybook/addon-docs'
+import { ref } from 'vue'
 import RplTabs from './RplTabs.vue'
 import { a11yStoryCheck } from './../../../stories/interactions.js'
 
 export const SingleTemplate = (args) => ({
   components: { RplTabs },
   setup() {
-    return { args }
+    const activeTab = ref('default')
+
+    const handleTabChange = ({ key }) => activeTab.value = key
+
+    return { args, activeTab, handleTabChange }
   },
-  template: '<RplTabs v-bind="args" /><div id="panel-default"></div><div id="panel-extra"></div><div id="panel-more"></div>'
+  template: '<RplTabs v-bind="args" :activeTab="args?.activeTab || activeTab" @toggleTab="handleTabChange" /><div id="panel-default"></div><div id="panel-extra"></div><div id="panel-more"></div>'
 })
 
 <Meta
@@ -53,7 +58,6 @@ export const SingleTemplate = (args) => ({
           icon: 'pin'
         }
       ],
-      activeTab: 'default',
       mode: 'horizontal'
     }}
   >
@@ -78,7 +82,6 @@ export const SingleTemplate = (args) => ({
           icon: 'pin'
         }
       ],
-      activeTab: 'default',
       mode: 'vertical'
     }}
   >