@kiva/kv-components 3.74.0 → 3.75.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.75.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.74.1...@kiva/kv-components@3.75.0) (2024-04-26)
+
+
+### Features
+
+* clickable tags added to classic loan card ([#393](https://github.com/kiva/kv-ui-elements/issues/393)) ([3677c91](https://github.com/kiva/kv-ui-elements/commit/3677c915855d68b125f71a0660d4fbb4628b8133))
+
+
+
+
+
+## [3.74.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.74.0...@kiva/kv-components@3.74.1) (2024-04-25)
+
+**Note:** Version bump only for package @kiva/kv-components
+
+
+
+
+
 # [3.74.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.73.2...@kiva/kv-components@3.74.0) (2024-04-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.74.0",
+  "version": "3.75.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -53,7 +53,7 @@
     "build": "echo No build needed for @kiva/kv-components."
   },
   "dependencies": {
-    "@kiva/kv-tokens": "^2.11.0",
+    "@kiva/kv-tokens": "^2.11.1",
     "@mdi/js": "^5.9.55",
     "@vueuse/integrations": "^7.6.0",
     "aria-hidden": "^1.1.3",
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "db1d9c79b08cf5489aa474fddaa610c365526ab7"
+  "gitHead": "478101c653870979f75a18e4ea2cb355e21c28ac"
 }

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

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 import KvClassicLoanCard from '../../../../vue/KvClassicLoanCard.vue';
 
@@ -198,4 +199,22 @@ describe('KvClassicLoanCard', () => {
 		expect(activityText).toBeDefined();
 		expect(activityBtn).toBeDefined();
 	});
+
+	it('should emit clicked tag data', async () => {
+		const { getByText, emitted } = render(KvClassicLoanCard,
+			{
+				props: {
+					loanId: loan.id,
+					loan,
+					kvTrackFunction,
+					photoPath,
+					enableClickableTags: true,
+				},
+			});
+		const tagSpan = getByText('Dairy');
+
+		await userEvent.click(tagSpan);
+
+		expect(emitted()['jump-filter-page']).toEqual([[{ id: 61, label: 'Dairy', type: 'activity' }]]);
+	});
 });

package/utils/loanCard.js

@@ -11,6 +11,8 @@ const SUSTAINABLE_AG_KEY = 'SUSTAINABLE AG';
 const SINGLE_PARENT_KEY = 'SINGLE PARENT';
 const REFUGEE_KEY = 'REFUGEES/DISPLACED';
 
