@kiva/kv-components 3.106.0 → 3.107.1

package/dist/components/stories/KvTextLink.stories.js

@@ -0,0 +1,55 @@
+import {
+	mdiArrowRight,
+} from '@mdi/js';
+import KvTextLink from '../KvTextLink.vue';
+
+export default {
+	title: 'KvTextLink',
+	component: KvTextLink,
+	args: {
+		state: '',
+	},
+	argTypes: {
+		state: {
+			control: {
+				type: 'select',
+				options: ['', 'disabled'],
+			},
+		},
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvTextLink },
+	template: `
+		<kv-text-link
+			:state="state"
+			:href="href"
+			:to="to"
+			:icon="icon"
+			@click="onClick"
+		>
+			Find a borrower
+		</kv-text-link>`,
+	methods: {
+		onClick(e) { console.log(e); },
+	},
+});
+
+export const Default = Template.bind({});
+
+export const StateDisabled = Template.bind({});
+StateDisabled.args = {
+	state: 'disabled',
+};
+
+export const WithHref = Template.bind({});
+WithHref.args = {
+	href: 'https://www.example.com',
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+	icon: mdiArrowRight,
+};

package/dist/components/stories/KvThemeProvider.stories.js

@@ -0,0 +1,178 @@
+import primitives from '@kiva/kv-tokens/primitives.json';
+import {
+	defaultTheme, darkTheme, darkGreenTheme, mintTheme, darkMintTheme, darkStoneTheme,
+} from '@kiva/kv-tokens/configs/kivaColors.cjs';
+import KvButton from '../KvButton.vue';
+import KvGrid from '../KvGrid.vue';
+import KvPageContainer from '../KvPageContainer.vue';
+import KvTextLink from '../KvTextLink.vue';
+import KvThemeProvider from '../KvThemeProvider.vue';
+
+const defaultThemeTokens = primitives.colors.theme.DEFAULT;
+
+const buildTailwindClasses = (prefix) => {
+	let twPrefix = prefix;
+	if (prefix === 'background') {
+		twPrefix = 'bg';
+	}
+	return Object.keys(defaultThemeTokens[prefix]).map((key) => `tw-${twPrefix}-${key}`);
+};
+
+export default {
+	title: 'KvThemeProvider',
+	component: KvThemeProvider,
+	args: {
+		theme: '',
+		customTheme: null,
+	},
+	argTypes: {
+		theme: {
+			control: {
+				type: 'select',
+				options: ['', 'dark', 'darkGreen', 'mint'],
+			},
+		},
+	},
+};
+
+const demoTemplate = `
+	<div class="tw-p-4 tw-mb-8 tw-rounded tw-bg-primary tw-border tw-flex tw-flex-col tw-gap-4">
+		<section>
+			<p
+				v-for="textVariable in textVariables"
+				:key="textVariable"
+				class="tw-text-h2 tw-mb-2"
+				:class="textVariable"
+			>
+				<span>{{textVariable}}</span>
+				<span class="tw-text-opacity-low" :class="textVariable">text-opacity-low</span>
+			</p>
+			<h1 class="tw-text-jumbo tw-mb-2">Jumbo: The quick <u>brown fox</u> jumped <u>over the lazy dog</u></h1>
+			<h1 class="tw-mb-2">H1: The quick <u>brown fox</u> jumped <u>over the lazy dog</u></h1>
+			<h2 class="tw-mb-2">H2: The quick <u>brown fox</u> jumped <u>over the lazy dog</u></h2>
+			<h3 class="tw-mb-2">H3: The quick <u>brown fox</u> jumped <u>over the lazy dog</u></h3>
+			<p>Body text: Voluptate culpa qui excepteur irure ad. Culpa commodo aliquip irure sunt do. Irure incididunt consequat reprehenderit ipsum mollit esse. Ex veniam nulla consequat deserunt fugiat est do in do sint sint ex.</p>
+		</section>
+		<kv-grid as="section" class="tw-grid-cols-2 tw-p-4 tw-gap-2" style="background-color: gray;">
+			<template
+				v-for="bgVariable in bgVariables"
+			>
+				<div
+
+					class="tw-h-4"
+					:class="bgVariable"
+				>
+					{{bgVariable}}
+				</div>
+				<div
+
+					class="tw-h-4 tw-bg-opacity-low"
+					:class="bgVariable"
+				>
+					{{bgVariable}}
+				</div>
+			</template>
+		</kv-grid>
+		<kv-grid as="section" class="tw-grid-cols-2 tw-p-4 tw-gap-2">
+			<template
+				v-for="borderVariable in borderVariables"
+			>
+				<div
+					class="tw-border-2 tw-h-4"
+					:class="borderVariable"
+				>
+					{{ borderVariable }}
+				</div>
+				<div
+					class="tw-border-2 tw-h-4 tw-border-opacity-low"
+					:class="borderVariable"
+				>
+					{{ borderVariable }}
+				</div>
+			</template>
+		</kv-grid>
+		<section>
+			<ul>
+				<li
+					v-for="variant in ['primary', 'secondary', 'link', 'danger', 'ghost']"
+					:key="variant"
+					class="tw-mb-2"
+				>
+					<kv-button :variant="variant">
+						Find a borrower
+					</kv-button>
+				</li>
+			</ul>
+		</section>
+	</div>
+`;
+
+const Template = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvButton,
+		KvGrid,
+		KvPageContainer,
+		KvTextLink,
+		KvThemeProvider,
+	},
+	data() {
+		return {
+			bgVariables: buildTailwindClasses('background'),
+			textVariables: buildTailwindClasses('text'),
+			borderVariables: buildTailwindClasses('border'),
+			defaultTheme,
+			darkTheme,
+			mintTheme,
+			darkMintTheme,
+			darkStoneTheme,
+		};
+	},
+	template: `
+		<kv-theme-provider :theme="theme">
+			${demoTemplate}
+		</kv-theme-provider>`,
+});
+
+export const Default = Template.bind({});
+
+export const Dark = Template.bind({});
+Dark.args = {
+	theme: darkTheme,
+};
+
+export const Mint = Template.bind({});
+Mint.args = {
+	theme: mintTheme,
+};
+
+export const DarkGreen = Template.bind({});
+DarkGreen.args = {
+	theme: darkGreenTheme,
+};
+
+export const DarkMint = Template.bind({});
+DarkMint.args = {
+	theme: darkMintTheme,
+};
+
+export const Custom = Template.bind({});
+Custom.args = {
+	theme: {
+		'--text-primary': '255, 0, 0',
+		'--text-secondary': '0, 255, 255',
+		'--text-action': '255, 255, 0',
+		'--text-action-highlight': '255, 200, 0',
+		'--bg-primary': '100, 199, 209',
+		'--bg-secondary': '191, 255, 191',
+		'--bg-action': '0, 0, 100',
+		'--bg-action-highlight': '0, 0, 150',
+	},
+};
+
+export const DarkStone = Template.bind({});
+DarkStone.args = {
+	theme: darkStoneTheme,
+};

