bonkers-ui 1.0.60 → 1.0.61

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bonkers-ui",
-    "version": "v1.0.60",
+    "version": "v1.0.61",
     "private": false,
     "scripts": {
         "storybook": "storybook dev -p 6006",
@@ -22,31 +22,31 @@
         "eslint-plugin-tailwindcss": "^3.13.0",
         "storybook-addon-designs": "^6.3.1",
         "vue": "^3.3.4",
-        "vue-router": "^4.2.4"
+        "vue-router": "^4.2.5"
     },
     "devDependencies": {
-        "@storybook/addon-essentials": "^7.3.2",
-        "@storybook/addon-links": "^7.3.2",
-        "@storybook/addon-mdx-gfm": "^7.3.2",
-        "@storybook/vue3": "^7.3.2",
-        "@storybook/vue3-vite": "^7.3.2",
+        "@storybook/addon-essentials": "^7.4.5",
+        "@storybook/addon-links": "^7.4.5",
+        "@storybook/addon-mdx-gfm": "^7.4.5",
+        "@storybook/vue3": "^7.4.5",
+        "@storybook/vue3-vite": "^7.4.5",
         "@typescript-eslint/eslint-plugin": "^5.59.9",
         "@typescript-eslint/parser": "^5.59.9",
-        "@vitejs/plugin-vue": "^4.3.3",
-        "@vue/eslint-config-typescript": "^11.0.3",
+        "@vitejs/plugin-vue": "^4.3.4",
+        "@vue/eslint-config-typescript": "^12.0.0",
         "@vue/test-utils": "^2.4.1",
-        "eslint": "8.47.0",
-        "eslint-plugin-storybook": "^0.6.13",
+        "eslint": "8.50.0",
+        "eslint-plugin-storybook": "^0.6.14",
         "eslint-plugin-vue": "^9.17.0",
         "gh-pages": "^6.0.0",
         "husky": "4.3.8",
         "jsdom": "^22.1.0",
         "lint-staged": "^14.0.1",
-        "postcss": "^8.4.28",
+        "postcss": "^8.4.30",
         "postcss-html": "^1.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "storybook": "^7.3.2",
+        "storybook": "^7.4.5",
         "storybook-tailwind-dark-mode": "^1.0.22",
         "stylelint": "^15.10.3",
         "stylelint-config-recommended": "^13.0.0",
@@ -54,12 +54,12 @@
         "stylelint-config-standard": "^34.0.0",
         "tailwindcss": "^3.3.3",
         "ts-node": "^10.9.1",
-        "typescript": "^5.1.6",
+        "typescript": "^5.2.2",
         "vite": "^4.4.9",
-        "vitest": "^0.34.2",
+        "vitest": "^0.34.5",
         "vue-eslint-parser": "^9.3.1",
         "vue-loader": "^17.2.2",
-        "vue-tsc": "^1.8.8"
+        "vue-tsc": "^1.8.13"
     },
     "resolutions": {
         "strip-ansi": "^6.0.1",

package/src/components/ui-card-cta/ui-card-cta.stories.ts

@@ -1,53 +1,20 @@
+import { ICON_DEFAULT } from "../../CONSTANTS";
 import UiCardCta from "../ui-card-cta";
-import type { Story } from "@storybook/vue3";
+import type { Meta } from "@storybook/vue3";
 
 export default {
 	title: "Components/ui-card-cta",
 	component: UiCardCta,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {
-		invertOrder: {
-			control: {
-				type: "boolean" 
-			},
-			description: "The Element order",
-		},
-		disabled: {
-			control: {
-				type: "boolean" 
-			},
-			description: "The full width size",
-		},
-	},
+} satisfies Meta<typeof UiCardCta>;
+
+export const Default = {
 	args: {
+		iconName: ICON_DEFAULT,
 		slot: "Description",
 		invertOrder: false,
-		disabled: false
+		disabled: false,
+		title: "Title",
+		description: "Description"
 	},
 };
-
-type TComponentProps = InstanceType<typeof UiCardCta>["$props"];
-
-const Template: Story<TComponentProps> = (args) => ({
-	components: {
-		UiCardCta 
-	},
-	setup() {
-		return {
-			args 
-		};
-	},
-	template: /*html*/ `
-		<ui-card-cta v-bind="args" :icon-name="['far', 'face-smile']">
-			<template #title>
-				Title
-			</template>
-
-			<template #description>
-				{{args.slot}}
-			</template>
-		</ui-card-cta>
-		`
-});
-
-export const Default = Template.bind({});

package/src/components/ui-card-cta/ui-card-cta.vue

@@ -2,12 +2,14 @@
 	<button
 		class="
 			ui-card-cta
+			group
 			w-full
 			rounded-2xl
 			border
 			border-secondary-alt-500
 			bg-white
 			p-sm
+			text-left
 			shadow-md
 			outline-0
 			hover:border-secondary-700
@@ -18,12 +20,13 @@
 		:disabled="disabled"
 	>
 		<span
-			class="ui-card-cta__wrapper grid w-full items-center gap-sm"
-			:class="[
-				invertOrder && 'ui-card-cta_inverted',
-			]"
+			class="group-disabled:opcity-50 grid w-full items-center gap-sm"
+			:class="{
+				'grid-cols-[auto,1fr]': !invertOrder,
+				'grid-cols-[1fr,auto]': invertOrder,
+			}"
 		>
