@kiva/kv-components 3.3.0 → 3.5.0

package/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.5.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.4.0...@kiva/kv-components@3.5.0) (2022-09-07)
+
+
+### Bug Fixes
+
+* height of indicator bar ([8908e44](https://github.com/kiva/kv-ui-elements/commit/8908e44da2d3edcfbc9bfca44144604ed255674b))
+
+
+### Features
+
+* add vertical tab button for new home page exp ([329e490](https://github.com/kiva/kv-ui-elements/commit/329e490a8df555b126c23e93f4ce69cd00eb7c35))
+* add vertical variant in tab ([a23c9d1](https://github.com/kiva/kv-ui-elements/commit/a23c9d1abd1ade6a2603d422bb0f2535e299d119))
+
+
+
+
+
+# [3.4.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.3.1...@kiva/kv-components@3.4.0) (2022-08-29)
+
+
+### Features
+
+* creating a global resuable component (KvAccordionItem) ([5bf7685](https://github.com/kiva/kv-ui-elements/commit/5bf76858508870f9055e680406a1167cdd68099c))
+
+
+
+
+
+## [3.3.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.3.0...@kiva/kv-components@3.3.1) (2022-08-26)
+
+
+### Bug Fixes
+
+* ensure ref is defined in exported methods ([3ab00ea](https://github.com/kiva/kv-ui-elements/commit/3ab00ea181ee2455925c2f8f01950b79c2ea7b09))
+
+
+
+
+
 # [3.3.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.2.0...@kiva/kv-components@3.3.0) (2022-08-10)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -68,5 +68,5 @@
       "optional": true
     }
   },
-  "gitHead": "a2d53f16ab9b5f1eeb174d372a7ac50bc9c9f691"
+  "gitHead": "09af63c2169df1b45e40de57569ce5b51b6141fc"
 }

package/utils/expander.js

@@ -0,0 +1,72 @@
+/* eslint-disable no-param-reassign */
+
+function setInitialStyle(el, { property, delay, easing }) {
+	el.style.overflow = 'hidden';
+	el.style.transition = `${property} ${delay}ms ${easing}`;
+}
+
+function unsetStyles(el, { property }) {
+	el.style[property] = null;
+	el.style.overflow = null;
+	el.style.transition = null;
+}
+
+export function expand(el, {
+	easing = 'ease',
+	delay = 500,
+	done = () => {},
+	from = 0,
+	property = 'height',
+}) {
+	// set initial styles
+	setInitialStyle(el, { property, delay, easing });
+
+	// need to measure the property, so first set the value to 'auto'
+	// then unset display:none from v-show
+	el.style[property] = 'auto';
+	el.style.display = null;
+
+	// measure the property
+	const propValue = window.getComputedStyle(el).getPropertyValue(property);
+
+	// set the property to the 'from' value
+	el.style[property] = from;
+
+	el.addEventListener('transitionend', function listener() {
+		unsetStyles(el, { property });
+		// finally, call the done callback after the transition
+		done();
+		el.removeEventListener('transitionend', listener, true);
+	}, true);
+
+	// hack to cause the browser to reflow
+	void el.offsetWidth; // eslint-disable-line no-void
+	// ...and set the property to the measured value on the next tick so it animates w/ css
+	el.style[property] = propValue;
+}
+
+export function collapse(el, {
+	easing = 'ease',
+	delay = 500,
+	done = () => {},
+	to = 0,
+	property = 'height',
+}) {
+	// set initial styles
+	setInitialStyle(el, { property, delay, easing });
+
+	// explicitly set the property value...
+	el.style[property] = window.getComputedStyle(el).getPropertyValue(property);
+
+	el.addEventListener('transitionend', function listener() {
+		unsetStyles(el, { property });
+		// finally, call the done callback after the transition
+		done();
+		el.removeEventListener('transitionend', listener, true);
+	}, true);
+
+	// hack to cause the browser to reflow
+	void el.offsetWidth; // eslint-disable-line no-void
+	// ...and set the property to the 'to' value on the next tick so it animates w/ css
+	el.style[property] = to;
+}

package/vue/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/vue/KvExpandable.vue

@@ -0,0 +1,84 @@
+<template>
+	<transition
+		@enter="enter"
+		@leave="leave"
+	>
+		<slot></slot>
+	</transition>
+</template>
+
+<script>
+import {
+	toRefs,
+} from 'vue-demi';
+import { expand, collapse } from '../utils/expander';
+
+export default {
+	props: {
+		property: {
+			type: String,
+			default: 'height',
+		},
+		delay: {
+			type: Number,
+			default: 500,
+		},
+		easing: {
+			type: String,
+			default: 'ease',
+		},
+		skipEnter: {
+			type: Boolean,
+			default: false,
+		},
+		skipLeave: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props) {
+		const {
+			property,
+			delay,
+			easing,
+			skipEnter,
+			skipLeave,
+		} = toRefs(props);
+
+		const enter = (el, done) => {
+			if (skipEnter.value) {
+				return done();
+			}
+
+			expand(el, {
+				property: property.value,
+				delay: delay.value,
+				easing: easing.value,
+				done,
+			});
+
+			return true;
+		};
+
+		const leave = (el, done) => {
+			if (skipLeave.value) {
+				return done();
+			}
+
+			collapse(el, {
+				property: property.value,
+				delay: delay.value,
+				easing: easing.value,
+				done,
+			});
+
+			return true;
+		};
+
+		return {
+			enter,
+			leave,
+		};
+	},
+};
+</script>

package/vue/KvTab.vue

@@ -1,8 +1,11 @@
 <template>
 	<button
 		:id="`kv-tab-${forPanel}`"
-		class="tw-text-h3 tw-mb-1.5 tw-whitespace-nowrap"
-		:class="{ 'hover:tw-text-action-highlight' : !isActive }"
+		class="tw-text-h3 tw-mb-1.5 tw-whitespace-nowrap tw-text-left"
+		:class="{ 'hover:tw-text-action-highlight' : !isActive,
+			'md:tw-border-l-2 tw-border-transparent md:tw-pl-2' : vertical,
+			'tw-text-action-highlight' : isActive && vertical
+		}"
 		role="tab"
 		:aria-selected="isActive"
 		:aria-controls="`kv-tab-panel-${forPanel}`"
@@ -39,6 +42,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		vertical: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
 		const {

package/vue/KvTabs.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div :class="vertical ? 'md:tw-flex' : ''">
 		<div
 			role="tablist"
 			class="
@@ -7,10 +7,13 @@
 				tw-gap-x-2.5 md:tw-gap-x-5 lg:tw-gap-x-6
 				tw-mb-3 lg:tw-mb-4
 			"
+			:class="{'md:tw-flex-col md:tw-mr-3' : vertical}"
 			@keydown="handleKeyDown($event)"
 		>
 			<!-- @slot Tab Navigation -->
-			<slot name="tabNav"></slot>
+			<slot
+				name="tabNav"
+			></slot>
 
 			<!-- indicator bar -->
 			<div
@@ -19,9 +22,12 @@
 					tw-bg-primary-inverse tw-rounded-full
 					tw-origin-left tw-transition-all tw-duration-300
 				"
+				:class="{ 'tw-hidden md:tw-block tw-top-0 md:tw-bg-action-highlight' : vertical}"
 				:style="`
-					width: ${selectedTabEl ? selectedTabEl.clientWidth : 0}px;
-					transform: ${selectedTabEl ? `translateX(${selectedTabEl.offsetLeft}px)` : null};
+					width: ${selectedTabEl && !vertical ? selectedTabEl.clientWidth : 3}px;
+					height: ${selectedTabEl && vertical ? `${selectedTabEl.clientHeight}px` : '0.25rem'};
+					transform: ${selectedTabEl && !vertical ? `translateX(${selectedTabEl.offsetLeft}px)`
+				: selectedTabEl ? `translateY(${selectedTabEl.offsetTop}px)` : null};
 				`"
 			></div>
 		</div>
@@ -65,6 +71,12 @@ import {
 } from 'vue-demi';
 
 export default {
+	props: {
+		vertical: {
+			type: Boolean,
+			default: false,
+		},
+	},
 	setup(props, { emit }) {
 		const tabContext = reactive({
 			selectedIndex: 0,

package/vue/KvTextInput.vue

@@ -240,6 +240,7 @@ export default {
 			styles,
 			inputAttrs,
 			inputListeners,
+			textInputRef,
 		};
 	},
 };

package/vue/stories/KvAccordionItem.stories.js

@@ -0,0 +1,24 @@
+import KvAccordionItem from '../KvAccordionItem.vue';
+
+export default {
+	title: 'KvAccordionItem',
+	component: KvAccordionItem,
+};
+
+const DefaultTemplate = () => ({
+	components: { KvAccordionItem },
+	template: `
+		<div style="padding: 20px;">
+			<kv-accordion-item id="accordian-test">
+				<template #header>
+					<h2>Accordion</h2>
+				</template>
+				<p>
+					"Hello, KvAccordion Contents!"
+				</p>
+			</kv-accordion-item>
+		</div>
+	`,
+});
+
+export const Default = DefaultTemplate.bind({});

package/vue/stories/KvTabs.stories.js

@@ -5,6 +5,9 @@ import KvTabPanel from '../KvTabPanel.vue';
 export default {
 	title: 'KvTabs',
 	component: KvTabs,
+	args: {
+		vertical: true,
+	},
 };
 
 export const DefaultTemplate = () => ({
@@ -57,6 +60,32 @@ export const InitialTabSelection = () => ({
 	},
 });
 
+export const VerticalOrientation = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvTabs, KvTab, KvTabPanel },
+	template: `
+		<kv-tabs @tab-changed="handleTabChanged" :vertical="vertical">
+			<template #tabNav>
+				<kv-tab :vertical="vertical" forPanel="demo-1-first">First</kv-tab>
+				<kv-tab :vertical="vertical" forPanel="demo-1-second">Second</kv-tab>
+				<kv-tab :vertical="vertical" forPanel="demo-1-third">Third</kv-tab>
+				<kv-tab :vertical="vertical" forPanel="demo-1-forth">Forth is longer</kv-tab>
+			</template>
+			<template #tabPanels>
+				<kv-tab-panel id="demo-1-first"><p>First Panel</p></kv-tab-panel>
+				<kv-tab-panel id="demo-1-second"><p>Second Panel has <br>longer<br>content</p></kv-tab-panel>
+				<kv-tab-panel id="demo-1-third"><p>Third Panel</p></kv-tab-panel>
+				<kv-tab-panel id="demo-1-forth"><p>Forth Panel</p></kv-tab-panel>
+			</template>
+		</kv-tabs>
+	`,
+	methods: {
+		handleTabChanged(index) {
+			console.log(index);
+		},
+	},
+});
+
 export const MultipleOnAPage = () => ({
 	components: { KvTabs, KvTab, KvTabPanel },
 	template: `