fix: additional story refactoring for vue3 storybook 8

@kiva/kv-components/vue/stories/KvFlag.stories.js

@@ -12,7 +12,9 @@ const story = (args) => {
 		setup() { return { args: templateArgs }; },
 		template: `
 			<div style="width: 100px; height: 100px;">
-				<KvFlag v-bind="args" />
+				<suspense>
+					<KvFlag v-bind="args" />
+				</suspense>
 			</div>
 		`,
 	});
@@ -25,9 +27,9 @@ export const InlineSvg = story({ country: 'TO' });
 // SVG based on the country code with custom width
 export const InlineSvgCustomWidth = story({ country: 'DE', widthOverride: '40px' });
 
-// SVG Sqaure based on the country code
+// SVG Square based on the country code
 export const SquareInlineSvg = story({ country: 'ME', aspectRatio: '1x1', showName: true });
-// SVG Sqaure based on the country code with custom width
+// SVG Square based on the country code with custom width
 export const SquareInlineSvgCustomWidth = story({
 	country: 'SA',
 	inlineSvg: true,

@kiva/kv-components/vue/stories/KvLoanProgressGroup.stories.js

@@ -24,6 +24,6 @@ const story = (args) => {
 
 export const Default = story();
 
-export const LowAmount = story({ moneyLeft: 5, progressPercent: 0.9 });
+export const LowAmount = story({ moneyLeft: '5', progressPercent: 0.9 });
 
-export const HighAmount = story({ moneyLeft: 150, progressPercent: 0.5 });
+export const HighAmount = story({ moneyLeft: '150', progressPercent: 0.5 });

@kiva/kv-components/vue/stories/KvLoanUse.stories.js

@@ -6,19 +6,13 @@ export default {
 };
 
 const story = (args) => {
-	const template = (_args, { argTypes }) => ({
+	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { KvLoanUse },
+		setup() { return { args: { ...templateArgs } }; },
 		template: `
 			<kv-loan-use
-				:anonymization-level="anonymizationLevel"
-				:use="use"
-				:loan-amount="loanAmount"
-				:status="status"
-				:borrower-count="borrowerCount"
-				:name="name"
-				:distribution-model="distributionModel"
-				:why-special="whySpecial"
+				v-bind="args"
 			/>
 		`,
 	});

@kiva/kv-components/vue/stories/KvMap.stories.js

@@ -18,26 +18,13 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template = (templateArgs, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvMap },
+	setup() { return { args: { ...templateArgs } }; },
 	template: `<kv-map
 		class="tw-rounded tw-overflow-hidden"
-		:auto-zoom-delay="autoZoomDelay"
-		:height="height"
-		:lat="lat"
-		:long="long"
-		:initial-zoom="initialZoom"
-		:map-id="mapId"
-		:use-leaflet="useLeaflet"
-		:width="width"
-		:zoom-level="zoomLevel"
-		:advanced-animation="advancedAnimation"
-		:show-zoom-control="showZoomControl"
-		:allow-dragging="allowDragging"
-		:show-labels="showLabels"
-		:countries-data="countriesData"
-		:show-fundraising-loans="showFundraisingLoans"
+		v-bind="args"
 	/>`,
 });
 

@kiva/kv-components/vue/stories/KvMaterialIcon.stories.js

@@ -49,9 +49,10 @@ Default.args = {
 	icon: mdiCart,
 };
 
-export const Common = (args, { argTypes }) => ({
+export const Common = (templateArgs, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvMaterialIcon },
+	setup() { return { args: { ...templateArgs } }; },
 	template: `
 		<div class="tw-flex tw-gap-1">
 			<kv-material-icon
@@ -100,9 +101,10 @@ export const Common = (args, { argTypes }) => ({
 	},
 });
 
-export const Colored = (args, { argTypes }) => ({
+export const Colored = (templateArgs, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvMaterialIcon },
+	setup() { return { args: { ...templateArgs } }; },
 	template: `
 		<div>
 			<p class="tw-mb-2">Use text-color to set the icon color</p>
@@ -123,9 +125,10 @@ export const Colored = (args, { argTypes }) => ({
 	},
 });
 
-export const InlineWithText = (args, { argTypes }) => ({
+export const InlineWithText = (templateArgs, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvMaterialIcon },
+	setup() { return { args: { ...templateArgs } }; },
 	template: `
 		<a href="#" class="tw-inline-flex">
 			<span class="tw-text-h4">He went thataway</span>
@@ -138,9 +141,10 @@ export const InlineWithText = (args, { argTypes }) => ({
 	},
 });
 
-export const Sizing = (args, { argTypes }) => ({
+export const Sizing = (templateArgs, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvMaterialIcon },
+	setup() { return { args: { ...templateArgs } }; },
 	template: `
 		<div>
 			<p class="tw-mb-2">Icons can be sized using any of the standard sizing classes (.tw-w-2, .tw-w-3, .tw-w-full, etc.). By default they are 24 x 24 (.tw-w-3).</p>
@@ -156,9 +160,10 @@ export const Sizing = (args, { argTypes }) => ({
 	},
 });
 
-export const WithAccessibleText = (args, { argTypes }) => ({
+export const WithAccessibleText = (templateArgs, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvMaterialIcon },
+	setup() { return { args: { ...templateArgs } }; },
 	template: `
 		<div>
 			<p class="tw-mb-2">If you don't include text and your icon is not decorative, be sure to include screen-reader text</p>
@@ -174,9 +179,10 @@ export const WithAccessibleText = (args, { argTypes }) => ({
 	},
 });
 
-export const StarsDemo = (args, { argTypes }) => ({
+export const StarsDemo = (templateArgs, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvMaterialIcon },
+	setup() { return { args: { ...templateArgs } }; },
 	template: `
 		<div class="tw-flex">
 			<button

@kiva/kv-components/vue/stories/KvPagination.stories.js

@@ -6,16 +6,12 @@ export default {
 };
 
 const story = (args) => {
-	const template = (_args, { argTypes }) => ({
+	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { KvPagination },
+		setup() { return { args: { ...templateArgs } }; },
 		template: `<kv-pagination
-			:limit="limit"
-			:total="total"
-			:offset="offset"
-			:extra-pages="extraPages"
-			:kv-track-function="kvTrackMock"
-			:track-event-category="trackEventCategory"
+				v-bind="args"
 			/>`,
 		methods: {
 			kvTrackMock(

@kiva/kv-components/vue/stories/KvPieChart.stories.js

@@ -12,18 +12,18 @@ export default {
 	},
 };
 
-const Template = (args, {
+const Template = (templateArgs, {
 	argTypes,
 }) => ({
 	props: Object.keys(argTypes),
+	setup() { return { args: { ...templateArgs } }; },
 	components: {
 		KvPieChart,
 	},
 	template: `
 		<div>
 			<kv-pie-chart
-                :values="values"
-                :loading="loading"
+				v-bind="args"
             />
 		</div>`,
 });

@kiva/kv-components/vue/stories/KvProgressBar.stories.js

@@ -13,18 +13,13 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template = (templateArgs, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvProgressBar },
+	setup() { return { args: { ...templateArgs } }; },
 	template: `
 		<kv-progress-bar
-			:aria-label="ariaLabel"
-			:min="min"
-			:max="max"
-			:value="value"
-			:variant="variant"
-			:bg-variant="bgVariant"
-
+			v-bind="args"
 		></kv-progress-bar>`,
 });
 

@kiva/kv-components/vue/stories/KvSideSheet.stories.js

@@ -14,6 +14,7 @@ const Template = (args, {
 		KvSideSheet,
 		KvButton,
 	},
+	setup() { return { args }; },
 	template: `
 		<div>
 			<kv-button @click="isVisible = true">Show Side Sheet</kv-button>
@@ -47,4 +48,4 @@ const Template = (args, {
 	},
 });
 
-export const Default = Template.bind({});
+export const Default = Template.bind({ visible: false });

@kiva/kv-components/vue/stories/KvTextLink.stories.js

@@ -11,23 +11,19 @@ export default {
 	},
 	argTypes: {
 		state: {
-			control: {
-				type: 'select',
-				options: ['', 'disabled'],
-			},
+			control: 'select',
+			options: ['', 'disabled'],
 		},
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template = (templateArgs, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvTextLink },
+	setup() { return { args: { ...templateArgs } }; },
 	template: `
 		<kv-text-link
-			:state="state"
-			:href="href"
-			:to="to"
-			:icon="icon"
+			v-bind="args"
 			@click="onClick"
 		>
 			Find a borrower

@kiva/kv-components/vue/stories/KvThemeProvider.stories.js

@@ -32,15 +32,13 @@ export default {
 	title: 'KvThemeProvider',
 	component: KvThemeProvider,
 	args: {
-		theme: '',
+		theme: {},
 		customTheme: null,
 	},
 	argTypes: {
 		theme: {
-			control: {
-				type: 'select',
-				options: ['', 'dark', 'darkGreen', 'mint'],
-			},
+			control: 'select',
+			options: ['', 'dark', 'darkGreen', 'mint'],
 		},
 	},
 };
@@ -117,7 +115,7 @@ const demoTemplate = `
 	</div>
 `;
 
-const Template = (args, {
+const Template = (templateArgs, {
 	argTypes,
 }) => ({
 	props: Object.keys(argTypes),
@@ -128,6 +126,7 @@ const Template = (args, {
 		KvTextLink,
 		KvThemeProvider,
 	},
+	setup() { return { args: { ...templateArgs } }; },
 	data() {
 		return {
 			bgVariables: buildTailwindClasses('background'),
@@ -141,7 +140,7 @@ const Template = (args, {
 		};
 	},
 	template: `
-		<kv-theme-provider :theme="theme">
+		<kv-theme-provider v-bind="args">
 			${demoTemplate}
 		</kv-theme-provider>`,
 });

@kiva/kv-components/vue/stories/KvToast.stories.js

@@ -11,40 +11,33 @@ export default {
 	},
 	argTypes: {
 		message: {
-			control: {
-				type: 'text',
-			},
+			control: 'text',
 		},
 		type: {
 			options: ['confirmation', 'warning', 'error'],
-			control: {
-				type: 'select',
-			},
+			control: 'select',
 		},
 		persist: {
-			control: {
-				type: 'boolean',
-			},
+			control: 'boolean',
 		},
 		hideDelay: {
-			control: {
-				type: 'number',
-			},
+			control: 'number',
 		},
 	},
 };
 
-const Template = (args, {
+const Template = (templateArgs, {
 	argTypes,
 }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		KvToast,
 		KvButton,
 	},
+	setup() { return { args: { ...templateArgs } }; },
 	template: `
 		<div>
-			<kv-button @click="showToast(message, type, persist, hideDelay)">Show Toast</kv-button>
+			<kv-button @click="showToast(message, args.type, persist, hideDelay)">Show Toast</kv-button>
 
 			<!-- div below is a kludge for storybook docs -->
 			<div class="tw-fixed tw-z-toast tw-inset-0 tw-pointer-events-none">
@@ -80,17 +73,18 @@ persist.args = { persist: true };
 export const hideDelay = Template.bind({});
 hideDelay.args = { hideDelay: 10000 };
 
-const KivaLogoTemplate = (args, {
+const KivaLogoTemplate = (templateArgs, {
 	argTypes,
 }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		KvToast,
 		KvButton,
 	},
+	setup() { return { args: { ...templateArgs } }; },
 	template: `
 		<div>
-			<kv-button @click="showToast(message, type, persist)">Show Toast</kv-button>
+			<kv-button @click="showToast(message, args.type, persist)">Show Toast</kv-button>
 
 			<!-- div below is a kludge for storybook docs -->
 			<div class="tw-fixed tw-z-toast tw-inset-0 tw-pointer-events-none">

@kiva/kv-components/vue/stories/KvTreeMapChart.stories.js

@@ -12,18 +12,18 @@ export default {
 	},
 };
 
-const Template = (args, {
+const Template = (templateArgs, {
 	argTypes,
 }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		KvTreeMapChart,
 	},
+	setup() { return { args: { ...templateArgs } }; },
 	template: `
 		<div>
 			<kv-tree-map-chart
-                :values="values"
-                :loading="loading"
+				v-bind="args"
             />
 		</div>`,
 });