feat: mykiva card added #6156

roger-in-kiva · 2025-07-22T17:11:42Z

MyKiva card added for multiple purposes at mykiva page
Part of https://kiva.atlassian.net/browse/MP-1751

Copilot

Pull Request Overview

This PR introduces a new reusable MyKivaCard component to consolidate card UI logic previously scattered in the JourneyCardCarousel component. The new component provides a flexible interface for displaying various types of cards on the MyKiva page with configurable styling, CTAs, and layout options.

Extracted card rendering logic into a dedicated MyKivaCard component with comprehensive prop configuration
Refactored JourneyCardCarousel to use the new card component, removing duplicate template and style code
Added Storybook stories demonstrating different card variants (Default, MoreWays, Recommended)

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
`src/components/MyKiva/MyKivaCard.vue`	New reusable card component with extensive props for customization and event handling
`src/components/Contentful/JourneyCardCarousel.vue`	Refactored to use MyKivaCard component, removing inline card template and styles
`.storybook/stories/MyKivaCard.stories.js`	Added Storybook documentation with three card variant examples

src/components/MyKiva/MyKivaCard.vue

.storybook/stories/MyKivaCard.stories.js

dyersituations · 2025-07-22T23:23:20Z

src/components/MyKiva/MyKivaCard.vue

+				{ 'height': overlayHeight },
+			]"
+		>
+			<div class="tw-flex tw-flex-col tw-justify-end tw-h-full !tw-gap-1.5">


It looks like this content needs to be pushed to the bottom. The title and content move down as the image loads. The pop-in only affects the new variation.

Do you mean in storybook?

Yes, if it happens in the app as well, it would be worth a fix. Just wanted to call it out. Otherwise everything looks good!

Thanks, I'll check it out.
There is more upcoming work, this PR is mainly to create a new component and replace in current carousel we have (journeys).

Current new variation in Storybook is not precisely final version, we need to replace that image in the app, and some extra tweaks are coming...

Just to be sure, can you record a video just to check what probably I don't see?

And good to ask you, should we consider carousel version as a variation of this?

You mean add this new card to a carousel? I don't think we need that work yet.

When it comes to repro, just delete the image from the page, and you'll see the content push up. It's the same general affect of the image not being loaded, since there isn't a default image on the img tag.

I meant this case:

I see what you mean, that push up happens b/c absolute class of this line:

ui/src/components/MyKiva/MyKivaCard.vue

Line 35 in 6531985

'tw-absolute': !imageUrl,

That class is needed in other variation of the card, so probably no the best to test in Storybook at this point, b/c removing image there is getting this false. That is not the same passing an image but not loading.

I was testing by deleting the element, not the image URL, but I saw the same thing as the image was loading.

Oh good question on the image carousel, I don't remember seeing that previously. Could you ask Nathan and Lauren in the team channel if we're only showing one borrower image for now?

Ok. I'll try to replicate what you mean about it in upcoming work, thanks!

Yeah no worries, sounds good, thanks!

mcstover

This is a nice combination of these card cases! A lot of props but that's understandable with the varied use cases.

