feat: mykiva card added

.storybook/stories/MyKivaCard.stories.js

@@ -0,0 +1,69 @@
+import MyKivaCard from '#src/components/MyKiva/MyKivaCard.vue';
+import { badgeFirstTierComplete } from '../mock-data/badge-journey-data-mock';
+
+export default {
+	title: 'MyKiva/MyKivaCard',
+	component: MyKivaCard,
+};
+
+const story = (args = {}) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { MyKivaCard },
+		setup() { return { args }; },
+		template: `
+			<div style="width: 330px;">
+				<MyKivaCard v-bind="args" />
+			</div>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({
+	bgImage: "//images.ctfassets.net/j0p9a6ql0rn7/ribyKXIQHzSV1Z86Uhx82/fbbae279243ed552237b9f2be824a660/CLIMATE_-_New.jpg",
+	hasGradient: true,
+	isBgTopAligned: false,
+	isBlackSubtitle: false,
+	isFullWidthPrimaryCta: false,
+	isTitleFontSans: false,
+	primaryCtaText: "Lend to climate solutions",
+	primaryCtaVariant: "secondary",
+	secondaryCtaText: "",
+	subtitle: "Keep lending to reach your next achievement",
+	title: "Your progress: 2/3 loans",
+	titleColor: ""
+});
+
+export const MoreWays = story({
+	bgImage: "//images.ctfassets.net/j0p9a6ql0rn7/1dn5cF9oS7uI5XrdA33YDp/8b3d74c2e352ef548f3ee52b056c7332/donate.png",
+	hasGradient: false,
+	isBgTopAligned: true,
+	isBlackSubtitle: true,
+	isFullWidthPrimaryCta: true,
+	isTitleFontSans: true,
+	primaryCtaText: "Donate to Kiva",
+	primaryCtaVariant: "primary",
+	secondaryCtaText: "",
+	subtitle: "",
+	title: "Support lasting change by donating to Kiva’s mission",
+	titleColor: "tw-text-action-highlight"
+});
+
+export const Recommended = story({
+	hasGradient: false,
+	isBgTopAligned: true,
+	isBlackSubtitle: true,
+	isFullWidthPrimaryCta: true,
+	isTitleFontSans: true,
+	primaryCtaText: "Fund a Woman",
+	primaryCtaVariant: "primary",
+	secondaryCtaText: "",
+	subtitle: "",
+	title: "Give women an equal opportunity to succeed.",
+	titleColor: "tw-text-action-highlight",
+	imageUrl: "https://www.development.kiva.org/img/w600/a54fdc6d3be8a104d9e3f113728eedb6.jpg",
+	tagText: "Recommended: Loans to Women",
+	showCtaIcon: true,
+});

src/components/Contentful/JourneyCardCarousel.vue

@@ -22,69 +22,22 @@
 				#[`slide${index}`]
 				:key="index"
 			>
-				<!-- Journey card slide -->
-				<div
-					class="tw-w-full tw-relative tw-rounded tw-bg-cover tw-bg-center journey-card"
-					:class="{ '!tw-bg-left-top': isNonBadgeSlide(slide) }"
-					:style="{ backgroundImage: `url(${backgroundImg(slide)})` }"
-				>
-					<div
-						class="
-							tw-absolute
-							tw-w-full
-							tw-bottom-0
-							tw-pb-1.5
-							tw-px-1.5
-							md:tw-pb-2
-							md:tw-px-2
-							tw-align-bottom
-							tw-rounded-b
-						"
-						:class="{ 'slide-gradient': !isNonBadgeSlide(slide) }"
-						:style="[
-							{ 'height': overlayHeight(slide) },
-						]"
-					>
-						<div class="tw-flex tw-flex-col tw-justify-end tw-h-full !tw-gap-1.5">
-							<div class="tw-text-primary-inverse">
-								<h2
-									class="tw-text-h3"
-									:class="titleClass(slide)"
-								>
-									{{ title(slide) }}
-								</h2>
-								<p
-									v-if="subTitle(slide)"
-									class="tw-text-small tw-font-medium"
-									:class="{
-										'tw-my-1 lg:tw-my-1.5 !tw-text-base !tw-text-gray-800':
-											isNonBadgeSlide(slide)
-									}"
-								>
-									{{ subTitle(slide) }}
-								</p>
-							</div>
-							<div class="tw-flex tw-flex-col tw-gap-1.5">
-								<button
-									v-if="showSecondaryCta(slide)"
-									@click="goToSecondaryCtaUrl(slide)"
-									variant="tertiary"
-									class="tw-inline-flex tw-justify-center tw-items-center tw-rounded tw-py-1 tw-px-3
-									tw-border tw-border-white tw-font-medium tw-text-center tw-text-white"
-								>
-									{{ secondaryCtaText(slide) }}
-								</button>
-								<KvButton
-									@click="goToPrimaryCtaUrl(slide)"
-									:variant="primaryCtaVariant(slide)"
-									:class="{ 'tw-w-full': isNonBadgeSlide(slide) }"
-								>
-									{{ primaryCtaText(slide) }}
-								</KvButton>
-							</div>
-						</div>
-					</div>
-				</div>
+				<MyKivaCard
+					:bg-image="backgroundImg(slide)"
+					:is-bg-top-aligned="isNonBadgeSlide(slide)"
+					:has-gradient="!isNonBadgeSlide(slide)"
+					:title="title(slide)"
+					:subtitle="subTitle(slide)"
+					:is-black-subtitle="isNonBadgeSlide(slide)"
+					:secondary-cta-text="secondaryCtaText(slide)"
+					:primary-cta-text="primaryCtaText(slide)"
+					:primary-cta-variant="primaryCtaVariant(slide)"
+					:is-full-width-primary-cta="isNonBadgeSlide(slide)"
+					:is-title-font-sans="isTitleFontSans(slide)"
+					:title-color="titleColor(slide)"
+					@primary-cta-clicked="goToPrimaryCtaUrl(slide)"
+					@secondary-cta-clicked="goToSecondaryCtaUrl(slide)"
+				/>
 			</template>
 		</KvCarousel>
 		<MyKivaSharingModal
@@ -109,8 +62,9 @@ import { formatUiSetting } from '#src/util/contentfulUtils';
 import { defaultBadges } from '#src/util/achievementUtils';
 import { TRANSACTION_LOANS_KEY } from '#src/util/myKivaUtils';
 import useBadgeData from '#src/composables/useBadgeData';
-import { KvCarousel, KvButton } from '@kiva/kv-components';
+import { KvCarousel } from '@kiva/kv-components';
 import MyKivaSharingModal from '#src/components/MyKiva/MyKivaSharingModal';
+import MyKivaCard from '#src/components/MyKiva/MyKivaCard';
 
 const JOURNEY_MODAL_KEY = 'journey';
 const REFER_FRIEND_MODAL_KEY = 'refer-friend';
@@ -335,27 +289,10 @@ const isTitleFontSans = slide => {
 
 const titleColor = slide => {
 	const richTextUiSettingsData = getRichTextUiSettingsData(slide);
-	return richTextUiSettingsData.titleColor;
-};
-
-const titleClass = slide => {
-	let className = '';
-
-	if (isTitleFontSans(slide)) {
-		className += 'tw-font-sans';
-	}
-
-	if (titleColor(slide)) {
-		className += ` ${titleColor(slide)}`;
-	} else if (isNonBadgeSlide(slide)) {
-		className += ' tw-text-action';
-	}
-
-	if (!subTitle(slide)) {
-		className += ' tw-mb-1.5';
+	if (!richTextUiSettingsData.titleColor && isNonBadgeSlide(slide)) {
+		return 'tw-text-action';
 	}
-
-	return className;
+	return richTextUiSettingsData.titleColor;
 };
 
 const getUrlParamsFromString = string => {
@@ -395,12 +332,6 @@ const goToSecondaryCtaUrl = slide => {
 	}
 };
 
-const showSecondaryCta = slide => secondaryCtaText(slide);
-
-const overlayHeight = slide => {
-	return showSecondaryCta(slide) && isMobile.value ? '60%' : '50%';
-};
-
 const singleSlideWidth = computed(() => {
 	if (isMobile.value) {
 		return '90%';
@@ -421,15 +352,6 @@ const handleChange = interaction => {
 </script>
 
 <style lang="postcss" scoped>
-.journey-card {
-	box-shadow: 0 4px 12px 0 rgb(0 0 0 / 8%);
-	height: 382px;
-
-	@screen md {
-		height: 340px;
-	}
-}
-
 .journey-card-carousel :deep(.kv-carousel__controls) {
 	@apply tw-hidden md:tw-flex tw-justify-start tw-mt-2;
 }
@@ -441,8 +363,4 @@ const handleChange = interaction => {
 .journey-card-carousel:deep(div:first-child) {
 	@apply tw-gap-2 lg:tw-gap-4;
 }
-
-.slide-gradient {
-	background: linear-gradient(0deg, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 100%) 28%, rgb(0 0 0 / 0%) 100%);
-}
 </style>