@kiva/kv-components 3.104.0 → 3.105.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.105.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.105.0...@kiva/kv-components@3.105.1) (2024-10-24)
+
+
+### Bug Fixes
+
+* add more complete kv-carousel render to test, update to stable source for placeholder images ([03ee704](https://github.com/kiva/kv-ui-elements/commit/03ee704cbbb8345d4129a6b4cc63c8adfc9d83a9))
+
+
+
+
+
+# [3.105.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.104.0...@kiva/kv-components@3.105.0) (2024-10-15)
+
+
+### Features
+
+* vote card read more ([b7d2c74](https://github.com/kiva/kv-ui-elements/commit/b7d2c74dfa6c464e68b3a6a52298a4a37b11d184))
+
+
+
+
+
 # [3.104.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.103.0...@kiva/kv-components@3.104.0) (2024-10-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.104.0",
+  "version": "3.105.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -83,5 +83,5 @@
       "optional": true
     }
   },
-  "gitHead": "244b386005bccd8280e918bde08c7fd4d6fd7502"
+  "gitHead": "ff60fa64eefe502aba92d72bc4e41a4fbe5a4502"
 }

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/KvVotingCardV2.vue

@@ -4,13 +4,18 @@
 		:style="cssProps"
 	>
 		<div
-			class="tw-flex-grow-0"
+			class="tw-flex-grow-0 tw-text-white"
 		>
 			<h2 class="tw-italic tw-pb-1">
 				{{ title }}
 			</h2>
 			<p class="tw-pb-1.5">
-				{{ description }}
+				{{ truncatedDescription }}
+				<a
+					v-if="isTruncated"
+					class="tw-underline tw-pl-1 tw-text-white tw-cursor-pointer"
+					@click="isLightboxOpen = true"
+				>read more</a>
 			</p>
 			<div class="tw-block md:tw-flex tw-justify-between">
 				<div
@@ -36,22 +41,39 @@
 				</kv-button>
 			</div>
 		</div>
+		<KvLightbox
+			:title="title"
+			:visible="isLightboxOpen"
+			@lightbox-closed="isLightboxOpen = false"
+		>
+			<template #header>
+				<h3>
+					{{ title }}
+				</h3>
+			</template>
+			<p class="tw-pb-1.5">
+				{{ description }}
+			</p>
+		</KvLightbox>
 	</div>
 </template>
 
 <script>
 import {
 	computed,
+	ref,
 	toRefs,
 } from 'vue-demi';
 import KvProgressBar from './KvProgressBar.vue';
 import KvButton from './KvButton.vue';
+import KvLightbox from './KvLightbox.vue';
 
 export default {
 	name: 'KvVotingCard',
 	components: {
-		KvProgressBar,
 		KvButton,
+		KvLightbox,
+		KvProgressBar,
 	},
 	props: {
 		title: {
@@ -83,8 +105,13 @@ export default {
 		'vote',
 	],
 	setup(props, { emit }) {
+		const isLightboxOpen = ref(false);
+
+		const TRUNCATION_LIMIT = 110;
+
 		const {
 			backgroundImageUrl,
+			description,
 		} = toRefs(props);
 
 		const cssProps = computed(() => {
@@ -93,11 +120,24 @@ export default {
 			};
 		});
 
+		const isTruncated = computed(() => {
+			return description?.value && (description?.value.length > TRUNCATION_LIMIT);
+		});
+
+		const truncatedDescription = computed(() => {
+			if (isTruncated.value) {
+				return `${description.value.substring(0, TRUNCATION_LIMIT)}...`;
+			}
+			return description.value;
+		});
 		return {
 			cssProps,
 			castVote() {
 				emit('vote');
 			},
+			isLightboxOpen,
+			isTruncated,
+			truncatedDescription,
 		};
 	},
 };
@@ -109,6 +149,6 @@ export default {
     linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%),
     var(--background-image-voting-card);
 	background-size: cover;
-	@apply tw-rounded tw-px-4 tw-pb-4 tw-text-white;
+	@apply tw-rounded tw-px-4 tw-pb-4;
 }
 </style>

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>
 `;