@kiva/kv-components 3.107.0 → 3.107.1

package/dist/components/stories/KvLoanUse.stories.js

@@ -0,0 +1,60 @@
+import KvLoanUse from '../KvLoanUse.vue';
+
+export default {
+	title: 'KvLoanUse',
+	component: KvLoanUse,
+};
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvLoanUse },
+		template: `
+			<kv-loan-use
+				:anonymization-level="anonymizationLevel"
+				:use="use"
+				:loan-amount="loanAmount"
+				:status="status"
+				:borrower-count="borrowerCount"
+				:name="name"
+				:distribution-model="distributionModel"
+				:why-special="whySpecial"
+			/>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Anonymous = story({ anonymizationLevel: 'full' });
+
+export const Partner = story({
+	use: 'buy supplies.',
+	loanAmount: '1000.00',
+	status: 'fundraising',
+	name: 'Bob Smith',
+	distributionModel: 'partner',
+});
+
+export const Direct = story({
+	use: 'buy supplies.',
+	loanAmount: '1000.00',
+	status: 'fundraising',
+	name: 'Bob Smith',
+});
+
+export const Group = story({
+	use: 'buy supplies.',
+	loanAmount: '1000.00',
+	status: 'fundraising',
+	name: 'Farm Organization',
+	borrowerCount: 2,
+});
+
+export const WhySpecial = story({
+	use: 'buy supplies.',
+	loanAmount: '1000.00',
+	status: 'fundraising',
+	name: 'Bob Smith',
+	whySpecial: 'It supports organic farming and includes a lower interest rate.',
+});

package/dist/components/stories/KvMap.stories.js

@@ -0,0 +1,121 @@
+import mockLenderCountries from '../../tests/fixtures/mockLenderCountries';
+import KvMap from '../KvMap.vue';
+
+export default {
+	title: 'KvMap',
+	component: KvMap,
+	args: {
+		autoZoomDelay: 1000,
+		height: null,
+		initialZoom: null,
+		lat: 37.700091,
+		long: -123.013243,
+		mapId: 0,
+		useLeaflet: false,
+		width: null,
+		zoomLevel: 4,
+		advancedAnimation: {},
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvMap },
+	template: `<kv-map
+		class="tw-rounded tw-overflow-hidden"
+		:auto-zoom-delay="autoZoomDelay"
+		:height="height"
+		:lat="lat"
+		:long="long"
+		:initial-zoom="initialZoom"
+		:map-id="mapId"
+		:use-leaflet="useLeaflet"
+		:width="width"
+		:zoom-level="zoomLevel"
+		:advanced-animation="advancedAnimation"
+		:show-zoom-control="showZoomControl"
+		:allow-dragging="allowDragging"
+		:show-labels="showLabels"
+		:countries-data="countriesData"
+		:show-fundraising-loans="showFundraisingLoans"
+	/>`,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	initialZoom: null,
+	mapId: 1,
+	zoomLevel: 14,
+};
+
+export const AutoZoom = Template.bind({});
+AutoZoom.args = {
+	initialZoom: 1,
+	lat: -0.023559,
+	long: 37.906193,
+	mapId: 2,
+	zoomLevel: 4,
+};
+
+export const FixedDimensions = Template.bind({});
+FixedDimensions.args = {
+	initialZoom: null,
+	height: 250,
+	mapId: 3,
+	width: 250,
+	zoomLevel: 14,
+};
+
+export const Leaflet = Template.bind({});
+Leaflet.args = {
+	initialZoom: null,
+	lat: -0.023559,
+	long: 37.906193,
+	mapId: 4,
+	useLeaflet: true,
+	zoomLevel: 6,
+};
+
+export const AdvancedAnimation = Template.bind({});
+const advancedAnimation = {
+	borrowerPoints: [
+		{
+			image: 'https://www-kiva-org.freetls.fastly.net/img/w80h80fz50/e60a3d61ff052d60991c5d6bbf4a45d3.jpg',
+			location: [-77.032, 38.913],
+		},
+		{
+			image: 'https://www-kiva-org.freetls.fastly.net/img/w80h80fz50/6101929097c6e5de48232a4d1ae3b71c.jpg',
+			location: [41.402, 7.160],
+		},
+		{
+			image: 'https://www-kiva-org.freetls.fastly.net/img/w80h80fz50/11e018ee3d8b9c5adee459c16a29d264.jpg',
+			location: [-73.356596, 3.501],
+		},
+	],
+};
+AdvancedAnimation.args = {
+	initialZoom: null,
+	mapId: 5,
+	useLeaflet: false,
+	zoomLevel: 2,
+	height: 600,
+	width: 1000,
+	lat: 21.096,
+	long: -31.690,
+	advancedAnimation,
+};
+
+export const LoansMap = Template.bind({});
+LoansMap.args = {
+	autoZoomDelay: 500,
+	aspectRatio: 1.8,
+	lat: 30,
+	long: 1,
+	zoomLevel: 2,
+	useLeaflet: true,
+	showZoomControl: true,
+	allowDragging: true,
+	showLabels: false,
+	countriesData: mockLenderCountries,
+	showFundraisingLoans: true,
+};

package/dist/components/stories/KvMaterialIcon.stories.js

@@ -0,0 +1,201 @@
+import {
+	mdiAlertCircleOutline,
+	mdiArrowDown,
+	mdiArrowBottomLeft,
+	mdiArrowLeft,
+	mdiArrowTopLeft,
+	mdiArrowUp,
+	mdiArrowTopRight,
+	mdiArrowRight,
+	mdiArrowBottomRight,
+	mdiCart,
+	mdiCheck,
+	mdiChevronLeft,
+	mdiChevronRight,
+	mdiChevronDown,
+	mdiChevronUp,
+	mdiClose,
+	mdiMagnify,
+	mdiStar,
+	mdiStarOutline,
+} from '@mdi/js';
+
+import KvMaterialIcon from '../KvMaterialIcon.vue';
+
+export default {
+	title: 'KvMaterialIcon',
+	component: KvMaterialIcon,
+	argTypes: {
+		icon: {
+			control: {
+				disable: true,
+			},
+		},
+	},
+};
+
+const DefaultTemplate = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvMaterialIcon },
+	template: `
+		<kv-material-icon
+			:icon="icon"
+		/>`,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+	icon: mdiCart,
+};
+
+export const Common = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvMaterialIcon },
+	template: `
+		<div class="tw-flex tw-gap-1">
+			<kv-material-icon
+				v-for="(icon, i) in [
+					mdiAlertCircleOutline,
+					mdiArrowDown,
+					mdiArrowBottomLeft,
+					mdiArrowLeft,
+					mdiArrowTopLeft,
+					mdiArrowUp,
+					mdiArrowTopRight,
+					mdiArrowRight,
+					mdiArrowBottomRight,
+					mdiChevronLeft,
+					mdiChevronRight,
+					mdiChevronDown,
+					mdiChevronUp,
+					mdiClose,
+					mdiMagnify,
+				]"
+				:key="i"
+				:icon="icon"
+			/>
+		</div>
+	`,
+	data() {
+		return {
+			mdiAlertCircleOutline,
+			mdiArrowDown,
+			mdiArrowBottomLeft,
+			mdiArrowLeft,
+			mdiArrowTopLeft,
+			mdiArrowUp,
+			mdiArrowTopRight,
+			mdiArrowRight,
+			mdiArrowBottomRight,
+			mdiChevronLeft,
+			mdiChevronRight,
+			mdiChevronDown,
+			mdiChevronUp,
+			mdiClose,
+			mdiMagnify,
+		};
+	},
+});
+
+export const Colored = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvMaterialIcon },
+	template: `
+		<div>
+			<p class="tw-mb-2">Use text-color to set the icon color</p>
+			<kv-material-icon
+				:icon="mdiCheck"
+				class="tw-text-action"
+			/>
+			<kv-material-icon
+				:icon="mdiAlertCircleOutline"
+				class="tw-text-danger"
+			/>
+		</div>`,
+	data() {
+		return {
+			mdiAlertCircleOutline,
+			mdiCheck,
+		};
+	},
+});
+
+export const InlineWithText = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvMaterialIcon },
+	template: `
+		<a href="#" class="tw-inline-flex">
+			<span class="tw-text-h4">He went thataway</span>
+			<kv-material-icon class="tw-w-2.5" :icon="mdiChevronRight" />
+		</a>`,
+	data() {
+		return {
+			mdiChevronRight,
+		};
+	},
+});
+
+export const Sizing = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvMaterialIcon },
+	template: `
+		<div>
+			<p class="tw-mb-2">Icons can be sized using any of the standard sizing classes (.tw-w-2, .tw-w-3, .tw-w-full, etc.). By default they are 24 x 24 (.tw-w-3).</p>
+			<kv-material-icon class="tw-bg-secondary tw-w-2" :icon="mdiChevronRight" />
+			<kv-material-icon class="tw-bg-secondary tw-w-4" :icon="mdiChevronRight" />
+			<kv-material-icon class="tw-bg-secondary tw-w-8" :icon="mdiChevronRight" />
+			<kv-material-icon class="tw-bg-secondary tw-w-16" :icon="mdiChevronRight" />
+		</div>`,
+	data() {
+		return {
+			mdiChevronRight,
+		};
+	},
+});
+
+export const WithAccessibleText = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvMaterialIcon },
+	template: `
+		<div>
+			<p class="tw-mb-2">If you don't include text and your icon is not decorative, be sure to include screen-reader text</p>
+			<button class="tw-rounded-sm tw-bg-secondary hover:tw-bg-tertiary tw-p-1 tw-inline-flex">
+				<kv-material-icon class="tw-w-3" :icon="mdiClose" />
+				<span class="tw-sr-only">Close modal</span>
+			</button>
+		</div>`,
+	data() {
+		return {
+			mdiClose,
+		};
+	},
+});
+
+export const StarsDemo = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvMaterialIcon },
+	template: `
+		<div class="tw-flex">
+			<button
+				v-for="i in 5"
+				:key="i"
+				@click="rating = i"
+				class="hover:tw-text-action-highlight"
+			>
+				<kv-material-icon :icon="getStarIcon(i)"/>
+				<span class="tw-sr-only">Set rating to {{i}}</span>
+			</button>
+		</div>`,
+	data() {
+		return {
+			rating: 2,
+			mdiStar,
+			mdiStarOutline,
+		};
+	},
+	methods: {
+		getStarIcon(index) {
+			return this.rating >= index ? this.mdiStar : this.mdiStarOutline;
+		},
+	},
+});

package/dist/components/stories/KvPageContainer.stories.js

@@ -0,0 +1,50 @@
+import KvPageContainer from '../KvPageContainer.vue';
+
+export default {
+	title: 'Layout/KvPageContainer',
+	component: KvPageContainer,
+	parameters: {
+		layout: 'fullscreen',
+	},
+};
+
+const DefaultTemplate = () => ({
+	components: { KvPageContainer },
+	template: `
+		<div class="demo">
+			<component is="style">
+				.demo * { outline: 1px solid red !important; }
+			</component>
+
+			<kv-page-container>
+				<p>I'm constrained!</p>
+			</kv-page-container>
+		</div>`,
+});
+
+const BreakingOutTemplate = () => ({
+	components: { KvPageContainer },
+	template: `
+		<div class="demo">
+			<component is="style">
+				.demo * { outline: 1px solid red !important; }
+			</component>
+
+			<div>
+				<kv-page-container>
+					<p>I'm constrained!</p>
+				</kv-page-container>
+
+				<img
+					class="tw-w-full"
+					src="https://via.placeholder.com/2000x400">
+
+				<kv-page-container>
+					<p>I'm constrained!</p>
+				</kv-page-container>
+			</div>
+		</div>`,
+});
+
+export const Default = DefaultTemplate.bind({});
+export const BreakingOut = BreakingOutTemplate.bind({});

package/dist/components/stories/KvPagination.stories.js

@@ -0,0 +1,70 @@
+import KvPagination from '../KvPagination.vue';
+
+export default {
+	title: 'KvPagination',
+	component: KvPagination,
+};
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvPagination },
+		template: `<kv-pagination
+			:limit="limit"
+			:total="total"
+			:offset="offset"
+			:extra-pages="extraPages"
+			:kv-track-function="kvTrackMock"
+			:track-event-category="trackEventCategory"
+			/>`,
+		methods: {
+			kvTrackMock(
+				category,
+				action,
+				label,
+				property,
+				value,
+			) {
+				console.log(category, action, label, property, value);
+			},
+		},
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({ limit: 10, total: 0, trackEventCategory: 'blog-articles' });
+
+export const FewerPages = story({ limit: 10, total: 30, trackEventCategory: 'blog-articles' });
+
+export const MorePages = story({ limit: 10, total: 1000, trackEventCategory: 'blog-articles' });
+
+export const SecondSelected = story({
+	limit: 10, total: 1000, offset: 10, trackEventCategory: 'blog-articles',
+});
+
+export const ThirdSelected = story({
+	limit: 10, total: 1000, offset: 20, trackEventCategory: 'blog-articles',
+});
+
+export const FourthSelected = story({
+	limit: 10, total: 1000, offset: 30, trackEventCategory: 'blog-articles',
+});
+
+export const LastSelected = story({
+	limit: 10, total: 1000, offset: 990, trackEventCategory: 'blog-articles',
+});
+
+export const SecondToLastSelected = story({
+	limit: 10, total: 1000, offset: 980, trackEventCategory: 'blog-articles',
+});
+
+export const ThirdToLastSelected = story({
+	limit: 10, total: 1000, offset: 970, trackEventCategory: 'blog-articles',
+});
+
+export const FourthToLastSelected = story({
+	limit: 10, total: 1000, offset: 960, trackEventCategory: 'blog-articles',
+});
+
+export const MoreExtraPages = story({ limit: 10, total: 1000, extraPages: 6 });

package/dist/components/stories/KvPieChart.stories.js

@@ -0,0 +1,47 @@
+import KvPieChart from '../KvPieChart.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/KvPieChart',
+	component: KvPieChart,
+	args: {
+		loading: false,
+		values: genderValues,
+	},
+};
+
+const Template = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvPieChart,
+	},
+	template: `
+		<div>
+			<kv-pie-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,
+};
+
+export const OneValue = Template.bind({});
+OneValue.args = {
+	values: [{ label: 'Female', value: 1, percent: 1 }],
+};

package/dist/components/stories/KvProgressBar.stories.js

@@ -0,0 +1,53 @@
+import KvProgressBar from '../KvProgressBar.vue';
+
+export default {
+	title: 'KvProgressBar',
+	component: KvProgressBar,
+	args: {
+		min: 0,
+		max: 100,
+		value: 50,
+		ariaLabel: 'Amount the loan has fundraised',
+		variant: 'primary',
+		bgVariant: 'secondary',
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvProgressBar },
+	template: `
+		<kv-progress-bar
+			:aria-label="ariaLabel"
+			:min="min"
+			:max="max"
+			:value="value"
+			:variant="variant"
+			:bg-variant="bgVariant"
+
+		></kv-progress-bar>`,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+// Variants
+export const VariantCaution = Template.bind({});
+VariantCaution.args = {
+	variant: 'caution',
+};
+
+export const VariantDanger = Template.bind({});
+VariantDanger.args = {
+	variant: 'danger',
+};
+
+export const VariantGhost = Template.bind({});
+VariantGhost.args = {
+	variant: 'ghost',
+};
+
+export const BgVariantTertiary = Template.bind({});
+BgVariantTertiary.args = {
+	bgVariant: 'tertiary',
+};