@kiva/kv-components 3.43.0 → 3.44.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.44.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.44.0...@kiva/kv-components@3.44.1) (2023-09-20)
+
+
+### Bug Fixes
+
+* backpedal kvedit button and use existing components instead ([e751910](https://github.com/kiva/kv-ui-elements/commit/e751910f808f7d4b5861995053015bd20b9c6d5e))
+
+
+
+
+
+# [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.43.0",
+  "version": "3.44.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "023c2d950460478d6c3684d3d09906f9d9672f35"
+  "gitHead": "a6e828c2b6a814b53ec26ada42ec6b97e6932660"
 }

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/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/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,
+});

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

@@ -1,71 +0,0 @@
-import { render, fireEvent } from '@testing-library/vue';
-import { axe } from 'jest-axe';
-import { nextTick } from 'vue';
-import addVueRouter from '../../utils/addVueRouter';
-import KvEditButton from '../../../../vue/KvEditButton.vue';
-
-describe('KvEditButton', () => {
-	const renderComponent = (options) => render(KvEditButton, addVueRouter(options));
-
-	it('renders the edit button', () => {
-		const { getByRole } = renderComponent();
-		getByRole('button', { name: /edit/i });
-	});
-
-	it('shows the lightbox when the edit button is clicked', async () => {
-		const { getByRole } = renderComponent();
-		const button = getByRole('button', { name: /edit/i });
-		await fireEvent.click(button);
-		expect(getByRole('dialog')).toBeVisible();
-	});
-
-	it('closes the lightbox when the close event is emitted', async () => {
-		const { getByRole, queryByRole } = renderComponent();
-		const button = getByRole('button', { name: /edit/i });
-		await fireEvent.click(button);
-		await fireEvent.keyUp(document, { key: 'Escape', code: 'Escape' });
-		await nextTick();
-		expect(queryByRole('dialog')).not.toBeInTheDocument();
-	});
-
-	it('renders a custom title for the lightbox if provided', () => {
-		const { getByText } = renderComponent({ props: { title: 'Custom Title' } });
-		getByText('Custom Title');
-	});
-
-	it('has no automated accessibility violations', async () => {
-		const { container } = renderComponent();
-		const results = await axe(container);
-		expect(results).toHaveNoViolations();
-	});
-
-	it('renders content in the default slot of the lightbox', async () => {
-		const customContent = 'Custom Content for Body';
-		const { getByText, getByRole } = renderComponent({
-			slots: { default: customContent },
-		});
-		const button = getByRole('button', { name: /edit/i });
-		await fireEvent.click(button);
-		expect(getByText(customContent)).toBeVisible();
-	});
-
-	it('renders content in the header slot of the lightbox', async () => {
-		const customHeader = 'Custom Header Content';
-		const { getByText, getByRole } = renderComponent({
-			slots: { header: customHeader },
-		});
-		const button = getByRole('button', { name: /edit/i });
-		await fireEvent.click(button);
-		expect(getByText(customHeader)).toBeVisible();
-	});
-
-	it('renders content in the controls slot of the lightbox', async () => {
-		const customControls = 'Custom Controls Content';
-		const { getByText, getByRole } = renderComponent({
-			slots: { controls: customControls },
-		});
-		const button = getByRole('button', { name: /edit/i });
-		await fireEvent.click(button);
-		expect(getByText(customControls)).toBeVisible();
-	});
-});

package/vue/KvEditButton.vue

@@ -1,105 +0,0 @@
-<template>
-	<div>
-		<!-- Edit Button -->
-		<KvButton
-			variant="secondary"
-			aria-label="Edit"
-			class="tw-w-7 tw-h-10"
-			@click="showLightbox"
-		>
-			<KvMaterialIcon
-				class="tw-w-3 tw-h-3"
-				:icon="mdiPencil"
-			/>
-		</KvButton>
-
-		<!-- Lightbox -->
-		<KvLightbox
-			:visible="isVisible"
-			:title="title"
-			:prevent-close="preventClose"
-			:variant="variant"
-			@lightbox-closed="hideLightbox"
-		>
-			<template #header>
-				<slot name="header"></slot>
-			</template>
-
-			<!-- default slot (body) -->
-			<slot></slot>
-
-			<!-- controls slot -->
-			<template #controls>
-				<slot
-					name="controls"
-					:hideLightbox="hideLightbox"
-				></slot>
-			</template>
-		</KvLightbox>
-	</div>
-</template>
-
-<script>
-import { ref } from 'vue-demi';
-import { mdiPencil } from '@mdi/js';
-import KvButton from './KvButton.vue';
-import KvMaterialIcon from './KvMaterialIcon.vue';
-import KvLightbox from './KvLightbox.vue';
-
-export default {
-	components: {
-		KvButton,
-		KvMaterialIcon,
-		KvLightbox,
-	},
-	props: {
-		variant: {
-			type: String,
-			default: 'lightbox',
-			validator(value) {
-				return ['lightbox', 'alert'].includes(value);
-			},
-		},
-		/**
-		 * The title of the dialog which describes the dialog to screenreaders, and if no
-		 * content is in the `header` slot, will be displayed at the top of the lightbox.
-		 * */
-		title: {
-			type: String,
-			default: '',
-		},
-		/**
-		 * The dialog has no close X button, clicking the screen does not close,
-		 * pressing ESC does not close.
-		 * */
-		preventClose: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: [
-		'lightbox-opened',
-		'lightbox-closed',
-	],
-	setup(_, { emit }) {
-		const isVisible = ref(false);
-
-		const showLightbox = () => {
-			isVisible.value = true;
-			emit('lightbox-opened');
-		};
-
-		const hideLightbox = () => {
-			isVisible.value = false;
-			emit('lightbox-closed');
-		};
-
-		return {
-			mdiPencil,
-			isVisible,
-			showLightbox,
-			hideLightbox,
-		};
-	},
-};
-</script>

package/vue/stories/KvEditButton.stories.js

@@ -1,63 +0,0 @@
-import KvEditButton from '../KvEditButton.vue';
-import KvButton from '../KvButton.vue';
-
-export default {
-	title: 'KvEditButton',
-	component: KvEditButton,
-	argTypes: {
-		visible: {
-			control: 'boolean',
-			defaultValue: false,
-		},
-		title: {
-			control: 'text',
-			defaultValue: 'Edit',
-		},
-		variant: {
-			control: 'select',
-			options: ['lightbox', 'alert'],
-			defaultValue: 'lightbox',
-		},
-		preventClose: {
-			control: 'boolean',
-			defaultValue: false,
-		},
-	},
-	args: {
-		visible: false,
-		title: '',
-		variant: 'lightbox',
-		preventClose: false,
-	},
-};
-
-const DefaultTemplate = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { KvEditButton, KvButton },
-	template: `
-		<div>
-			<kv-edit-button v-bind="$props">
-				<template>This is the content that will appear inside the lightbox when the edit button is clicked.</template>
-				<template #header>
-					<h3>
-						Custom Header
-					</h3>
-				</template>
-				<template #controls="{ hideLightbox }">
-					<kv-button variant="ghost" @click="hideLightbox" ref="dontDoItRef">Cancel</kv-button>
-					<kv-button variant="danger" @click="hideLightbox" ref="doItRef">Delete</kv-button>
-				</template>
-			</kv-edit-button>
-		</div>
-	`,
-	data() {
-		return {
-			isLightboxVisible: args.visible,
-		};
-	},
-});
-
-export const EditButtonWithLightbox = DefaultTemplate.bind({});
-EditButtonWithLightbox.args = {
-	title: 'Edit Item Details',
-};