-			<slot name="icon">
+			<slot name="iconSlot">
 				<ui-icon-wrapper>
 					<ui-icon
 						v-if="iconName"
@@ -34,25 +37,28 @@
 				</ui-icon-wrapper>
 			</slot>
 			<span
-				v-if="$slots.title && $slots.description"
 				class="w-full"
 				:class="invertOrder && 'order-first'"
 			>
-				<ui-typography
-					:kind="EColors.SECONDARY_400"
-					class="mb-xxs"
-					line-height
-				>
-					<slot name="title" />
-				</ui-typography>
+				<slot name="titleSlot">
+					<ui-typography
+						:kind="EColors.SECONDARY_400"
+						class="mb-xxs"
+						line-height
+					>
+						{{ title }}
+					</ui-typography>
+				</slot>
 
-				<ui-typography
-					:kind="EColors.SECONDARY_300"
-					:size="ETypographySizes.SM"
-					line-height
-				>
-					<slot name="description" />
-				</ui-typography>
+				<slot name="descriptionSlot">
+					<ui-typography
+						:kind="EColors.SECONDARY_300"
+						:size="ETypographySizes.SM"
+						line-height
+					>
+						{{ description }}
+					</ui-typography>
+				</slot>
 			</span>
 		</span>
 	</button>
@@ -70,25 +76,8 @@
 	defineProps<{
 		invertOrder?: boolean;
 		disabled?: boolean;
-		iconName?: TIconName
+		iconName?: TIconName;
+		title?: string;
+		description?: string;
 	}>();
-
 </script>
-
-<style scoped>
-	.ui-card-cta {
-		text-align: unset;
-	}
-
-	.ui-card-cta__wrapper {
-		grid-template-columns: auto 1fr;
-	}
-
-	.ui-card-cta:disabled .ui-card-cta__wrapper {
-		opacity: 0.5;
-	}
-
-	.ui-card-cta_inverted {
-		grid-template-columns: 1fr auto;
-	}
-</style>

package/src/components/ui-input/ui-input.stories.ts

@@ -2,7 +2,7 @@ import type { Story } from "@storybook/vue3";
 import UiInput from "./ui-input.vue";
 import Icon from "../../_samples/icon.vue";
 import { ref } from "vue";