## [3.26.0-rc.1](v3.25.0...v3.26.0-rc.1) (2025-07-29) ### 🎉 New Features * 🌟 [MP-1655] - Done hide atb modal if user still has balance otherwise show up ([97e07ea](97e07ea)) * 🌟 [MP-1655] - PR feedback, validating achievement first ([7248e62](7248e62)) * add animation to region checkmarks ([0140ddf](0140ddf)) * add card for regions - data ([54481c3](54481c3)) * add card for regions - data ([c4cb56b](c4cb56b)) * add card for regions - data ([8a8297a](8a8297a)) * add card for regions - data ([a09886f](a09886f)) * add card for regions - data ([40f3a8d](40f3a8d)) * add card for regions - data ([faca596](faca596)) * add card for regions - data ([e1e917a](e1e917a)) * add card for regions - data ([c0e794f](c0e794f)) * add card for regions - data ([feed600](feed600)) * add card for regions - data ([f6f2861](f6f2861)) * add card for regions - data ([b390b4f](b390b4f)) * add card for regions - data - fix ([3bb0056](3bb0056)) * add card for regions initial markup ([7c71c4b](7c71c4b)) * badge journey modal update ([#6151](#6151)) ([2ade64a](2ade64a)) * carousel added to mykiva card ([a9e8d2d](a9e8d2d)) * mykiva card added ([#6156](#6156)) ([aaaad7c](aaaad7c)) * mykiva top category card ([#6164](#6164)) ([0e1fcdb](0e1fcdb)) * remove user preferences from mykiva logic and fix ty page redirect issue ([95a1e9c](95a1e9c)) * setup stub page and query for giving funds management ([ead882d](ead882d)) * start animation when region container is visible ([01aadcf](01aadcf)) * tracking data blog cards - data - fix ([1e8f10e](1e8f10e)) * tracking event added to recommended card ([#6166](#6166)) ([81a55a6](81a55a6)) * update datasource and add lazy loading to the updates carousel ([c33252b](c33252b)) * update datasource and add lazy loading to the updates carousel ([032d0cb](032d0cb)) ### 🐛 Bugfixes * add back my > id for query ([cbb0641](cbb0641)) * add click events and remove console ([723c23f](723c23f)) * applies pre-loading onmouseeneter ([5bab9dc](5bab9dc)) * checkmark sizes and differences from design ([7442b88](7442b88)) * conflicts ([8859ddf](8859ddf)) * create watch for disableCache prop in BorrowerCarousel ([0355758](0355758)) * fix basketSize with nonTrivialCount value ([2acfebb](2acfebb)) * fix showLoanDetails arguments handling ([2b7cf24](2b7cf24)) * hide dev routes in prod ui site map ([b0d17d6](b0d17d6)) * lint ([06d2f23](06d2f23)) * move user preferences utils to dedicated file ([9b74b02](9b74b02)) * my kiva loans query reverted ([#6153](#6153)) ([3e68434](3e68434)) * refactor LoanCards to leverage bp-exp mixin ([bc24547](bc24547)) * refactorization of BorrowerCarousel to leverage mixin props ([cc05395](cc05395)) * remove tw fake line ([#6165](#6165)) ([af1a73b](af1a73b)) * removed unused import ([7abf873](7abf873)) * removing characters ([056a2ca](056a2ca)) * respect guest assignment cookie and ensure assignment tracking is correct for the session ([644e87a](644e87a)) * revert removal of isFundraising loan check ([1abf27b](1abf27b)) * showing unique transactions in my kiva page ([#6147](#6147)) ([f5c2c7a](f5c2c7a)) * update cards avatars fixed ([#6148](#6148)) ([7b8349d](7b8349d)) * update mykiva redirect cookie name ([dbc263d](dbc263d)) * use global kv-card-frame component, tweak styles and visual layout, stub forthcoming elements ([ce2ccd1](ce2ccd1)) ### 🧹 Chores * update kv-components ([e09dd93](e09dd93)) * update kv-components ^6.37.0 ([60847f9](60847f9))

kiva-robot · 2025-07-29T18:55:16Z

