@kiva/kv-components 3.73.1 → 3.74.0

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Bug Fixes
+
+* adjusted comment ([e73e6a8](https://github.com/kiva/kv-ui-elements/commit/e73e6a842486ec5ce951a3130348cb1e3428288d))
+* extracted CTA dropdown methods and added unit tests ([4ef99de](https://github.com/kiva/kv-ui-elements/commit/4ef99deb24399fcb619c41d20370ad79812f1b00))
+* removed duplicate test ([838d6d4](https://github.com/kiva/kv-ui-elements/commit/838d6d48c85bbfd7759fd5266498219817e00cd7))
+
+
+### Features
+
+* $1000 lend CTA options ([4f89352](https://github.com/kiva/kv-ui-elements/commit/4f8935237acb9c1f1655b77cc604fe68b21ab077))
+
+
+
+
+
+## [3.73.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.73.1...@kiva/kv-components@3.73.2) (2024-04-23)
+
+
+### Bug Fixes
+
+* add type stories for italics and font weight for serif ([1133777](https://github.com/kiva/kv-ui-elements/commit/11337774fcb8b12ecc93bd11943b11f66bdc53e6))
+* testing baseline configs for including new dovetail webfont ([7079590](https://github.com/kiva/kv-ui-elements/commit/7079590f9b3ab0bbfb91b81ab6aa98fd4ae2f113))
+
+
+
+
+
 ## [3.73.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.73.0...@kiva/kv-components@3.73.1) (2024-04-17)
 
 

package/package.json

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

package/tests/unit/specs/utils/loanUtils.spec.js

@@ -2,6 +2,7 @@ import {
 	isBetween25And50,
 	isLessThan25,
 	getLendCtaSelectedOption,
+	getDropdownPriceArray,
 	ERL_COOKIE_NAME,
 	TOP_UP_CAMPAIGN,
 	BASE_CAMPAIGN,
@@ -310,4 +311,127 @@ describe('loanUtils', () => {
 			expect(mockCookieStoreSet).toHaveBeenCalledTimes(0);
 		});
 	});
+
+	describe('getDropdownPriceArray', () => {
+		it('should return less than 25', () => {
+			const result = getDropdownPriceArray('15.00', true, 15);
+
+			expect(result).toEqual(['15']);
+		});
+
+		it('should return non-25 increments', () => {
+			const result = getDropdownPriceArray('30.00', true);
+
+			expect(result).toEqual(['25', '30']);
+		});
+
+		it('should return dropdown values', () => {
+			const result = getDropdownPriceArray('100.00');
+
+			expect(result).toEqual(['25', '50', '75', '100']);
+		});
+
+		it('should return huge dropdown values between 500 and 1000', () => {
+			const result = getDropdownPriceArray('650.00', false, 25, false, true, false);
+
+			expect(result).toEqual([
+				'25',
+				'50',
+				'75',
+				'100',
+				'125',
+				'150',
+				'175',
+				'200',
+				'225',
+				'250',
+				'275',
+				'300',
+				'325',
+				'350',
+				'375',
+				'400',
+				'425',
+				'450',
+				'475',
+				'500',
+				'600',
+				'650',
+			]);
+		});
+
+		it('should return huge dropdown values up to 10,000', () => {
+			const result = getDropdownPriceArray('11000.00', false, 25, false, true, false);
+
+			expect(result).toEqual([
+				'25',
+				'50',
+				'75',
+				'100',
+				'125',
+				'150',
+				'175',
+				'200',
+				'225',
+				'250',
+				'275',
+				'300',
+				'325',
+				'350',
+				'375',
+				'400',
+				'425',
+				'450',
+				'475',
+				'500',
+				'600',
+				'700',
+				'800',
+				'900',
+				'1,000',
+				'2,000',
+				'3,000',
+				'4,000',
+				'5,000',
+				'6,000',
+				'7,000',
+				'8,000',
+				'9,000',
+				'10,000',
+			]);
+		});
+
+		it('should return not huge dropdown values for visitor', () => {
+			const result = getDropdownPriceArray('650.00', false, 25, false, true, true);
+
+			expect(result).toEqual([
+				'25',
+				'50',
+				'75',
+				'100',
+				'125',
+				'150',
+				'175',
+				'200',
+				'225',
+				'250',
+				'275',
+				'300',
+				'325',
+				'350',
+				'375',
+				'400',
+				'425',
+				'450',
+				'475',
+				'500',
+			]);
+		});
+
+		it('should return 5 dollar notes', () => {
+			const result = getDropdownPriceArray('30.00', true, 25, true);
+
+			expect(result).toEqual(['5', '10', '15', '20', '25', '30']);
+		});
+	});
 });

package/utils/loanUtils.js

@@ -1,3 +1,5 @@
+import numeral from 'numeral';
+
 export const ERL_COOKIE_NAME = 'kverlfivedollarnotes';
 export const TOP_UP_CAMPAIGN = 'TOPUP-VB-BALANCE-MPV1';
 export const BASE_CAMPAIGN = 'BASE-VB_BALANCE_MPV1';
@@ -109,3 +111,99 @@ export function getLendCtaSelectedOption(
 	// $25 is the fallback default selected option
 	return '25';
 }
+
+function buildHugePriceArray(amountLeft) {
+	const priceArray = [];
+
+	// Add $100 options up to $1,000
+	let minAmount = 100;
+	let limitAmount = amountLeft > 1000 ? 1000 : amountLeft;
+	let optionCount = limitAmount / minAmount;
+	for (let i = 1; i <= optionCount; i += 1) {
+		const price = minAmount * i + 500;
+		if (price > limitAmount) break;
+		priceArray.push(numeral(price).format('0,0'));
+	}
+
+	// Add $1000 options up to $10,000
+	minAmount = 1000;
+	limitAmount = amountLeft > 10000 ? 10000 : amountLeft;
+	optionCount = limitAmount / minAmount;
+	for (let i = 1; i <= optionCount; i += 1) {
+		const price = minAmount * i + 1000;
+		if (price > limitAmount) break;
+		priceArray.push(numeral(price).format('0,0'));
+	}
+
+	// Ensure final option is added
+	if (!priceArray.includes(numeral(limitAmount).format('0,0'))) {
+		priceArray.push(numeral(limitAmount).format('0,0'));
+	}
+
+	return priceArray;
+}
+
+function build5DollarsPriceArray(amountLeft) {
+	const limit5Notes = amountLeft < 50 ? amountLeft : 50;
+	const numberOf5 = limit5Notes / 5;
+	const numberOf25 = Math.ceil((amountLeft - limit5Notes) / 25) + 1;
+	const priceArray = [];
+	for (let i = 1; i <= numberOf5; i += 1) {
+		priceArray.push(numeral(5 * i).format('0,0'));
+	}
+	if (amountLeft > limit5Notes) {
+		for (let i = 3; i <= numberOf25; i += 1) {
+			priceArray.push(numeral(25 * i).format('0,0'));
+		}
+	}
+	return priceArray;
+}
+
+function buildPriceArray(amountLeft, minAmount) {
+	// Get count of shares based on available remaining amount
+	const optionCount = amountLeft / minAmount;
+	// Convert this to formatted array for our select element
+	const priceArray = []; // ex. priceArray = ['25', '50', '75']
+	for (let i = 1; i <= optionCount; i += 1) {
+		priceArray.push(numeral(minAmount * i).format('0,0'));
+	}
+	return priceArray;
+}
+
+/**
+ *	Gets the dropdown price values for the lend CTA
+ *
+ * @param {string} unreservedAmount The unreserved amount of the loan
+ * @param {boolean} isCompleteLoanActive Whether to include option that would complete loan
+ * @param {number} minAmount The min amount to show in the dropdown
+ * @param {boolean} enableFiveDollarsNotes Whether five dollar notes are enabled
+ * @param {boolean} enableHugeAmount Whether huge loan amounts are enabled
+ * @param {boolean} isVisitor Whether the current user is a visitor
+ * @param {boolean} inPfp Whether the loan is in PFP
+ * @returns {string[]} Price value array for the CTA dropdown
+ */
+export function getDropdownPriceArray(
+	unreservedAmount,
+	isCompleteLoanActive = false,
+	minAmount = 25,
+	enableFiveDollarsNotes = false,
+	enableHugeAmount = false,
+	isVisitor = true,
+	inPfp = false,
+) {
+	const parsedAmountLeft = parseFloat(unreservedAmount);
+	let priceArray = (enableFiveDollarsNotes && !inPfp)
+		? build5DollarsPriceArray(parsedAmountLeft).slice(0, 28)
+		: buildPriceArray(parsedAmountLeft, minAmount).slice(0, 20);
+
+	if (enableHugeAmount && parsedAmountLeft > 500 && !isVisitor) {
+		const hugePriceArray = buildHugePriceArray(parsedAmountLeft);
+		priceArray = priceArray.concat(hugePriceArray);
+	}
+
+	if (isCompleteLoanActive && !priceArray.includes(Number(unreservedAmount).toFixed())) {
+		priceArray.push(Number(unreservedAmount).toFixed());
+	}
+
+	return priceArray;
+}

package/vue/.storybook/tailwind.css

@@ -1,3 +1,5 @@
+@import url('https://use.typekit.net/pmj7shs.css');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

package/vue/KvLendCta.vue

@@ -126,13 +126,12 @@
 </template>
 
 <script>
-import numeral from 'numeral';
 import { mdiChevronRight } from '@mdi/js';
 import KvLendAmountButton from './KvLendAmountButton.vue';
 import KvUiSelect from './KvSelect.vue';
 import KvUiButton from './KvButton.vue';
 import KvMaterialIcon from './KvMaterialIcon.vue';
-import { getLendCtaSelectedOption } from '../utils/loanUtils';
+import { getLendCtaSelectedOption, getDropdownPriceArray } from '../utils/loanUtils';
 
 export default {
 	name: 'KvLendCta',
@@ -251,15 +250,14 @@ export default {
 			// If we wanted to show this interface on loans with less than 25 remaining they would see the selector
 			const minAmount = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25);
 			// Limit price options
-			const priceArray = this.getDropdownPriceArray(
+			return getDropdownPriceArray(
 				this.unreservedAmount,
+				this.isCompleteLoanActive,
 				minAmount,
 				this.enableFiveDollarsNotes,
+				this.enableHugeAmount,
+				this.isVisitor,
 			);
-			if (this.isCompleteLoanActive && !priceArray.includes(Number(this.unreservedAmount).toFixed())) {
-				priceArray.push(Number(this.unreservedAmount).toFixed());
-			}
-			return priceArray;
 		},
 		ctaButtonText() {
 			if (this.isCompleteLoanActive) {
@@ -403,63 +401,6 @@ export default {
 				this.loanId,
 			);
 		},
-		build5DollarsPriceArray(amountLeft) {
-			const limit5Notes = amountLeft < 50 ? amountLeft : 50;
-			const numberOf5 = limit5Notes / 5;
-			const numberOf25 = Math.ceil((amountLeft - limit5Notes) / 25) + 1;
-			const priceArray = [];
-			for (let i = 1; i <= numberOf5; i += 1) {
-				priceArray.push(numeral(5 * i).format('0,0'));
-			}
-			if (amountLeft > limit5Notes) {
-				for (let i = 3; i <= numberOf25; i += 1) {
-					priceArray.push(numeral(25 * i).format('0,0'));
-				}
-			}
-			return priceArray;
-		},
-		buildPriceArray(amountLeft, minAmount) {
-			// get count of shares based on available remaining amount.
-			const N = amountLeft / minAmount;
-			// convert this to formatted array for our select element
-			const priceArray = []; // ex. priceArray = ['25', '50', '75']
-			for (let i = 1; i <= N; i += 1) {
-				priceArray.push(numeral(minAmount * i).format('0,0'));
-			}
-			return priceArray;
-		},
-		buildHugePriceArray(amountLeft) {
-			const minAmount = 100;
-			const limitAmount = amountLeft > 1000 ? 1000 : amountLeft;
-			const N = limitAmount / minAmount;
-
-			const priceArray = [];
-			for (let i = 1; i <= N; i += 1) {
-				const price = minAmount * i + 500;
-				if (price > limitAmount) break;
-				priceArray.push(numeral(price).format('0,0'));
-			}
-
-			if (!priceArray.includes(numeral(limitAmount).format('0,0'))) {
-				priceArray.push(numeral(limitAmount).format('0,0'));
-			}
-
-			return priceArray;
-		},
-		getDropdownPriceArray(unreservedAmount, minAmount, enableFiveDollarsNotes, inPfp = false) {
-			const parsedAmountLeft = parseFloat(unreservedAmount);
-			let combinedPricesArray = [];
-			const priceArray = (enableFiveDollarsNotes && !inPfp)
-				? this.build5DollarsPriceArray(parsedAmountLeft).slice(0, 28)
-				: this.buildPriceArray(parsedAmountLeft, minAmount).slice(0, 20);
-
-			const showHugeAmount = this.enableHugeAmount && parsedAmountLeft > 500 && !this.isVisitor;
-			if (showHugeAmount) {
-				const hugePriceArray = this.buildHugePriceArray(parsedAmountLeft);
-				combinedPricesArray = priceArray.concat(hugePriceArray);
-			}
-			return showHugeAmount ? combinedPricesArray : priceArray;
-		},
 	},
 };
 

package/vue/stories/KvLendCta.stories.js

@@ -70,7 +70,7 @@ export const Dropdown = story({
 	kvTrackFunction,
 });
 
-export const HugeLentAmount = story({
+export const HugeAmount = story({
 	isLoading: false,
 	loan: {
 		id: 1,
@@ -81,7 +81,7 @@ export const HugeLentAmount = story({
 	isVisitor: false,
 });
 
-export const Between500and1000 = story({
+export const HugeAmountUnder1000 = story({
 	isLoading: false,
 	loan: {
 		id: 1,

package/vue/stories/KvLightbox.stories.js

@@ -42,7 +42,7 @@ const DefaultTemplate = (args, { argTypes }) => ({
 				@lightbox-closed="isLightboxVisible = false"
 			>
 				<p class="tw-mb-2">Lorem ipsum aliquip labore commodo anim elit amet cupidatat do ex ipsum. Consectetur excepteur ea anim velit reprehenderit qui aliquip ullamco aliquip irure dolor ex. Occaecat excepteur enim eu incididunt ut consectetur aliqua magna et. Reprehenderit duis ex excepteur sit et cupidatat cillum cillum adipisicing ut adipisicing minim ad.</p>
-				<p>Et id excepteur cillum quis. Culpa dolore eiusmod ex officia ea deserunt. Aliquip velit deserunt Lorem nisi mollit aliquip esse quis. Lorem aliquip ex id reprehenderit irure cillum elit aliqua laboris fugiat aliquip irure. Nostrud irure est anim qui eu in eu quis cupidatat. Fugiat officia aliqua laborum in incididunt tempor anim ex velit qui magna. Cillum minim commodo pariatur ex cillum sit.</p>
+				<p class="tw-font-serif">Et id excepteur cillum quis. Culpa dolore eiusmod ex officia ea deserunt. Aliquip velit deserunt Lorem nisi mollit aliquip esse quis. Lorem aliquip ex id reprehenderit irure cillum elit aliqua laboris fugiat aliquip irure. Nostrud irure est anim qui eu in eu quis cupidatat. Fugiat officia aliqua laborum in incididunt tempor anim ex velit qui magna. Cillum minim commodo pariatur ex cillum sit.</p>
 				<template #controls>
 					<kv-button variant="secondary" @click="isLightboxVisible = false" ref="dontDoItRef">Don't do it!</kv-button>
 					<kv-button @click="isLightboxVisible = false" ref="doItRef">Do it!</kv-button>

package/vue/stories/StyleguidePrimitives.stories.js

@@ -250,6 +250,30 @@ export const Primitives = (args, { argTypes }) => ({
 				</li>
 			</ul>
 		</section>
+		<section class="tw-py-8">
+			<h2 class="tw-mb-4">Text Styles <i>(Italics)</i></h2>
+			<ul class="tw-flex tw-flex-wrap tw-flex-col tw-gap-4">
+				<li
+					v-for="typeStyle in kivaTypography"
+					:key="buildClassName('text', typeStyle)"
+					class="tw-overflow-x-auto tw-w-full"
+				>
+					<button
+						class="tw-text-left tw-font-book hover:tw-text-action-highlight"
+						@click="copy(buildClassName('tw-text', typeStyle))"
+					>
+						<p
+							class="tw-mb-1 tw-italic"
+							:class="buildClassName('tw-text', typeStyle)"
+							style="width: 12em;"
+						>
+							The quick brown fox jumps over the lazy dog
+						</p>
+						<span>.{{buildClassName('tw-text', typeStyle)}} .tw-italic</span>
+					</button>
+				</li>
+			</ul>
+		</section>
 		<hr>
 		<section class="tw-py-8">
 			<h2 class="tw-mb-4">Font Weights</h2>
@@ -271,6 +295,26 @@ export const Primitives = (args, { argTypes }) => ({
 			</ul>
 		</section>
 		<hr>
+		<section class="tw-py-8">
+			<h2 class="tw-mb-4">Font Weights (Serif)</h2>
+			<ul class="tw-flex tw-flex-wrap tw-flex-col tw-gap-4">
+				<li
+					v-for="fontWeight in fontWeights"
+					:key="buildClassName('tw-font', fontWeight[0])"
+				>
+					<button
+						class="tw-text-left tw-font-book hover:tw-text-action-highlight"
+						@click="copy(buildClassName('tw-font', fontWeight[0]))"
+					>
+						<p :class="[buildClassName('tw-font', fontWeight[0]), 'tw-font-serif']">
+							The quick brown fox jumps over the lazy dog
+						</p>
+						<span>.{{buildClassName('tw-font', fontWeight[0])}}</span>
+					</button>
+				</li>
+			</ul>
+		</section>
+		<hr>
 		<section class="tw-py-8">
 			<h2 class="tw-mb-4">Radii</h2>