+const findCalloutData = (tags, tagName) => tags?.find((t) => t.name.toUpperCase() === tagName.toUpperCase()) ?? {};
+
 export function loanCardComputedProperties(props) {
 	const {
 		externalLinks,
@@ -64,8 +66,11 @@ export function loanCardComputedProperties(props) {
 
 	const loanCallouts = computed(() => {
 		const callouts = [];
+
 		const activityName = loan.value?.activity?.name ?? '';
+		const activityId = loan.value?.activity?.id ?? null;
 		const sectorName = loan.value?.sector?.name ?? '';
+		const sectorId = loan.value?.sector?.id ?? null;
 		const tags = loan.value?.tags?.filter((loantag) => loantag.charAt(0) === '#')
 			.map((loantag) => loantag.substring(1)) ?? [];
 		const themes = loan.value?.themes ?? [];
@@ -78,47 +83,54 @@ export function loanCardComputedProperties(props) {
 
 		const isLseLoan = loan.value?.partnerName?.toUpperCase().includes(LSE_LOAN_KEY);
 
+		const tagsData = loan.value?.tagsData ?? [];
+		const themesData = loan.value?.themesData ?? [];
+
 		// 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 p1Tag = tags[position];
-			callouts.push(p1Tag);
+			const tagData = findCalloutData(tagsData, p1Tag);
+			const id = tagData?.id ?? null;
+			callouts.push({ label: p1Tag, type: 'tag', id });
 		}
 
 		if (!categoryPageName.value) {
 			if (categories.ecoFriendly
 				// eslint-disable-next-line max-len
-				&& !callouts.find((c) => c.toUpperCase() === ECO_FRIENDLY_KEY || c.toUpperCase() === SUSTAINABLE_AG_KEY)) {
-				callouts.push('Eco-friendly');
+				&& !callouts.find((c) => c.label.toUpperCase() === ECO_FRIENDLY_KEY || c.label.toUpperCase() === SUSTAINABLE_AG_KEY)) {
+				callouts.push({ label: 'Eco-friendly' });
 			} else if (categories.refugeesIdps) {
-				callouts.push('Refugees and IDPs');
+				callouts.push({ label: 'Refugees and IDPs' });
 			} else if (categories.singleParents
-				&& !callouts.find((c) => c.toUpperCase() === SINGLE_PARENT_KEY)) {
-				callouts.push('Single Parent');
+				&& !callouts.find((c) => c.label.toUpperCase() === SINGLE_PARENT_KEY)) {
+				callouts.push({ label: 'Single Parent' });
 			}
 		}
 
 		// P2 Activity
-		if (activityName && categoryPageName.value?.toUpperCase() !== activityName.toUpperCase()) {
-			callouts.push(activityName);
+		if (activityName && activityId && categoryPageName.value?.toUpperCase() !== activityName.toUpperCase()) {
+			callouts.push({ id: activityId, label: activityName, type: 'activity' });
 		}
 
 		// P3 Sector
-		if (sectorName
+		if (sectorName && sectorId
 			&& (activityName.toUpperCase() !== sectorName.toUpperCase())
 			&& (sectorName.toUpperCase() !== categoryPageName.value?.toUpperCase())
 			&& callouts.length < 2) {
-			callouts.push(sectorName);
+			callouts.push({ id: sectorId, label: sectorName, type: 'sector' });
 		}
 
 		// P4 Tag
 		if (!!tags.length && callouts.length < 2) {
 			const position = Math.floor(Math.random() * tags.length);
 			const p4Tag = tags[position];
-			if (!callouts.filter((c) => c.toUpperCase() === p4Tag.toUpperCase()).length) {
-				callouts.push(p4Tag);
+			const tagData = findCalloutData(tagsData, p4Tag);
+			const id = tagData?.id ?? null;
+			if (!callouts.filter((c) => c.label.toUpperCase() === p4Tag.toUpperCase()).length) {
+				callouts.push({ label: p4Tag, type: 'tag', id });
 			}
 		}
 
@@ -126,9 +138,11 @@ export function loanCardComputedProperties(props) {
 		if (!!themes.length && callouts.length < 2) {
 			const position = Math.floor(Math.random() * themes.length);
 			const theme = themes[position];
-			if (!callouts.filter((c) => c.toUpperCase() === theme.toUpperCase()).length
+			const themeData = findCalloutData(themesData, theme);
+			const id = themeData?.id ?? null;
+			if (!callouts.filter((c) => c.label.toUpperCase() === theme.toUpperCase()).length
 				&& theme.toUpperCase() !== categoryPageName.value?.toUpperCase()) {
-				callouts.push(theme);
+				callouts.push({ label: theme, type: 'theme', id });
 			}
 		}
 
@@ -136,7 +150,8 @@ export function loanCardComputedProperties(props) {
 		if (isLseLoan && callouts.length > 1) return [callouts.shift()];
 
 		// Add all custom callouts if available
-		callouts.push(...customCallouts?.value);
+		const customTags = customCallouts.value?.map((c) => ({ label: c })) ?? [];
+		callouts.push(...customTags);
 		return callouts;
 	});
 

package/vue/KvClassicLoanCard.vue

@@ -152,8 +152,10 @@
 			<kv-loan-callouts
 				v-else
 				:callouts="loanCallouts"
+				:enable-clickable="enableClickableTags"
 				class="tw-mt-1.5"
 				:class="{ 'tw-px-1': largeCard }"
+				@click="$emit('jump-filter-page', $event)"
 			/>
 		</div>
 
@@ -391,6 +393,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		enableClickableTags: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
 		const {

package/vue/KvLoanCallouts.vue

@@ -13,8 +13,8 @@
 		>
 			<span
 				v-for="tag in callouts"
-				:key="tag"
-				:title="tag"
+				:key="tag.label"
+				:title="tag.label"
 				class="
 					loan-callout
 					tw-text-ellipsis
@@ -27,14 +27,18 @@
 					tw-mb-0.5
 					tw-text-small
 				"
+				:class="{ 'tw-cursor-pointer hover:tw-underline': isClickable(tag) }"
+				@click="clickCallout(tag)"
 			>
-				{{ tag }}
+				{{ tag.label }}
 			</span>
 		</div>
 	</div>
 </template>
 
 <script>
+import { toRefs } from 'vue-demi';
+
 export default {
 	name: 'KvLoanCallouts',
 	props: {
@@ -42,6 +46,36 @@ export default {
 			type: Array,
 			required: true,
 		},
+		enableClickable: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: [
+		'click',
+	],
+	setup(props, { emit }) {
+		const {
+			enableClickable,
+		} = toRefs(props);
+
+		const isClickable = (tag) => {
+			const clickableTypes = ['activity', 'sector', 'tag', 'theme'];
+			const isClickableType = clickableTypes.includes(tag.type);
+
+			return enableClickable.value && isClickableType && !!tag.id;
+		};
+
+		const clickCallout = (tag) => {
+			if (isClickable(tag)) {
+				emit('click', tag);
+			}
+		};
+
+		return {
+			isClickable,
+			clickCallout,
+		};
 	},
 };
 </script>

package/vue/stories/KvClassicLoanCard.stories.js

@@ -32,6 +32,7 @@ const story = (args) => {
 					:is-team-pick="isTeamPick"
 					:combined-activities="combinedActivities"
 					:enable-huge-amount="enableHugeAmount"
+					:enable-clickable-tags="enableClickableTags"
 				/>
 			</div>
 		`,
@@ -388,3 +389,11 @@ export const HugeLentAmount = story({
 	isVisitor: false,
 	enableHugeAmount: true,
 });
+
+export const ClickableTags = story({
+	loanId: loan.id,
+	loan,
+	kvTrackFunction,
+	photoPath,
+	enableClickableTags: true,
+});

package/vue/stories/KvLoanCallouts.stories.js

@@ -12,6 +12,7 @@ const story = (args) => {
 		template: `
 			<kv-loan-callouts
 				:callouts="callouts"
+				:enableClickable="enableClickable"
 			/>
 		`,
 	});
@@ -19,4 +20,15 @@ const story = (args) => {
 	return template;
 };
 
-export const Default = story({ callouts: ['callout 1', 'callout 2', 'callout 3'] });
+export const Default = story({ callouts: [{ label: 'callout 1' }, { label: 'callout 2' }, { label: 'callout 3' }] });
+
+export const Clickable = story({
+	callouts: [
+		{ id: 1, label: 'callout 1', type: 'activity' },
+		{ label: 'callout 2' },
+		{ id: 33, label: 'callout 3', type: 'sector' },
+		{ id: null, label: 'callout 4', type: 'tag' },
+		{ id: 12, label: 'callout 5', type: 'theme' },
+	],
+	enableClickable: true,
+});