@kiva/kv-components 3.91.1 → 3.92.1

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.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)
+
+
+### Features
+
+* dotted version for carousel controls ([#444](https://github.com/kiva/kv-ui-elements/issues/444)) ([a719d75](https://github.com/kiva/kv-ui-elements/commit/a719d75ce7622695668fe1467bf1129d916800c2))
+
+
+
+
+
 ## [3.91.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.91.0...@kiva/kv-components@3.91.1) (2024-08-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.91.1",
+  "version": "3.92.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -82,5 +82,5 @@
       "optional": true
     }
   },
-  "gitHead": "1a5c4e9cb95e6a1bd8fb33a423c267b6c46e570e"
+  "gitHead": "52085aeb1c92162fd732cd3fe4cb9839cdd49b16"
 }

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

@@ -30,7 +30,7 @@
 		</div>
 		<!-- Carousel Controls -->
 		<div
-			v-if="slideIndicatorCount > 1"
+			v-if="slideIndicatorCount > 1 && !isDotted"
 			class="kv-carousel__controls tw-flex
 			tw-justify-between md:tw-justify-center tw-items-center
 			tw-mt-4 tw-w-full"
@@ -75,6 +75,26 @@
 				<span class="tw-sr-only">Show next slide</span>
 			</button>
 		</div>
+		<!-- Dotted Controls -->
+		<div
+			v-else-if="slideIndicatorCount > 1"
+			class="kv-carousel__controls tw-flex tw-justify-center tw-items-center tw-gap-1.5 tw-mt-4 tw-w-full"
+		>
+			<button
+				v-for="slide in slideIndicatorCount"
+				:key="slide"
+				@click="goToSlide(slide - 1)"
+			>
+				<div
+					class="tw-rounded-full tw-border tw-transition tw-duration-500 tw-ease-in-out"
+					:class="[
+						{ 'tw-bg-black tw-border-black tw-h-1.5 tw-w-1.5': currentIndex === slide - 1 },
+						{ 'tw-bg-tertiary tw-border-tertiary tw-h-1 tw-w-1': currentIndex !== slide - 1 }
+					]"
+				>
+				</div>
+			</button>
+		</div>
 		<!-- Aside Buttons -->
 		<template v-if="asideControls">
 			<div
@@ -192,6 +212,13 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Dotted controls version of the carousel
+		 * */
+		isDotted: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: [
 		'change',

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

@@ -394,3 +394,17 @@ export const AsideControls = () => ({
 		</kv-carousel>
 	`,
 });
+
+export const Dotted = () => ({
+	components: {
+		KvCarousel,
+	},
+	template: `
+		<kv-carousel
+			style="max-width: 400px;"
+			is-dotted="true"
+		>
+			${defaultCarouselSlides}
+		</kv-carousel>
+	`,
+});