@kiva/kv-components 3.16.0 → 3.18.0

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.18.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.17.0...@kiva/kv-components@3.18.0) (2023-05-05)
+
+
+### Features
+
+* "view loan" CTA ([aa10cf1](https://github.com/kiva/kv-ui-elements/commit/aa10cf17a1ca4978b97fc9541522f31d95cc886f))
+
+
+
+
+
+# [3.17.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.16.0...@kiva/kv-components@3.17.0) (2023-05-05)
+
+
+### Features
+
+* new loan card ported from recent successful Denali experiment ([0b0e5a0](https://github.com/kiva/kv-ui-elements/commit/0b0e5a0a575bc1c65ab71579f151a6d3cee5d8d7))
+
+
+
+
+
 # [3.16.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.15.0...@kiva/kv-components@3.16.0) (2023-05-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.16.0",
+  "version": "3.18.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -28,6 +28,7 @@
     "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
     "chromatic": "^5.9.2",
+    "css-loader": "^5.2.7",
     "eslint": "^7.26.0",
     "eslint-config-airbnb-base": "^14.1.0",
     "eslint-plugin-import": "^2.20.2",
@@ -36,7 +37,8 @@
     "jest": "^27.4.3",
     "jest-axe": "^5.0.1",
     "postcss": "^8.4.5",
-    "storybook-dark-mode": "^1.0.8",
+    "postcss-loader": "^4.3.0",
+    "style-loader": "^2.0.0",
     "tailwindcss": "^3.0.18",
     "vue": "^2.6.14",
     "vue-loader": "^15.9.6",
@@ -51,14 +53,17 @@
     "build": "echo No build needed for @kiva/kv-components."
   },
   "dependencies": {
+    "@chenfengyuan/vue-countdown": "^1.1.5",
     "@kiva/kv-tokens": "^2.7.0",
     "@mdi/js": "^5.9.55",
     "@vueuse/integrations": "^7.6.0",
     "aria-hidden": "^1.1.3",
     "change-case": "^4.1.2",
+    "date-fns": "^2.30.0",
     "embla-carousel": "^4.5.3",
     "focus-trap": "^6.7.2",
     "nanoid": "^3.1.23",
+    "numeral": "^2.0.6",
     "vue-demi": "^0.12.1"
   },
   "peerDependencies": {
@@ -70,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "c442c7a5a998b36082f5ed00addaa6c43c857d74"
+  "gitHead": "68db3fee0d19c1708e9ac97cf69e04ca97fadd62"
 }

package/postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
 	plugins: {
 		tailwindcss: {},
-		autoprefixer: {}
-	}
+		autoprefixer: {},
+	},
 };

package/tests/unit/specs/components/KvLendAmountButton.spec.js

@@ -0,0 +1,36 @@
+import { render } from '@testing-library/vue';
+import KvLendAmountButton from '../../../../vue/KvLendAmountButton.vue';
+
+describe('KvLendAmountButton', () => {
+	it('should display amount with a number input', async () => {
+		const { getByText } = render(KvLendAmountButton,
+			{
+				provide: {
+					apollo: {
+						query: () => Promise.resolve({}),
+					},
+				},
+				props: { amountLeft: 20.00 },
+			});
+
+		// Expect the button to exist and have correct amount
+		const buttonElement = getByText('Lend $20');
+		expect(buttonElement).toBeDefined();
+	});
+
+	it('should display amount with a string input', async () => {
+		const { getByText } = render(KvLendAmountButton,
+			{
+				provide: {
+					apollo: {
+						query: () => Promise.resolve({}),
+					},
+				},
+				props: { amountLeft: '20.00' },
+			});
+
+		// Expect the button to exist and have correct amount
+		const buttonElement = getByText('Lend $20');
+		expect(buttonElement).toBeDefined();
+	});
+});

package/tests/unit/specs/components/KvLoanProgressGroup.spec.js

@@ -0,0 +1,50 @@
+import { render } from '@testing-library/vue';
+import KvLoanProgressGroup from '../../../../vue/KvLoanProgressGroup.vue';
+
+describe('KvLoanProgressGroup', () => {
+	it('should display default message', () => {
+		const { getByText } = render(KvLoanProgressGroup);
+
+		getByText('funded!');
+	});
+
+	it('should display amount left', () => {
+		const { getByText } = render(KvLoanProgressGroup, {
+			props: {
+				moneyLeft: '12.34',
+			},
+		});
+
+		getByText('$12.34 to go!');
+	});
+
+	it('should use orange color with low amount', () => {
+		const { container } = render(KvLoanProgressGroup, {
+			props: {
+				moneyLeft: '12.34',
+			},
+		});
+
+		expect(container.getElementsByClassName('progress-group-amount-low').length).toBe(1);
+	});
+
+	it('should not use orange color with not low amount', () => {
+		const { container } = render(KvLoanProgressGroup, {
+			props: {
+				moneyLeft: '500',
+			},
+		});
+
+		expect(container.getElementsByClassName('progress-group-amount-low').length).toBe(0);
+	});
+
+	it('should pass percentage to progress bar', () => {
+		const { container } = render(KvLoanProgressGroup, {
+			props: {
+				progressPercent: 0.5,
+			},
+		});
+
+		expect(container.querySelector('[role="progressbar"]').getAttribute('aria-valuenow')).toBe('50');
+	});
+});

package/vue/.storybook/main.js

@@ -0,0 +1,45 @@
+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)'
+	],
+	addons: [
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-a11y',
+		'@storybook/addon-storysource',
+		'@storybook/addon-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'),
+							]
+						}
+					},
+				}
+			]
+		});
+		return config;
+	},
+}

package/vue/.storybook/package.json

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

package/vue/.storybook/preview.js

@@ -4,10 +4,13 @@ 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);
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -46,5 +49,6 @@ export const decorators = [(story) => ({
 	},
 	destroyed() {
 		channel.off('DARK_MODE', this.setTheme);
-	}
+	},
+	router: new VueRouter(),
 })];

package/vue/KvBorrowerImage.vue

@@ -0,0 +1,170 @@
+<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 '';
+			}
+			const w = width ? `w${Math.ceil(width)}` : '';
+			const 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>