@kiva/kv-components 3.109.4 → 4.0.0

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

package/dist/components/stories/StyleguidePrimitives.stories.js

@@ -12,7 +12,6 @@ const { headerNumberCase, kebabCase, removeObjectProperty } = require('../../uti
 
 const config = resolveConfig(tailwindConfig);
 const { theme } = config;
-
 function buildValuesFromThemeObj(initialObj) {
 	const arr = [];
 	const iterate = (obj, prefix = '') => {
@@ -33,7 +32,7 @@ export default {
 	title: 'Base Styling/Primitives',
 };
 
-export const Primitives = (args, { argTypes }) => ({
+export const Primitives = (templateArgs, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		KvGrid,
@@ -43,6 +42,7 @@ export const Primitives = (args, { argTypes }) => ({
 		KvTabPanel,
 		KvToast,
 	},
+	setup() { return { theme, args: { ...templateArgs } }; },
 	template: `
 	<kv-page-container>
 		<h1 class="tw-mt-4">Primitives</h1>
@@ -59,27 +59,27 @@ export const Primitives = (args, { argTypes }) => ({
 							as="ul"
 							class="tw-grid-cols-3 md:tw-grid-cols-4 lg:tw-grid-cols-5"
 						>
-							<li
-								v-for="color in backgroundColor"
-								v-if="!isStaticColor(color)"
-								:key="buildClassName('bg', color[0])"
-							>
-								<button
-									class="tw-flex tw-flex-col tw-h-full tw-w-full tw-text-left tw-border tw-rounded tw-p-1.5 tw-border-tertiary tw-font-book hover:tw-text-action-highlight"
-									@click="copy(buildClassName('tw-bg', color[0]))"
+							<template v-for="color in backgroundColor" :key="buildClassName('bg', color[0])">
+								<li
+									v-if="!isStaticColor(color)"
 								>
-									<div
-										class="tw-w-full tw-h-0 tw-block tw-mb-1"
-										style="padding-bottom: 100%;"
-										:class="buildClassName('tw-bg', color[0])"
+									<button
+										class="tw-flex tw-flex-col tw-h-full tw-w-full tw-text-left tw-border tw-rounded tw-p-1.5 tw-border-tertiary tw-font-book hover:tw-text-action-highlight"
+										@click="copy(buildClassName('tw-bg', color[0]))"
 									>
-									</div>
-									<div class="tw-w-full">
-										.{{buildClassName('tw-bg', color[0])}}
-										<br><small class="tw-text-tertiary">var({{buildClassName('--bg', color[0])}})</small>
-									</div>
-								</button>
-							</li>
+										<div
+											class="tw-w-full tw-h-0 tw-block tw-mb-1"
+											style="padding-bottom: 100%;"
+											:class="buildClassName('tw-bg', color[0])"
+										>
+										</div>
+										<div class="tw-w-full">
+											.{{buildClassName('tw-bg', color[0])}}
+											<br><small class="tw-text-tertiary">var({{buildClassName('--bg', color[0])}})</small>
+										</div>
+									</button>
+								</li>
+							</template>
 						</kv-grid>
 					</kv-tab-panel>
 					<kv-tab-panel id="bg_static">
@@ -87,27 +87,27 @@ export const Primitives = (args, { argTypes }) => ({
 							as="ul"
 							class="tw-grid-cols-3 md:tw-grid-cols-4 lg:tw-grid-cols-5"
 						>
-							<li
-								v-for="color in backgroundColor"
-								v-if="isStaticColor(color)"
-								:key="buildClassName('bg', color[0])"
-							>
-								<button
-									class="tw-flex tw-flex-col tw-h-full tw-w-full tw-text-left tw-border tw-rounded tw-p-1.5 tw-border-tertiary tw-font-book hover:tw-text-action-highlight"
-									@click="copy(buildClassName('tw-bg', color[0]))"
+							<template v-for="color in backgroundColor" :key="buildClassName('bg', color[0])">
+								<li
+									v-if="isStaticColor(color)"
 								>
-									<div
-										class="tw-w-full tw-h-0 tw-block tw-mb-1"
-										style="padding-bottom: 100%;"
-										:class="buildClassName('tw-bg', color[0])"
+									<button
+										class="tw-flex tw-flex-col tw-h-full tw-w-full tw-text-left tw-border tw-rounded tw-p-1.5 tw-border-tertiary tw-font-book hover:tw-text-action-highlight"
+										@click="copy(buildClassName('tw-bg', color[0]))"
 									>
-									</div>
-									<div class="tw-w-full">
-										.{{buildClassName('tw-bg', color[0])}}
-										<br><small class="tw-text-tertiary">{{color[1]}}</small>
-									</div>
-								</button>
-							</li>
+										<div
+											class="tw-w-full tw-h-0 tw-block tw-mb-1"
+											style="padding-bottom: 100%;"
+											:class="buildClassName('tw-bg', color[0])"
+										>
+										</div>
+										<div class="tw-w-full">
+											.{{buildClassName('tw-bg', color[0])}}
+											<br><small class="tw-text-tertiary">{{color[1]}}</small>
+										</div>
+									</button>
+								</li>
+							</template>
 						</kv-grid>
 					</kv-tab-panel>
 				</template>
@@ -125,44 +125,44 @@ export const Primitives = (args, { argTypes }) => ({
 					<kv-tab-panel id="text_themable">
 						<table>
 							<tbody>
-								<tr
-									v-for="color in textColor"
-									v-if="!isStaticColor(color)"
-									:key="buildClassName('text-color', color[0])"
-								>
-									<td class="tw-py-1 tw-min-w-[300px]">
-										<button
-											class="hover:tw-text-action-highlight"
-											:class="buildClassName('tw-text', color[0])"
-											@click="copy(buildClassName('tw-text', color[0]))"
-										>.{{buildClassName('tw-text', color[0])}}</button>
-									</td>
-									<td>
-										<small class="tw-text-tertiary">var({{buildClassName('--text', color[0])}})</small>
-									</td>
-								</tr>
+								<template v-for="color in textColor" :key="buildClassName('text-color', color[0])">
+									<tr
+										v-if="!isStaticColor(color)"
+									>
+										<td class="tw-py-1 tw-min-w-[300px]">
+											<button
+												class="hover:tw-text-action-highlight"
+												:class="buildClassName('tw-text', color[0])"
+												@click="copy(buildClassName('tw-text', color[0]))"
+											>.{{buildClassName('tw-text', color[0])}}</button>
+										</td>
+										<td>
+											<small class="tw-text-tertiary">var({{buildClassName('--text', color[0])}})</small>
+										</td>
+									</tr>
+								</template>
 							</tbody>
 						</table>
 					</kv-tab-panel>
 					<kv-tab-panel id="text_static">
 						<table>
 							<tbody>
-								<tr
-									v-for="color in textColor"
-									v-if="isStaticColor(color)"
-									:key="buildClassName('text-color', color[0])"
-								>
-									<td class="tw-py-1 tw-min-w-[300px]">
-										<button
-											class="hover:tw-text-action-highlight"
-											:class="buildClassName('tw-text', color[0])"
-											@click="copy(buildClassName('tw-text', color[0]))"
-										>.{{buildClassName('tw-text', color[0])}}</button>
-									</td>
-									<td>
-										<small class="tw-text-tertiary">var({{buildClassName('--text', color[0])}})</small>
-									</td>
-								</tr>
+								<template v-for="color in textColor" :key="buildClassName('text-color', color[0])">
+									<tr
+										v-if="isStaticColor(color)"
+									>
+										<td class="tw-py-1 tw-min-w-[300px]">
+											<button
+												class="hover:tw-text-action-highlight"
+												:class="buildClassName('tw-text', color[0])"
+												@click="copy(buildClassName('tw-text', color[0]))"
+											>.{{buildClassName('tw-text', color[0])}}</button>
+										</td>
+										<td>
+											<small class="tw-text-tertiary">var({{buildClassName('--text', color[0])}})</small>
+										</td>
+									</tr>
+								</template>
 							</tbody>
 						</table>
 					</kv-tab-panel>
@@ -181,44 +181,44 @@ export const Primitives = (args, { argTypes }) => ({
 					<kv-tab-panel id="border_themable">
 						<table>
 							<tbody>
-								<tr
-									v-for="color in borderColor"
-									v-if="!isStaticColor(color)"
-									:key="buildClassName('border-color', color[0])"
-								>
-									<td class="tw-py-2 tw-min-w-[300px]">
-										<button
-											class="tw-ring-4 hover:tw-text-action-highlight"
-											:class="buildClassName('tw-ring', color[0])"
-											@click="copy(buildClassName('tw-border', color[0]))"
-										>.{{buildClassName('tw-border', color[0])}}</button>
-									</td>
-									<td>
-										<small class="tw-text-tertiary">var({{buildClassName('--border', color[0])}})</small>
-									</td>
-								</tr>
+								<template v-for="color in borderColor" :key="buildClassName('border-color', color[0])">
+									<tr
+										v-if="!isStaticColor(color)"
+									>
+										<td class="tw-py-2 tw-min-w-[300px]">
+											<button
+												class="tw-ring-4 hover:tw-text-action-highlight"
+												:class="buildClassName('tw-ring', color[0])"
+												@click="copy(buildClassName('tw-border', color[0]))"
+											>.{{buildClassName('tw-border', color[0])}}</button>
+										</td>
+										<td>
+											<small class="tw-text-tertiary">var({{buildClassName('--border', color[0])}})</small>
+										</td>
+									</tr>
+								</template>
 							</tbody>
 						</table>
 					</kv-tab-panel>
 					<kv-tab-panel id="border_static">
 						<table>
 							<tbody>
-								<tr
-									v-for="color in borderColor"
-									v-if="isStaticColor(color)"
-									:key="buildClassName('border-color', color[0])"
-								>
-									<td class="tw-py-2 tw-min-w-[300px]">
-										<button
-											class="tw-ring-4 hover:tw-text-action-highlight"
-											:class="buildClassName('tw-ring', color[0])"
-											@click="copy(buildClassName('tw-border', color[0]))"
-										>.{{buildClassName('tw-border', color[0])}}</button>
-									</td>
-									<td>
-										<small class="tw-text-tertiary">var({{buildClassName('--border', color[0])}})</small>
-									</td>
-								</tr>
+								<template v-for="color in borderColor" :key="buildClassName('border-color', color[0])">
+									<tr
+										v-if="isStaticColor(color)"
+									>
+										<td class="tw-py-2 tw-min-w-[300px]">
+											<button
+												class="tw-ring-4 hover:tw-text-action-highlight"
+												:class="buildClassName('tw-ring', color[0])"
+												@click="copy(buildClassName('tw-border', color[0]))"
+											>.{{buildClassName('tw-border', color[0])}}</button>
+										</td>
+										<td>
+											<small class="tw-text-tertiary">var({{buildClassName('--border', color[0])}})</small>
+										</td>
+									</tr>
+								</template>
 							</tbody>
 						</table>
 					</kv-tab-panel>
@@ -437,7 +437,6 @@ export const Primitives = (args, { argTypes }) => ({
 				</li>
 			</ul>
 		</section>
-
 		<!-- Toast -->
 		<div class="tw-fixed tw-inset-0 tw-z-toast tw-pointer-events-none">
 			<div class="tw-fixed tw-left-0 tw-right-0 tw-top-2 tw-pointer-events-auto">

package/jest.config.cjs

@@ -0,0 +1,47 @@
+/*
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+module.exports = {
+	testMatch: ['**/unit/specs/**/*.spec.js'],
+
+	// Automatically clear mock calls and instances between every test
+	clearMocks: true,
+
+	// Indicates whether the coverage information should be collected while executing the test
+	collectCoverage: false,
+
+	// The directory where Jest should output its coverage files
+	// coverageDirectory: 'coverage',
+
+	// Indicates which provider should be used to instrument code for coverage
+	// coverageProvider: 'v8',
+
+	// An array of file extensions your modules use
+	moduleFileExtensions: [
+		'js',
+		'json',
+		'mjs',
+		'vue',
+	],
+
+	// The test environment that will be used for testing
+	testEnvironment: 'jsdom',
+
+	// A map from regular expressions to paths to transformers
+	transform: {
+		'^.+\\.vue$': '@vue/vue3-jest',
+		'^.+\\.js$': 'babel-jest',
+		'^.+\\.mjs$': 'babel-jest',
+	},
+
+	transformIgnorePatterns: [
+		'node_modules/(?!@vueuse)/',
+	],
+
+	// Files to be executed after the test environment is setup but before tests are run
+	setupFilesAfterEnv: [
+		'./tests/unit/jest-setup.js',
+	],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.109.4",
+  "version": "4.0.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -13,20 +13,23 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@storybook/addon-a11y": "7.6.20",
-    "@storybook/addon-actions": "7.6.20",
-    "@storybook/addon-essentials": "7.6.20",
-    "@storybook/addon-links": "7.6.20",
-    "@storybook/addon-storysource": "7.6.20",
-    "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/addons": "7.6.20",
-    "@storybook/vue": "7.6.20",
-    "@storybook/vue-webpack5": "7.6.20",
+    "@storybook/addon-a11y": "8.0.9",
+    "@storybook/addon-essentials": "8.0.9",
+    "@storybook/addon-links": "8.0.9",
+    "@storybook/addon-storysource": "8.0.9",
+    "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/addon-viewport": "8.0.9",
+    "@storybook/builder-webpack5": "8.0.9",
+    "@storybook/core-common": "8.0.9",
+    "@storybook/theming": "8.0.9",
+    "@storybook/vue3": "8.0.9",
+    "@storybook/vue3-webpack5": "8.0.9",
     "@testing-library/dom": "^8.1.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/user-event": "^13.2.1",
-    "@testing-library/vue": "^5.8.1",
-    "@vue/composition-api": "^1.4.1",
+    "@testing-library/vue": "^8.1.0",
+    "@vue/reactivity": "3.2.37",
+    "@vue/vue3-jest": "^27.0.0-alpha.4",
     "autoprefixer": "^10.4.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^27.0.6",
@@ -44,26 +47,26 @@
     "postcss-loader": "^7.0.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "storybook": "7.6.20",
+    "storybook": "8.0.9",
     "style-loader": "^3.3.4",
     "tailwindcss": "^3.4.3",
     "tsup": "^6.7.0",
-    "vue": "2.6.14",
+    "vue": "^3.2.37",
     "vue-loader": "^15.9.6",
-    "vue-router": "^3.5.2",
+    "vue-router": "^4.5.0",
     "vue-template-compiler": "2.6.14"
   },
   "scripts": {
-    "storybook": "vue-demi-switch 2 && storybook dev -p 6006 -c vue/.storybook",
-    "build-storybook": "vue-demi-switch 2 && storybook build -c vue/.storybook",
+    "storybook": "storybook dev -p 6006 -c vue/.storybook",
+    "build-storybook": "storybook build -c vue/.storybook",
     "lint": "eslint --ext .js,.vue ./",
-    "test": "npm run lint",
+    "test": "npm run lint && jest",
     "build": "tsup utils/*.js --outDir dist/utils --format cjs,esm --clean && cp -R vue/ dist/components/ && cp -R data/ dist/data/"
   },
   "dependencies": {
     "@kiva/kv-tokens": "^2.16.0",
     "@mdi/js": "^7.4.47",
-    "@vueuse/integrations": "^7.6.0",
+    "@vueuse/integrations": "^9.13.0",
     "aria-hidden": "^1.1.3",
     "change-case": "^4.1.2",
     "date-fns": "^2.30.0",
@@ -91,13 +94,7 @@
     }
   },
   "peerDependencies": {
-    "@vue/composition-api": "^1.0.0-rc.1",
-    "vue": "^2.6.0 || >=3.0.0"
+    "vue": ">=3.0.0"
   },
-  "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    }
-  },
-  "gitHead": "780d1cf9352ec18c2d7378fe3f3562f660a6e522"
+  "gitHead": "cad407cb7dbc741fc858a91aed0b481e0c586bd8"
 }

package/tests/unit/specs/components/KvButton.spec.js

@@ -28,7 +28,7 @@ describe('Default Button', () => {
 			props: { to: '/home' },
 		});
 		const anchorEl = getByRole('link', { name: 'Test Button' });
-		expect(anchorEl.href).toEqual('http://localhost/#/home');
+		expect(anchorEl.href).toEqual('http://localhost/home');
 	});
 
 	it('renders as an anchor tag when passed a route object', () => {
@@ -43,7 +43,7 @@ describe('Default Button', () => {
 			},
 		});
 		const anchorEl = getByRole('link', { name: 'Test Button' });
-		expect(anchorEl.href).toEqual('http://localhost/#/test-route-with-query?param1=a');
+		expect(anchorEl.href).toEqual('http://localhost/test-route-with-query?param1=a');
 	});
 
 	it('shows a ripple animation when clicked', async () => {

package/tests/unit/specs/components/KvTextLink.spec.js

@@ -27,7 +27,7 @@ describe('Default Button', () => {
 			props: { to: '/home' },
 		});
 		const anchorEl = getByRole('link', { name: 'Test Text Link' });
-		expect(anchorEl.href).toEqual('http://localhost/#/home');
+		expect(anchorEl.href).toEqual('http://localhost/home');
 	});
 
 	it('renders as an anchor tag when passed a route object', () => {
@@ -42,7 +42,7 @@ describe('Default Button', () => {
 			},
 		});
 		const anchorEl = getByRole('link', { name: 'Test Text Link' });
-		expect(anchorEl.href).toEqual('http://localhost/#/test-route-with-query?param1=a');
+		expect(anchorEl.href).toEqual('http://localhost/test-route-with-query?param1=a');
 	});
 
 	it('has no automated accessibility violations', async () => {

package/tests/unit/utils/addVueRouter.js

@@ -1,24 +1,18 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { isVue3 } from 'vue-demi';
-import * as VueRouter from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
 
 export default function addVueRouter(testingLibraryOptions, vueRouterOptions) {
 	const opts = { ...testingLibraryOptions };
 
-	if (isVue3) {
-		// create opts.global.plugins array if it does not exist
-		opts.global = opts.global ?? {};
-		opts.global.plugins = opts.global.plugins ?? [];
+	// create opts.global.plugins array if it does not exist
+	opts.global = opts.global ?? {};
+	opts.global.plugins = opts.global.plugins ?? [];
 
-		// add Vue Router to plugins array
-		opts.global.plugins.push(VueRouter.createRouter(vueRouterOptions ?? {
-			history: VueRouter.createWebHashHistory(),
-			routes: [{ path: '/:path(.*)', component: {} }],
-		}));
-	} else {
-		const VueRouterDefault = VueRouter.default;
-		opts.routes = new VueRouterDefault(vueRouterOptions);
-	}
+	// add Vue Router to plugins array
+	opts.global.plugins.push(createRouter(vueRouterOptions ?? {
+		history: createWebHistory(),
+		routes: [{ path: '/:path(.*)', component: {} }],
+	}));
 
 	return opts;
 }

package/vue/.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/vue/.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/vue/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/vue/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;