From 0306f79c8b44bd1916e9a45e4b73d4bd1069a4dc Mon Sep 17 00:00:00 2001
From: Marina Mosti <mmosti@gitlab.com>
Date: Thu, 14 Nov 2024 15:56:09 +0100
Subject: [PATCH] chore: fix storybook vue 3 GlToggle

---
 .storybook/main.js                           |  8 ++++
 package.json                                 |  2 +-
 src/components/base/toggle/toggle.stories.js | 45 ++++++++++++++------
 3 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index b1acdfd81a..dcfc7093ca 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -20,6 +20,14 @@ export default {
     },
   },
   stories: STORIES ? STORIES.split(',') : ['../src/**/*.stories.js'],
+  env: (config) => {
+    console.log('config', config);
+    console.log(process.env);
+    return {
+      ...config,
+      VUE_VERSION: config.STORYBOOK_VUE_VERSION || false,
+    };
+  },
   addons: [
     '@storybook/addon-docs',
     '@storybook/addon-a11y',
diff --git a/package.json b/package.json
index d91888fc4e..4b1c329e84 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "cy:run": "cypress run --browser firefox --env grepTags=-@a11y+-@storybook",
     "start": "yarn storybook",
     "storybook": "yarn storybook:prepare && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
-    "storybook-vue3": "yarn storybook:prepare && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
+    "storybook-vue3": "yarn storybook:prepare && STORYBOOK_VUE_VERSION=3 VUE_APP_VUE_VERSION=3 VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
     "storybook:prepare": "run-s copy-fonts build-tokens",
     "storybook:build:prod": "yarn storybook:prepare && storybook build -c .storybook -o storybook",
     "storybook:build:test": "yarn storybook:prepare && IS_VISUAL_TEST=true NODE_ENV=test storybook build --test -c .storybook -o storybook",
diff --git a/src/components/base/toggle/toggle.stories.js b/src/components/base/toggle/toggle.stories.js
index 9ff6bbe1fc..8167adb68b 100644
--- a/src/components/base/toggle/toggle.stories.js
+++ b/src/components/base/toggle/toggle.stories.js
@@ -1,5 +1,6 @@
 import { toggleLabelPosition } from '../../../utils/constants';
 import { disableControls } from '../../../utils/stories_utils';
+import { USE_VUE_3 } from '../../../../use_vue3';
 import GlToggle from './toggle.vue';
 import readme from './toggle.md';
 
@@ -31,9 +32,23 @@ const generateProps = ({
   labelPosition,
 });
 
-const Template = (args, { argTypes }) => ({
+const Vue2Template = (args, { argTypes }) => ({
   components: { GlToggle },
   props: Object.keys(argTypes),
+  template: `
+    <div class="gl-text-base">
+      <gl-toggle
+        v-model="localValue"
+        :disabled="disabled"
+        :description="description"
+        :help="help"
+        :label-id="labelId"
+        :is-loading="isLoading"
+        :label="label"
+        :label-position="labelPosition"
+      />
+    </div>
+  `,
   data() {
     return {
       localValue: this.value,
@@ -44,21 +59,25 @@ const Template = (args, { argTypes }) => ({
       this.localValue = newValue;
     },
   },
+});
+
+const Vue3Template = (args, { argTypes }) => ({
+  components: { GlToggle },
+  props: Object.keys(argTypes),
   template: `
-  <div class="gl-text-base">
-    <gl-toggle
-      v-model="localValue"
-      :disabled="disabled"
-      :description="description"
-      :help="help"
-      :label-id="labelId"
-      :is-loading="isLoading"
-      :label="label"
-      :label-position="labelPosition"
-    />
-  </div>`,
+    <div class="gl-text-base">
+      <gl-toggle
+        v-bind="args"
+      />
+    </div>
+  `,
+  setup() {
+    return { args };
+  },
 });
 
+const Template = USE_VUE_3 ? Vue3Template : Vue2Template;
+
 export const Default = Template.bind({});
 Default.args = generateProps();
 
-- 
GitLab