Merge pull request #5881 from kiva/MP-1394_my_kiva_carousel_variation

feat: new my kiva carousel variation

Author: dyersituations

.storybook/stories/JourneyCardCarousel.stories.js

@@ -0,0 +1,44 @@
+import JourneyCardCarousel from '#src/components/Contentful/JourneyCardCarousel.vue';
+
+export default {
+	title: 'MyKiva/JourneyCardCarousel',
+	component: JourneyCardCarousel,
+};
+
+const slideData = {
+	title: 'Women’s equality',
+	subtitle: 'Continue challenge',
+	badgeUrl: '//images.ctfassets.net/j0p9a6ql0rn7/3dAEh0zYSkqK5Up5q8Flv8/70d21f8db5f93b20be1581ef333dc60e/Women_10.svg',
+	backgroundImg: 'https://images.ctfassets.net/j0p9a6ql0rn7/7mY5ZujL9UfbluRkVkHgkX/5ec83a74e7c1dc387f3fa35af34f5243/mg-hppromo-1-wxga-retina.jpg',
+	primaryCtaText: 'Lend to a woman',
+	primaryCtaUrl: '/lend-by-category',
+	secondaryCtaText: 'Learn more',
+	secondaryCtaUrl: '/about',
+};
+
+const content = {
+	slides: [
+		{ ...slideData },
+		{ ...slideData, secondaryCtaText: '', },
+		{ ...slideData },
+		{ ...slideData },
+		{ ...slideData },
+	],
+};
+
+const story = (args = {}) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { JourneyCardCarousel },
+		setup() { return { args }; },
+		template: `
+			<div style="max-width: 1200px;">
+				<journey-card-carousel v-bind="args" />
+			</div>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({ content });

src/components/Contentful/JourneyCardCarousel.vue

@@ -0,0 +1,122 @@
+<template>
+	<div>
+		<KvCarousel
+			:embla-options="{
+				loop: false,
+				align: slidesAligmment,
+				slidesToScroll,
+			}"
+			:multiple-slides-visible="true"
+			class="journey-card-carousel tw-w-full md:tw-overflow-visible"
+		>
+			<template
+				v-for="(slide, index) in carouselSlides"
+				#[`slide${index}`]
+				:key="index"
+			>
+				<div
+					class="tw-w-full tw-relative tw-rounded tw-bg-cover tw-bg-center journey-card"
+					:style="{ backgroundImage: `url(${backgroundImg(slide)})` }"
+				>
+					<div class="tw-absolute tw-w-full tw-bottom-1.5 tw-px-1.5">
+						<div class="tw-flex tw-items-center tw-gap-1 tw-w-full tw-mb-1.5">
+							<img
+								class="tw-h-6"
+								:src="badgeUrl(slide)"
+							>
+							<div class="tw-text-primary-inverse">
+								<h2 class="tw-text-h3">
+									{{ title(slide) }}
+								</h2>
+								<p
+									v-if="subTitle(slide)"
+									class="tw-text-small"
+								>
+									{{ subTitle(slide) }}
+								</p>
+							</div>
+						</div>
+						<div class="tw-flex tw-flex-col md:tw-flex-row tw-gap-1.5 md:tw-gap-2.5">
+							<button
+								v-if="secondaryCtaText(slide) && secondaryCtaUrl(slide)"
+								:to="secondaryCtaUrl(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
+								:to="primaryCtaUrl(slide)"
+								variant="secondary"
+							>
+								{{ primaryCtaText(slide) }}
+							</KvButton>
+						</div>
+					</div>
+				</div>
+			</template>
+		</KvCarousel>
+	</div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import useIsMobile from '#src/composables/useIsMobile';
+import { MOBILE_BREAKPOINT } from '#src/composables/useBadgeModal';
+import { KvCarousel, KvButton } from '@kiva/kv-components';
+
+const props = defineProps({
+	content: {
+		type: Object,
+		default: () => ({}),
+	},
+});
+
+const { isMobile } = useIsMobile(MOBILE_BREAKPOINT);
+
+const carouselSlides = computed(() => props.content?.slides || []); // TODO: replace with Contentful data
+
+const slidesAligmment = computed(() => {
+	return isMobile.value ? 'start' : 'center';
+});
+
+const slidesToScroll = computed(() => {
+	return isMobile.value ? 1 : 2;
+});
+
+const title = slide => slide?.title || '';
+const subTitle = slide => slide?.subtitle || '';
+const badgeUrl = slide => slide?.badgeUrl || '';
+const backgroundImg = slide => slide?.backgroundImg || '';
+const primaryCtaText = slide => slide?.primaryCtaText || '';
+const primaryCtaUrl = slide => slide?.primaryCtaUrl || '';
+const secondaryCtaText = slide => slide?.secondaryCtaText || '';
+const secondaryCtaUrl = slide => slide?.secondaryCtaUrl || '';
+</script>
+
+<style lang="postcss" scoped>
+.journey-card {
+	width: 322px;
+	height: 402px;
+
+	@screen md {
+		width: 520px;
+		height: 390px;
+	}
+}
+
+.journey-card-carousel:deep(.kv-carousel__controls) {
+	@apply tw-hidden md:tw-flex tw-gap-x-4 tw-py-1.5 tw-w-full tw-overflow-visible;
+}
+
+.journey-card-carousel:deep(.kv-carousel__controls > button) {
+	@apply tw-w-5 tw-h-5 tw-border-0;
+
+	box-shadow: 0 4px 12px 0 rgb(0 0 0 / 8%);
+}
+
+.journey-card-carousel:deep(.kv-carousel__controls > div) {
+	@apply tw-hidden;
+}
+</style>