@kiva/kv-components 4.5.1 → 4.7.0

package/vue/KvVerticalCarousel.vue

@@ -29,40 +29,69 @@
 		<!-- Carousel Controls -->
 		<div
 			class="kv-carousel__controls tw-flex
-			tw-justify-between md:tw-justify-center tw-items-center tw-gap-2
-			tw-mt-2 tw-w-full"
+			tw-items-center tw-gap-2
+			tw-mt-2 tw-w-full
+			tw-justify-between md:tw-justify-center"
 		>
-			<button
-				class="tw-text-primary
+			<div
+				class="tw-flex tw-gap-2 tw-w-full md:tw-w-auto"
+				:class="{'tw-justify-between md:tw-justify-center': !hasAutoplay}"
+			>
+				<button
+					class="tw-text-primary
 					tw-rounded-full
 					tw-border-2 tw-border-primary
 					tw-h-4 tw-w-4
 					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="mdiChevronUp"
-				/>
-				<span class="tw-sr-only">Show previous slide</span>
-			</button>
+					:disabled="embla && !embla.canScrollPrev()"
+					@click="handleUserInteraction(previousIndex, 'click-left-arrow')"
+				>
+					<kv-material-icon
+						class="tw-w-4"
+						:icon="mdiChevronUp"
+					/>
+					<span class="tw-sr-only">Show previous slide</span>
+				</button>
+				<button
+					class="tw-text-primary
+					tw-rounded-full
+					tw-border-2 tw-border-primary
+					tw-h-4 tw-w-4
+					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="mdiChevronDown"
+					/>
+					<span class="tw-sr-only">Show next slide</span>
+				</button>
+			</div>
+
 			<button
+				v-if="hasAutoplay"
 				class="tw-text-primary
 					tw-rounded-full
 					tw-border-2 tw-border-primary
 					tw-h-4 tw-w-4
 					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')"
+				@click.native.prevent="toggleAutoPlay()"
 			>
 				<kv-material-icon
+					v-if="isAutoplaying"
 					class="tw-w-4"
-					:icon="mdiChevronDown"
+					:icon="mdiPause"
 				/>
-				<span class="tw-sr-only">Show next slide</span>
+				<kv-material-icon
+					v-else
+					class="tw-w-4"
+					:icon="mdiPlay"
+				/>
+				<span class="tw-sr-only">Show previous slide</span>
 			</button>
 		</div>
 	</div>
@@ -70,9 +99,15 @@
 
 <script>
 import {
+	toRefs,
+} from 'vue-demi';
+import {
+	mdiPause,
+	mdiPlay,
 	mdiChevronUp,
 	mdiChevronDown,
 } from '@mdi/js';
+import { computed } from 'vue';
 import { carouselUtil } from '../utils/carousels';
 import KvMaterialIcon from './KvMaterialIcon.vue';
 