package/dist/components/stories/KvToast.stories.js

@@ -0,0 +1,117 @@
+import KvButton from '../KvButton.vue';
+import KvToast from '../KvToast.vue';
+
+export default {
+	title: 'KvToast',
+	component: KvToast,
+	args: {
+		message: 'Successfully added to basket!',
+		persist: false,
+		type: 'confirmation',
+	},
+	argTypes: {
+		message: {
+			control: {
+				type: 'text',
+			},
+		},
+		type: {
+			options: ['confirmation', 'warning', 'error'],
+			control: {
+				type: 'select',
+			},
+		},
+		persist: {
+			control: {
+				type: 'boolean',
+			},
+		},
+		hideDelay: {
+			control: {
+				type: 'number',
+			},
+		},
+	},
+};
+
+const Template = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvToast,
+		KvButton,
+	},
+	template: `
+		<div>
+			<kv-button @click="showToast(message, type, persist, hideDelay)">Show Toast</kv-button>
+
+			<!-- div below is a kludge for storybook docs -->
+			<div class="tw-fixed tw-z-toast tw-inset-0 tw-pointer-events-none">
+				<div class="tw-fixed tw-left-0 tw-right-0 tw-top-2 tw-pointer-events-auto">
+					<kv-toast ref="toastRef" @close="onClose" />
+				</div>
+			</div>
+		</div>`,
+	methods: {
+		showToast(messageInput, type, persistInput, hideDelay) {
+			this.$refs.toastRef.show(messageInput, type, persistInput, hideDelay);
+		},
+		onClose() {
+		},
+	},
+});
+
+export const typeConfirmation = Template.bind({});
+typeConfirmation.args = { type: 'confirmation' };
+
+export const typeWarning = Template.bind({});
+typeWarning.args = { type: 'warning' };
+
+export const typeError = Template.bind({});
+typeError.args = { type: 'error' };
+
+export const withLongTextAndHtml = Template.bind({});
+withLongTextAndHtml.args = { message: 'This is a nice long content that could <b>live here</b> to show the spacing respect. This is a nice <a href="https://www.example.com">long content</a> that could live here to <i>show the spacing</i> respect.' };
+
+export const persist = Template.bind({});
+persist.args = { persist: true };
+
+export const hideDelay = Template.bind({});
+hideDelay.args = { hideDelay: 10000 };
+
+const KivaLogoTemplate = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvToast,
+		KvButton,
+	},
+	template: `
+		<div>
+			<kv-button @click="showToast(message, type, persist)">Show Toast</kv-button>
+
+			<!-- div below is a kludge for storybook docs -->
+			<div class="tw-fixed tw-z-toast tw-inset-0 tw-pointer-events-none">
+				<div class="tw-fixed tw-left-0 tw-right-0 tw-top-2 tw-pointer-events-auto">
+					<kv-toast ref="toastRef" @close="onClose">
+						<template #toastContent>
+							<div>
+								Welcome to Lending home! We’re doing something new based on your feedback this year. <button class="tw-text-action">Read more here</button>
+							</div>
+						</template>
+					</kv-toast>
+				</div>
+			</div>
+		</div>`,
+	methods: {
+		showToast(messageInput, type, persistInput) {
+			this.$refs.toastRef.show(messageInput, type, persistInput);
+		},
+		onClose() {
+		},
+	},
+});
+export const typeKivaLogo = KivaLogoTemplate.bind({});
+typeKivaLogo.args = { type: 'kiva-logo', message: '' };

