@kiva/kv-components 3.38.2 → 3.39.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.39.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.38.2...@kiva/kv-components@3.39.0) (2023-09-01)
+
+
+### Features
+
+* add bg and drop shadow toast variations ([a2b045d](https://github.com/kiva/kv-ui-elements/commit/a2b045d0823d55d1c643105fde2a847a0713f55f))
+
+
+
+
+
 ## [3.38.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.38.1...@kiva/kv-components@3.38.2) (2023-08-31)
 
 **Note:** Version bump only for package @kiva/kv-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.38.2",
+  "version": "3.39.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "0162f55b01a40791157337e2428ea7ea64056769"
+  "gitHead": "3205fcfb9e4a34fedfa0b5063751288a387daef5"
 }

package/tailwind.config.cjs

@@ -37,6 +37,7 @@ const fontWeight = buildValuesFromThemeObj(theme.fontWeight);
 const radii = buildValuesFromThemeObj(theme.borderRadius);
 const opacity = buildValuesFromThemeObj(theme.opacity);
 const zIndices = buildValuesFromThemeObj(theme.zIndex);
+const boxShadows = buildValuesFromThemeObj(theme.boxShadow);
 
 const safelist = [
 	...backgroundColor.map((color) => buildTailwindClassName(`${themePrefix}bg`, color)),
@@ -49,6 +50,7 @@ const safelist = [
 	...radii.map((radius) => buildTailwindClassName(`${themePrefix}radius`, radius)),
 	...opacity.map((opacityVal) => buildTailwindClassName(`${themePrefix}opacity`, opacityVal)),
 	...zIndices.map((zIndex) => buildTailwindClassName(`${themePrefix}z`, zIndex)),
+	...boxShadows.map((boxShadow) => buildTailwindClassName(`${themePrefix}shadow`, boxShadow)),
 ];
 
 module.exports = {

package/vue/KvToast.vue

@@ -21,10 +21,10 @@
 						class="
 							tw-rounded tw-overflow-hidden
 							tw-flex
-							tw-bg-secondary
 							tw-mx-auto
 							tw-w-full md:tw-w-max md:tw-max-w-full md:tw-min-w-1/2
 						"
+						:class="[backgroundClass, { 'tw-shadow': applyDropShadow }]"
 					>
 						<div
 							class="
@@ -87,13 +87,13 @@
 
 						<button
 							class="
-							tw-w-5
-							tw-flex-shrink-0
-							tw-flex
-							tw-items-center tw-justify-center
-							tw-bg-secondary
-							hover:tw-text-action-highlight
-						"
+								tw-w-5
+								tw-flex-shrink-0
+								tw-flex
+								tw-items-center tw-justify-center
+								hover:tw-text-action-highlight
+							"
+							:class="[backgroundClass]"
 							@click="close"
 						>
 							<kv-material-icon
@@ -150,9 +150,19 @@ export default {
 		const isVisible = ref(false);
 		const message = ref('');
 		const messageType = ref('confirmation'); // 'error', 'info', 'confirmation'
+		const backgroundType = ref('secondary'); // 'primary', 'secondary', 'tertiary'
+		const applyDropShadow = ref(false);
 		const persist = ref(false);
 		const timeout = ref(null);
 
+		const backgroundClass = computed(() => {
+			switch (backgroundType.value) {
+				case 'primary': return 'tw-bg-primary';
+				case 'tertiary': return 'tw-bg-tertiary';
+				default: return 'tw-bg-secondary';
+			}
+		});
+
 		const icon = computed(() => {
 			if (messageType.value === 'warning') {
 				return mdiAlert;
@@ -189,10 +199,12 @@ export default {
 			emit('close');
 		};
 
-		const show = (messageInput, type, persistInput, hideDelay) => {
+		const show = (messageInput, type, persistInput, hideDelay, background, dropShadow) => {
 			isVisible.value = true;
 			message.value = typeof messageInput === 'string' ? messageInput : '';
 			messageType.value = typeof type === 'string' ? type : '';
+			backgroundType.value = typeof background === 'string' ? background : '';
+			applyDropShadow.value = Boolean(dropShadow);
 			persist.value = Boolean(persistInput);
 
 			if (!persist.value) {
@@ -214,6 +226,8 @@ export default {
 			close,
 			show,
 			hasToastContentSlot,
+			backgroundClass,
+			applyDropShadow,
 		};
 	},
 };

package/vue/stories/KvToast.stories.js

@@ -5,7 +5,7 @@ export default {
 	title: 'KvToast',
 	component: KvToast,
 	args: {
-		message: 'Sucessfully added to basket!',
+		message: 'Successfully added to basket!',
 		persist: false,
 		type: 'confirmation',
 	},
@@ -31,6 +31,16 @@ export default {
 				type: 'number',
 			},
 		},
+		background: {
+			control: {
+				type: 'text',
+			},
+		},
+		dropShadow: {
+			control: {
+				type: 'boolean',
+			},
+		},
 	},
 };
 
@@ -44,7 +54,7 @@ const Template = (args, {
 	},
 	template: `
 		<div>
-			<kv-button @click="showToast(message, type, persist, hideDelay)">Show Toast</kv-button>
+			<kv-button @click="showToast(message, type, persist, hideDelay, background, dropShadow)">Show Toast</kv-button>
 
 			<!-- div below is a kludge for storybook docs -->
 			<div class="tw-fixed tw-z-toast tw-inset-0 tw-pointer-events-none">
@@ -54,8 +64,8 @@ const Template = (args, {
 			</div>
 		</div>`,
 	methods: {
-		showToast(messageInput, type, persistInput, hideDelay) {
-			this.$refs.toastRef.show(messageInput, type, persistInput, hideDelay);
+		showToast(messageInput, type, persistInput, hideDelay, background, dropShadow) {
+			this.$refs.toastRef.show(messageInput, type, persistInput, hideDelay, background, dropShadow);
 		},
 		onClose() {
 		},
@@ -80,6 +90,18 @@ persist.args = { persist: true };
 export const hideDelay = Template.bind({});
 hideDelay.args = { hideDelay: 10000 };
 
+export const backgroundPrimary = Template.bind({});
+backgroundPrimary.args = { background: 'primary' };
+
+export const backgroundSecondary = Template.bind({});
+backgroundSecondary.args = { background: 'secondary' };
+
+export const backgroundTertiary = Template.bind({});
+backgroundTertiary.args = { background: 'tertiary' };
+
+export const dropShadow = Template.bind({});
+dropShadow.args = { dropShadow: true };
+
 const KivaLogoTemplate = (args, {
 	argTypes,
 }) => ({