@kiva/kv-components 3.106.0 → 3.107.1

package/.eslintrc.cjs

@@ -7,6 +7,7 @@ module.exports = {
 		'../../.eslintrc.cjs',
 		'plugin:vue/recommended',
 	],
+	ignorePatterns: ["dist/*"],
 	plugins: [
 		'vue',
 	],

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.107.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.107.0...@kiva/kv-components@3.107.1) (2024-11-05)
+
+
+### Bug Fixes
+
+* add components to dist folder as well ([0b20c69](https://github.com/kiva/kv-ui-elements/commit/0b20c69ed132a9a46da040523c559a6d900143d1))
+
+
+
+
+
+# [3.107.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.106.0...@kiva/kv-components@3.107.0) (2024-11-05)
+
+
+### Features
+
+* compile kv-component utils ([7b41391](https://github.com/kiva/kv-ui-elements/commit/7b413912c3bcf2659e729072fe1705427a78c1ba))
+
+
+
+
+
 # [3.106.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.105.3...@kiva/kv-components@3.106.0) (2024-11-01)
 
 

package/dist/components/.storybook/main.js

@@ -0,0 +1,85 @@
+const path = require('path');
+
+const config = {
+	stories: [
+		'../stories/Styleguide.stories.js', // show the base styleguide first
+		'../stories/**/*.stories.mdx',
+		'../stories/**/*.stories.@(js|jsx|ts|tsx)'
+	],
+
+	addons: [
+		"@storybook/addon-links",
+		"@storybook/addon-essentials",
+		"@storybook/addon-a11y",
+		"@storybook/addon-storysource",
+		{
+			name: '@storybook/addon-styling-webpack',
+			options: {
+				rules: [
+					// Replaces existing CSS rules to support PostCSS
+					{
+						test: /\.css$/,
+						use: [
+							'style-loader',
+							{
+								loader: 'css-loader',
+								options: { importLoaders: 1 }
+							},
+							{
+								// Gets options from `postcss.config.js` in your project root
+								loader: 'postcss-loader',
+								options: { implementation: require.resolve('postcss') }
+							}
+						],
+					}
+				]
+			}
+		}
+	],
+
+	webpackFinal: async (config) => {
+		config.module.rules.push({
+			test: /\.mjs$/,
+			include: /node_modules/,
+			type: 'javascript/auto'
+		});
+		config.module.rules.push({
+			test: /\.postcss$/,
+			use: [
+				'style-loader',
+				{
+					loader: 'css-loader',
+					options: { importLoaders: 1, sourceMap: false },
+				},
+				{
+					loader: 'postcss-loader',
+					options: {
+						postcssOptions: {
+							plugins: [
+								require('tailwindcss'),
+								require('autoprefixer'),
+							]
+						}
+					},
+				}
+			]
+		});
+		config.resolve.alias = {
+			...config.resolve.alias,
+			'~/node_modules': path.resolve(__dirname, '../../../../node_modules/'),
+		};
+		return config;
+	},
+
+	framework: {
+		name: "@storybook/vue-webpack5",
+		options: {}
+	},
+
+	docs: {
+		autodocs: true,
+		defaultName: 'Kv Components',
+	}
+}
+
+export default config;

package/dist/components/.storybook/package.json

@@ -0,0 +1,3 @@
+{
+	"type": "commonjs"
+}

package/dist/components/.storybook/preview.js

@@ -0,0 +1,61 @@
+import './tailwind.css';
+import { addons } from '@storybook/preview-api';
+import KvThemeProvider from '../KvThemeProvider.vue';
+import { defaultTheme, darkTheme } from '@kiva/kv-tokens/configs/kivaColors.cjs';
+import Vue from 'vue';
+import VueCompositionApi from '@vue/composition-api';
+import VueRouter from 'vue-router';
+
+// Add vue composition api
+Vue.use(VueCompositionApi);
+
+Vue.use(VueRouter);
+
+const parameters = {
+	actions: { argTypesRegex: "^on[A-Z].*" },
+	controls: {
+		matchers: {
+			color: /(background|color)$/i,
+			date: /Date$/,
+		},
+	},
+	options: {
+		storySort: {
+			order: ['Base Styling', '*'],
+		},
+	},
+}
+
+// Listen for events from the dark mode plugin
+// https://github.com/hipstersmoothie/storybook-dark-mode#events
+const channel = addons.getChannel();
+
+// Wrap all stories with the kv-theme-provider component
+const decorators = [(story) => ({
+	components: { story, KvThemeProvider },
+	template: '<kv-theme-provider :theme="theme"><story /></kv-theme-provider>',
+	data() {
+		return {
+			theme: {}
+		}
+	},
+	methods: {
+		setTheme(darkMode) {
+			darkMode ? this.theme = darkTheme : this.theme = defaultTheme
+		}
+	},
+	mounted() {
+		channel.on('DARK_MODE', this.setTheme);
+	},
+	destroyed() {
+		channel.off('DARK_MODE', this.setTheme);
+	},
+	router: new VueRouter(),
+})];
+
+const preview = {
+	parameters,
+	decorators,
+};
+
+export default preview;

package/dist/components/.storybook/tailwind.css

@@ -0,0 +1,5 @@
+@import url('https://use.typekit.net/pmj7shs.css');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/dist/components/KvAccordionItem.vue

@@ -0,0 +1,130 @@
+<template>
+	<div
+		class="tw-border-b tw-border-tertiary tw-relative last:tw-border-b-0"
+	>
+		<button
+			class="tw-w-full tw-flex tw-justify-between tw-items-center tw-py-1.5 tw-px-0
+				tw-text-left disabled:tw-cursor-not-allowed disabled:tw-opacity-low
+				hover:tw-text-action-highlight focus:tw-text-action-highlight"
+			:disabled="disabled"
+			:aria-controls="`kv-accordion-${id}`"
+			:aria-expanded="isOpen ? 'true' : 'false'"
+			@click.prevent="toggle"
+		>
+			<span class="tw-flex-1">
+				<slot name="header"></slot>
+			</span>
+			<kv-material-icon
+				class="tw-h-3 tw-w-3 tw-transition tw-transform tw-duration-500 tw-ease"
+				:class="{ 'tw-rotate-180' : isOpen }"
+				:icon="mdiChevronDown"
+			/>
+		</button>
+		<kv-expandable>
+			<div
+				v-show="isOpen"
+				:id="`kv-accordion-${id}`"
+				:aria-hidden="isOpen ? 'false' : 'true'"
+			>
+				<slot></slot>
+			</div>
+		</kv-expandable>
+	</div>
+</template>
+
+<script>
+// Accordion a11y resources
+// https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html
+// https://www.aditus.io/patterns/accordion/
+// Future improvement
+// Currently the slot content is inside the button, which means h2, h3 etc. won't be
+// navigatable via headings. See https://daverupert.com/2019/12/why-details-is-not-an-accordion/
+// h2 + button // ✅ H1 will show up when navigating by headings
+// button + h2 // ❌ H1 will not show up when navigating by headings
+// Perhaps we could do some magic DOM reordering via this.$slots.header or
+// pass a prop like 'tag' that sets the parent node of the button. <accordion tag="h3">...
+
+import {
+	ref,
+	toRefs,
+} from 'vue-demi';
+import { mdiChevronDown } from '@mdi/js';
+import KvExpandable from './KvExpandable.vue';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+
+export default {
+	components: {
+		KvMaterialIcon,
+		KvExpandable,
+	},
+	props: {
+		/**
+	 * Unique id. used for a11y
+	* */
+		id: {
+			type: String,
+			required: true,
+			validator: (v) => v.length > 0 && !/\s/g.test(v), // must be a valid html5 id
+		},
+		/**
+	 	* Whether the body is shown initially
+		* */
+		open: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Whether the accordion can be toggled
+		* */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: [
+		'toggle',
+	],
+	setup(props, { emit }) {
+		const {
+			open,
+			disabled,
+		} = toRefs(props);
+
+		const isOpen = ref(open.value);
+
+		const toggle = () => {
+			if (!disabled.value) {
+				isOpen.value = !isOpen.value;
+				/**
+				 * Fires when the accordion has been toggled.
+				 * Contains an object with a boolean 'open' property of the current open
+				 * state of the accordion
+				 * @event toggle
+				 * @type {Event}
+				 */
+				emit('toggle', { open: isOpen.value });
+			}
+		};
+
+		const expand = () => {
+			if (!disabled.value) {
+				isOpen.value = true;
+			}
+		};
+
+		const collapse = () => {
+			if (!disabled.value) {
+				isOpen.value = false;
+			}
+		};
+
+		return {
+			collapse,
+			expand,
+			isOpen,
+			mdiChevronDown,
+			toggle,
+		};
+	},
+};
+</script>

package/dist/components/KvActivityRow.vue

@@ -0,0 +1,33 @@
+<template>
+	<div class="tw-flex tw-gap-x-1 tw-items-center">
+		<div>
+			<KvUserAvatar
+				:lender-name="activity.lenderName"
+				:lender-image-url="activity.lenderImage"
+				:is-small="true"
+			/>
+		</div>
+		<div>
+			<!-- eslint-disable vue/no-v-html -->
+			<p v-html="activity.text"></p>
+			<!-- eslint-enable -->
+		</div>
+	</div>
+</template>
+
+<script>
+import KvUserAvatar from './KvUserAvatar.vue';
+
+export default {
+	name: 'KvActivityRow',
+	components: {
+		KvUserAvatar,
+	},
+	props: {
+		activity: {
+			type: Object,
+			required: true,
+		},
+	},
+};
+</script>

package/dist/components/KvBorrowerImage.vue

@@ -0,0 +1,179 @@
+<template>
+	<picture
+		class="
+			tw-inline-block
+			tw-relative
+			tw-overflow-hidden
+			tw-w-full
+			tw-bg-black
+		"
+		:style="`padding-bottom: ${aspectRatio * 100}%;`"
+	>
+		<source
+			:srcset="srcset"
+			:sizes="sizes"
+		>
+		<img
+			v-if="hash"
+			class="
+				tw-absolute
+				tw-w-full
+				tw-h-full
+				tw-object-contain
+			"
+			:src="defaultUrl"
+			:alt="alt"
+			loading="lazy"
+		>
+	</picture>
+</template>
+
+<script>
+export default {
+	name: 'KvBorrowerImage',
+	props: {
+		/**
+		 * String to use as the alternative of this image for screen readers.
+		 */
+		alt: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * Number to use as the aspect ratio for this image. Defined as height / width.
+		 */
+		aspectRatio: {
+			type: Number,
+			default: 1,
+		},
+		/**
+		 * Size properties of the default image to use as a fallback.
+		 * Sample object:
+		 * {
+		 		width: 320,
+				faceZoom: 50, // optional
+			}
+		 */
+		defaultImage: {
+			type: Object,
+			required: true,
+		},
+		/**
+		 * String of the hash of the image, used to build the image urls.
+		 */
+		hash: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * Array of image objects containing their size and their intended viewport display width.
+		 * Sample image object:
+		 * {
+		 		width: 280, // width of the image at 1x
+				viewSize: 320, // viewport width at which this size should be displayed
+				faceZoom: 50, // optional
+	 		}
+		 */
+		images: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * The base path to source the image
+		 */
+		photoPath: {
+			type: String,
+			required: true,
+		},
+	},
+	computed: {
+		// Get the full url for the fallback image
+		defaultUrl() {
+			if (!this.hash) {
+				return '';
+			}
+			return this.getImgUrl({
+				...this.defaultImage,
+				height: this.defaultImage.width * this.aspectRatio,
+			});
+		},
+		// Get the 'sizes' string for the source element
+		sizes() {
+			if (!this.hash) {
+				return '';
+			}
+			return this.images.map(({ width, viewSize }) => {
+				if (viewSize) {
+					return `(min-width: ${viewSize}px) ${width}px`;
+				}
+				return `${width}px`;
+			}).join(', ');
+		},
+		// Get the 'srcset' string for the source element
+		srcset() {
+			if (!this.hash) {
+				return '';
+			}
+			return this.images.map(({ width, faceZoom }) => {
+				const height = width * this.aspectRatio;
+				const size = {
+					width,
+					height,
+					faceZoom,
+				};
+				const retinaSize = {
+					width: width * 2,
+					height: height * 2,
+					faceZoom,
+				};
+				return `${this.getSrcsetDef(size)}, ${this.getSrcsetDef(retinaSize)}`;
+			}).join(', ');
+		},
+	},
+	methods: {
+		getKivaImageUrl({
+			base = '/',
+			width,
+			height,
+			square,
+			faceZoom,
+			hash,
+			format = 'jpg',
+		} = {}) {
+			if (!hash) {
+				return '';
+			}
+			if (!width && !height && !square && !faceZoom) {
+				return '';
+			}
+			let w = '';
+			let h = '';
+			// If width and height are different, use w and h
+			if (width === height) {
+				// if height and width are the same, use square param
+				// eslint-disable-next-line no-param-reassign
+				square = width;
+			} else {
+				w = width ? `w${Math.ceil(width)}` : '';
+				h = height ? `h${Math.ceil(height)}` : '';
+			}
+			const s = square ? `s${Math.ceil(square)}` : '';
+			const fz = faceZoom ? `fz${Math.ceil(faceZoom)}` : '';
+
+			return `${base}${w}${h}${s}${fz}/${hash}.${format}`;
+		},
+		// Get the url for the loan image sized width by height
+		getImgUrl(size) {
+			return this.getKivaImageUrl({
+				...size,
+				base: this.photoPath,
+				hash: this.hash,
+			});
+		},
+		// Get a string to use in the srcset attribute as the definition for a single image size
+		getSrcsetDef(size) {
+			return `${this.getImgUrl(size)} ${size.width}w`;
+		},
+	},
+};
+</script>