bonkers-ui 1.0.40 → 1.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "private": false,
   "scripts": {
     "storybook": "start-storybook -p 6006",

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

@@ -1,8 +1,4 @@
 import UiCardCta from "../ui-card-cta";
-import UiIcon from "../ui-icon";
-import UiIconWrapper from "../ui-icon-wrapper";
-import { ESize } from "../../_types/sizing";
-import UiTypography from "../ui-typography";
 import type { Story } from "@storybook/vue3";
 
 export default {
@@ -29,18 +25,12 @@ export default {
 type TComponentProps = InstanceType<typeof UiCardCta>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiCardCta, UiIcon, UiTypography, UiIconWrapper },
+	components: { UiCardCta },
 	setup() {
-		return { args, ESize };
+		return { args };
 	},
 	template: /*html*/ `
-		<ui-card-cta v-bind="args">
-			<template #icon>
-				<ui-icon-wrapper>
-					<ui-icon :icon-name="['far', 'face-smile']" :size=ESize.MD />
-				</ui-icon-wrapper>
-			</template>
-
+		<ui-card-cta v-bind="args" :icon-name="['far', 'face-smile']">
 			<template #title>
 				Title
 			</template>

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

@@ -1,6 +1,20 @@
 <template>
 	<button
-		class="ui-card-cta w-full outline-0 border border-secondary-alt-500 rounded-2xl p-sm shadow-md hover:border-secondary-700 focus:shadow-border-primary active:bg-secondary-alt-200 disabled:bg-secondary-alt-200 disabled:pointer-events-none"
+		class="
+			ui-card-cta
+			w-full
+			outline-0
+			border
+			border-secondary-alt-500
+			rounded-2xl
+			p-sm
+			shadow-md
+			bg-white
+			hover:border-secondary-700
+			focus:shadow-border-primary
+			active:bg-secondary-alt-200
+			disabled:bg-secondary-alt-200
+			disabled:pointer-events-none"
 		:disabled="disabled"
 	>
 		<span
@@ -9,7 +23,16 @@
 				invertOrder && 'ui-card-cta_inverted',
 			]"
 		>
-			<slot name="icon" />
+			<slot name="icon">
+				<ui-icon-wrapper>
+					<ui-icon
+						v-if="iconName"
+						:icon-name="iconName"
+						:size="ESize.MD"
+						class="text-secondary-700"
+					/>
+				</ui-icon-wrapper>
+			</slot>
 			<span
 				v-if="$slots.title && $slots.description"
 				class="w-full"
@@ -38,12 +61,17 @@
 
 <script lang="ts" setup>
 	import UiTypography from "../ui-typography";
+	import UiIcon from "../ui-icon";
+	import UiIconWrapper from "../ui-icon-wrapper";
 	import { ETypographySizes, ETextWeight } from "../ui-typography";
 	import { EColors } from "../../_types/colors";
+	import type { TIconName } from "../ui-icon";
+	import { ESize } from "../../_types/sizing";
 
 	defineProps<{
 		invertOrder?: boolean;
 		disabled?: boolean;
+		iconName?: TIconName
 	}>();
 
 </script>

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

@@ -21,7 +21,7 @@
 				<ui-typography
 					v-if="header"
 					line-height
-					class="flex-1 truncate"
+					class="flex-1 line-clamp"
 					:size="ETypographySizes.SM"
 					:weight="ETextWeight.SEMI_BOLD"
 				>
@@ -72,4 +72,11 @@
 	.ui-card-result__header {
 		grid-template-columns: 1fr auto;
 	}
+
+	.line-clamp {
+		display: -webkit-box;
+		overflow: hidden;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
 </style>

package/src/components/ui-icon-wrapper/_typings.ts

@@ -1,6 +1,7 @@
 export enum EIconWrapperTypes {
-	PRIMARY = "primary",
-	SECONDARY = "secondary",
+	DEFAULT = "DEFAULT",
+	PRIMARY = "PRIMARY",
+	SECONDARY = "SECONDARY",
 }
 export enum EIconWrapperSizes {
 	DEFAULT = "default",

package/src/components/ui-icon-wrapper/ui-icon-wrapper.stories.ts

@@ -2,7 +2,6 @@ import UiIconWrapper from "../ui-icon-wrapper";
 import UiIcon from "../ui-icon";
 import UiNotificationBadge, { EBadgeOrigin } from "../ui-notification-badge";
 import { EIconWrapperSizes, EIconWrapperTypes } from "./_typings";
-import { ESize } from "../../_types/sizing";
 import type { Story } from "@storybook/vue3";
 
 export default {
@@ -31,24 +30,24 @@ type TComponentProps = InstanceType<typeof UiIconWrapper>["$props"];
 const Template: Story<TComponentProps> = (args) => ({
 	components: { UiIconWrapper, UiIcon, UiNotificationBadge },
 	setup() {
-		return { args, ESize, EBadgeOrigin };
+		return { args, EBadgeOrigin, EIconWrapperSizes, EIconWrapperTypes };
 	},
 	template: /*html*/`
-		<ui-icon-wrapper kind="primary" v-bind="args" class="mb-sm">
+		<ui-icon-wrapper :kind="EIconWrapperTypes.PRIMARY" v-bind="args" class="mb-sm">
 			<p> ${args.slot} </p>
 			<UiNotificationBadge :origin=EBadgeOrigin.OFFSET_TOP_RIGHT>
 				1
 			</UiNotificationBadge>
 		</ui-icon-wrapper>
 
-		<ui-icon-wrapper kind="secondary" v-bind="args" class="mb-sm">
+		<ui-icon-wrapper :kind="EIconWrapperTypes.SECONDARY" v-bind="args" class="mb-sm">
 			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Emblem-person-blue.svg/640px-Emblem-person-blue.svg.png" width="20" height="20" />
 		</ui-icon-wrapper>
 
-		<ui-icon-wrapper kind="primary"  v-bind="args">
-			<ui-icon :icon-name="['far', 'face-smile']" :size=ESize.LG />
+		<ui-icon-wrapper v-bind="args">
+			<ui-icon :icon-name="['far', 'face-smile']" :size=EIconWrapperSizes.SM :style="{color: 'black'}" />
 			<UiNotificationBadge slot="badge" :origin=EBadgeOrigin.DEFAULT>
-			2
+				2
 			</UiNotificationBadge>
 		</ui-icon-wrapper>
 		`

package/src/components/ui-icon-wrapper/ui-icon-wrapper.vue

@@ -1,9 +1,11 @@
 <template>
 	<div
-		class="icon-wrapper w-fit h-fit grid place-items-center relative rounded-3xl"
+		class="icon-wrapper w-fit h-fit grid place-items-center relative rounded-2xl"
 		:class="[
 			kind === EIconWrapperTypes.PRIMARY && 'text-white bg-primary',
 			kind === EIconWrapperTypes.SECONDARY && 'text-black bg-secondary-alt-200',
+			kind === EIconWrapperTypes.DEFAULT && 'text-primary bg-white border-2 border-primary ',
+
 			size === EIconWrapperSizes.DEFAULT && 'py-sm px-sm',
 			size === EIconWrapperSizes.SMALL && 'py-xs px-xs',
 			size === EIconWrapperSizes.MEDIUM && 'py-md px-md icon-wrapper_offset-md',
@@ -23,7 +25,7 @@
 	}
 
 	withDefaults(defineProps<TProps>(),{
-		kind: EIconWrapperTypes.PRIMARY,
+		kind: EIconWrapperTypes.DEFAULT,
 		size: EIconWrapperSizes.DEFAULT,
 	});
 
@@ -39,5 +41,4 @@
 		top: 8px;
 		right: 8px;
 	}
-
 </style>

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

@@ -1,6 +1,7 @@
 export enum EInputKinds {
-	PRIMARY = "primary",
-	ERROR = "error",
+	PRIMARY = "PRIMARY",
+	SECONDARY = "SECONDARY",
+	ERROR = "ERROR",
 }
 
 export enum EInputType {

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

@@ -50,8 +50,7 @@ const Template: Story<MyComponentProps> = (args: MyComponentProps) => ({
 		};
 	},
 	template: /*html*/`
-		<ui-input v-bind="args" v-model="valueModel" heading="heading" sub-label="subLabel" pattern="[\\d]{9}"
-		/>
+		<ui-input v-bind="args" v-model="valueModel" heading="Heading" sub-label="Sub Label" pattern="[\\d]{9}" />
 	`
 });
 
@@ -74,16 +73,18 @@ const TemplateAll: Story<MyComponentProps> = (args: MyComponentProps) => ({
 			gridGap: '12px'
 		}">
 			<ui-input v-bind="args" v-model="valueModel">
-				<template v-slot:prefix-icon> € </template>
+				<template v-slot:prefix-icon>
+					<span class="text-secondary-alt"> € </span>
+				</template>
 			</ui-input>
 			<ui-input v-bind="args" v-model="valueModel">
 				<template v-slot:prefix-icon>
-					<Icon :size="16" />
+					<Icon :size="16" class="text-secondary-alt" />
 				</template>
 			</ui-input>
 			<ui-input v-bind="args" v-model="valueModel">
 				<template v-slot:postfix-icon>
-					<Icon :size="16" />
+					<Icon :size="16"  class="text-secondary-alt" />
 				</template>
 			</ui-input>
 		</div>

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

@@ -3,8 +3,8 @@
 		<slot name="header">
 			<ui-typography
 				v-if="heading"
-				:weight="ETextWeight.BOLD"
-				class="mb-sm"
+				class="mb-xs"
+				:size="ETypographySizes.MD"
 			>
 				{{ heading }}
 			</ui-typography>
@@ -12,7 +12,7 @@
 		<label
 			class="ui-input__wrapper flex w-full rounded-lg border bg-white items-center p-sm gap-xs"
 			:class="[
-				!kind && 'border-secondary-alt-500 hover:border-secondary-alt-700',
+				kind === EInputKinds.SECONDARY && 'border-secondary-alt-500 hover:border-secondary-alt-700',
 				kind === EInputKinds.PRIMARY && 'border-primary',
 				kind === EInputKinds.ERROR && 'border-error',
 
@@ -25,7 +25,7 @@
 				:value="modelValue"
 				:pattern="pattern"
 				class="bg-transparent border-0 outline-none w-full placeholder:text-secondary-alt placeholder:italic"
-				:type="type || 'text'"
+				:type="type"
 				:placeholder="placeholder"
 				:maxlength="maxlength"
 				:minlength="minlength"
@@ -40,7 +40,8 @@
 			<ui-typography
 				v-if="subLabel"
 				:size="ETypographySizes.SM"
-				class="mt-sm"
+				:kind="EColors.SECONDARY_ALT"
+				class="mt-xs"
 			>
 				{{ subLabel }}
 			</ui-typography>
@@ -50,7 +51,7 @@
 
 <script lang="ts" setup>
 	import { EInputKinds, EInputType } from "./_typings";
-	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+	import UiTypography, { ETypographySizes, EColors } from "../ui-typography";
 
 	withDefaults(defineProps<{
 		placeholder?: string;
@@ -65,7 +66,16 @@
 		minlength?: string;
 		focusHandler?: (e:FocusEvent) => void;
 	}>(), {
-		modelValue: ""
+		modelValue: "",
+		placeholder: "",
+		heading: "",
+		subLabel: "",
+		pattern: "",
+		maxlength: undefined,
+		minlength: undefined,
+		type: EInputType.TEXT,
+		focusHandler: ()=>undefined,
+		kind: EInputKinds.SECONDARY
 	});
 
 	defineEmits(["update:modelValue"]);

package/src/components/ui-input-range/ui-input-range.vue

@@ -23,7 +23,7 @@
 		/>
 
 		<div
-			class="ui-input-range__thumb bg-primary absolute border-8 border-white rounded-full box-content -translate-y-1/2 -translate-x-1/2 pointer-events-none"
+			class="ui-input-range__thumb bg-primary absolute border-white rounded-full box-content -translate-y-1/2 -translate-x-1/2 pointer-events-none"
 			:style="{left: getPercentage + '%'}"
 		/>
 	</div>
@@ -89,9 +89,9 @@
 <style scoped>
 	input[type="range"]::-webkit-slider-thumb {
 		appearance: none;
-		height: 8px;
-		width: 8px;
-		transform: scale(5);
+		height: 10px;
+		width: 10px;
+		transform: scale(4);
 		background-color: transparent;
 		border: 0;
 		box-shadow: none;
@@ -110,8 +110,9 @@
 
 	.ui-input-range__thumb {
 		top: 50%;
-		height: 13px;
-		width: 13px;
+		height: var(--xs);
+		width: var(--xs);
+		border-width: 12px;
 		box-shadow: 0 0 0 4px var(--color-primary);
 	}
 </style>

package/src/components/ui-list-item/_types.ts

@@ -2,7 +2,12 @@ export enum EListItemTypes {
 	DEFAULT = "DEFAULT",
 	PROGRESS = "PROGRESS"
 }
-export enum EListItemSizes {
+export enum EListItemSpacing {
     DEFAULT = "DEFAULT",
 	COMPACT = "COMPACT"
 }
+
+export enum EListItemSize {
+    SM = "SM",
+	MD = "MD"
+}

package/src/components/ui-list-item/index.ts

@@ -1,3 +1,2 @@
 export { default } from "./ui-list-item.vue";
-export { EListItemTypes } from "./_types";
-export { EListItemSizes } from "./_types";
+export { EListItemTypes, EListItemSpacing, EListItemSize } from "./_types";

package/src/components/ui-list-item/ui-list-item.stories.ts

@@ -1,6 +1,6 @@
 import UiListItem from "./ui-list-item.vue";
 import type { Story } from "@storybook/vue3";
-import { EListItemSizes, EListItemTypes } from "./_types";
+import { EListItemSize, EListItemSpacing, EListItemTypes } from "./_types";
 
 export default {
 	title: "Components/ui-list-item",
@@ -13,9 +13,14 @@ export default {
 		},
 		size: {
 			control: { type: "select" },
-			options: Object.values(EListItemSizes),
+			options: Object.values(EListItemSize),
 			description: "The Element size"
 		},
+		spacing: {
+			control: { type: "select" },
+			options: Object.values(EListItemSpacing),
+			description: "The Element spacing"
+		},
 		title: {
 			control: { type: "text" },
 			description: "The Element title"
@@ -28,7 +33,8 @@ export default {
 	args: {
 		title: "default text",
 		kind: EListItemTypes.DEFAULT,
-		size: EListItemSizes.COMPACT,
+		size: EListItemSize.SM,
+		spacing: EListItemSpacing.DEFAULT,
 		slot: "default slot"
 	},
 };

package/src/components/ui-list-item/ui-list-item.vue

@@ -3,8 +3,10 @@
 	<li
 		class="ui-list-item grid grid-flow-col justify-start gap-xs relative group"
 		:class="[
-			size === EListItemSizes.DEFAULT && 'pb-md',
-			size === EListItemSizes.COMPACT && 'pb-xs'
+			size === EListItemSize.SM && 'text-sm',
+			size === EListItemSize.MD && 'text-md',
+			spacing === EListItemSpacing.DEFAULT && 'pb-sm',
+			spacing === EListItemSpacing.COMPACT && 'pb-xs'
 		]"
 	>
 		<div
@@ -16,7 +18,6 @@
 			<ui-icon
 				v-if="icon"
 				class="bg-white z-[1]"
-				:class="iconClass"
 				:icon-name="icon"
 				:size="ESize.SM"
 			/>
@@ -39,19 +40,19 @@
 	import UiIcon, { type TIconName } from "../ui-icon";
 	import UiTypography, { ETextWeight } from "../ui-typography";
 	import { ESize } from "../../_types/sizing";
-	import { EListItemTypes, EListItemSizes } from "./_types";
+	import { EListItemTypes, EListItemSpacing, EListItemSize } from "./_types";
 
 	withDefaults(defineProps<{
 		icon?: TIconName
 		title?: string
 		kind?: EListItemTypes
-		size?: EListItemSizes
-		iconClass?: string
+		size?: EListItemSize
+		spacing?: EListItemSpacing
 	}>(), {
 		kind: EListItemTypes.DEFAULT,
-		size: EListItemSizes.COMPACT,
+		size: EListItemSize.SM,
+		spacing: EListItemSpacing.COMPACT,
 		title: "",
-		iconClass: "text-secondary-alt",
 		icon: undefined
 	});
 

package/src/components/ui-plain-radio/ui-plain-radio.vue

@@ -62,7 +62,7 @@
 		>
 			<ui-radio
 				v-model="radioModel"
-				:value="value"
+				:value="value.toString()"
 				:name="name"
 				:disabled="disabled"
 				class="pointer-events-none"
@@ -99,11 +99,11 @@
 	import UiTypography, { ETypographySizes, EColors, ETextWeight } from "../ui-typography";
 
 	const props = defineProps<{
-		modelValue: string;
+		modelValue: string | number | boolean;
 		header?: string;
 		subHeader?: string;
 		name: string;
-		value: string;
+		value: string | number | boolean;
 		disabled?: boolean;
 	}>();
 

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

@@ -16,7 +16,7 @@
 			:id="value"
 			v-model="radioModel"
 			type="radio"
-			:name="name"
+			:name="name.toString()"
 			:value="value"
 			:disabled="disabled"
 			class="appearance-none absolute peer"
@@ -64,8 +64,8 @@
 	import { EJustify } from "../../_types/align";
 	const slots = useSlots();
 	const props = defineProps<{
-		modelValue: string;
-		name: string;
+		modelValue: string | number | boolean;
+		name: string | number | boolean;
 		value: string;
 		justify?: EJustify;
 		invertOrder?: boolean;

package/src/components/ui-radio-fancy/ui-radio-fancy.vue

@@ -105,9 +105,9 @@
 	import uiIcon from "../ui-icon";
 
 	const props = withDefaults(defineProps<{
-		modelValue: string;
+		modelValue: string | number | boolean;
 		name: string;
-		value: string | number;
+		value: string | number | boolean;
 		iconName: TIconName;
 		disabled?: boolean;
 		radioSize?: ERadioSizes;

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

@@ -26,7 +26,7 @@ const Template: Story<TComponentProps> = (args) => ({
 		return { args, valueModel, list };
 	},
 	template: /*html*/`
-		<ui-select v-bind="args" v-model="valueModel" heading="heading" subLabel="subLabel">
+		<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"/>

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

@@ -3,8 +3,8 @@
 		<slot name="heading">
 			<ui-typography
 				v-if="heading"
-				:weight="ETextWeight.SEMI_BOLD"
-				class="mb-sm"
+				class="mb-xs"
+				:size="ETypographySizes.MD"
 			>
 				{{ heading }}
 			</ui-typography>
@@ -28,7 +28,8 @@
 			<ui-typography
 				v-if="subLabel"
 				:size="ETypographySizes.SM"
-				class="mt-sm"
+				:kind="EColors.SECONDARY_ALT"
+				class="mt-xs"
 			>
 				{{ subLabel }}
 			</ui-typography>
@@ -38,7 +39,7 @@
 
 <script lang="ts" setup>
 	import { computed } from "vue";
-	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+	import UiTypography, { ETypographySizes, EColors } from "../ui-typography";
 
 	const props = defineProps<{
 		modelValue: string;