@kiva/kv-components 0.20.3 → 0.21.1

package/CHANGELOG.md

@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.21.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@0.21.0...@kiva/kv-components@0.21.1) (2021-09-28)
+
+
+### Bug Fixes
+
+* **KvButton:** prevent underline on focus when button is an anchor tag ([10199ba](https://github.com/kiva/kv-ui-elements/commit/10199badc4bec6ae0badc420df5b0c2d7fed59e3))
+* Use themable class names. Change to low-opacity instead of text-color for disabled state. ([6aa9f0d](https://github.com/kiva/kv-ui-elements/commit/6aa9f0dc9d0952e172848fdbd834fecb94cd0bc2))
+
+
+
+
+
+# [0.21.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@0.20.5...@kiva/kv-components@0.21.0) (2021-09-23)
+
+
+### Features
+
+* **KvButton:** Add active state prop and styling ([5c97148](https://github.com/kiva/kv-ui-elements/commit/5c9714835cea5536f7fc88b36483f691b5cba9a3))
+
+
+
+
+
+## [0.20.5](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@0.20.4...@kiva/kv-components@0.20.5) (2021-09-23)
+
+
+### Bug Fixes
+
+* Remove unnecessary lightbox class and webkit fix, make lightbox stories initialize with open lightboxes for better visual diffs ([#117](https://github.com/kiva/kv-ui-elements/issues/117)) ([1aa4f33](https://github.com/kiva/kv-ui-elements/commit/1aa4f33c1d9425874e54058930a753d7aab6773e))
+
+
+
+
+
+## [0.20.4](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@0.20.3...@kiva/kv-components@0.20.4) (2021-09-23)
+
+
+### Bug Fixes
+
+* Fix lightboxes being cut off vertically on mobile ([#116](https://github.com/kiva/kv-ui-elements/issues/116)) ([23dd4d9](https://github.com/kiva/kv-ui-elements/commit/23dd4d91ba9aa4178644afe1cbd2bdf98de0d05a))
+
+
+
+
+
 ## [0.20.3](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@0.20.2...@kiva/kv-components@0.20.3) (2021-09-23)
 
 **Note:** Version bump only for package @kiva/kv-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "0.20.3",
+  "version": "0.21.1",
   "publishConfig": {
     "access": "public"
   },
@@ -53,5 +53,5 @@
     "vue": "^2.6.12",
     "vue-focus-lock": "^1.4.1"
   },
-  "gitHead": "67d65271953f2e9d6d96309dde6051160634bdff"
+  "gitHead": "784234382fc9635832d775c9c32470dcdb056bb4"
 }

package/vue/.storybook/preview.js

@@ -28,7 +28,7 @@ export const decorators = [(story) => ({
 	template: '<kv-theme-provider :theme="theme"><story /></kv-theme-provider>',
 	data() {
 		return {
-			theme: ''
+			theme: {}
 		}
 	},
 	methods: {

package/vue/KvButton.vue

@@ -6,7 +6,7 @@
 		:href="href"
 		:type="computedType"
 		:disabled="isDisabled"
-		class="hover:tw-no-underline tw-inline-block"
+		class="hover:tw-no-underline focus:tw-no-underline tw-inline-block"
 		:class="{
 			'tw-opacity-low': state === 'disabled',
 			'tw-pointer-events-none': state === 'loading' || isDisabled
@@ -18,18 +18,7 @@
 			ref="buttonInnerRef"
 			class="tw-inline-flex tw-w-full tw-justify-center tw-items-center tw-rounded
 				tw-min-h-6 tw-relative tw-overflow-hidden tw-border tw-font-medium"
-			:class="{
-				'tw-bg-action hover:tw-bg-action-highlight tw-text-primary-inverse tw-border-action hover:tw-border-action-highlight'
-					: variant === 'primary',
-				'tw-bg-primary hover:tw-bg-secondary tw-text-primary tw-border-tertiary hover:tw-border-primary'
-					: variant === 'secondary',
-				'tw-bg-danger hover:tw-bg-danger-highlight tw-text-primary-inverse tw-border-danger hover:tw-border-danger-highlight'
-					: variant === 'danger',
-				'tw-bg-primary-inverse tw-text-primary-inverse tw-border-primary hover:tw-border-secondary'
-					: variant === 'link',
-				'tw-bg-primary hover:tw-bg-secondary tw-text-primary tw-border-transparent'
-					: variant === 'ghost',
-			}"
+			:class="computedClass"
 		>
 			<!-- eslint-enable max-len -->
 			<template v-if="state === 'loading'">
@@ -94,13 +83,13 @@ export default {
 		},
 		/**
 		 * State of the button
-		 * `'' (default), disabled, loading`
+		 * `'' (default), active, disabled, loading`
 		 * */
 		state: {
 			type: String,
 			default: '',
 			validator(value) {
-				return ['', 'disabled', 'loading'].includes(value);
+				return ['', 'active', 'disabled', 'loading'].includes(value);
 			},
 		},
 	},
@@ -118,6 +107,53 @@ export default {
 					return 'white';
 			}
 		},
+		computedClass() {
+			let classes = '';
+			switch (this.variant) {
+				case 'primary':
+				default:
+					classes = 'tw-text-primary-inverse';
+					if (this.state === 'active') {
+						classes = `${classes} tw-bg-action-highlight tw-border-action-highlight`;
+					} else {
+						classes = `${classes} tw-bg-action hover:tw-bg-action-highlight tw-border-action hover:tw-border-action-highlight`;
+					}
+					break;
+				case 'secondary':
+					classes = 'tw-text-primary';
+					if (this.state === 'active') {
+						classes = `${classes} tw-bg-secondary tw-border-primary`;
+					} else {
+						classes = `${classes} tw-bg-primary hover:tw-bg-secondary tw-border-tertiary hover:tw-border-primary`;
+					}
+					break;
+				case 'danger':
+					classes = 'tw-text-primary-inverse';
+					if (this.state === 'active') {
+						classes = `${classes} tw-bg-danger-highlight tw-border-danger-highlight`;
+					} else {
+						classes = `${classes} tw-bg-danger hover:tw-bg-danger-highlight tw-border-danger hover:tw-border-danger-highlight`;
+					}
+					break;
+				case 'link':
+					classes = 'tw-bg-primary-inverse tw-text-primary-inverse';
+					if (this.state === 'active') {
+						classes = `${classes} tw-border-secondary`;
+					} else {
+						classes = `${classes} tw-border-primary hover:tw-border-secondary`;
+					}
+					break;
+				case 'ghost':
+					classes = 'tw-text-primary tw-border-transparent';
+					if (this.state === 'active') {
+						classes = `${classes} tw-bg-secondary`;
+					} else {
+						classes = `${classes} tw-bg-primary hover:tw-bg-secondary`;
+					}
+					break;
+			}
+			return classes;
+		},
 		isDisabled() {
 			return this.state === 'disabled' || this.state === 'loading';
 		},

package/vue/KvCarousel.vue

@@ -33,11 +33,12 @@
 			tw-mt-4 tw-w-full"
 		>
 			<button
-				class="tw-text-gray-800 disabled:tw-text-gray-300
+				class="tw-text-primary
 					tw-rounded-full
-					tw-border-2 tw-border-text-gray-800
+					tw-border-2 tw-border-primary
 					tw-h-4 tw-w-4
-					tw-flex tw-items-center tw-justify-center"
+					tw-flex tw-items-center tw-justify-center
+					disabled:tw-opacity-low disabled:tw-cursor-default"
 				:disabled="embla && !embla.canScrollPrev()"
 				@click="handleUserInteraction(previousIndex, 'click-left-arrow')"
 			>
@@ -51,11 +52,12 @@
 				{{ currentIndex + 1 }}/{{ slideIndicatorListLength() }}
 			</div>
 			<button
-				class="tw-text-gray-800 disabled:tw-text-gray-300
+				class="tw-text-primary
 					tw-rounded-full
-					tw-border-2 tw-border-text-gray-800
+					tw-border-2 tw-border-primary
 					tw-h-4 tw-w-4
-					tw-flex tw-items-center tw-justify-center"
+					tw-flex tw-items-center tw-justify-center
+					disabled:tw-opacity-low disabled:tw-cursor-default"
 				:disabled="embla && !embla.canScrollNext()"
 				@click="handleUserInteraction(nextIndex, 'click-right-arrow')"
 			>

package/vue/KvLightbox.vue

@@ -17,7 +17,6 @@
 				tw-bg-black
 				tw-bg-opacity-[75%]
 			"
-			:class="{'tw-min-h-screen' : variant === 'lightbox'}"
 			@click.stop.prevent="onScreenClick"
 		>
 			<focus-lock
@@ -44,17 +43,19 @@
 							tw-bg-primary
 							tw-flex tw-flex-col
 							tw-mx-auto md:tw-my-auto
+
 						"
 						:class="{
+							'tw-w-full md:tw-w-auto' : variant === 'lightbox',
 							'tw-mt-auto md:tw-my-auto' : variant === 'lightbox',
 							'tw-min-h-half-screen md:tw-min-h-0' : variant === 'lightbox',
 							'tw-rounded-t md:tw-rounded' : variant === 'lightbox',
 							'tw-my-auto tw-rounded' : variant === 'alert',
 						}"
-						style="max-width: 55.55rem; max-height: 90vh"
+						style="max-width: 55.55rem; max-height: 90%"
 						aria-modal="true"
 						:aria-label="title ? title : null"
-						:aria-describedby="variant === 'alert' ? kvLightboxBody : null"
+						:aria-describedby="variant === 'alert' ? 'kvLightboxBody' : null"
 						:role="role"
 						@click.stop
 					>

package/vue/stories/KvButton.stories.js

@@ -95,6 +95,11 @@ StateLoading.args = {
 	state: 'loading',
 };
 
+export const StateActive = VariantTemplate.bind({});
+StateActive.args = {
+	state: 'active',
+};
+
 export const StateDisabled = VariantTemplate.bind({});
 StateDisabled.args = {
 	state: 'disabled',

package/vue/stories/KvLightbox.stories.js

@@ -18,7 +18,7 @@ export default {
 		},
 	},
 	args: {
-		visible: false,
+		visible: true,
 		title: '',
 		variant: 'lightbox',
 		preventClose: false,
@@ -56,6 +56,75 @@ const DefaultTemplate = (args, { argTypes }) => ({
 	},
 });
 
+const VeryShortTemplate = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvLightbox, KvButton },
+	template: `
+		<div>
+			<kv-button @click="isLightboxVisible = true;">Show {{variant}}</kv-button>
+			<p>The lightbox is visible: {{isLightboxVisible}}</p>
+
+			<kv-lightbox
+				:visible="isLightboxVisible"
+				:title="title"
+				:variant="variant"
+				:prevent-close="preventClose"
+				@lightbox-closed="isLightboxVisible = false"
+			>
+				<p class="tw-mb-2">The lightbox content is very short.</p>
+				<template #controls>
+					<kv-button variant="secondary" @click="isLightboxVisible = false" ref="dontDoItRef">Don't do it!</kv-button>
+					<kv-button @click="isLightboxVisible = false" ref="doItRef">Do it!</kv-button>
+				</template>
+			</kv-lightbox>
+		</div>
+	`,
+	data() {
+		return {
+			isLightboxVisible: args.visible,
+		};
+	},
+});
+
+const VeryLongTemplate = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvLightbox, KvButton },
+	template: `
+		<div>
+			<kv-button @click="isLightboxVisible = true;">Show {{variant}}</kv-button>
+			<p>The lightbox is visible: {{isLightboxVisible}}</p>
+
+			<kv-lightbox
+				:visible="isLightboxVisible"
+				:title="title"
+				:variant="variant"
+				:prevent-close="preventClose"
+				@lightbox-closed="isLightboxVisible = false"
+			>
+				<p class="tw-mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem voluptatum quod illum minima alias quae non architecto ipsum sunt repudiandae eius ipsa commodi adipisci nam, magni praesentium error, deleniti impedit!
+				Qui sint repudiandae incidunt odit distinctio neque repellendus, soluta culpa. Vero rem, odit laudantium autem quis facilis ratione omnis aut voluptas, velit vitae adipisci? Magni iure animi doloribus illum soluta.
+				Enim aspernatur non accusantium aut minima, quos maxime? Perferendis suscipit enim laborum, recusandae fugit praesentium fugiat animi cumque voluptatum voluptate labore dolore quaerat libero esse quasi magnam tempore id autem.
+				Nisi voluptas architecto dolores aut perspiciatis itaque, est reprehenderit tempora. Animi dicta laudantium repudiandae facere atque omnis voluptatem, incidunt ipsum, accusantium minima aspernatur modi soluta molestiae neque quam doloremque nemo.
+				Neque delectus quidem sapiente facere consequuntur maiores molestiae vel! Quidem, veniam. Libero labore voluptatibus id corporis molestias cumque magnam maiores praesentium laborum? Voluptate, porro eum. Recusandae earum rerum quis quos.
+				Cupiditate ea quas non ut adipisci illum dolorem eligendi sequi quod, doloribus suscipit assumenda ullam aliquid ad repudiandae dignissimos optio, possimus molestiae voluptate vel! Esse fuga praesentium maxime animi nihil.
+				Sint, est? Maiores commodi adipisci minus itaque nisi dolorum, velit fugiat est quia saepe ipsum quo nobis mollitia repellendus facilis, quos hic facere! Tenetur sint corporis dignissimos molestias saepe ipsa?
+				Excepturi, praesentium quisquam veritatis quaerat eligendi explicabo vitae sit minima recusandae. Dolorum molestiae, vero nulla eum sunt exercitationem dolore ipsum quos ea doloribus reprehenderit aliquam quibusdam vel veniam ex quis.
+				Corporis, neque cum pariatur saepe inventore sunt, maiores sed deserunt beatae quasi non sint vitae error incidunt odio nam amet quisquam! Mollitia, suscipit earum. Molestiae nesciunt fugit ea cupiditate rerum?
+				Placeat, atque sit unde sunt fugit reprehenderit tenetur provident similique odio accusamus, suscipit quod doloribus aliquam animi quia quae laboriosam natus aspernatur repellendus tempore itaque expedita! Optio adipisci amet excepturi!</p>
+				<template #controls>
+					<kv-button variant="secondary" @click="isLightboxVisible = false" ref="dontDoItRef">Don't do it!</kv-button>
+					<kv-button @click="isLightboxVisible = false" ref="doItRef">Do it!</kv-button>
+				</template>
+			</kv-lightbox>
+		</div>
+	`,
+	data() {
+		return {
+			isLightboxVisible: args.visible,
+		};
+	},
+});
+
 const AlertTemplate = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { KvLightbox, KvButton },
@@ -91,6 +160,16 @@ Lightbox.args = {
 	title: 'Lightbox Title',
 };
 
+export const ShortContentLightbox = VeryShortTemplate.bind({});
+ShortContentLightbox.args = {
+	title: 'Short Lightbox Title',
+};
+
+export const LongContentLightbox = VeryLongTemplate.bind({});
+LongContentLightbox.args = {
+	title: 'Long Lightbox Title',
+};
+
 export const Alert = AlertTemplate.bind({});
 Alert.args = {
 	title: 'Delete credit card?',