🎉 This PR is included in version 3.26.0-rc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [3.26.0](v3.25.0...v3.26.0) (2025-08-07) ### 🎉 New Features * 🌟 [MP-1655] - Done hide atb modal if user still has balance otherwise show up ([97e07ea](97e07ea)) * 🌟 [MP-1655] - PR feedback, validating achievement first ([7248e62](7248e62)) * add animation to region checkmarks ([0140ddf](0140ddf)) * add card for regions - data ([54481c3](54481c3)) * add card for regions - data ([c4cb56b](c4cb56b)) * add card for regions - data ([8a8297a](8a8297a)) * add card for regions - data ([a09886f](a09886f)) * add card for regions - data ([40f3a8d](40f3a8d)) * add card for regions - data ([faca596](faca596)) * add card for regions - data ([e1e917a](e1e917a)) * add card for regions - data ([c0e794f](c0e794f)) * add card for regions - data ([feed600](feed600)) * add card for regions - data ([f6f2861](f6f2861)) * add card for regions - data ([b390b4f](b390b4f)) * add card for regions - data - fix ([3bb0056](3bb0056)) * add card for regions initial markup ([7c71c4b](7c71c4b)) * add nav update experiment ([902a530](902a530)) * add nav update experiment ([977a5aa](977a5aa)) * add nav update experiment ([f2f66d3](f2f66d3)) * add nav update experiment ([07a0c99](07a0c99)) * add nav update experiment ([20a5cd5](20a5cd5)) * add nav update experiment ([65f1589](65f1589)) * add nav update experiment ([425a476](425a476)) * add region map section to MyKiva ([5fc9ba1](5fc9ba1)) * add third MyKivaCard to carousel ([211b9eb](211b9eb)) * adding badges next steps when user lent to all regions ([a03bf75](a03bf75)) * badge journey modal update ([#6151](#6151)) ([2ade64a](2ade64a)) * carousel added to mykiva card ([a9e8d2d](a9e8d2d)) * integrate header component under experiment flag ([7588d70](7588d70)) * mp-1829-MyKiva Update card adjustments ([cac6963](cac6963)) * mykiva card added ([#6156](#6156)) ([aaaad7c](aaaad7c)) * mykiva top category card ([#6164](#6164)) ([0e1fcdb](0e1fcdb)) * remove user preferences from mykiva logic and fix ty page redirect issue ([95a1e9c](95a1e9c)) * setup stub page and query for giving funds management ([ead882d](ead882d)) * start animation when region container is visible ([01aadcf](01aadcf)) * tracking data blog cards - data - fix ([1e8f10e](1e8f10e)) * tracking event added to recommended card ([#6166](#6166)) ([81a55a6](81a55a6)) * update datasource and add lazy loading to the updates carousel ([c33252b](c33252b)) * update datasource and add lazy loading to the updates carousel ([032d0cb](032d0cb)) * update the lending stats to reference the kiva components ([17eba54](17eba54)) * update the lending stats to reference the kiva components ([3bf9c4e](3bf9c4e)) ### 🐛 Bugfixes * add back my > id for query ([cbb0641](cbb0641)) * add click events and remove console ([723c23f](723c23f)) * add missing dot ([069884d](069884d)) * add missing dot ([e20d4b9](e20d4b9)) * adjust background size for control ([b1641c1](b1641c1)) * adjustments to lending stats exp analytics ([b2878f3](b2878f3)) * alignment of map containers in MyKiva ([3e4cb72](3e4cb72)) * alignment with category card ([0874a9d](0874a9d)) * applies pre-loading onmouseeneter ([5bab9dc](5bab9dc)) * apply tailwind tw-object-top class to img ([4b0993b](4b0993b)) * avoid exp prop drilling and lint ([1c44e48](1c44e48)) * checkmark sizes and differences from design ([7442b88](7442b88)) * conflict ([579f30d](579f30d)) * conflicts ([564b55d](564b55d)) * conflicts ([8859ddf](8859ddf)) * create watch for disableCache prop in BorrowerCarousel ([0355758](0355758)) * don't show side sheet if comment modal is canceled ([f980347](f980347)) * empty state for top category was incorrect ([312030c](312030c)) * ensure top category card isn't too tall ([f4e1d48](f4e1d48)) * ensure unit tests pass ([ea09489](ea09489)) * filter slides in carousel logic instead of before ([871a95a](871a95a)) * fix basketSize with nonTrivialCount value ([2acfebb](2acfebb)) * fix showLoanDetails arguments handling ([2b7cf24](2b7cf24)) * hide dev routes in prod ui site map ([b0d17d6](b0d17d6)) * image imports ([d4744ea](d4744ea)) * images dimensions in MyKivaCard ([d1b06d8](d1b06d8)) * kv-components with latest header fixes ([3195888](3195888)) * let loan details modal close before clearing content ([fbbab46](fbbab46)) * lint ([06d2f23](06d2f23)) * make image js d path. fix countries combo page urls ([5c689fe](5c689fe)) * minor kiva card content style fixes ([0b4e347](0b4e347)) * minor simplification ([f6b5a6b](f6b5a6b)) * minor typo ([c956d61](c956d61)) * missing lock file change ([97c628d](97c628d)) * move top category to created ([daac7a5](daac7a5)) * move user preferences utils to dedicated file ([9b74b02](9b74b02)) * mp-1900 reduce margin lendins stats ([153c058](153c058)) * mp-1900 reduce margin lendins stats ([d562149](d562149)) * my kiva loans query reverted ([#6153](#6153)) ([3e68434](3e68434)) * MyKivaCard with regions section ([5f6e64c](5f6e64c)) * of the tracking data ([d2699b3](d2699b3)) * place region image at top of component ([22c3d47](22c3d47)) * preliminary tailwindcss fix ([49f5b9e](49f5b9e)) * reduce new bg image size ([3dc2aed](3dc2aed)) * ref mount warning ([087b4a2](087b4a2)) * refactor LoanCards to leverage bp-exp mixin ([bc24547](bc24547)) * refactorization of BorrowerCarousel to leverage mixin props ([cc05395](cc05395)) * reinsert deleted function in merge ([d2bd20d](d2bd20d)) * remove background size prop from lending stats cards that is no longer needed ([d4c1d1b](d4c1d1b)) * remove journey carousel title ([87a3f96](87a3f96)) * remove tw fake line ([#6165](#6165)) ([af1a73b](af1a73b)) * remove unnecessary extra image js ([e8a5e50](e8a5e50)) * removed unused import ([7abf873](7abf873)) * removing characters ([056a2ca](056a2ca)) * removing unused new header component ([b08ce5b](b08ce5b)) * replace cow with solar ([310b211](310b211)) * resolve issue where comments added were still cached ([ec73844](ec73844)) * resolve issue with bad link when CTA clicked for top category when user had loans ([09c3e6c](09c3e6c)) * resolve issue with side sheet CTA not being above loan next steps ([d0c4313](d0c4313)) * resolve issue with side sheet map not loading ([6c38d47](6c38d47)) * resolve issue with top category card sizing issues and borrower image cropping ([4161df0](4161df0)) * resolve issue with use cases of mykiva cards that need static heights ([9999aff](9999aff)) * resolve minor issues with cards ([3b9f571](3b9f571)) * resolve race condition with mykiva sidesheet and simplify functionality with card/sidesheet ([2ec0f85](2ec0f85)) * resolve ux issues with mykiva lending stats experiment ([686217d](686217d)) * respect guest assignment cookie and ensure assignment tracking is correct for the session ([644e87a](644e87a)) * return at most two top pendingRegions ([6df6e21](6df6e21)) * revert removal of isFundraising loan check ([1abf27b](1abf27b)) * showing unique transactions in my kiva page ([#6147](#6147)) ([f5c2c7a](f5c2c7a)) * spacing changes ([1993c26](1993c26)) * tailwindcss style ([498bdac](498bdac)) * update cards avatars fixed ([#6148](#6148)) ([7b8349d](7b8349d)) * update lending stats region images to be more zoomed out ([ce8e50e](ce8e50e)) * update mykiva redirect cookie name ([dbc263d](dbc263d)) * update tou checkbox label ([bb2fe52](bb2fe52)) * use fallback image instead of carousel in top category ([a3a8877](a3a8877)) * use global kv-card-frame component, tweak styles and visual layout, stub forthcoming elements ([ce2ccd1](ce2ccd1)) * use top category according to achievement progress ([021dc68](021dc68)) ### 💅 Code Style Changes * misc reordering of variables ([e144ba2](e144ba2)) ### 🧹 Chores * **release:** 3.26.0-rc.1 [skip ci] ([18a83f4](18a83f4)), closes [#6151](#6151) [#6156](#6156) [#6164](#6164) [#6166](#6166) [#6153](#6153) [#6165](#6165) [#6147](#6147) [#6148](#6148) * **release:** 3.26.0-rc.2 [skip ci] ([d1a3b8c](d1a3b8c)) * update kv-components ([e09dd93](e09dd93)) * update kv-components ^6.37.0 ([60847f9](60847f9)) * update kv-tokens to 3.2.1 ([8eb55c0](8eb55c0))

