@kiva/kv-components 3.105.3 → 3.107.0

package/vue/KvVerticalCarousel.vue

@@ -0,0 +1,156 @@
+<template>
+	<div>
+		<section
+			ref="rootEl"
+			aria-label="carousel"
+			class="kv-carousel tw-overflow-hidden tw-relative"
+		>
+			<!-- Carousel Content -->
+			<div
+				class="tw-flex tw-flex-col"
+				:style="`height: ${heightStyle}`"
+				@click.capture="onCarouselContainerClick"
+			>
+				<div
+					v-for="(slotName, index) in componentSlotKeys"
+					:key="index"
+					role="group"
+					:aria-label="`slide ${index + 1} of ${componentSlotKeys.length}`"
+					:aria-current="currentIndex === index ? 'true' : 'false'"
+					:aria-hidden="isAriaHidden(index)? 'true' : 'false'"
+					:tab-index="isAriaHidden(index) ? '-1' : false"
+				>
+					<slot
+						:name="slotName"
+					></slot>
+				</div>
+			</div>
+		</section>
+		<!-- Carousel Controls -->
+		<div
+			class="kv-carousel__controls tw-flex
+			tw-justify-between md:tw-justify-center tw-items-center tw-gap-2
+			tw-mt-2 tw-w-full"
+		>
+			<button
+				class="tw-text-primary
+					tw-rounded-full
+					tw-border-2 tw-border-primary
+					tw-h-4 tw-w-4
+					tw-flex tw-items-center tw-justify-center
+					disabled:tw-opacity-low disabled:tw-cursor-default"
+				:disabled="embla && !embla.canScrollPrev()"
+				@click="handleUserInteraction(previousIndex, 'click-left-arrow')"
+			>
+				<kv-material-icon
+					class="tw-w-4"
+					:icon="mdiChevronUp"
+				/>
+				<span class="tw-sr-only">Show previous slide</span>
+			</button>
+			<button
+				class="tw-text-primary
+					tw-rounded-full
+					tw-border-2 tw-border-primary
+					tw-h-4 tw-w-4
+					tw-flex tw-items-center tw-justify-center
+					disabled:tw-opacity-low disabled:tw-cursor-default"
+				:disabled="embla && !embla.canScrollNext()"
+				@click="handleUserInteraction(nextIndex, 'click-right-arrow')"
+			>
+				<kv-material-icon
+					class="tw-w-4"
+					:icon="mdiChevronDown"
+				/>
+				<span class="tw-sr-only">Show next slide</span>
+			</button>
+		</div>
+	</div>
+</template>
+
+<script>
+import {
+	mdiChevronUp,
+	mdiChevronDown,
+} from '@mdi/js';
+import { carouselUtil } from '../utils/carousels';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+
+export default {
+	components: {
+		KvMaterialIcon,
+	},
+	props: {
+		/**
+		 * Height style declaration of the vertical carousel.
+		 * */
+		heightStyle: {
+			type: String,
+			default: '400px;',
+		},
+		/**
+		 * Options for the embla carousel - // https://davidcetinkaya.github.io/embla-carousel/api#options
+		 * */
+		emblaOptions: {
+			type: Object,
+			default() {
+				return {};
+			},
+		},
+		/**
+		 * The type of logic to implement when deciding how many slides
+		 * to scroll when pressing the next/prev button
+		 * `visible, auto`
+		 * */
+		slidesToScroll: {
+			type: String,
+			default: 'auto',
+			validator: (value) => ['visible', 'auto'].indexOf(value) !== -1,
+		},
+	},
+	emits: [
+		'change',
+		'interact-carousel',
+	],
+	setup(props, { emit, slots }) {
+		const {
+			componentSlotKeys,
+			currentIndex,
+			embla,
+			goToSlide,
+			handleUserInteraction,
+			isAriaHidden,
+			nextIndex,
+			onCarouselContainerClick,
+			previousIndex,
+			reInit,
+			reInitVisible,
+			rootEl,
+			slideIndicatorCount,
+			slides,
+		} = carouselUtil(props, { emit, slots }, { axis: 'y' });
+
+		return {
+			componentSlotKeys,
+			currentIndex,
+			embla,
+			goToSlide,
+			handleUserInteraction,
+			isAriaHidden,
+			mdiChevronDown,
+			mdiChevronUp,
+			nextIndex,
+			onCarouselContainerClick,
+			previousIndex,
+			reInit,
+			reInitVisible,
+			rootEl,
+			slideIndicatorCount,
+			slides,
+		};
+	},
+};
+</script>
+
+<style scoped>
+</style>

package/vue/stories/KvVerticalCarousel.stories.js

