@kiva/kv-components 3.105.0 → 3.105.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.105.0",
+  "version": "3.105.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -83,5 +83,5 @@
       "optional": true
     }
   },
-  "gitHead": "1e9645f3136ca83e1768fab93e3e97e636fa29e7"
+  "gitHead": "1eb69b9a5626681003c8bf9569e64e3fc51801c4"
 }

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

@@ -2,9 +2,47 @@ import { render } from '@testing-library/vue';
 import { axe } from 'jest-axe';
 import KvCarousel from '../../../../vue/KvCarousel.vue';
 
+const randomHexColor = (index) => {
+	const defaultColor = '96d4b3';
+	const colorArray = [
+		'D5573B',
+		'885053',
+		'777DA7',
+		'94C9A9',
+		'C6ECAE',
+		'C490D1',
+		'A0D2DB',
+		'7D8CC4',
+		'726DA8',
+	];
+	return colorArray?.[index] || defaultColor;
+};
+
+const defaultCarouselSlides = `
+	<template #slide1>
+		<img src="https://placehold.co/300x220/${randomHexColor(1)}/000000" alt="img1" class="tw-w-full">
+	</template>
+	<template #slide2>
+		<img src="https://placehold.co/300x220/${randomHexColor(2)}/000000" alt="img2" class="tw-w-full">
+	</template>
+	<template #slide3>
+		<img src="https://placehold.co/300x220/${randomHexColor(3)}/000000" alt="img3" class="tw-w-full">
+	</template>
+	<template #slide4>
+		<img src="https://placehold.co/300x220/${randomHexColor(4)}/000000" alt="img4" class="tw-w-full">
+	</template>
+`;
+
 describe('KvCarousel', () => {
 	it('has no automated accessibility violations', async () => {
-		const { container } = render(KvCarousel);
+		const TestComponent = {
+			template:
+				`<kv-carousel style="max-width: 400px;">
+					${defaultCarouselSlides}
+				</kv-carousel>`,
+			components: { KvCarousel },
+		};
+		const { container } = render(TestComponent);
 		const results = await axe(container);
 		expect(results).toHaveNoViolations();
 	});

package/vue/KvCarousel.vue

@@ -375,7 +375,7 @@ export default {
 			slides.value = embla.value.slideNodes();
 			slideIndicatorListLength();
 
-			embla.value.on('select', () => {
+			embla?.value?.on('select', () => {
 				currentIndex.value = embla.value.selectedScrollSnap();
 				/**
 				 * The index of the slide that the carousel has changed to
@@ -389,8 +389,8 @@ export default {
 		});
 
 		onUnmounted(async () => {
-			embla.value.off('select');
-			embla.value.destroy();
+			embla?.value?.off('select');
+			embla?.value?.destroy();
 		});
 
 		return {

package/vue/KvMap.vue

@@ -203,7 +203,7 @@ export default {
 	},
 	async mounted() {
 		if (this.countriesData) {
-			this.countriesBorders = await import('../data/countries-borders.json');
+			this.countriesBorders = await import('../data/ne_110m_admin_0_countries.json');
 		}
 
 		if (!this.mapLibreReady && !this.leafletReady) {
@@ -505,7 +505,7 @@ export default {
 			const countriesFeatures = this.countriesBorders.features ?? [];
 
 			countriesFeatures.forEach((country, index) => {
-				const countryData = this.countriesData.find((data) => data.isoCode === country.properties.ISO_A2);
+				const countryData = this.countriesData.find((data) => data.isoCode === country.properties.iso_a2);
 				if (countryData) {
 					countriesFeatures[index].lenderLoans = countryData.value;
 					countriesFeatures[index].numLoansFundraising = countryData.numLoansFundraising;
@@ -526,7 +526,7 @@ export default {
 			const loansString = feature.lenderLoans
 				? `${feature.lenderLoans} loan${feature.lenderLoans > 1 ? 's' : ''}`
 				: '0 loans';
-			const countryString = `${feature.properties.NAME} <br/> ${loansString}`;
+			const countryString = `${feature.properties.name} <br/> ${loansString}`;
 
 			layer.bindTooltip(countryString, {
 				sticky: true,

package/vue/stories/KvCarousel.stories.js

@@ -35,7 +35,7 @@ const generateLoanCardTemplate = (index) => {
 
 	return `
 		<div style="width: 336px">
-			<img src="https://via.placeholder.com/336x252/${randomHexColor(index)}/000000" class="tw-w-full tw-rounded tw-mb-2">
+			<img src="https://placehold.co/336x252/${randomHexColor(index)}/000000" class="tw-w-full tw-rounded tw-mb-2">
 			<h3>Card Title</h3>
 			<h4 class="tw-my-1">$${amounts?.[index] || amounts?.[1]} to go</h4>
 			<p class="tw-mt-1 tw-mb-9">${cardCopy?.[index] || cardCopy?.[1]}</p>
@@ -49,16 +49,16 @@ const generateLoanCardTemplate = (index) => {
 
 const defaultCarouselSlides = `
 	<template #slide1>
-		<img src="https://via.placeholder.com/300x220/${randomHexColor(1)}/000000" class="tw-w-full">
+		<img src="https://placehold.co/300x220/${randomHexColor(1)}/000000" class="tw-w-full">
 	</template>
 	<template #slide2>
-		<img src="https://via.placeholder.com/300x220/${randomHexColor(2)}/000000" class="tw-w-full">
+		<img src="https://placehold.co/300x220/${randomHexColor(2)}/000000" class="tw-w-full">
 	</template>
 	<template #slide3>
-		<img src="https://via.placeholder.com/300x220/${randomHexColor(3)}/000000" class="tw-w-full">
+		<img src="https://placehold.co/300x220/${randomHexColor(3)}/000000" class="tw-w-full">
 	</template>
 	<template #slide4>
-		<img src="https://via.placeholder.com/300x220/${randomHexColor(4)}/000000" class="tw-w-full">
+		<img src="https://placehold.co/300x220/${randomHexColor(4)}/000000" class="tw-w-full">
 	</template>
 `;