@kiva/kv-components 3.107.0 → 3.107.1

package/dist/components/stories/KvBorrowerImage.stories.js

@@ -0,0 +1,68 @@
+import KvBorrowerImage from '../KvBorrowerImage.vue';
+
+export default {
+	title: 'KvBorrowerImage',
+	component: KvBorrowerImage,
+};
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvBorrowerImage },
+		template: `
+			<div style="width: 336px;">
+				<kv-borrower-image
+					:alt="alt"
+					:aspect-ratio="aspectRatio"
+					:default-image="defaultImage"
+					:hash="hash"
+					:images="images"
+					:photo-path="photoPath"
+				/>
+			</div>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+const props = {
+	alt: 'Photo of Borrower',
+	aspectRatio: 0.75,
+	defaultImage: { width: 336 },
+	hash: '9673d0722a7675b9b8d11f90849d9b44',
+	images: [
+		{
+			width: 336,
+			viewSize: 1024,
+		},
+		{
+			width: 336,
+			viewSize: 768,
+		},
+		{
+			width: 416,
+			viewSize: 480,
+		},
+		{
+			width: 374,
+			viewSize: 414,
+		},
+		{
+			width: 335,
+			viewSize: 375,
+		},
+		{
+			width: 300,
+		},
+	],
+	photoPath: 'https://www-kiva-org.freetls.fastly.net/img/',
+};
+
+export const Default = story(props);
+
+export const Square = story({
+	...props,
+	aspectRatio: 1,
+	defaultImage: { width: 300 },
+});

package/dist/components/stories/KvButton.stories.js

@@ -0,0 +1,144 @@
+import KvButton from '../KvButton.vue';
+
+export default {
+	title: 'KvButton',
+	component: KvButton,
+	argTypes: {
+		variant: {
+			control: {
+				type: 'select',
+				options: ['primary', 'secondary', 'link', 'danger', 'ghost', 'caution'],
+			},
+		},
+		state: {
+			control: {
+				type: 'select',
+				options: ['', 'disabled', 'loading'],
+				defaultValue: null,
+			},
+		},
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvButton },
+	template: `
+		<kv-button
+			:variant="variant"
+			:state="state"
+			:to="to"
+			:href="href"
+			@click="onClick"
+		>
+			Find a borrower
+		</kv-button>`,
+	methods: {
+		onClick(e) { console.log(e); },
+	},
+});
+
+const VariantTemplate = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvButton },
+	template: `
+		<ul>
+			<li
+				v-for="variant in ['primary', 'secondary', 'link', 'danger', 'ghost', 'caution']"
+				:key="variant"
+				class="tw-mb-2"
+			>
+				<kv-button
+					:variant="variant"
+					:state="state"
+					:to="to"
+					:href="href"
+				>
+					Find a borrower
+				</kv-button>
+			</li>
+		</ul>`,
+	methods: {
+		onClick(e) { console.log(e); },
+	},
+});
+
+// Variants
+export const VariantPrimary = Template.bind({});
+VariantPrimary.args = {
+	variant: 'primary',
+};
+
+export const VariantSecondary = Template.bind({});
+VariantSecondary.args = {
+	variant: 'secondary',
+};
+
+export const VariantDanger = Template.bind({});
+VariantDanger.args = {
+	variant: 'danger',
+};
+
+export const VariantLink = Template.bind({});
+VariantLink.args = {
+	variant: 'link',
+};
+
+export const VariantGhost = Template.bind({});
+VariantGhost.args = {
+	variant: 'ghost',
+};
+
+export const VariantCaution = Template.bind({});
+VariantCaution.args = {
+	variant: 'caution',
+};
+
+// States
+export const StateLoading = VariantTemplate.bind({});
+StateLoading.args = {
+	state: 'loading',
+};
+
+export const StateActive = VariantTemplate.bind({});
+StateActive.args = {
+	state: 'active',
+};
+
+export const StateDisabled = VariantTemplate.bind({});
+StateDisabled.args = {
+	state: 'disabled',
+};
+
+// Misc
+export const WithHref = VariantTemplate.bind({});
+WithHref.args = {
+	href: 'https://www.google.com',
+};
+
+export const FullWidth = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvButton },
+	template: `
+	<ul>
+		<li
+			v-for="variant in ['primary', 'secondary', 'link', 'danger', 'ghost', 'caution']"
+			:key="variant"
+			class="tw-mb-2"
+		>
+			<kv-button
+				class="tw-w-full"
+				:variant="variant"
+				:state="state"
+				:to="to"
+				:href="href"
+				@click="onClick"
+			>
+				Find a borrower
+			</kv-button>
+		</li>
+	</ul>`,
+	methods: {
+		onClick(e) { console.log(e); },
+	},
+});

package/dist/components/stories/KvCarousel.stories.js

@@ -0,0 +1,426 @@
+import KvCarousel from '../KvCarousel.vue';
+import KvLoadingSpinner from '../KvLoadingSpinner.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/300x220/${randomHexColor(1)}/000000" class="tw-w-full">
+	</template>
+	<template #slide2>
+		<img src="https://placehold.co/300x220/${randomHexColor(2)}/000000" class="tw-w-full">
+	</template>
+	<template #slide3>
+		<img src="https://placehold.co/300x220/${randomHexColor(3)}/000000" class="tw-w-full">
+	</template>
+	<template #slide4>
+		<img src="https://placehold.co/300x220/${randomHexColor(4)}/000000" class="tw-w-full">
+	</template>
+`;
+
+export default {
+	title: 'KvCarousel',
+	component: KvCarousel,
+};
+
+export const Default = () => ({
+	components: {
+		KvCarousel,
+	},
+	template: `
+		<kv-carousel style="max-width: 400px;">
+			${defaultCarouselSlides}
+		</kv-carousel>
+	`,
+});
+
+export const LoopFalse = () => ({
+	components: {
+		KvCarousel,
+	},
+	template: `
+		<kv-carousel style="max-width: 400px;" :embla-options="{ loop: false }">
+			${defaultCarouselSlides}
+		</kv-carousel>
+	`,
+});
+
+export const MultipleLoanCards = () => ({
+	components: {
+		KvCarousel,
+		KvButton,
+	},
+	template: `
+		<kv-carousel
+			:embla-options="{ loop: false }"
+			:multiple-slides-visible="true"
+			style="max-width: 600px;"
+			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-carousel>
+	`,
+});
+
+export const MultipleLoanCards2 = () => ({
+	components: {
+		KvCarousel,
+		KvButton,
+	},
+	template: `
+		<kv-carousel
+			:embla-options="{ loop: false }"
+			:multiple-slides-visible="true"
+			slides-to-scroll="visible"
+			style="max-width: 1072px;"
+			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>
+			<template #slide6>
+				${generateLoanCardTemplate(6)}
+			</template>
+			<template #slide7>
+				${generateLoanCardTemplate(7)}
+			</template>
+			<template #slide8>
+				${generateLoanCardTemplate(8)}
+			</template>
+			<template #slide9>
+				${generateLoanCardTemplate(9)}
+			</template>
+		</kv-carousel>
+	`,
+});
+
+export const MultipleLoanCardsReInit = () => ({
+	components: {
+		KvCarousel,
+		KvButton,
+	},
+	template: `
+		<div data-testid="carousel-container">
+			<kv-carousel
+				ref="myCarouselRef"
+				:multiple-slides-visible="true"
+				slides-to-scroll="visible"
+				style="max-width: 800px;"
+			>
+				<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>
+			</kv-carousel>
+			<kv-button @click.native.prevent="removeSlide()" role="removeSlideButton">Remove Slide</kv-button>
+			<p>Slide Count: {{ slideCount }} | Indicator Count: {{ slideIndicatorCount }} | Removed Slides: {{ removedSlides.length }}</p>
+		</div>
+	`,
+	data() {
+		return {
+			removedSlides: [],
+			slideCount: null,
+			slideIndicatorCount: null,
+		};
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.slideCount = this.$refs?.myCarouselRef?.slides?.length;
+			this.slideIndicatorCount = this.$refs?.myCarouselRef?.slideIndicatorCount;
+		});
+	},
+	methods: {
+		removeSlide() {
+			// Fetch slides + remove one
+			const slides = this.$refs?.myCarouselRef?.embla?.slideNodes();
+			const slideToRemove = slides.pop();
+			this.removedSlides.push(slideToRemove);
+			this.$refs?.myCarouselRef?.embla?.containerNode()?.removeChild(slideToRemove);
+			// Call our component reInit method
+			this.$refs?.myCarouselRef?.reInit();
+			// Update values for reflection in story
+			this.slideCount = this.$refs?.myCarouselRef?.slides?.length;
+			this.selectedIndexCheck = this.$refs?.myCarouselRef?.currentIndex;
+			this.slideIndicatorCount = this.$refs?.myCarouselRef?.slideIndicatorCount;
+		},
+	},
+});
+
+export const loadingLoanCardExample = () => ({
+	components: {
+		KvCarousel,
+		KvLoadingSpinner,
+		KvButton,
+	},
+	data() {
+		return {
+			loan2Loaded: false,
+			loan3Loaded: false,
+		};
+	},
+	template: `
+		<kv-carousel
+			:embla-options="{ loop: false }"
+			:multiple-slides-visible="false"
+			style="max-width: 336px;"
+			@change="onCarouselSlideChange"
+		>
+			<template #slide1>
+				${generateLoanCardTemplate(1)}
+			</template>
+			<template #slide2>
+				<div style="width: 336px">
+					<div v-if="loan2Loaded">
+						Loan card goes here
+					</div>
+					<div v-else
+						style="display: flex; align-items: center; justify-content: center; position: absolute; top: 0; bottom: 0; right: 0; left: 0;"
+					>
+						<kv-loading-spinner  color="black" size="small" />
+					</div>
+				</div>
+			</template>
+			<template #slide3>
+				<div style="width: 336px">
+					<div v-if="loan3Loaded">
+						Loan card goes here
+					</div>
+					<div v-else
+						style="display: flex; align-items: center; justify-content: center; position: absolute; top: 0; bottom: 0; right: 0; left: 0;"
+					>
+						<kv-loading-spinner  color="black" size="small" />
+					</div>
+				</div>
+			</template>
+		</kv-carousel>
+	`,
+	methods: {
+		onCarouselSlideChange(slideIndex) {
+			console.log(`carousel changed to slide: ${slideIndex}`);
+			console.log('start fetching the next indexes loan data now');
+		},
+	},
+});
+
+export const ResponsiveSlides = () => ({
+	components: {
+		KvCarousel,
+		KvButton,
+	},
+	template: `
+		<kv-carousel
+			:embla-options="{ loop: false }"
+			:multiple-slides-visible="true"
+			slides-to-scroll="visible"
+			style="max-width: 1072px;"
+			class="tw-w-full"
+			slide-max-width="32.5rem"
+		>
+			${defaultCarouselSlides}
+		</kv-carousel>
+	`,
+});
+
+export const CustomStartIndex = () => ({
+	components: {
+		KvCarousel,
+		KvButton,
+	},
+	template: `
+		<kv-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-carousel>
+	`,
+});
+
+export const AsideControls = () => ({
+	components: {
+		KvCarousel,
+		KvButton,
+	},
+	template: `
+		<kv-carousel
+			:embla-options="{ loop: false }"
+			:multiple-slides-visible="true"
+			:aside-controls="true"
+			slides-to-scroll="visible"
+			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>
+			<template #slide6>
+				${generateLoanCardTemplate(6)}
+			</template>
+			<template #slide7>
+				${generateLoanCardTemplate(7)}
+			</template>
+			<template #slide8>
+				${generateLoanCardTemplate(8)}
+			</template>
+		</kv-carousel>
+	`,
+});
+
+export const Dotted = () => ({
+	components: {
+		KvCarousel,
+	},
+	template: `
+		<kv-carousel
+			style="max-width: 400px;"
+			:is-dotted="true"
+		>
+			${defaultCarouselSlides}
+		</kv-carousel>
+	`,
+});
+
+export const ThreeDimensional = () => ({
+	components: {
+		KvCarousel,
+	},
+	template: `
+		<kv-carousel
+			:embla-options="{ loop: false, align: 'center' }"
+			style="max-width: 600px;"
+			:is-dotted="true"
+			:in-circle="true"
+		>
+			${defaultCarouselSlides}
+		</kv-carousel>
+	`,
+});

package/dist/components/stories/KvCartModal.stories.js

@@ -0,0 +1,54 @@
+import KvCartModal from '../KvCartModal.vue';
+import KvButton from '../KvButton.vue';
+
+export default {
+	title: 'KvCartModal',
+	component: KvCartModal,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	args: {
+		visible: true,
+		title: '',
+		preventClose: false,
+		addedLoan: {
+			name: 'This is a Loan with a very long name',
+			amount: 100,
+			country: 'Kenya',
+			imageHash: '9673d0722a7675b9b8d11f90849d9b44',
+		},
+		photoPath: 'https://www-kiva-org.freetls.fastly.net/img/',
+		basketCount: 1,
+	},
+};
+
+const DefaultTemplate = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvCartModal, KvButton },
+	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"
+				@cart-modal-closed="isVisible = false"
+			>
+			</kv-cart-modal>
+		</div>
+	`,
+	data() {
+		return {
+			isVisible: args.visible,
+		};
+	},
+});
+
+export const Lightbox = DefaultTemplate.bind({});
+Lightbox.args = {
+	title: 'Added to Basket',
+};