@kiva/kv-components 3.97.0 → 3.98.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.97.0",
+  "version": "3.98.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -84,5 +84,5 @@
       "optional": true
     }
   },
-  "gitHead": "00a1948fdc646666968cd5c98ef55c0e810d5ee4"
+  "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/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,
+});