@kiva/kv-components 0.20.0 → 0.20.4

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
+
+
+
+
+
+## [0.20.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@0.20.1...@kiva/kv-components@0.20.2) (2021-09-22)
+
+**Note:** Version bump only for package @kiva/kv-components
+
+
+
+
+
+## [0.20.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@0.20.0...@kiva/kv-components@0.20.1) (2021-09-15)
+
+**Note:** Version bump only for package @kiva/kv-components
+
+
+
+
+
 # [0.20.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@0.19.7...@kiva/kv-components@0.20.0) (2021-09-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "0.20.0",
+  "version": "0.20.4",
   "publishConfig": {
     "access": "public"
   },
@@ -33,7 +33,7 @@
     "jest-axe": "^5.0.1",
     "postcss": "^8.3.0",
     "storybook-dark-mode": "^1.0.8",
-    "tailwindcss": "2.2.4",
+    "tailwindcss": "2.2.15",
     "vue-jest": "^3.0.7",
     "vue-loader": "^15.9.6",
     "vue-template-compiler": "^2.6.12"
@@ -53,5 +53,5 @@
     "vue": "^2.6.12",
     "vue-focus-lock": "^1.4.1"
   },
-  "gitHead": "ec5322df5984c3177697dd3756dd3c84eec89a01"
+  "gitHead": "3d58dc7299bf31a9d16581470576419acc5e53a1"
 }

package/vue/.storybook/preview.js

@@ -1,6 +1,7 @@
 import './tailwind.css';
 import addons from '@storybook/addons';
 import KvThemeProvider from '../KvThemeProvider.vue';
+import { defaultTheme, darkTheme } from '@kiva/kv-tokens/configs/kivaColors';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -32,7 +33,7 @@ export const decorators = [(story) => ({
 	},
 	methods: {
 		setTheme(darkMode) {
-			darkMode ? this.theme = 'dark' : this.theme = ''
+			darkMode ? this.theme = darkTheme : this.theme = defaultTheme
 		}
 	},
 	mounted() {

package/vue/KvLightbox.vue

@@ -18,6 +18,7 @@
 				tw-bg-opacity-[75%]
 			"
 			:class="{'tw-min-h-screen' : variant === 'lightbox'}"
+			:style="webkitCSSFix"
 			@click.stop.prevent="onScreenClick"
 		>
 			<focus-lock
@@ -44,17 +45,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
 					>
@@ -206,6 +209,13 @@ export default {
 		};
 	},
 	computed: {
+		// Reference: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
+		webkitCSSFix() {
+			if (this.variant === 'lightbox') {
+				return 'min-height: -webkit-fill-available';
+			}
+			return '';
+		},
 		role() {
 			if (this.variant === 'alert') {
 				return 'alertdialog';

package/vue/stories/KvLightbox.stories.js

@@ -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?',

package/vue/stories/StyleguidePrimitives.stories.js

@@ -236,7 +236,7 @@ export const Primitives = (args, { argTypes }) => ({
 				>
 					<button
 						class="tw-text-left tw-font-book hover:tw-text-action-highlight"
-						@click="copy(buildClassName('text', typeStyle))"
+						@click="copy(buildClassName('tw-text', typeStyle))"
 					>
 						<p
 							class="tw-mb-1"