@kiva/kv-components 3.109.4 → 4.0.0

package/vue/stories/KvBorrowerImage.stories.js

@@ -6,19 +6,13 @@ export default {
 };
 
 const story = (args) => {
-	const template = (_args, { argTypes }) => ({
+	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { KvBorrowerImage },
+		setup() { return { args: { ...templateArgs } }; },
 		template: `
 			<div style="width: 336px;">
-				<kv-borrower-image
-					:alt="alt"
-					:aspect-ratio="aspectRatio"
-					:default-image="defaultImage"
-					:hash="hash"
-					:images="images"
-					:photo-path="photoPath"
-				/>
+				<kv-borrower-image v-bind="args"/>
 			</div>
 		`,
 	});

package/vue/stories/KvButton.stories.js

@@ -5,17 +5,12 @@ export default {
 	component: KvButton,
 	argTypes: {
 		variant: {
-			control: {
-				type: 'select',
-				options: ['primary', 'secondary', 'link', 'danger', 'ghost', 'caution'],
-			},
+			control: 'select',
+			options: ['primary', 'secondary', 'link', 'danger', 'ghost', 'caution'],
 		},
 		state: {
-			control: {
-				type: 'select',
-				options: ['', 'disabled', 'loading'],
-				defaultValue: null,
-			},
+			control: 'select',
+			options: ['', 'disabled', 'loading'],
 		},
 	},
 };
@@ -23,12 +18,13 @@ export default {
 const Template = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvButton },
+	setup() { return { args }; },
 	template: `
 		<kv-button
-			:variant="variant"
-			:state="state"
-			:to="to"
-			:href="href"
+			:variant="args.variant"
+			:state="args.state"
+			:to="args.to"
+			:href="args.href"
 			@click="onClick"
 		>
 			Find a borrower
@@ -41,6 +37,7 @@ const Template = (args, { argTypes }) => ({
 const VariantTemplate = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvButton },
+	setup() { return { args }; },
 	template: `
 		<ul>
 			<li
@@ -50,9 +47,9 @@ const VariantTemplate = (args, { argTypes }) => ({
 			>
 				<kv-button
 					:variant="variant"
-					:state="state"
-					:to="to"
-					:href="href"
+					:state="args.state"
+					:to="args.to"
+					:href="args.href"
 				>
 					Find a borrower
 				</kv-button>
@@ -119,6 +116,7 @@ WithHref.args = {
 export const FullWidth = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvButton },
+	setup() { return { args }; },
 	template: `
 	<ul>
 		<li
@@ -129,9 +127,9 @@ export const FullWidth = (args, { argTypes }) => ({
 			<kv-button
 				class="tw-w-full"
 				:variant="variant"
-				:state="state"
-				:to="to"
-				:href="href"
+				:state="args.state"
+				:to="args.to"
+				:href="args.href"
 				@click="onClick"
 			>
 				Find a borrower

package/vue/stories/KvCartModal.stories.js

@@ -25,17 +25,14 @@ export default {
 const DefaultTemplate = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvCartModal, KvButton },
+	setup() { return { args }; },
 	template: `
 		<div>
 			<kv-button @click="isVisible = true;">Show cart modal</kv-button>
 			<p>The lightbox is visible: {{isVisible}}</p>
 
 			<kv-cart-modal
-				:visible="isVisible"
-				:prevent-close="preventClose"
-				:added-loan="addedLoan"
-				:photo-path="photoPath"
-				:basket-count="basketCount"
+				v-bind="args"
 				@cart-modal-closed="isVisible = false"
 			>
 			</kv-cart-modal>

package/vue/stories/KvClassicLoanCard.stories.js

@@ -6,36 +6,14 @@ export default {
 };
 
 const story = (args) => {
-	const template = (_args, { argTypes }) => ({
+	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { KvClassicLoanCard },
+		setup() { return { args: templateArgs }; },
 		template: `
 			<div style="width: 600px;">
 				<kv-classic-loan-card
-					:loanId="loanId"
-					:loan="loan"
-					:custom-loan-details="customLoanDetails"
-					:use-full-width="useFullWidth"
-					:show-tags="showTags"
-					:category-page-name="categoryPageName"
-					:enable-five-dollars-notes="enableFiveDollarsNotes"
-					:five-dollars-selected="fiveDollarsSelected"
-					:large-card="largeCard"
-					: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"
-					:is-team-pick="isTeamPick"
-					:combined-activities="combinedActivities"
-					:showContributors="showContributors"
-					:enable-huge-amount="enableHugeAmount"
-					:primary-button-text="primaryButtonText"
-					:secondary-button-text="secondaryButtonText"
-					:secondary-button-handler="secondaryButtonHandler"
+				v-bind="args"
 					@show-loan-details="showLoanDetails"
 				/>
 			</div>

package/vue/stories/KvContentfulImg.stories.js

@@ -14,28 +14,20 @@ export default {
 	},
 	argTypes: {
 		fallbackFormat: {
-			control: {
-				type: 'select',
-				options: ['jpg', 'png', 'webp'],
-			},
+			control: 'select',
+			options: ['jpg', 'png', 'webp'],
 		},
 		loading: {
-			control: {
-				type: 'select',
-				options: ['lazy', 'eager'],
-			},
+			control: 'select',
+			options: ['lazy', 'eager'],
 		},
 		fit: {
-			control: {
-				type: 'select',
-				options: ['pad', 'fill', 'scale', 'crop', 'thumb'],
-			},
+			control: 'select',
+			options: ['pad', 'fill', 'scale', 'crop', 'thumb'],
 		},
 		focus: {
-			control: {
-				type: 'select',
-				options: ['center', 'top', 'right', 'left', 'bottom', 'top_right', 'top_left', 'bottom_right', 'bottom_left', 'face', 'faces'],
-			},
+			control: 'select',
+			options: ['center', 'top', 'right', 'left', 'bottom', 'top_right', 'top_left', 'bottom_right', 'bottom_left', 'face', 'faces'],
 		},
 	},
 };
@@ -45,35 +37,31 @@ export const Default = (args, { argTypes }) => ({
 	components: {
 		KvContentfulImg,
 	},
+	setup() { return { args }; },
 	template: `
 		<kv-contentful-img
-			:contentful-src="contentfulSrc"
-			:fallback-format="fallbackFormat"
-			:width="width"
-			:height="height"
 			alt="Descriptive alt text"
-			:loading="loading"
-			:fit="fit"
-			:focus="focus"
+			v-bind="args"
 		/>
 	`,
 });
 
+Default.args = {
+	fit: 'fill',
+	focus: 'face',
+	sourceSizes: [],
+	contentfulSrc: 'https://images.ctfassets.net/j0p9a6ql0rn7/7mY5ZujL9UfbluRkVkHgkX/5ec83a74e7c1dc387f3fa35af34f5243/mg-hppromo-1-wxga-retina.jpg',
+};
+
 export const ResponsiveImageSet = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		KvContentfulImg,
 	},
+	setup() { return { args }; },
 	template: `
 		<kv-contentful-img
-			:contentful-src="contentfulSrc"
-			:fallback-format="fallbackFormat"
-			:alt="alt"
-			:loading="loading"
-			:height="540"
-			:source-sizes="sourceSizes"
-			:fit="fit"
-			:focus="focus"
+			v-bind="args"
 		/>
 	`,
 });
@@ -116,14 +104,10 @@ export const AdaptiveImageSet = (args, { argTypes }) => ({
 	components: {
 		KvContentfulImg,
 	},
+	setup() { return { args }; },
 	template: `
 		<kv-contentful-img
-			:contentful-src="contentfulSrc"
-			:fallback-format="fallbackFormat"
-			:alt="alt"
-			:loading="loading"
-			:height="540"
-			:source-sizes="sourceSizes"
+			v-bind="args"
 		/>
 	`,
 });
@@ -156,35 +140,27 @@ export const WithCaption = (args, { argTypes }) => ({
 	components: {
 		KvContentfulImg,
 	},
+	setup() { return { args }; },
 	template: `
 		<kv-contentful-img
-			:contentful-src="contentfulSrc"
-			:fallback-format="fallbackFormat"
-			:width="width"
-			:height="height"
 			alt="^ A descriptive caption"
-			:loading="loading"
-			:fit="fit"
-			:focus="focus"
+			v-bind="args"
 		/>
 	`,
 });
 
+WithCaption.args = AdaptiveImageSet.args;
+
 export const GiantImage = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		KvContentfulImg,
 	},
+	setup() { return { args }; },
 	template: `
 		<kv-contentful-img
-			:contentful-src="contentfulSrc"
-			:fallback-format="fallbackFormat"
-			:width="width"
-			:height="height"
 			alt="Descriptive alt text"
-			:loading="loading"
-			:fit="fit"
-			:focus="focus"
+			v-bind="args"
 		/>
 	`,
 });
@@ -193,4 +169,5 @@ GiantImage.args = {
 	contentfulSrc: 'https://images.ctfassets.net/j0p9a6ql0rn7/7dVINOyAxRaXM8p6aq7p5s/9213f63ff10dec57c5f740c056afe8a8/gradient-hero-bg__1_.jpg',
 	width: 4000,
 	height: 2000,
+	sourceSizes: [],
 };

package/vue/stories/KvCountdownTimer.stories.js

@@ -6,14 +6,15 @@ export default {
 };
 
 const story = (args) => {
-	const template = (_args, { argTypes }) => ({
+	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
+		setup() { return { args: { ...templateArgs } }; },
 		components: {
 			KvCountdownTimer,
 		},
 		template: `
 			<kv-countdown-timer
-				:ms-left="msLeft"
+				v-bind="args"
 			/>
 		`,
 	});

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

package/vue/stories/KvIntroductionLoanCard.stories.js

@@ -1,4 +1,5 @@
 import KvIntroductionLoanCard from '../KvIntroductionLoanCard.vue';
+import KvFlag from '../KvFlag.vue';
 
 export default {
 	title: 'KvIntroductionLoanCard',
@@ -6,19 +7,14 @@ export default {
 };
 
 const story = (args) => {
-	const template = (_args, { argTypes }) => ({
+	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
-		components: { KvIntroductionLoanCard },
+		components: { KvIntroductionLoanCard, KvFlag },
+		setup() { return { args: { ...templateArgs } }; },
 		template: `
 			<div style="width: 600px;">
 				<kv-introduction-loan-card
-					:loanId="loanId"
-					:loan="loan"
-					:category-page-name="categoryPageName"
-					:custom-callouts="customCallouts"
-					:kv-track-function="kvTrackFunction"
-					:photo-path="photoPath"
-					:is-visitor="isVisitor"
+					v-bind="args"
 					@show-loan-details="showLoanDetails"
 				/>
 			</div>

package/vue/stories/KvLendCta.stories.js

@@ -6,25 +6,14 @@ export default {
 };
 
 const story = (args) => {
-	const template = (_args, { argTypes }) => ({
+	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { KvLendCta },
+		setup() { return { args: { ...templateArgs } }; },
 		template: `
 			<div style="width: 300px;">
 				<kv-lend-cta
-					:loan="loan"
-					:basket-items="basketItems"
-					:is-loading="isLoading"
-					:is-adding="isAdding"
-					:enable-five-dollars-notes="enableFiveDollarsNotes"
-					:five-dollars-selected="fiveDollarsSelected"
-					:kv-track-function="kvTrackFunction"
-					:show-view-loan="showViewLoan"
-					:custom-loan-details="customLoanDetails"
-					:enable-huge-amount="enableHugeAmount"
-					:is-visitor="isVisitor"
-					:secondary-button-handler="secondaryButtonHandler"
-					:external-links="externalLinks"
+					v-bind="args"
 				/>
 			</div>
 		`,

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