@kiva/kv-components 3.42.0 → 3.44.0

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.44.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.43.0...@kiva/kv-components@3.44.0) (2023-09-19)
+
+
+### Features
+
+* increase impact visibility for lse loans ([#298](https://github.com/kiva/kv-ui-elements/issues/298)) ([f9dc1e4](https://github.com/kiva/kv-ui-elements/commit/f9dc1e47f25a68f8e3bd745abfc2338b376bd848))
+
+
+
+
+
+# [3.43.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.42.0...@kiva/kv-components@3.43.0) (2023-09-15)
+
+
+### Features
+
+* added label support ([c016a68](https://github.com/kiva/kv-ui-elements/commit/c016a683ae38ca5af66fa86576d88abd0066d719))
+* line graph can now just take values and normalization happens in component ([3f706be](https://github.com/kiva/kv-ui-elements/commit/3f706be31b288b64e4a566746bd7d0530ce25650))
+* ported over Shua's line graph using clip path and made slight CSS tweaks to match mocks ([56ac312](https://github.com/kiva/kv-ui-elements/commit/56ac312924eecdf56e2d9d99082643e6d42f7765))
+* simple unit tests and small fixes related to tests ([43700fa](https://github.com/kiva/kv-ui-elements/commit/43700faf6c1f0c76432107c3a658539bd3bf6c7b))
+
+
+
+
+
 # [3.42.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.41.0...@kiva/kv-components@3.42.0) (2023-09-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.42.0",
+  "version": "3.44.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "5ce65863bbb21ba1ace0ac77c2afd89318410365"
+  "gitHead": "de7cefc4bfbacb12fbabf0c4b201319acaba37d3"
 }

package/tests/unit/specs/components/KvLineGraph.spec.js

@@ -0,0 +1,58 @@
+import { render } from '@testing-library/vue';
+import { axe } from 'jest-axe';
+import KvLineGraph from '../../../../vue/KvLineGraph.vue';
+
+describe('KvLineGraph', () => {
+	const points = [
+		{ value: 10 },
+		{ value: 20 },
+		{ value: 50 },
+		{ value: 60 },
+		{ value: 80 },
+	];
+
+	const pointsWithLabels = [
+		{ value: 10, label: '2014' },
+		{ value: 20, label: '2015' },
+		{ value: 50, label: '2016' },
+		{ value: 60, label: '2017' },
+		{ value: 80, label: '2018' },
+	];
+
+	it('should render chart with points', () => {
+		const { container } = render(KvLineGraph, { props: { points } });
+		const pointElements = container.querySelectorAll('span');
+
+		expect(pointElements.length).toBe(points.length);
+	});
+
+	it('should render chart with value labels', () => {
+		const { container } = render(KvLineGraph, { props: { points: pointsWithLabels } });
+		const pointElements = container.querySelectorAll('span');
+
+		expect(pointElements.length).toBe(points.length * 2);
+	});
+
+	it('should render chart with x-axis label', () => {
+		const { container } = render(KvLineGraph, { props: { points, axisLabel: 'People supported over time' } });
+		const label = container.querySelectorAll('h4');
+
+		expect(label.length).toBe(1);
+	});
+
+	it('should render chart with value labels and x-axis label', () => {
+		const { container } = render(KvLineGraph, { props: { points: pointsWithLabels, axisLabel: 'People supported over time' } });
+		const pointElements = container.querySelectorAll('span');
+		const label = container.querySelectorAll('h4');
+
+		expect(pointElements.length).toBe(points.length * 2);
+		expect(label.length).toBe(1);
+	});
+
+	it('should have no automated accessibility violations', async () => {
+		const { container } = render(KvLineGraph, { props: { points } });
+		const results = await axe(container);
+
+		expect(results).toHaveNoViolations();
+	});
+});

package/vue/KvClassicLoanCard.vue

@@ -231,6 +231,8 @@ import KvLoanTag from './KvLoanTag.vue';
 import KvMaterialIcon from './KvMaterialIcon.vue';
 import KvLoadingPlaceholder from './KvLoadingPlaceholder.vue';
 
+const LSE_LOAN_KEY = 'N/A';
+
 export default {
 	name: 'KvClassicLoanCard',
 	components: {
@@ -438,14 +440,25 @@ export default {
 				singleParents: !!tags.filter((t) => t.toUpperCase() === 'SINGLE PARENT').length,
 			};
 
+			const isLseLoan = this.loan?.partnerName?.toUpperCase().includes(LSE_LOAN_KEY);
+
 			// P1 Category
 			// Exp limited to: Eco-friendly, Refugees and IDPs, Single Parents
+			// Tag as first option for LSE loans
+			if (isLseLoan && tags.length) {
+				const position = Math.floor(Math.random() * tags.length);
+				const tag = tags[position];
+				callouts.push(tag);
+			}
+
 			if (!this.categoryPageName) {
-				if (categories.ecoFriendly) {
+				if (categories.ecoFriendly
+					&& !callouts.filter((c) => c.toUpperCase() === categories.ecoFriendly.toUpperCase()).length) {
 					callouts.push('Eco-friendly');
 				} else if (categories.refugeesIdps) {
 					callouts.push('Refugees and IDPs');
-				} else if (categories.singleParents) {
+				} else if (categories.singleParents
+					&& !callouts.filter((c) => c.toUpperCase() === categories.singleParents.toUpperCase()).length) {
 					callouts.push('Single Parent');
 				}
 			}
@@ -482,6 +495,8 @@ export default {
 				}
 			}
 
+			// Only show one callout for LSE loans
+			if (isLseLoan && callouts.length > 1) return [callouts.shift()];
 			return callouts;
 		},
 	},

package/vue/KvLineGraph.vue

@@ -0,0 +1,128 @@
+<template>
+	<div class="tw-h-full tw-w-full tw-p-2.5">
+		<figure
+			class="tw-w-full tw-relative"
+			:style="{ height: graphHeight }"
+		>
+			<div
+				class="tw-w-full tw-h-full tw-bg-marigold-2 tw-opacity-low"
+				:style="{ clipPath: `polygon(${shade}, 100% 100%, 0% 100%)` }"
+			></div>
+			<div
+				class="tw-absolute tw-top-0 tw-w-full tw-h-full tw-bg-marigold-2"
+				:style="{ clipPath: `polygon(${line})` }"
+			></div>
+			<span
+				v-for="point in normalizedPoints"
+				:key="point.x"
+				class="
+					tw-absolute
+					tw-w-2
+					tw-h-2
+					tw-border
+					tw-border-white
+					tw-bg-marigold-2
+					tw-rounded-full
+				"
+				:style="{ left: `${point.x}%`, top: `${point.y}%`, transform: 'translate(-50%, -50%)' }"
+			></span>
+			<template v-for="point in normalizedPoints">
+				<span
+					v-if="point.label"
+					:key="point.label"
+					class="tw-absolute"
+					:style="{ left: `${point.x}%`, bottom: '-3rem', transform: 'translate(-50%, -50%)' }"
+				>
+					{{ point.label }}
+				</span>
+			</template>
+		</figure>
+		<h4
+			v-if="axisLabel"
+			class="tw-text-center"
+			:class="{ 'tw-pt-1': !hasValueLabels, 'tw-pt-6': hasValueLabels }"
+		>
+			{{ axisLabel }}
+		</h4>
+	</div>
+</template>
+
+<script>
+import { computed, toRefs } from 'vue-demi';
+
+export default {
+	props: {
+		/**
+		 * Array of objects like [{ value: 10, label: '2014' }, { value: 20, label: '2015' }]
+		 */
+		points: {
+			type: Array,
+			required: true,
+		},
+		/**
+		 * The optional label to show below the graph on the x-axis
+		 */
+		axisLabel: {
+			type: String,
+			default: '',
+		},
+	},
+	setup(props) {
+		const { points, axisLabel } = toRefs(props);
+
+		// Get step to use on x-axis
+		const xIncrement = Math.round(100 / (points.value.length - 1));
+
+		// Find the largest value to be used as the scale of the graph
+		const largestY = computed(() => {
+			return points.value.reduce((prev, current) => {
+				return prev > current.value ? prev : current.value;
+			}, 0);
+		});
+
+		// Find the largest value to be used as the scale of the graph
+		const hasValueLabels = computed(() => {
+			return points.value.reduce((prev, current) => {
+				return prev || !!current.label;
+			}, false);
+		});
+
+		// Convert single values to points using increment and largest value
+		const normalizedPoints = computed(() => {
+			return points.value.reduce((prev, next, i) => {
+				prev.push({
+					x: i * xIncrement,
+					y: 100 - ((next.value / largestY.value) * 100),
+					label: next.label,
+				});
+
+				return prev;
+			}, []);
+		});
+
+		// Used for drawing the shading under the line
+		const shade = computed(() => (normalizedPoints.value.map(({ x, y }) => `${x}% ${y}%`).join(',')));
+
+		// Used for drawing the line
+		const line = computed(() => {
+			const topLine = normalizedPoints.value.map(({ x, y }) => `${x}% ${y + 0.3}%`).join(',');
+			const bottomLine = [...normalizedPoints.value].reverse().map(({ x, y }) => `${x}% ${y - 0.3}%`).join(',');
+			return `${topLine}, ${bottomLine}`;
+		});
+
+		const graphHeight = computed(() => {
+			const labelSpace = (axisLabel.value ? 2 : 0) + (hasValueLabels.value ? 2 : 0);
+
+			return `calc(100% - ${labelSpace}rem)`;
+		});
+
+		return {
+			hasValueLabels,
+			graphHeight,
+			normalizedPoints,
+			shade,
+			line,
+		};
+	},
+};
+</script>

package/vue/KvLoanTag.vue

@@ -17,6 +17,8 @@ import { differenceInDays, parseISO } from 'date-fns';
 import numeral from 'numeral';
 import KvCountdownTimer from './KvCountdownTimer.vue';
 
+const LSE_LOAN_KEY = 'N/A';
+
 export default {
 	name: 'KvLoanTag',
 	components: {
@@ -55,6 +57,10 @@ export default {
 			return null;
 		},
 		tagText() {
+			const partnerName = this.loan?.partnerName ?? '';
+			if (partnerName.toUpperCase().includes(LSE_LOAN_KEY)) {
+				return 'High community impact';
+			}
 			switch (this.variation) {
 				case 'almost-funded': return 'Almost funded';
 				case 'matched-loan': return `${this.matchRatio + 1}x matching by ${this.loan?.matchingText}`;

package/vue/stories/KvClassicLoanCard.stories.js

@@ -182,6 +182,29 @@ export const LongCallouts = story({
 	photoPath,
 });
 
+export const LseLoan = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		loanFundraisingInfo: {
+			fundedAmount: '950.00',
+			isExpiringSoon: false,
+			reservedAmount: '0.00',
+		},
+		partnerName: 'N/A, direct to Novulis',
+		tags: [
+			'user_favorite',
+			'#Woman-Owned Business',
+			'#Animals',
+			'#Repeat Borrower',
+			'#Supporting Family',
+		],
+	},
+	kvTrackFunction,
+	photoPath,
+	showTags: true,
+});
+
 export const Bookmarked = story({
 	loanId: loan.id,
 	loan,

package/vue/stories/KvLineGraph.stories.js

@@ -0,0 +1,52 @@
+import KvLineGraph from '../KvLineGraph.vue';
+
+export default {
+	title: 'KvLineGraph',
+	component: KvLineGraph,
+};
+
+const Template = (_args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvLineGraph,
+	},
+	template: `
+		<div style="height: 500px; width: 500px;">
+			<kv-line-graph :points="points" :axis-label="axisLabel" />
+		</div>
+	`,
+});
+
+const points = [
+	{ value: 10 },
+	{ value: 20 },
+	{ value: 50 },
+	{ value: 60 },
+	{ value: 80 },
+];
+
+const pointsWithLabels = [
+	{ value: 10, label: '2014' },
+	{ value: 20, label: '2015' },
+	{ value: 50, label: '2016' },
+	{ value: 60, label: '2017' },
+	{ value: 80, label: '2018' },
+];
+
+export const Default = Template.bind();
+Default.args = { points };
+
+export const AxisLabel = Template.bind();
+AxisLabel.args = {
+	points,
+	axisLabel: 'People supported over time',
+};
+
+export const ValueLabels = Template.bind();
+ValueLabels.args = { points: pointsWithLabels };
+
+export const AllLabels = Template.bind();
+AllLabels.args = {
+	points: pointsWithLabels,
+	axisLabel: 'People supported over time',
+};

package/vue/stories/KvLoanTag.stories.js

@@ -53,3 +53,15 @@ export const Matched = story({
 	},
 	kvTrackFunction,
 });
+
+export const LseLoan = story({
+	loan: {
+		matchingText: 'Ebay',
+		matchRatio: 1,
+		plannedExpirationDate: nextWeek.toISOString(),
+		loanAmount: 199,
+		loanFundraisingInfo: { fundedAmount: 0, reservedAmount: 0 },
+		partnerName: 'N/A, direct to Novulis',
+	},
+	kvTrackFunction,
+});