-import { EInputKinds, EInputType } from "./_typings";
+import { EInputKinds, EInputType, EAutocomplete } from "./_typings";
 
 export default {
 	title: "Components/ui-input",
@@ -11,36 +11,44 @@ export default {
 	argTypes: {
 		placeholder: {
 			control: {
-				type: "text" 
+				type: "text"
 			},
 			description: "Placeholder",
 		},
 		kind: {
 			control: {
-				type: "select" 
+				type: "select"
 			},
 			options: Object.values(EInputKinds),
 			description: "The input kinds",
 		},
 		type: {
 			control: {
-				type: "select" 
+				type: "select"
 			},
 			options: Object.values(EInputType),
 			description: "The input type",
 		},
 		disabled: {
 			control: {
-				type: "boolean" 
+				type: "boolean"
 			},
 			description: "The Element disabled state",
 		},
+		autocomplete: {
+			control: {
+				type: "select"
+			},
+			option: Object.values(EAutocomplete),
+			description: "The Element autocomplete state",
+		}
 	},
 	args: {
 		placeholder: "Placeholder",
 		kind: undefined,
 		disabled: false,
-		type: EInputType.TEXT
+		type: EInputType.TEXT,
+		autocomplete: EAutocomplete.OFF
 	}
 };
 

package/src/components/ui-select/ui-select.stories.ts

@@ -8,7 +8,7 @@ export default {
 	argTypes: {
 		disabled: {
 			control: {
-				type: "boolean" 
+				type: "boolean"
 			},
 			description: "The Element disabled state",
 		}
@@ -22,7 +22,7 @@ type TComponentProps = InstanceType<typeof UiSelect>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
 	components: {
-		UiSelect 
+		UiSelect
 	},
 	setup() {
 		const list = ["Option 1", "Option 2", "Option 3"];
@@ -30,17 +30,11 @@ const Template: Story<TComponentProps> = (args) => ({
 		return {
 			args,
 			valueModel,
-			list 
+			list
 		};
 	},
 	template: /*html*/`
 		<ui-select v-bind="args" v-model="valueModel" heading="Heading" subLabel="Sub Label">
-			<template #postfix-icon>
-				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<path d="M13.25 6.8125L8.5 11.2812C8.34375 11.4375 8.15625 11.5 8 11.5C7.8125 11.5 7.625 11.4375 7.46875 11.3125L2.71875 6.8125C2.40625 6.53125 2.40625 6.0625 2.6875 5.75C2.96875 5.4375 3.4375 5.4375 3.75 5.71875L8 9.71875L12.2188 5.71875C12.5312 5.4375 13 5.4375 13.2812 5.75C13.5625 6.0625 13.5625 6.53125 13.25 6.8125Z" fill="currentColor"/>
-				</svg>
-			</template>
-
 			<option
 				v-for="item in list"
 				:key="item"

package/src/components/ui-select/ui-select.vue

@@ -32,7 +32,20 @@
 			</select>
 
 			<div class="absolute right-sm top-1/2 -translate-y-1/2">
-				<slot name="postfix-icon" />
+				<slot name="postfix-icon">
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M13.25 6.8125L8.5 11.2812C8.34375 11.4375 8.15625 11.5 8 11.5C7.8125 11.5 7.625 11.4375 7.46875 11.3125L2.71875 6.8125C2.40625 6.53125 2.40625 6.0625 2.6875 5.75C2.96875 5.4375 3.4375 5.4375 3.75 5.71875L8 9.71875L12.2188 5.71875C12.5312 5.4375 13 5.4375 13.2812 5.75C13.5625 6.0625 13.5625 6.53125 13.25 6.8125Z"
+							fill="currentColor"
+						/>
+					</svg>
+				</slot>
 			</div>
 		</div>
 		<slot name="subLabel">

package/src/components/ui-typography/ui-typography.vue

@@ -93,6 +93,7 @@
 </template>
 
 <script lang="ts" setup>
+	import type { Component } from "vue";
 	import { ETextAlign, ETextTransform, ETextWeight, ETypographySizes } from "./_typings";
 	import { EColors } from "../../_types/colors";
 
@@ -104,6 +105,6 @@
 		lineHeight?: boolean;
 		textTransform?: ETextTransform;
 		underline?: boolean;
-		is?: string;
+		is?: string | Component;
 	}>();
 </script>