@kiva/kv-components 3.83.1 → 3.84.0

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.84.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.83.2...@kiva/kv-components@3.84.0) (2024-07-08)
+
+
+### Features
+
+* aside controls variant added to carousel component ([#420](https://github.com/kiva/kv-ui-elements/issues/420)) ([d50ca9e](https://github.com/kiva/kv-ui-elements/commit/d50ca9eaa9023d437a5b9e385b95bfdecee7b122))
+
+
+
+
+
+## [3.83.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.83.1...@kiva/kv-components@3.83.2) (2024-06-25)
+
+
+### Bug Fixes
+
+* max dimensions on kvContentfulImg ([#419](https://github.com/kiva/kv-ui-elements/issues/419)) ([4496979](https://github.com/kiva/kv-ui-elements/commit/4496979544fa7d9d941111bff234aae58aa5ca16))
+
+
+
+
+
 ## [3.83.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.83.0...@kiva/kv-components@3.83.1) (2024-06-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.83.1",
+  "version": "3.84.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "fd9613c908f4eeaddb1a8395e864c5c0448c53af"
+  "gitHead": "5e75a9b1c10233bd13cd5b897dcbbb2990d03647"
 }

package/vue/KvCarousel.vue

@@ -2,11 +2,13 @@
 	<section
 		ref="rootEl"
 		class="kv-carousel tw-overflow-hidden tw-w-full"
+		:class="{ 'lg:tw-relative': asideControls }"
 		aria-label="carousel"
 	>
 		<!-- Carousel Content -->
 		<div
 			class="tw-flex tw-gap-x-4"
+			:class="{ 'tw-mx-auto aside-controls-content': asideControls }"
 			@click.capture="onCarouselContainerClick"
 		>
 			<div
@@ -32,6 +34,7 @@
 			class="kv-carousel__controls tw-flex
 			tw-justify-between md:tw-justify-center tw-items-center
 			tw-mt-4 tw-w-full"
+			:class="{ 'lg:tw-hidden': asideControls }"
 		>
 			<button
 				class="tw-text-primary
@@ -72,6 +75,50 @@
 				<span class="tw-sr-only">Show next slide</span>
 			</button>
 		</div>
+		<!-- Aside Buttons -->
+		<template v-if="asideControls">
+			<div
+				class="tw-hidden lg:tw-flex tw-absolute tw-h-full tw-top-0 tw-items-center"
+				style="background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); width: 8%;"
+			>
+				<button
+					class="tw-text-primary tw-bg-gray-100
+						tw-rounded-full
+						tw-h-6 tw-w-6 tw-ml-3
+						tw-flex tw-items-center tw-justify-center
+						disabled:tw-opacity-low disabled:tw-cursor-default"
+					:disabled="embla && !embla.canScrollPrev()"
+					@click="handleUserInteraction(previousIndex, 'click-left-arrow')"
+				>
+					<kv-material-icon
+						class="tw-w-4"
+						:icon="mdiArrowLeft"
+					/>
+					<span class="tw-sr-only">Show previous slide</span>
+				</button>
+			</div>
+			<div
+				class="tw-hidden lg:tw-flex tw-absolute tw-h-full
+					tw-top-0 tw-right-0 tw-items-center tw-justify-end tw-w-16"
+				style="background: linear-gradient(270deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); width: 8%;"
+			>
+				<button
+					class="tw-text-primary tw-bg-gray-100
+						tw-rounded-full
+						tw-h-6 tw-w-6 tw-mr-3
+						tw-flex tw-items-center tw-justify-center
+						disabled:tw-opacity-low disabled:tw-cursor-default"
+					:disabled="embla && !embla.canScrollNext()"
+					@click="handleUserInteraction(nextIndex, 'click-right-arrow')"
+				>
+					<kv-material-icon
+						class="tw-w-4"
+						:icon="mdiArrowRight"
+					/>
+					<span class="tw-sr-only">Show next slide</span>
+				</button>
+			</div>
+		</template>
 	</section>
 </template>
 
@@ -85,7 +132,12 @@ import {
 	nextTick,
 } from 'vue-demi';
 import EmblaCarousel from 'embla-carousel';
-import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
+import {
+	mdiChevronLeft,
+	mdiChevronRight,
+	mdiArrowLeft,
+	mdiArrowRight,
+} from '@mdi/js';
 import { throttle } from '../utils/throttle';
 
 import KvMaterialIcon from './KvMaterialIcon.vue';
@@ -133,6 +185,13 @@ export default {
 			type: String,
 			default: '',
 		},
+		/**
+		 * Aside controls version of the carousel
+		 * */
+		asideControls: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: [
 		'change',
@@ -301,6 +360,8 @@ export default {
 			rootEl,
 			mdiChevronLeft,
 			mdiChevronRight,
+			mdiArrowLeft,
+			mdiArrowRight,
 			embla,
 			slides,
 			currentIndex,
@@ -319,3 +380,11 @@ export default {
 	},
 };
 </script>
+
+<style scoped>
+.aside-controls-content {
+	@screen lg {
+		width: 82%;
+	}
+}
+</style>

package/vue/KvContentfulImg.vue

@@ -213,9 +213,22 @@ export default {
 
 		const buildUrl = (image = null, multiplier = 1) => {
 			let src = image && image.url ? `${image.url}?` : `${contentfulSrc.value}?`;
-			const imgWidth = image ? image.width : width.value;
-			const imgHeight = image ? image.height : height.value;
-
+			let imgWidth = image ? image.width : width.value;
+			let imgHeight = image ? image.height : height.value;
+			// The max contentful image size is 4000px so we have to
+			// impose a limit of 2000px here for both height and width
+			// so when we request the retina x2 image we don't go over the 4000px limit
+			let newMultiplier;
+			if (imgWidth >= 2000) {
+				newMultiplier = imgWidth / 1999;
+				imgWidth = 1999;
+				imgHeight = Math.round(imgHeight / newMultiplier);
+			}
+			if (imgHeight >= 2000) {
+				newMultiplier = imgHeight / 1999;
+				imgHeight = 1999;
+				imgWidth = Math.round(imgWidth / newMultiplier);
+			}
 			if (imgWidth) {
 				src += `w=${imgWidth * multiplier}`;
 			}

package/vue/stories/KvCarousel.stories.js

@@ -353,3 +353,44 @@ export const CustomStartIndex = () => ({
 		</kv-carousel>
 	`,
 });
+
+export const AsideControls = () => ({
+	components: {
+		KvCarousel,
+		KvButton,
+	},
+	template: `
+		<kv-carousel
+			:embla-options="{ loop: false }"
+			:multiple-slides-visible="true"
+			:aside-controls="true"
+			slides-to-scroll="visible"
+			class="tw-w-full"
+		>
+			<template #slide1>
+				${generateLoanCardTemplate(1)}
+			</template>
+			<template #slide2>
+				${generateLoanCardTemplate(2)}
+			</template>
+			<template #slide3>
+				${generateLoanCardTemplate(3)}
+			</template>
+			<template #slide4>
+				${generateLoanCardTemplate(4)}
+			</template>
+			<template #slide5>
+				${generateLoanCardTemplate(5)}
+			</template>
+			<template #slide6>
+				${generateLoanCardTemplate(6)}
+			</template>
+			<template #slide7>
+				${generateLoanCardTemplate(7)}
+			</template>
+			<template #slide8>
+				${generateLoanCardTemplate(8)}
+			</template>
+		</kv-carousel>
+	`,
+});

package/vue/stories/KvContentfulImg.stories.js

@@ -4,7 +4,7 @@ export default {
 	title: 'KvContentfulImg',
 	component: KvContentfulImg,
 	args: {
-		contentfulSrc: 'https://images.ctfassets.net/j0p9a6ql0rn7/2TWV32iioxapwjn26ZpigZ/84ac39a1396d6be9eea472cf8791faa7/Cynthia.png',
+		contentfulSrc: 'https://images.ctfassets.net/j0p9a6ql0rn7/35lkLRfbLxzFPlDVgA4aKI/c435630d811f9ad35ddfc88eaea22b08/Blog-import-1082518_us_shawn_16.jpg',
 		fallbackFormat: 'jpg',
 		width: 200,
 		height: null,
@@ -77,6 +77,7 @@ export const ResponsiveImageSet = (args, { argTypes }) => ({
 		/>
 	`,
 });
+
 ResponsiveImageSet.args = {
 	fit: 'fill',
 	focus: 'face',
@@ -168,3 +169,28 @@ export const WithCaption = (args, { argTypes }) => ({
 		/>
 	`,
 });
+
+export const GiantImage = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvContentfulImg,
+	},
+	template: `
+		<kv-contentful-img
+			:contentful-src="contentfulSrc"
+			:fallback-format="fallbackFormat"
+			:width="width"
+			:height="height"
+			alt="Descriptive alt text"
+			:loading="loading"
+			:fit="fit"
+			:focus="focus"
+		/>
+	`,
+});
+
+GiantImage.args = {
+	contentfulSrc: 'https://images.ctfassets.net/j0p9a6ql0rn7/7dVINOyAxRaXM8p6aq7p5s/9213f63ff10dec57c5f740c056afe8a8/gradient-hero-bg__1_.jpg',
+	width: 4000,
+	height: 2000,
+};