@kiva/kv-components 3.96.0 → 3.98.0

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.98.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.97.0...@kiva/kv-components@3.98.0) (2024-09-03)
+
+
+### Features
+
+* add bookmark functionality to new loan card ([10ddade](https://github.com/kiva/kv-ui-elements/commit/10ddade2555770635b14272534791f6b6931d6d0))
+
+
+
+
+
+# [3.97.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.96.0...@kiva/kv-components@3.97.0) (2024-08-29)
+
+
+### Features
+
+* emitted event added to pie chart component ([#452](https://github.com/kiva/kv-ui-elements/issues/452)) ([1d95611](https://github.com/kiva/kv-ui-elements/commit/1d95611471b25b3c2f5fb9e26431295bd1942a1f))
+
+
+
+
+
 # [3.96.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.95.1...@kiva/kv-components@3.96.0) (2024-08-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.96.0",
+  "version": "3.98.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -84,5 +84,5 @@
       "optional": true
     }
   },
-  "gitHead": "2ae4d98f1355e0035d20943ddc6616aa252c59cc"
+  "gitHead": "5703aed220722cffdda318c700cb4d5c97ed083c"
 }

package/vue/KvIntroductionLoanCard.vue

@@ -72,6 +72,15 @@
 							</p>
 						</div>
 					</component>
+
+					<kv-loan-bookmark
+						v-if="!isVisitor"
+						:loan-id="loanId"
+						:is-bookmarked="isBookmarked"
+						class="loan-bookmark tw-absolute tw-right-1.5 tw-top-0"
+						data-testid="loan-card-bookmark"
+						@toggle-bookmark="$emit('toggle-bookmark')"
+					/>
 				</div>
 
 				<!-- Loan name -->
@@ -245,7 +254,7 @@
 <script>
 import numeral from 'numeral';
 import { loanCardComputedProperties, loanCardMethods } from '../utils/loanCard';
-
+import KvLoanBookmark from './KvLoanBookmark.vue';
 import KvLoanUse from './KvLoanUse.vue';
 import KvBorrowerImage from './KvBorrowerImage.vue';
 import KvLoanProgressGroup from './KvLoanProgressGroup.vue';
@@ -266,6 +275,7 @@ export default {
 		KvLoanTag,
 		KvLoanCallouts,
 		KvFlag,
+		KvLoanBookmark,
 	},
 	props: {
 		loanId: {
@@ -312,6 +322,14 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		isVisitor: {
+			type: Boolean,
+			default: true,
+		},
+		isBookmarked: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const {
@@ -414,4 +432,7 @@ export default {
 .loan-card-name {
 	@apply tw-pt-1 tw-px-3 tw-text-ellipsis tw-overflow-hidden tw-line-clamp-1 tw-cursor-pointer;
 }
+.loan-bookmark >>> button {
+	@apply !tw-rounded-t-none;
+}
 </style>

package/vue/KvPieChart.vue

@@ -29,8 +29,8 @@
 					:stroke="slice.color"
 					:stroke-width="lineWidth"
 					fill="none"
-					@mouseenter="activeSlice = slice"
-					@click="activeSlice = slice"
+					@mouseenter="setActiveSlice(slice)"
+					@click="setActiveSlice(slice)"
 				/>
 			</svg>
 			<!-- active slice -->
@@ -59,8 +59,8 @@
 					v-for="(slice, index) in slices.slice(pageIndex * slicesPerPage, (pageIndex + 1) * slicesPerPage)"
 					:key="index"
 					class="tw-flex tw-items-center"
-					@mouseenter="activeSlice = slice"
-					@click="activeSlice = slice"
+					@mouseenter="setActiveSlice(slice)"
+					@click="setActiveSlice(slice)"
 				>
 					<div
 						class="tw-w-2 tw-h-2 tw-mr-1 tw-rounded-full tw-flex-none"
@@ -125,7 +125,10 @@ export default {
 			default: () => ([]),
 		},
 	},
-	setup(props) {
+	emits: [
+		'click',
+	],
+	setup(props, { emit }) {
 		const {
 			values,
 		} = toRefs(props);
@@ -200,6 +203,11 @@ export default {
 			}
 		};
 
+		const setActiveSlice = (slice) => {
+			activeSlice.value = slice;
+			emit('click', slice.label);
+		};
+
 		return {
 			svgSize,
 			lineWidth,
@@ -213,6 +221,7 @@ export default {
 			pageCount,
 			prevPage,
 			nextPage,
+			setActiveSlice,
 		};
 	},
 };

package/vue/stories/KvIntroductionLoanCard.stories.js

@@ -18,6 +18,7 @@ const story = (args) => {
 					:custom-callouts="customCallouts"
 					:kv-track-function="kvTrackFunction"
 					:photo-path="photoPath"
+					:is-visitor="isVisitor"
 					@show-loan-details="showLoanDetails"
 				/>
 			</div>
@@ -197,3 +198,11 @@ export const USLoan = story({
 	kvTrackFunction,
 	photoPath,
 });
+
+export const Bookmark = story({
+	loanId: loan.id,
+	loan,
+	kvTrackFunction,
+	photoPath,
+	isVisitor: false,
+});