package/dist/components/stories/KvTooltip.stories.js

@@ -0,0 +1,26 @@
+import KvTooltip from '../KvTooltip.vue';
+
+export default {
+	title: 'KvTooltip',
+	component: KvTooltip,
+};
+
+export const Default = () => ({
+	components: {
+		KvTooltip,
+	},
+	template: `
+		<div>
+			<button id="my-cool-btn">Hover of Focus Me!</button>
+			<kv-tooltip controller="my-cool-btn">
+				<template #title>
+					What is an Experimental Field Partner?
+				</template>
+				If a Field Partner is labeled as Experimental, this means that Kiva has
+				required only a comparatively light level of due diligence and
+				monitoring, in exchange for only allowing this Field Partner access to a
+				small amount of funding through Kiva at any given time.
+			</kv-tooltip>
+		</div>
+	`,
+});

package/dist/components/stories/KvTreeMapChart.stories.js

@@ -0,0 +1,42 @@
+import KvTreeMapChart from '../KvTreeMapChart.vue';
+
+const genderValues = [{ label: 'Female', value: 1243, percent: 0.6467221644120708 }, { label: 'Male', value: 676, percent: 0.3517169614984391 }, { label: 'Unspecified', value: 2, percent: 0.001040582726326743 }, { label: 'Nonbinary', value: 1, percent: 0.0005202913631633715 }];
+const sectorValues = [{ label: 'Food', value: 575, percent: 0.2991675338189386 }, { label: 'Retail', value: 377, percent: 0.19614984391259105 }, { label: 'Agriculture', value: 285, percent: 0.14828303850156088 }, { label: 'Services', value: 211, percent: 0.10978147762747138 }, { label: 'Clothing', value: 183, percent: 0.09521331945889698 }, { label: 'Arts', value: 65, percent: 0.033818938605619145 }, { label: 'Housing', value: 65, percent: 0.033818938605619145 }, { label: 'Education', value: 36, percent: 0.018730489073881373 }, { label: 'Construction', value: 28, percent: 0.014568158168574402 }, { label: 'Health', value: 27, percent: 0.01404786680541103 }, { label: 'Transportation', value: 23, percent: 0.011966701352757543 }, { label: 'Personal Use', value: 19, percent: 0.009885535900104058 }, { label: 'Manufacturing', value: 13, percent: 0.006763787721123829 }, { label: 'Entertainment', value: 10, percent: 0.005202913631633715 }, { label: 'Wholesale', value: 5, percent: 0.0026014568158168575 }];
+
+export default {
+	title: 'Charts/KvTreeMapChart',
+	component: KvTreeMapChart,
+	args: {
+		loading: false,
+		values: genderValues,
+	},
+};
+
+const Template = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvTreeMapChart,
+	},
+	template: `
+		<div>
+			<kv-tree-map-chart
+                :values="values"
+                :loading="loading"
+            />
+		</div>`,
+});
+
+export const Default = Template.bind({});
+
+export const Loading = Template.bind({});
+Loading.args = {
+	loading: true,
+	values: [],
+};
+
+export const ManyValues = Template.bind({});
+ManyValues.args = {
+	values: sectorValues,
+};

