@kiva/kv-components 3.92.0 → 3.93.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.93.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.92.1...@kiva/kv-components@3.93.0) (2024-08-22)
+
+
+### Features
+
+* carousel circle effect ([c982be4](https://github.com/kiva/kv-ui-elements/commit/c982be4d088f18cb53b5d97b3071fa7dac72e1c6))
+
+
+
+
+
+## [3.92.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.92.0...@kiva/kv-components@3.92.1) (2024-08-19)
+
+
+### Bug Fixes
+
+* vite has some complications around importing json ([7a5ced1](https://github.com/kiva/kv-ui-elements/commit/7a5ced1172e319a83b12d674529c81977c95a993))
+
+
+
+
+
 # [3.92.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.91.1...@kiva/kv-components@3.92.0) (2024-08-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.92.0",
+  "version": "3.93.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -82,5 +82,5 @@
       "optional": true
     }
   },
-  "gitHead": "fb2c7d62581911858d5b04e6d1dd81f371981a03"
+  "gitHead": "56fc9a0c3f8657e2bc69c6acecf01009ec86ee57"
 }

package/utils/mapUtils.js

@@ -1,5 +1,3 @@
-import kvTokensPrimitives from '@kiva/kv-tokens/primitives.json';
-
 /**
  * Code to generate random coordinates
  * */
@@ -242,8 +240,8 @@ export function animationCoordinator(mapInstance, borrowerPoints) {
 
 		const flyToPoint = (index) => {
 			mapInstance.flyTo({
-			// These options control the ending camera position: centered at
-			// the target, at zoom level 9, and north up.
+				// These options control the ending camera position: centered at
+				// the target, at zoom level 9, and north up.
 				center: destinationPoints[index],
 				zoom: 4,
 				bearing: 0,
@@ -330,7 +328,7 @@ export const getLoansIntervals = (min, max, nbIntervals) => {
  * @param {Object} kvTokensPrimitives - kv tokens for colors
  * @returns {String} - color of the country
  * */
-export const getCountryColor = (lenderLoans, countriesData) => {
+export const getCountryColor = (lenderLoans, countriesData, kvTokensPrimitives) => {
 	const loanCountsArray = [];
 	countriesData.forEach((country) => {
 		loanCountsArray.push(country.value);

package/vue/KvCarousel.vue

@@ -8,7 +8,10 @@
 		<!-- Carousel Content -->
 		<div
 			class="tw-flex tw-gap-x-4"
-			:class="{ 'tw-mx-auto aside-controls-content': asideControls }"
+			:class="{
+				'tw-mx-auto aside-controls-content': asideControls,
+				'circle-carousel': inCircle
+			}"
 			@click.capture="onCarouselContainerClick"
 		>
 			<div
@@ -20,7 +23,7 @@
 				:aria-current="currentIndex === index ? 'true' : 'false'"
 				:aria-hidden="isAriaHidden(index)? 'true' : 'false'"
 				:tab-index="isAriaHidden(index) ? '-1' : false"
-				:class="{ 'tw-w-full': !multipleSlidesVisible || slideMaxWidth }"
+				:class="{ 'tw-w-full': !multipleSlidesVisible || slideMaxWidth, 'cirle-slide': inCircle }"
 				:style="slideMaxWidth ? `max-width:${slideMaxWidth}` :''"
 			>
 				<slot
@@ -219,6 +222,13 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Enables carousel slides to have a circle effect
+		 * */
+		inCircle: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: [
 		'change',
@@ -414,4 +424,23 @@ export default {
 		width: 82%;
 	}
 }
+
+.cirle-slide {
+	width: auto;
+}
+
+.cirle-slide.is-selected >>> img {
+	opacity: 1;
+	transform: scale(1);
+	max-width: 300px;
+}
+
+.cirle-slide:not(.is-selected) >>> img {
+	opacity: 0.5;
+	transform: scale(0.5);
+}
+
+.circle-carousel {
+	margin: 0 auto;
+}
 </style>

package/vue/KvMap.vue

@@ -513,7 +513,7 @@ export default {
 		countryStyle(feature) {
 			return {
 				color: kvTokensPrimitives.colors.white,
-				fillColor: getCountryColor(feature.lenderLoans, this.countriesData),
+				fillColor: getCountryColor(feature.lenderLoans, this.countriesData, kvTokensPrimitives),
 				weight: 1,
 				fillOpacity: 1,
 			};
@@ -545,7 +545,7 @@ export default {
 			const { feature } = layer;
 
 			layer.setStyle({
-				fillColor: getCountryColor(feature.lenderLoans, this.countriesData),
+				fillColor: getCountryColor(feature.lenderLoans, this.countriesData, kvTokensPrimitives),
 			});
 		},
 		circleMapClicked(countryIso) {

package/vue/stories/KvCarousel.stories.js

@@ -402,7 +402,23 @@ export const Dotted = () => ({
 	template: `
 		<kv-carousel
 			style="max-width: 400px;"
-			is-dotted="true"
+			:is-dotted="true"
+		>
+			${defaultCarouselSlides}
+		</kv-carousel>
+	`,
+});
+
+export const ThreeDimensional = () => ({
+	components: {
+		KvCarousel,
+	},
+	template: `
+		<kv-carousel
+			:embla-options="{ loop: false, align: 'center' }"
+			style="max-width: 600px;"
+			:is-dotted="true"
+			:in-circle="true"
 		>
 			${defaultCarouselSlides}
 		</kv-carousel>