@@ -0,0 +1,168 @@
+import KvVerticalCarousel from '../KvVerticalCarousel.vue';
+import KvButton from '../KvButton.vue';
+
+const randomHexColor = (index) => {
+	const defaultColor = '96d4b3';
+	const colorArray = [
+		'D5573B',
+		'885053',
+		'777DA7',
+		'94C9A9',
+		'C6ECAE',
+		'C490D1',
+		'A0D2DB',
+		'7D8CC4',
+		'726DA8',
+	];
+	return colorArray?.[index] || defaultColor;
+};
+
+// This is not an actual loan card template, just a vague
+// approximation to make testing in the stories nicer
+const generateLoanCardTemplate = (index) => {
+	const amounts = [
+		'100',
+		'2,255',
+		'50',
+		'41,900',
+	];
+	const cardCopy = [
+		'A loan of $5,450 helps a member to buy flour, eggs, lard, sugar, sweets and other...',
+		'A loan of $1,125 helps to face the financial problem of covering tuition fees.',
+		'A loan of $450 helps to purchase store goods for resale.',
+	];
+
+	return `
+		<div style="width: 336px">
+			<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>
+			<kv-button
+				variant="primary"
+			>
+				Read more
+			</kv-button>
+		</div>`;
+};
+
+const defaultCarouselSlides = `
+	<template #slide1>
+		<img src="https://placehold.co/400x150/${randomHexColor(1)}/000000">
+	</template>
+	<template #slide2>
+		<img src="https://placehold.co/400x150/${randomHexColor(2)}/000000">
+	</template>
+	<template #slide3>
+		<img src="https://placehold.co/400x150/${randomHexColor(3)}/000000">
+	</template>
+	<template #slide4>
+		<img src="https://placehold.co/400x150/${randomHexColor(4)}/000000">
+	</template>
+`;
+
+export default {
+	title: 'KvVerticalCarousel',
+	component: KvVerticalCarousel,
+};
+
+export const Default = () => ({
+	components: {
+		KvVerticalCarousel,
+	},
+	template: `
+		<div style="width: 400px;">
+			<kv-vertical-carousel height-style="310px" class="tw-w-full">
+				${defaultCarouselSlides}
+			</kv-vertical-carousel>
+		</div>
+	`,
+});
+
+export const LoopFalse = () => ({
+	components: {
+		KvVerticalCarousel,
+	},
+	template: `
+		<div style="width: 400px;">
+			<kv-vertical-carousel height-style="400px" class="tw-w-full">
+				${defaultCarouselSlides}
+			</kv-vertical-carousel>
+		</div>
+	`,
+});
+
+export const MultipleLoanCards = () => ({
+	components: {
+		KvVerticalCarousel,
+		KvButton,
+	},
+	template: `
+		<kv-vertical-carousel
+			:embla-options="{ loop: false }"
+			:multiple-slides-visible="true"
+			style="max-width: 600px;"
+			height-style="510px"
+			class="tw-w-full"
+		>
+			<template #slide1>
+				${generateLoanCardTemplate(1)}
+			</template>
+			<template #slide2>
+				${generateLoanCardTemplate(2)}
+			</template>
+			<template #slide3>
+				${generateLoanCardTemplate(3)}
+			</template>
+			<template #slide4>
+				${generateLoanCardTemplate(4)}
+			</template>
+			<template #slide5>
+				${generateLoanCardTemplate(5)}
+			</template>
+		</kv-vertical-carousel>
+	`,
+});
+
+export const CustomStartIndex = () => ({
+	components: {
+		KvVerticalCarousel,
+		KvButton,
+	},
+	template: `
+		<kv-vertical-carousel
+			:embla-options="{ loop: false, align: 'center', startIndex: 1 }"
+			:multiple-slides-visible="true"
+			slides-to-scroll="visible"
+			style="max-width: 1072px;"
+		>
+			<template #slide1>
+				${generateLoanCardTemplate(1)}
+			</template>
+			<template #slide2>
+				${generateLoanCardTemplate(2)}
+			</template>
+			<template #slide3>
+				${generateLoanCardTemplate(3)}
+			</template>
+			<template #slide4>
+				${generateLoanCardTemplate(4)}
+			</template>
+			<template #slide5>
+				${generateLoanCardTemplate(5)}
+			</template>
+			<template #slide6>
+				${generateLoanCardTemplate(6)}
+			</template>
+			<template #slide7>
+				${generateLoanCardTemplate(7)}
+			</template>
+			<template #slide8>
+				${generateLoanCardTemplate(8)}
+			</template>
+			<template #slide9>
+				${generateLoanCardTemplate(9)}
+			</template>
+		</kv-vertical-carousel>
+	`,
+});