@kiva/kv-components 4.8.6 → 5.1.0

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

@@ -1,142 +0,0 @@
-import KvButton from '../KvButton.vue';
-
-export default {
-	title: 'KvButton',
-	component: KvButton,
-	argTypes: {
-		variant: {
-			control: 'select',
-			options: ['primary', 'secondary', 'link', 'danger', 'ghost', 'caution'],
-		},
-		state: {
-			control: 'select',
-			options: ['', 'disabled', 'loading'],
-		},
-	},
-};
-
-const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { KvButton },
-	setup() { return { args }; },
-	template: `
-		<kv-button
-			:variant="args.variant"
-			:state="args.state"
-			:to="args.to"
-			:href="args.href"
-			@click="onClick"
-		>
-			Find a borrower
-		</kv-button>`,
-	methods: {
-		onClick(e) { console.log(e); },
-	},
-});
-
-const VariantTemplate = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { KvButton },
-	setup() { return { args }; },
-	template: `
-		<ul>
-			<li
-				v-for="variant in ['primary', 'secondary', 'link', 'danger', 'ghost', 'caution']"
-				:key="variant"
-				class="tw-mb-2"
-			>
-				<kv-button
-					:variant="variant"
-					:state="args.state"
-					:to="args.to"
-					:href="args.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 },
-	setup() { return { args }; },
-	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="args.state"
-				:to="args.to"
-				:href="args.href"
-				@click="onClick"
-			>
-				Find a borrower
-			</kv-button>
-		</li>
-	</ul>`,
-	methods: {
-		onClick(e) { console.log(e); },
-	},
-});

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

@@ -1,489 +0,0 @@
-import { watch } from 'vue';
-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>
-	`,
-});
-
-export const AutoPlayAutomatically = () => ({
-	components: {
-		KvCarousel,
-	},
-	template: `
-		<kv-carousel
-			style="max-width: 400px;"
-			:embla-options="{ loop: false }"
-			:autoplay-options="{ playOnInit: true, delay: 3000 }"
-		>
-			${defaultCarouselSlides}
-		</kv-carousel>
-	`,
-});
-
-export const AutoPlayButton = () => ({
-	components: {
-		KvCarousel,
-	},
-	data: () => ({
-		isAutoplaying: false,
-	}),
-	mounted() {
-		watch(() => this.$refs?.sampleCarousel?.isAutoplaying, (newValue) => {
-			this.isAutoplaying = newValue;
-		});
-	},
-	template: `
-		<div>
-			<kv-carousel
-				ref="sampleCarousel"
-				style="max-width: 400px;"
-				:embla-options="{ loop: false }"
-				:autoplay-options="{ playOnInit: true, delay: 3000 }"
-			>
-				${defaultCarouselSlides}
-			</kv-carousel>
-			<a href="#" @click.native.prevent="$refs.sampleCarousel.toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
-			<br/>
-			<p>AutoPlay is: {{ isAutoplaying ? 'ON' : 'OFF' }}</p>
-		</div>
-	`,
-});
-
-export const Fade = () => ({
-	components: {
-		KvCarousel,
-	},
-	template: `
-		<div>
-			<kv-carousel
-				ref="sampleCarousel"
-				style="max-width: 400px;"
-				:embla-options="{ loop: false }"
-				:fade-enabled="true"
-			>
-				${defaultCarouselSlides}
-			</kv-carousel>
-		</div>
-	`,
-});

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

@@ -1,51 +0,0 @@
-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 },
-	setup() { return { args }; },
-	template: `
-		<div>
-			<kv-button @click="isVisible = true;">Show cart modal</kv-button>
-			<p>The lightbox is visible: {{isVisible}}</p>
-
-			<kv-cart-modal
-				v-bind="args"
-				@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',
-};