@kiva/kv-components 3.107.0 → 3.107.1

package/dist/components/KvCartModal.vue

@@ -0,0 +1,365 @@
+<template>
+	<transition
+		enter-active-class="tw-transition-opacity tw-duration-300"
+		leave-active-class="tw-transition-opacity tw-duration-300"
+		enter-class="tw-opacity-0"
+		enter-to-class="tw-opacity-full"
+		leave-class="tw-opacity-full"
+		leave-to-class="tw-opacity-0"
+	>
+		<!-- the screen -->
+		<div
+			v-show="visible"
+			class="screen"
+			@click.stop.prevent="onScreenClick"
+		>
+			<div>
+				<div
+					class="container"
+				>
+					<div
+						ref="kvCartModal"
+						tabindex="-1"
+						data-test="kv-cart-modal"
+						class="modal"
+						aria-modal="true"
+						aria-label="Added to basket"
+						@click.stop
+					>
+						<!-- header -->
+						<div
+							class="
+								tw-flex
+								tw-p-2.5 md:tw-px-4 md:tw-pt-4 md:tw-pb-3.5
+							"
+						>
+							<div class="tw-flex tw-flex-grow tw-gap-1 tw-items-center">
+								<!-- header -->
+								<slot name="header">
+									<kv-material-icon
+										class="tw-w-4 tw-h-4 tw-text-brand"
+										:icon="mdiCheckCircle"
+									/>
+									<p class="tw-flex-1 tw-font-medium">
+										Added to basket
+									</p>
+								</slot>
+								<button
+									v-if="!preventClose"
+									class="
+										tw-grid tw-content-center tw-justify-center
+										tw-ml-auto
+										tw-w-6 tw-h-6 tw--m-2
+										hover:tw-text-action-highlight
+									"
+									@click.stop="hide('x-button')"
+								>
+									<kv-material-icon
+										class="tw-w-3 tw-h-3"
+										:icon="mdiClose"
+									/>
+									<span class="tw-sr-only">Close</span>
+								</button>
+							</div>
+						</div>
+
+						<!-- body -->
+						<div
+							id="kvCartModalBody"
+							ref="kvCartModalBody"
+							class="modal__body"
+						>
+							<div>
+								<kv-borrower-image
+									class="tw-rounded loan-image"
+									:alt="borrowerImage.alt"
+									:aspect-ratio="borrowerImage.aspectRatio"
+									:default-image="borrowerImage.defaultImage"
+									:hash="borrowerImage.hash"
+									:images="borrowerImage.images"
+									:photo-path="photoPath"
+								/>
+							</div>
+							<div class="tw-flex tw-items-center tw-justify-between tw-w-full tw-gap-1">
+								<div class="tw-flex tw-flex-col tw-h-full tw-justify-between">
+									<p class="tw-overflow-hidden tw-text-ellipsis tw-line-clamp-1">
+										{{ borrowerName }}
+									</p>
+									<p class="tw-p-1 tw-text-center tw-rounded tw-bg-secondary tw-text-h5 tw-w-max">
+										{{ borrowerCountry }}
+									</p>
+								</div>
+								<p> ${{ amount }}</p>
+							</div>
+						</div>
+
+						<!-- controls -->
+						<div
+							ref="controlsRef"
+							class="
+								tw-flex-shrink-0 tw-flex tw-justify-end tw-gap-x-2.5
+								tw-p-2.5 md:tw-px-4 md:tw-pb-4 tw-flex-col tw-gap-1
+							"
+						>
+							<kv-button
+								class="tw-w-full"
+								@click="handleClick('view-basket')"
+							>
+								View basket ({{ basketCount }})
+							</kv-button>
+							<kv-button
+								class="tw-w-full"
+								variant="secondary"
+								@click="handleClick('help-another-person')"
+							>
+								Help another person
+							</kv-button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</transition>
+</template>
+
+<script>
+import {
+	ref,
+	toRefs,
+	computed,
+	nextTick,
+	watch,
+	onBeforeUnmount,
+	onMounted,
+} from 'vue-demi';
+import { mdiClose, mdiCheckCircle } from '@mdi/js';
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
+import { hideOthers as makePageInert } from 'aria-hidden';
+import { lockScroll, unlockScroll } from '../utils/scrollLock';
+import { lockPrintSingleEl, unlockPrintSingleEl } from '../utils/printing';
+import KvButton from './KvButton.vue';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+import KvBorrowerImage from './KvBorrowerImage.vue';
+
+/**
+ * Based on KvLightbox functionality
+ * */
+
+export default {
+	components: {
+		KvMaterialIcon,
+		KvButton,
+		KvBorrowerImage,
+	},
+	props: {
+		/**
+		 * Whether the dialog is open or not
+		 * */
+		visible: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * The dialog has no close X button, clicking the screen does not close,
+		 * pressing ESC does not close.
+		 * */
+		preventClose: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * The number of loans in the basket
+		 * */
+		basketCount: {
+			type: Number,
+			default: 0,
+		},
+		/**
+		 * The loan added to the basket
+		 * */
+		addedLoan: {
+			type: Object,
+			default: () => ({}),
+		},
+		/**
+		 * The photo path for the borrower image
+		 * */
+		photoPath: {
+			type: String,
+			default: '',
+		},
+	},
+	emits: [
+		'cart-modal-closed',
+	],
+	setup(props, { emit }) {
+		const {
+			visible,
+			preventClose,
+			addedLoan,
+		} = toRefs(props);
+
+		const kvCartModal = ref(null);
+		const kvCartModalBody = ref(null);
+		const controlsRef = ref(null);
+
+		const trapElements = computed(() => [
+			kvCartModal.value, // This cart modal
+		]);
+		const {
+			activate: activateFocusTrap,
+			deactivate: deactivateFocusTrap,
+		} = useFocusTrap(trapElements, {
+			allowOutsideClick: true, // allow clicking outside the cart modal to close it
+		});
+
+		let makePageInertCallback = null;
+		let onKeyUp = null;
+
+		const hide = (closedBy = '') => {
+			// scroll any content inside the cart modal back to top
+			if (kvCartModal.value && kvCartModalBody.value) {
+				deactivateFocusTrap();
+				kvCartModalBody.value.scrollTop = 0;
+				unlockPrintSingleEl(kvCartModalBody.value);
+			}
+			unlockScroll();
+			if (makePageInertCallback) {
+				makePageInertCallback();
+				makePageInertCallback = null;
+			}
+			document.removeEventListener('keyup', onKeyUp);
+
+			/**
+			 * Triggered when the cart modal is closed
+			 * @event cart-modal-closed
+			 * @type {Event}
+			*/
+			emit('cart-modal-closed', { type: closedBy });
+		};
+
+		onKeyUp = (e) => {
+			if (!!e && e.key === 'Escape' && !preventClose.value) {
+				hide();
+			}
+		};
+
+		const onScreenClick = () => {
+			if (!preventClose.value) {
+				hide('background');
+			}
+		};
+
+		const show = () => {
+			if (visible.value) {
+				document.addEventListener('keyup', onKeyUp);
+
+				nextTick(() => {
+					if (kvCartModal.value && kvCartModalBody.value) {
+						activateFocusTrap();
+						makePageInertCallback = makePageInert(kvCartModal.value);
+						lockPrintSingleEl(kvCartModalBody.value);
+					}
+					lockScroll();
+				});
+			}
+		};
+
+		const borrowerName = computed(() => {
+			return addedLoan.value?.name ?? '';
+		});
+		const borrowerImage = computed(() => {
+			return {
+				alt: `Photo of ${borrowerName.value}`,
+				aspectRatio: 1,
+				defaultImage: { width: 300 },
+				hash: addedLoan.value.imageHash,
+				images: [
+					{
+						width: 300,
+					},
+				],
+			};
+		});
+		const borrowerCountry = computed(() => {
+			return addedLoan.value.country ?? '';
+		});
+
+		const amount = computed(() => {
+			return addedLoan.value.amount ?? '';
+		});
+
+		const handleClick = (cta) => {
+			hide(cta);
+		};
+
+		watch(visible, () => {
+			if (visible.value) {
+				show();
+			} else {
+				hide();
+			}
+		});
+
+		onMounted(() => {
+			if (visible.value) {
+				show();
+				setTimeout(() => {
+					// Automatically close the cart modal after 10 seconds
+					emit('cart-modal-closed', { type: 'time' });
+				}, 10000);
+			}
+		});
+
+		onBeforeUnmount(() => hide());
+
+		return {
+			mdiClose,
+			mdiCheckCircle,
+			onKeyUp,
+			onScreenClick,
+			hide,
+			show,
+			controlsRef,
+
+			handleClick,
+			borrowerName,
+			borrowerImage,
+			borrowerCountry,
+			amount,
+		};
+	},
+};
+</script>
+
+<style lang="postcss" scoped>
+.screen {
+	@apply tw-z-modal tw-fixed tw-inset-0;
+	background-color: rgb(0, 0, 0, 0.2);
+}
+
+.modal {
+	@apply tw-bg-primary md:tw-absolute md:tw-right-0 tw-w-full tw-rounded-b;
+	max-height: 90%;
+}
+
+.modal__body {
+	@apply tw-flex tw-gap-2 tw-px-2.5 md:tw-px-4;
+	height: 3.75rem;
+}
+
+.loan-image {
+	width: 3.75rem;
+}
+
+.container {
+	@apply tw-absolute tw-inset-0;
+}
+
+@screen md {
+	.modal {
+		max-width: 24.5rem;
+	}
+}
+
+</style>

