@kiva/kv-components 4.8.5 → 5.0.0

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

@@ -1,88 +0,0 @@
-const path = require('path');
-module.exports = {
-	stories: [
-		'../stories/Styleguide.stories.js', // show the base styleguide first
-		'../stories/**/*.stories.mdx',
-		'../stories/**/*.stories.@(js|jsx|ts|tsx)'
-	],
-
-	staticDirs: [
-		'../../../../dist',
-	],
-
-	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, url: false }
-							},
-							{
-								// 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/vue3-webpack5',
-		options: {}
-	},
-	core: {
-		builder: '@storybook/builder-webpack5'
-	},
-	docs: {
-		autodocs: true,
-		defaultName: 'Kv Components',
-	}
-};

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

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

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

@@ -1,53 +0,0 @@
-import './tailwind.css';
-import {
-	setup
-} from '@storybook/vue3';
-import { addons } from '@storybook/preview-api';
-import KvThemeProvider from '../KvThemeProvider.vue';
-import { defaultTheme, darkTheme } from '@kiva/kv-tokens/configs/kivaColors.cjs';
-
-setup((app) => {
-	// Mock analytics
-	app.directive('kv-track-event', () => { });
-});
-
-export 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
-export 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);
-	},
-})];

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

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

package/dist/components/KvAccordionItem.vue

@@ -1,130 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-<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

@@ -1,179 +0,0 @@
-<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>