@kiva/kv-components 3.109.4 → 4.0.0

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.0.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.109.4...@kiva/kv-components@4.0.0) (2024-11-27)
+
+
+### Bug Fixes
+
+* additional story refactoring for vue3 storybook 8 ([af16665](https://github.com/kiva/kv-ui-elements/commit/af166656eed90ef1a49b23fb9fe5a08308c92cc4))
+* fix more stories for vue3 storybook 8 ([aeb19aa](https://github.com/kiva/kv-ui-elements/commit/aeb19aaec30263ab6524f739492f31441cd663ba))
+* fix more stories for vue3 storybook 8 ([6fa71f7](https://github.com/kiva/kv-ui-elements/commit/6fa71f7c752c2fcfdfdb322264fe1fe846299747))
+* fix primitives story for vue3 storybook 8 ([0c271cf](https://github.com/kiva/kv-ui-elements/commit/0c271cf18c1342179932df74229da3f708644bee))
+* jest imports from [@vueuse](https://github.com/vueuse) ([3465f4e](https://github.com/kiva/kv-ui-elements/commit/3465f4e98f5f86db9c85bac4d1a80d6d18b6eff9))
+* lock storybook package versions ([4e39c6d](https://github.com/kiva/kv-ui-elements/commit/4e39c6dbb9970f8037e0aa099533545e97ab49cd))
+* remove comment ([a3109d0](https://github.com/kiva/kv-ui-elements/commit/a3109d01569171ff004543ef5e7dbee197645674))
+* remove vue 2/3 testing, add test config to kv-components ([cb0ddf2](https://github.com/kiva/kv-ui-elements/commit/cb0ddf23c06de65eea6da48cb24c3b2775ab2216))
+* tests ([e67a114](https://github.com/kiva/kv-ui-elements/commit/e67a114bb821f99a491ca8c5b1a3d93b90464dae))
+
+
+### Features
+
+* update to vue3 and storybook 8 ([51f609d](https://github.com/kiva/kv-ui-elements/commit/51f609df48b3643b90653e44b36d7c9028f08825))
+
+
+### BREAKING CHANGES
+
+* Vue3 is now required
+
+
+
+
+
 ## [3.109.4](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.109.3...@kiva/kv-components@3.109.4) (2024-11-26)
 
 

package/babel.config.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+	presets: [
+		[
+			'@babel/preset-env',
+			{
+				targets: {
+					node: 'current',
+				},
+			},
+		],
+	],
+};

package/dist/components/.storybook/main.js

@@ -1,6 +1,5 @@
 const path = require('path');
-
-const config = {
+module.exports = {
 	stories: [
 		'../stories/Styleguide.stories.js', // show the base styleguide first
 		'../stories/**/*.stories.mdx',
@@ -76,14 +75,14 @@ const config = {
 	},
 
 	framework: {
-		name: "@storybook/vue-webpack5",
+		name: '@storybook/vue3-webpack5',
 		options: {}
 	},
-
+	core: {
+		builder: '@storybook/builder-webpack5'
+	},
 	docs: {
 		autodocs: true,
 		defaultName: 'Kv Components',
 	}
-}
-
-export default config;
+};

package/dist/components/.storybook/preview.js

@@ -1,17 +1,17 @@
 import './tailwind.css';
+import {
+	setup
+} from '@storybook/vue3';
 import { addons } from '@storybook/preview-api';
 import KvThemeProvider from '../KvThemeProvider.vue';
 import { defaultTheme, darkTheme } from '@kiva/kv-tokens/configs/kivaColors.cjs';
-import Vue from 'vue';
-import VueCompositionApi from '@vue/composition-api';
-import VueRouter from 'vue-router';
 
-// Add vue composition api
-Vue.use(VueCompositionApi);
+setup((app) => {
+	// Mock analytics
+	app.directive('kv-track-event', () => { });
+});
 
-Vue.use(VueRouter);
-
-const parameters = {
+export const parameters = {
 	actions: { argTypesRegex: "^on[A-Z].*" },
 	controls: {
 		matchers: {
@@ -31,7 +31,7 @@ const parameters = {
 const channel = addons.getChannel();
 
 // Wrap all stories with the kv-theme-provider component
-const decorators = [(story) => ({
+export const decorators = [(story) => ({
 	components: { story, KvThemeProvider },
 	template: '<kv-theme-provider :theme="theme"><story /></kv-theme-provider>',
 	data() {
@@ -50,12 +50,4 @@ const decorators = [(story) => ({
 	destroyed() {
 		channel.off('DARK_MODE', this.setTheme);
 	},
-	router: new VueRouter(),
 })];
-
-const preview = {
-	parameters,
-	decorators,
-};
-
-export default preview;

package/dist/components/KvIntroductionLoanCard.vue

@@ -62,12 +62,14 @@
 								"
 								style="padding: 2px 6px;"
 							>
-								<kv-flag
-									class="tw-ml-0.5 tw-mr-1"
-									:country="countryCode"
-									width-override="16px"
-									hide-border
-								/>
+								<suspense>
+									<kv-flag
+										class="tw-ml-0.5 tw-mr-1"
+										:country="countryCode"
+										width-override="16px"
+										hide-border
+									/>
+								</suspense>
 								{{ formattedLocation }}
 							</p>
 						</div>

package/dist/components/stories/KvActivityRow.stories.js

@@ -12,11 +12,13 @@ const activity = {
 };
 
 const story = (args) => {
-	const template = (_args, { argTypes }) => ({
+	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { KvActivityRow },
+		setup() { return { args: { ...templateArgs } }; },
 		template: `<KvActivityRow
-			:activity="activity" />`,
+			v-bind="args"
+		/>`,
 	});
 	template.args = args;
 	return template;

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