@kiva/kv-components 3.97.0 → 3.98.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.98.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.98.0...@kiva/kv-components@3.98.1) (2024-09-04)
+
+
+### Bug Fixes
+
+* resolve chart issue with vue 3 ([93716c6](https://github.com/kiva/kv-ui-elements/commit/93716c61bebff132a6bb6bd8138a3ffab2336c0b))
+
+
+
+
+
+# [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.97.0",
+  "version": "3.98.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -84,5 +84,5 @@
       "optional": true
     }
   },
-  "gitHead": "00a1948fdc646666968cd5c98ef55c0e810d5ee4"
+  "gitHead": "b2fd2967b6606a846281d8dde50fae68cf9c0f01"
 }

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/KvTreeMapChart.vue

@@ -43,7 +43,7 @@
 
 <script>
 import numeral from 'numeral';
-import { getTreemap } from 'treemap-squarify';
+import treemap from 'treemap-squarify';
 import kvTokensPrimitives from '@kiva/kv-tokens/primitives.json';
 import { throttle } from '../utils/throttle';
 import KvTooltip from './KvTooltip.vue';
@@ -100,7 +100,7 @@ export default {
 			}
 
 			// Calculate treemap blocks using canvas size 100x100 to easily translate to percentages
-			const blocks = getTreemap({
+			const blocks = treemap.getTreemap({
 				data: this.values,
 				width: 100,
 				height: 100,

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