package/dist/components/stories/KvUserAvatar.stories.js

@@ -0,0 +1,47 @@
+import KvUserAvatar from '../KvUserAvatar.vue';
+
+export default {
+	title: 'KvUserAvatar',
+	component: KvUserAvatar,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvUserAvatar },
+		setup() { return { args: templateArgs }; },
+		template: `
+			<KvUserAvatar v-bind="args" />
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({
+	lenderImageUrl: 'https://www.development.kiva.org/img/s100/26e15431f51b540f31cd9f011cc54f31.jpg',
+	lenderName: 'Roger',
+});
+
+export const NoImage = story({
+	lenderImageUrl: '',
+	lenderName: 'Roger',
+});
+
+export const Anonymous = story({
+	lenderImageUrl: 'https://www.development.kiva.org/img/s100/26e15431f51b540f31cd9f011cc54f31.jpg',
+	lenderName: 'Anonymous',
+});
+
+export const DefaultProfile = story({
+	lenderImageUrl: 'https://www.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
+	lenderName: 'Default Profile',
+});
+
+export const IsSmall = story({
+	lenderImageUrl: 'https://www.development.kiva.org/img/s100/26e15431f51b540f31cd9f011cc54f31.jpg',
+	lenderName: 'Roger',
+	isSmall: true,
+});
+
+export const Fallback = story();

package/dist/components/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>
+	`,
+});

package/dist/components/stories/KvVotingCard.stories.js

@@ -0,0 +1,33 @@
+import KvVotingCard from '../KvVotingCard.vue';
+
+export default {
+	title: 'KvVotingCard',
+	component: KvVotingCard,
+};
+
+const Template = (args) => ({
+	components: { KvVotingCard },
+	setup() {
+		return { args };
+	},
+	template: `
+    <kv-voting-card v-bind="args">
+      <template #image>
+		<img
+			class="tw-rounded"
+			src="https://www-kiva-org.freetls.fastly.net/img/w600h450/9673d0722a7675b9b8d11f90849d9b44.jpg"
+			alt="Default image"
+		/>
+      </template>
+    </kv-voting-card>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	borrowerName: 'Jacqueline',
+	category: 'Helping households mitigate or adapt to climate change',
+	percentage: 45,
+	showVoteButton: true,
+	showInfoIcon: true,
+};