From 37d6dca69de4c32426380f06a222dededab3e957 Mon Sep 17 00:00:00 2001
From: Suyeon Woo <134579071+seaneez@users.noreply.github.com>
Date: Thu, 30 May 2024 17:23:50 +0900
Subject: [PATCH] fix(stories): give grid props to stories using vs-container
 (#190)

---
 .../vs-index-view/stories/VsIndexView.stories.ts          | 8 ++++----
 .../components/vs-stepper/stories/VsStepper.stories.ts    | 2 +-
 .../src/components/vs-switch/stories/VsSwitch.stories.ts  | 2 +-
 .../src/components/vs-tabs/stories/VsTabs.stories.ts      | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/vlossom/src/components/vs-index-view/stories/VsIndexView.stories.ts b/packages/vlossom/src/components/vs-index-view/stories/VsIndexView.stories.ts
index 56b4d9a96..e3b27f427 100644
--- a/packages/vlossom/src/components/vs-index-view/stories/VsIndexView.stories.ts
+++ b/packages/vlossom/src/components/vs-index-view/stories/VsIndexView.stories.ts
@@ -124,7 +124,7 @@ export const Width: Story = {
             return { args };
         },
         template: `
-			<vs-container row-gap="20px">
+			<vs-container grid row-gap="20px">
 				<vs-index-view v-bind="args">
 					<vs-index-item key="A"><h1> First Index View </h1>${LOREM_IPSUM}</vs-index-item>
 				</vs-index-view>
@@ -159,7 +159,7 @@ export const WidthWithTabs: Story = {
             return { args, tabAList, tabBList, tabA, tabB, updateTabA, updateTabB };
         },
         template: `
-			<vs-container row-gap="20px">
+			<vs-container grid row-gap="20px">
 				<vs-wrapper :width="args.width" :grid="args.grid">
 					<vs-tabs :tabs="tabAList" v-model="tabA" @update:modelValue="updateTabA" v-bind="args"/>
 					<vs-index-view v-model="tabA" v-bind="args">
@@ -190,7 +190,7 @@ export const Grid: Story = {
             return { args };
         },
         template: `
-			<vs-container column-gap="40px">
+			<vs-container grid column-gap="40px">
 				<vs-index-view v-bind="args">
 					<vs-index-item key="A"><h1> First Index View </h1>${LOREM_IPSUM}</vs-index-item>
 				</vs-index-view>
@@ -225,7 +225,7 @@ export const GridWithTabs: Story = {
             return { args, tabAList, tabBList, tabA, tabB, updateTabA, updateTabB };
         },
         template: `
-        <vs-container column-gap="40px">
+        <vs-container grid column-gap="40px">
 			<vs-wrapper :width="args.width" :grid="args.grid">
 				<vs-tabs :tabs="tabAList" v-model="tabA" @update:modelValue="updateTabA" v-bind="args"/>
 				<vs-index-view v-model="tabA" v-bind="args">
diff --git a/packages/vlossom/src/components/vs-stepper/stories/VsStepper.stories.ts b/packages/vlossom/src/components/vs-stepper/stories/VsStepper.stories.ts
index 4529673dd..bd04106d3 100644
--- a/packages/vlossom/src/components/vs-stepper/stories/VsStepper.stories.ts
+++ b/packages/vlossom/src/components/vs-stepper/stories/VsStepper.stories.ts
@@ -103,7 +103,7 @@ export const Grid: Story = {
             return { args };
         },
         template: `
-            <vs-container column-gap="40px">
+            <vs-container grid column-gap="40px">
 				<vs-stepper v-bind="args" />
 				<vs-stepper v-bind="args" />
             </vs-container>
diff --git a/packages/vlossom/src/components/vs-switch/stories/VsSwitch.stories.ts b/packages/vlossom/src/components/vs-switch/stories/VsSwitch.stories.ts
index 36d04a23d..e4de11dd6 100644
--- a/packages/vlossom/src/components/vs-switch/stories/VsSwitch.stories.ts
+++ b/packages/vlossom/src/components/vs-switch/stories/VsSwitch.stories.ts
@@ -150,7 +150,7 @@ export const Grid: Story = {
             return { args };
         },
         template: `
-            <vs-container row-gap="5px">
+            <vs-container grid row-gap="5px">
                 <vs-switch v-bind="args" />
                 <vs-switch v-bind="args" />
             </vs-container>
diff --git a/packages/vlossom/src/components/vs-tabs/stories/VsTabs.stories.ts b/packages/vlossom/src/components/vs-tabs/stories/VsTabs.stories.ts
index 8eed851d1..f1bd759e8 100644
--- a/packages/vlossom/src/components/vs-tabs/stories/VsTabs.stories.ts
+++ b/packages/vlossom/src/components/vs-tabs/stories/VsTabs.stories.ts
@@ -90,7 +90,7 @@ export const Width: Story = {
             return { args };
         },
         template: `
-            <vs-container row-gap="20px">
+            <vs-container grid row-gap="20px">
                 <vs-tabs v-bind="args" />
                 <vs-tabs v-bind="args" />
             </vs-container>
@@ -108,7 +108,7 @@ export const Grid: Story = {
             return { args };
         },
         template: `
-            <vs-container column-gap="40px">
+            <vs-container grid column-gap="40px">
 				<vs-tabs v-bind="args" />
 				<vs-tabs v-bind="args" />
             </vs-container>