@kiva/kv-components 3.109.4 → 4.0.0

package/vue/stories/KvLoanProgressGroup.stories.js

@@ -6,14 +6,14 @@ export default {
 };
 
 const story = (args) => {
-	const template = (_args, { argTypes }) => ({
+	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { KvLoanProgressGroup },
+		setup() { return { args: { ...templateArgs } }; },
 		template: `
 			<div style="width: 200px">
 				<kv-loan-progress-group
-					:money-left="moneyLeft"
-					:progress-percent="progressPercent"
+					v-bind="args"
 				/>
 			</div>
 		`,
@@ -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 });

package/vue/stories/KvLoanTag.stories.js

@@ -7,15 +7,16 @@ export default {
 };
 
 const story = (args) => {
-	const template = (_args, { argTypes }) => ({
+	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: {
 			KvLoanTag,
 			KvCountdownTimer,
 		},
+		setup() { return { args: { ...templateArgs } }; },
 		template: `
 			<kv-loan-tag
-				:loan="loan"
+				v-bind="args"
 			/>
 		`,
 	});

package/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"
 			/>
 		`,
 	});

package/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"
 	/>`,
 });
 

package/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

package/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(

package/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>`,
 });

package/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>`,
 });
 

package/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 });

package/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

package/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>`,
 });

package/vue/stories/KvToast.stories.js

@@ -11,30 +11,22 @@ 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),
@@ -42,9 +34,10 @@ const Template = (args, {
 		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,7 +73,7 @@ persist.args = { persist: true };
 export const hideDelay = Template.bind({});
 hideDelay.args = { hideDelay: 10000 };
 
-const KivaLogoTemplate = (args, {
+const KivaLogoTemplate = (templateArgs, {
 	argTypes,
 }) => ({
 	props: Object.keys(argTypes),
@@ -88,9 +81,10 @@ const KivaLogoTemplate = (args, {
 		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">

package/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>`,
 });

package/vue/stories/KvWideLoanCard.stories.js

@@ -6,28 +6,14 @@ export default {
 };
 
 const story = (args) => {
-	const template = (_args, { argTypes }) => ({
+	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { KvWideLoanCard },
+		setup() { return { args: { ...templateArgs } }; },
 		template: `
 		<div style="max-width: 800px;">
 			<kv-wide-loan-card
-				:loanId="loanId"
-				:loan="loan"
-				:custom-loan-details="customLoanDetails"
-				:show-tags="showTags"
-				:category-page-name="categoryPageName"
-				:enable-five-dollars-notes="enableFiveDollarsNotes"
-				:five-dollars-selected="fiveDollarsSelected"
-				:is-adding="isAdding"
-				:is-visitor="isVisitor"
-				:basket-items="basketItems"
-				:is-bookmarked="isBookmarked"
-				:kv-track-function="kvTrackFunction"
-				:photo-path="photoPath"
-				:show-view-loan="showViewLoan"
-				:custom-callouts="customCallouts"
-				:enable-huge-amount="enableHugeAmount"
+				v-bind="args"
 			/>
 		</div>
 	`,