kiva-robot · 2025-08-07T19:59:54Z

🎉 This PR is included in version 3.26.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

feat: mykiva multi purpose card added

7dbbfac

roger-in-kiva requested review from a team and Copilot July 22, 2025 17:11

Copilot AI reviewed Jul 22, 2025

View reviewed changes

src/components/MyKiva/MyKivaCard.vue Show resolved Hide resolved

.storybook/stories/MyKivaCard.stories.js Outdated Show resolved Hide resolved

Merge branch 'main' of github.com:kiva/ui into MP-1751_mykiva_card_added

b2dbc5a

roger-in-kiva force-pushed the MP-1751_mykiva_card_added branch from 88748b8 to b2dbc5a Compare July 22, 2025 17:13

cristhianDt approved these changes Jul 22, 2025

View reviewed changes

fix: indentation fixed

6531985

roger-in-kiva merged commit aaaad7c into main Jul 22, 2025
5 checks passed

roger-in-kiva deleted the MP-1751_mykiva_card_added branch July 22, 2025 23:16

dyersituations reviewed Jul 22, 2025

View reviewed changes

mcstover reviewed Jul 23, 2025

View reviewed changes

kiva-robot added the released on @staging label Jul 29, 2025

kiva-robot added the released label Aug 7, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: mykiva card added #6156

feat: mykiva card added #6156

Uh oh!

roger-in-kiva commented Jul 22, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dyersituations Jul 22, 2025

Uh oh!

roger-in-kiva Jul 22, 2025

Uh oh!

dyersituations Jul 22, 2025

Uh oh!

roger-in-kiva Jul 22, 2025

Uh oh!

dyersituations Jul 22, 2025

Uh oh!

roger-in-kiva Jul 22, 2025 •

edited

Loading

Uh oh!

dyersituations Jul 22, 2025

Uh oh!

roger-in-kiva Jul 22, 2025

Uh oh!

dyersituations Jul 23, 2025

Uh oh!

mcstover left a comment

Uh oh!

kiva-robot commented Jul 29, 2025

Uh oh!

kiva-robot commented Aug 7, 2025

Uh oh!

Uh oh!

feat: mykiva card added #6156

feat: mykiva card added #6156

Uh oh!

Conversation

roger-in-kiva commented Jul 22, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

roger-in-kiva Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mcstover left a comment

Choose a reason for hiding this comment

Uh oh!

kiva-robot commented Jul 29, 2025

Uh oh!

kiva-robot commented Aug 7, 2025

Uh oh!

Uh oh!

roger-in-kiva Jul 22, 2025 •

edited

Loading