package/dist/components/KvCheckbox.vue

@@ -0,0 +1,203 @@
+<template>
+	<div
+		:class="classes"
+		:style="styles"
+	>
+		<label
+			class="tw-inline-flex tw-items-center"
+			:class="{ 'tw-opacity-low': disabled }"
+			:for="uuid"
+		>
+			<input
+				v-bind="inputAttrs"
+				:id="uuid"
+				ref="checkboxRef"
+				class="tw-peer tw-appearance-none tw-w-max"
+				type="checkbox"
+				:checked="isChecked"
+				:value="value"
+				:disabled="disabled"
+				v-on="inputListeners"
+				@change.prevent="onChange"
+			>
+			<!-- checkbox square background -->
+			<div
+				class="
+					tw-w-3 tw-h-3 tw-mr-2
+					tw-flex-shrink-0
+					tw-rounded-sm
+					tw-border
+					tw-flex tw-justify-center tw-items-center tw-overflow-hidden
+					tw-transition-all tw-duration-100
+					peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action"
+				:class="{
+					'tw-bg-white' : !isChecked,
+					'tw-bg-action' : isChecked,
+					'tw-border-secondary' : !isChecked && valid,
+					'tw-border-action' : isChecked && valid,
+					'tw-border-danger' : !valid,
+				}"
+			>
+				<!-- checkbox icon  -->
+				<svg
+					v-if="isChecked"
+					class="tw-w-1.5 tw-h-auto"
+					viewBox="0 0 12 9"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<!-- eslint-disable max-len -->
+					<path
+						d="M3.99975 6.79988L1.66642 4.46655C1.40642 4.20655 0.993086 4.20655 0.733086 4.46655C0.473086 4.72655 0.473086 5.13988 0.733086 5.39988L3.52642 8.19322C3.78642 8.45322 4.20642 8.45322 4.46642 8.19322L11.5331 1.13322C11.7931 0.873216 11.7931 0.459883 11.5331 0.199883C11.2731 -0.0601172 10.8598 -0.0601172 10.5998 0.199883L3.99975 6.79988Z"
+						fill="white"
+					/>
+					<!-- eslint-enable max-len -->
+				</svg>
+			</div>
+			<!-- label -->
+			<div class="tw-flex-1 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action">
+				<slot></slot>
+			</div>
+		</label>
+	</div>
+</template>
+
+<script>
+import { nanoid } from 'nanoid';
+import {
+	onMounted,
+	ref,
+	toRefs,
+	watch,
+} from 'vue-demi';
+import { useAttrs } from '../utils/attrs';
+
+const emits = [
+	'change',
+	'update:modelValue',
+];
+
+/**
+ * Use as you would an <input type="checkbox" />
+ * Does not handle 'indeterminate' state at this time.
+*/
+
+export default {
+	inheritAttrs: false,
+
+	model: {
+		prop: 'modelValue',
+		event: 'update:modelValue',
+	},
+
+	props: {
+		/**
+		 * Whether the checkbox is checked or not
+		 * */
+		modelValue: {
+			type: [Boolean, Array],
+			default: false,
+		},
+		/**
+		 * Prevents the checkbox from being toggled or focused
+		 * */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Value of the checkbox if v-model is an array
+		 * */
+		value: {
+			type: [String, Boolean],
+			default: '',
+		},
+		/**
+		 * When set to false, visually indicates to the user that the contents of the input need
+		 * to be changed
+		 * */
+		valid: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	emits,
+	setup(props, context) {
+		const {
+			modelValue,
+			value,
+		} = toRefs(props);
+
+		const { emit } = context;
+		const uuid = ref(`kvc-${nanoid(10)}`);
+		const isChecked = ref(false);
+		const checkboxRef = ref(null);
+
+		const {
+			classes,
+			styles,
+			inputAttrs,
+			inputListeners,
+		} = useAttrs(context, emits);
+
+		const onChange = (event) => {
+			const inputChecked = event.target.checked;
+			let checkboxValue;
+
+			if (Array.isArray(modelValue.value)) {
+				// if the model is an array, add or remove our value from it
+				if (inputChecked) {
+					checkboxValue = [...modelValue.value, event.target.value];
+				} else {
+					checkboxValue = modelValue.value.filter((item) => item !== value.value);
+				}
+			} else {
+				checkboxValue = inputChecked;
+			}
+
+			// emit the change event to update the model
+			emit('change', checkboxValue);
+			emit('update:modelValue', checkboxValue);
+		};
+
+		const setChecked = () => {
+			if (Array.isArray(modelValue.value)) {
+				// if the model is array like <kv-checkbox v-model="['item1', 'item2']" value="item1">
+				isChecked.value = modelValue.value.includes(value.value);
+			} else {
+				// else it's a boolean like <kv-checkbox v-model="true">
+				isChecked.value = modelValue.value;
+			}
+		};
+
+		const focus = () => {
+			checkboxRef.focus();
+		};
+
+		const blur = () => {
+			checkboxRef.blur();
+		};
+
+		setChecked();
+		watch(modelValue, () => setChecked());
+		onMounted(() => {
+			uuid.value = `kvc-${nanoid(10)}`;
+		});
+
+		return {
+			uuid,
+			isChecked,
+			checkboxRef,
+			onChange,
+			setChecked,
+			focus,
+			blur,
+			classes,
+			styles,
+			inputAttrs,
+			inputListeners,
+		};
+	},
+};
+
+</script>

package/dist/components/KvChip.vue

@@ -0,0 +1,54 @@
+<template>
+	<div class="tw-inline-flex">
+		<button
+			class="
+			tw-bg-secondary
+			hover:tw-bg-tertiary
+			tw-items-center
+			tw-flex
+			tw-flex-row
+			tw-cursor-pointer
+			tw-whitespace-nowrap
+			tw-rounded
+			tw-h-2
+			tw-py-2
+			tw-px-2
+			tw-select-none
+			"
+			@click="handleClick"
+		>
+			<div
+				class="tw-text-base tw-pr-1"
+			>
+				<slot></slot>
+			</div>
+			<kv-material-icon
+				:icon="mdiClose"
+				class="tw-w-2 tw-h-2"
+				:from-sprite="true"
+			/>
+		</button>
+	</div>
+</template>
+<script>
+import { mdiClose } from '@mdi/js';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+
+export default {
+	name: 'KvChip',
+	components: { KvMaterialIcon },
+	emits: [
+		'click-chip',
+	],
+	setup() {
+		return {
+			mdiClose,
+		};
+	},
+	methods: {
+		handleClick() {
+			this.$emit('click-chip');
+		},
+	},
+};
+</script>