@kiva/kv-components 3.109.4 → 4.0.0

package/dist/components/stories/KvLightbox.stories.js

@@ -12,10 +12,8 @@ export default {
 	},
 	argTypes: {
 		variant: {
-			control: {
-				type: 'select',
-				options: ['lightbox', 'alert'],
-			},
+			control: 'select',
+			options: ['lightbox', 'alert'],
 		},
 	},
 	args: {
@@ -29,6 +27,7 @@ export default {
 const DefaultTemplate = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvLightbox, KvButton },
+	setup() { return { args }; },
 	template: `
 		<div>
 			<kv-button @click="isLightboxVisible = true;">Show {{variant}}</kv-button>
@@ -36,9 +35,9 @@ const DefaultTemplate = (args, { argTypes }) => ({
 
 			<kv-lightbox
 				:visible="isLightboxVisible"
-				:title="title"
-				:variant="variant"
-				:prevent-close="preventClose"
+				:title="args.title"
+				:variant="args.variant"
+				:prevent-close="args.preventClose"
 				@lightbox-closed="isLightboxVisible = false"
 			>
 				<p class="tw-mb-2">Lorem ipsum aliquip labore commodo anim elit amet cupidatat do ex ipsum. Consectetur excepteur ea anim velit reprehenderit qui aliquip ullamco aliquip irure dolor ex. Occaecat excepteur enim eu incididunt ut consectetur aliqua magna et. Reprehenderit duis ex excepteur sit et cupidatat cillum cillum adipisicing ut adipisicing minim ad.</p>
@@ -60,6 +59,7 @@ const DefaultTemplate = (args, { argTypes }) => ({
 const VeryShortTemplate = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvLightbox, KvButton },
+	setup() { return { args }; },
 	template: `
 		<div>
 			<kv-button @click="isLightboxVisible = true;">Show {{variant}}</kv-button>
@@ -67,9 +67,9 @@ const VeryShortTemplate = (args, { argTypes }) => ({
 
 			<kv-lightbox
 				:visible="isLightboxVisible"
-				:title="title"
-				:variant="variant"
-				:prevent-close="preventClose"
+				:title="args.title"
+				:variant="args.variant"
+				:prevent-close="args.preventClose"
 				@lightbox-closed="isLightboxVisible = false"
 			>
 				<p class="tw-mb-2">The lightbox content is very short.</p>
@@ -90,6 +90,7 @@ const VeryShortTemplate = (args, { argTypes }) => ({
 const VeryLongTemplate = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvLightbox, KvButton },
+	setup() { return { args }; },
 	template: `
 		<div>
 			<kv-button @click="isLightboxVisible = true;">Show {{variant}}</kv-button>
@@ -97,9 +98,9 @@ const VeryLongTemplate = (args, { argTypes }) => ({
 
 			<kv-lightbox
 				:visible="isLightboxVisible"
-				:title="title"
-				:variant="variant"
-				:prevent-close="preventClose"
+				:title="args.title"
+				:variant="args.variant"
+				:prevent-close="args.preventClose"
 				@lightbox-closed="isLightboxVisible = false"
 			>
 				<p class="tw-mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem voluptatum quod illum minima alias quae non architecto ipsum sunt repudiandae eius ipsa commodi adipisci nam, magni praesentium error, deleniti impedit!
@@ -129,6 +130,7 @@ const VeryLongTemplate = (args, { argTypes }) => ({
 const AlertTemplate = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvLightbox, KvButton },
+	setup() { return { args }; },
 	template: `
 		<div>
 			<kv-button variant="danger" @click="isLightboxVisible = true;">Show {{variant}}</kv-button>
@@ -136,9 +138,9 @@ const AlertTemplate = (args, { argTypes }) => ({
 
 			<kv-lightbox
 				:visible="isLightboxVisible"
-				:title="title"
-				:variant="variant"
-				:prevent-close="preventClose"
+				:title="args.title"
+				:variant="args.variant"
+				:prevent-close="args.preventClose"
 				@lightbox-closed="isLightboxVisible = false"
 			>
 				<p>The credit card will be removed from our data base and will no longer be used for subscriptions or auto-deposit.</p>
@@ -186,6 +188,7 @@ PreventClose.args = {
 export const CustomHeader = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvLightbox, KvButton, KvMaterialIcon },
+	setup() { return { args }; },
 	template: `
 		<div>
 			<kv-button @click="isLightboxVisible = true;">Show {{variant}}</kv-button>
@@ -226,6 +229,7 @@ export const CustomHeader = (args, { argTypes }) => ({
 const InformationalTemplate = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvLightbox, KvButton },
+	setup() { return { args }; },
 	template: `
 		<div>
 			<kv-button @click="isLightboxVisible = true;">Show {{variant}}</kv-button>
@@ -233,9 +237,9 @@ const InformationalTemplate = (args, { argTypes }) => ({
 
 			<kv-lightbox
 				:visible="isLightboxVisible"
-				:title="title"
-				:variant="variant"
-				:prevent-close="preventClose"
+				:title="args.title"
+				:variant="args.variant"
+				:prevent-close="args.preventClose"
 				@lightbox-closed="isLightboxVisible = false"
 			>
 				<p>Lorem ipsum aliquip labore commodo anim elit amet cupidatat do ex ipsum. Consectetur excepteur ea anim velit reprehenderit qui aliquip ullamco aliquip irure dolor ex. Occaecat excepteur enim eu incididunt ut consectetur aliqua magna et. Reprehenderit duis ex excepteur sit et cupidatat cillum cillum adipisicing ut adipisicing minim ad.</p>

package/dist/components/stories/KvLineGraph.stories.js

@@ -5,14 +5,15 @@ export default {
 	component: KvLineGraph,
 };
 
-const Template = (_args, { argTypes }) => ({
+const Template = (templateArgs, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		KvLineGraph,
 	},
+	setup() { return { args: { ...templateArgs } }; },
 	template: `
 		<div style="height: 500px; width: 500px;">
-			<kv-line-graph :points="points" :axis-label="axisLabel" />
+			<kv-line-graph v-bind="args" />
 		</div>
 	`,
 });

package/dist/components/stories/KvLoadingSpinner.stories.js

@@ -5,16 +5,12 @@ export default {
 	component: KvLoadingSpinner,
 	argTypes: {
 		size: {
-			control: {
-				type: 'select',
-				options: ['small', 'medium', 'large'],
-			},
+			control: 'select',
+			options: ['small', 'medium', 'large'],
 		},
 		color: {
-			control: {
-				type: 'select',
-				options: ['brand', 'white', 'black'],
-			},
+			control: 'select',
+			options: ['brand', 'white', 'black'],
 		},
 	},
 };
@@ -23,10 +19,11 @@ export default {
 export const SingleLoader = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvLoadingSpinner },
+	setup() { return { args }; },
 	template: `
 		<kv-loading-spinner
-			:size="size"
-			:color="color"
+			:size="args.size"
+			:color="args.color"
 		/>`,
 });
 
@@ -34,6 +31,7 @@ export const SingleLoader = (args, { argTypes }) => ({
 export const AllVariants = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvLoadingSpinner },
+	setup() { return { args }; },
 	template: `
 		<div>
 			<ul v-for="color in ['brand', 'white', 'black']" :key="color">
@@ -43,8 +41,8 @@ export const AllVariants = (args, { argTypes }) => ({
 					class="tw-mb-2"
 				>
 					<kv-loading-spinner
-						:size="size"
-						:color="color"
+						:size="args.size"
+						:color="args.color"
 					/>
 				</li>
 			</ul>

package/dist/components/stories/KvLoanActivities.stories.js

@@ -85,15 +85,14 @@ const combinedActivities = [
 const kvTrackFunction = () => { };
 
 const story = (args) => {
-	const template = (_args, { argTypes }) => ({
+	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { KvLoanActivities },
+		setup() { return { args: { ...templateArgs } }; },
 		template: `
 		<div style="max-width: 400px;">
 			<KvLoanActivities
-				:loan="loan"
-				:combined-activities="combinedActivities"
-				:kv-track-function="kvTrackFunction"
+				v-bind="args"
 			/>
 		</div>`,
 	});

package/dist/components/stories/KvLoanBookmark.stories.js

@@ -6,11 +6,12 @@ export default {
 };
 
 const story = (args) => {
-	const template = (_args, { argTypes }) => ({
+	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { KvLoanBookmark },
+		setup() { return { args: { ...templateArgs } }; },
 		template: `
-			<kv-loan-bookmark :is-bookmarked="isBookmarked" />
+			<kv-loan-bookmark v-bind="args" />
 		`,
 	});
 	template.args = args;

package/dist/components/stories/KvLoanCallouts.stories.js

@@ -6,12 +6,13 @@ export default {
 };
 
 const story = (args) => {
-	const template = (_args, { argTypes }) => ({
+	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { KvLoanCallouts },
+		setup() { return { args: { ...templateArgs } }; },
 		template: `
 			<kv-loan-callouts
-				:callouts="callouts"
+				v-bind="args"
 			/>
 		`,
 	});

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