@@ -129,6 +164,10 @@ export default {
 		'interact-carousel',
 	],
 	setup(props, { emit, slots }) {
+		const {
+			autoplayOptions,
+		} = toRefs(props);
+
 		const {
 			componentSlotKeys,
 			currentIndex,
@@ -148,7 +187,12 @@ export default {
 			toggleAutoPlay,
 		} = carouselUtil(props, { emit, slots }, { axis: 'y' });
 
+		const hasAutoplay = computed(() => {
+			return Object.keys(autoplayOptions.value).length !== 0;
+		});
+
 		return {
+			hasAutoplay,
 			componentSlotKeys,
 			currentIndex,
 			embla,
@@ -156,6 +200,8 @@ export default {
 			handleUserInteraction,
 			isAriaHidden,
 			isAutoplaying,
+			mdiPause,
+			mdiPlay,
 			mdiChevronDown,
 			mdiChevronUp,
 			nextIndex,

package/vue/stories/KvCarousel.stories.js

@@ -1,3 +1,4 @@
+import { watch } from 'vue';
 import KvCarousel from '../KvCarousel.vue';
 import KvLoadingSpinner from '../KvLoadingSpinner.vue';
 import KvButton from '../KvButton.vue';
@@ -444,14 +445,12 @@ export const AutoPlayButton = () => ({
 	components: {
 		KvCarousel,
 	},
-	data() {
-		return {
-			isPlaying: false,
-		};
-	},
+	data: () => ({
+		isAutoplaying: false,
+	}),
 	mounted() {
-		this.$nextTick(() => {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		watch(() => this.$refs?.sampleCarousel?.isAutoplaying, (newValue) => {
+			this.isAutoplaying = newValue;
 		});
 	},
 	template: `
@@ -461,34 +460,20 @@ export const AutoPlayButton = () => ({
 				style="max-width: 400px;"
 				:embla-options="{ loop: false }"
 				:autoplay-options="{ playOnInit: true, delay: 3000 }"
-				@interact-carousel="carouselInteraction"
 			>
 				${defaultCarouselSlides}
 			</kv-carousel>
-			<a href="#" @click.native.prevent="toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
+			<a href="#" @click.native.prevent="$refs.sampleCarousel.toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
 			<br/>
-			<p>AutoPlay is: {{ isPlaying ? 'ON' : 'OFF' }}</p>
+			<p>AutoPlay is: {{ isAutoplaying ? 'ON' : 'OFF' }}</p>
 		</div>
 	`,
-	methods: {
-		toggleAutoPlay() {
-			this.$refs.sampleCarousel.toggleAutoPlay();
-		},
-		carouselInteraction() {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
-		},
-	},
 });
 
 export const Fade = () => ({
 	components: {
 		KvCarousel,
 	},
-	mounted() {
-		this.$nextTick(() => {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
-		});
-	},
 	template: `
 		<div>
 			<kv-carousel

package/vue/stories/KvLendCta.stories.js

@@ -164,3 +164,169 @@ export const ViewLoanFunded = story({
 	kvTrackFunction,
 	showViewLoan: true,
 });
+
+export const WithPresetOptions = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		name: 'John',
+		unreservedAmount: '150.00',
+		borrowerCount: 1,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsGroup = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '150.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsEqualThanLastAmount = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '75.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLessThanLastAmount = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '50.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLessThan25 = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '10.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLessThan50 = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '40.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLessThan100 = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '80.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLessThan200 = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '190.00',
+		borrowerCount: 2,
+	},
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsHugeAmount = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '12850.00',
+	},
+	kvTrackFunction,
+	enableHugeAmount: true,
+	isVisitor: false,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsLoading = story({
+	isLoading: true,
+	kvTrackFunction,
+	loan: {
+		id: 1,
+		unreservedAmount: '150.00',
+		borrowerCount: 2,
+	},
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsAdding = story({
+	isLoading: false,
+	isAdding: true,
+	kvTrackFunction,
+	loan: {
+		id: 1,
+		unreservedAmount: '150.00',
+		borrowerCount: 2,
+	},
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsBasketed = story({
+	isLoading: false,
+	loan: { id: 1 },
+	basketItems: [
+		{
+			__typename: 'LoanReservation',
+			id: 1,
+		},
+	],
+	showPresetAmounts: true,
+	kvTrackFunction,
+});
+
+export const WithPresetOptionsBasketedWithSecondaryAction = story({
+	isLoading: false,
+	loan: { id: 1 },
+	basketItems: [
+		{
+			__typename: 'LoanReservation',
+			id: 1,
+		},
+	],
+	externalLinks: true,
+	kvTrackFunction,
+	secondaryButtonHandler,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsFunded = story({
+	isLoading: false,
+	loan: { status: 'funded' },
+	kvTrackFunction,
+	showPresetAmounts: true,
+});
+
+export const WithPresetOptionsNonActionable = story({
+	isLoading: false,
+	loan: { status: 'refunded' },
+	kvTrackFunction,
+	showPresetAmounts: true,
+});

package/vue/stories/KvVerticalCarousel.stories.js

@@ -1,3 +1,4 @@
+import { watch } from 'vue';
 import KvVerticalCarousel from '../KvVerticalCarousel.vue';
 import KvButton from '../KvButton.vue';
 
@@ -186,14 +187,12 @@ export const AutoPlayButton = () => ({
 	components: {
 		KvVerticalCarousel,
 	},
-	data() {
-		return {
-			isPlaying: false,
-		};
-	},
+	data: () => ({
+		isAutoplaying: false,
+	}),
 	mounted() {
-		this.$nextTick(() => {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		watch(() => this.$refs?.sampleCarousel?.isAutoplaying, (newValue) => {
+			this.isAutoplaying = newValue;
 		});
 	},
 	template: `
@@ -203,34 +202,21 @@ export const AutoPlayButton = () => ({
 				style="max-width: 400px;"
 				:embla-options="{ loop: false }"
 				:autoplay-options="{ playOnInit: true, delay: 3000 }"
-				@interact-carousel="carouselInteraction"
 			>
 				${defaultCarouselSlides}
 			</kv-vertical-carousel>
-			<a href="#" @click.native.prevent="toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
+			<a href="#" @click.native.prevent="$refs.sampleCarousel.toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
 			<br/>
-			<p>AutoPlay is: {{ isPlaying ? 'ON' : 'OFF' }}</p>
+			<p>AutoPlay is: {{ isAutoplaying ? 'ON' : 'OFF' }}</p>
 		</div>
 	`,
-	methods: {
-		toggleAutoPlay() {
-			this.$refs.sampleCarousel.toggleAutoPlay();
-		},
-		carouselInteraction() {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
-		},
-	},
 });
 
+/** Fade really only works when the carousel displays 1 slide at a time, this story is wonky as expected */
 export const Fade = () => ({
 	components: {
 		KvVerticalCarousel,
 	},
-	mounted() {
-		this.$nextTick(() => {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
-		});
-	},
 	template: `
 		<div>
 			<kv-vertical-carousel