bonkers-ui 1.0.22 → 1.0.24

package/package.json

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

package/src/_styles/classTypes/_shadow.json

@@ -1,4 +1,6 @@
 {
 	"md": "var(--shadow-size-md)",
-	"border-primary": "var(--shadow-border-primary)"
+	"border-primary": "var(--shadow-border-primary)",
+	"border-selected": "var(--shadow-border-selected)",
+	"selected-shadow": "var(--shadow-selected-shadow)"
 }

package/src/_styles/variables/shadow.css

@@ -3,6 +3,8 @@
 		/* shadow sizes */
 		--shadow-size-md: 0 2px 4px 0 rgb(180 184 205 / 50%);
 		--shadow-border-primary: 0 0 0 4px rgb(69 158 74 / 50%);
+		--shadow-border-selected: 0 0 0 4px rgb(69 158 74 / 100%);
+		--shadow-selected-shadow: 0 0 0 4px var(--color-primary-500);
 		--shadow-border-secondary: 0 0 0 4px rgb(223 225 233 / 50%);
 	}
 }

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

@@ -24,7 +24,7 @@
 				<slot name="sidebar" />
 			</div>
 
-			<main class="p-sm bg-white w-full">
+			<main class="p-sm bg-white w-full overflow-hidden">
 				<ui-typography
 					v-if="header"
 					class="mb-xs"

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

@@ -1 +1,2 @@
 export { default } from "./ui-icon-wrapper.vue";
+export { EIconWrapperTypes } from "./_typings";

package/src/components/ui-radio-fancy/ui-radio-fancy.stories.ts

@@ -7,23 +7,42 @@ export default {
 	title: "Components/ui-radio-fancy",
 	component: UiRadioFancy,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {},
-	args: {},
+	argTypes: {
+		invertOrder: {
+			control: { type: "boolean" },
+			description: "The Element order",
+		},
+		disabled: {
+			control: { type: "boolean" },
+			description: "The full width size",
+		},
+	},
+	args: {
+		slot: "Description",
+		invertOrder: false,
+		disabled: false
+	},
 };
 
 type TComponentProps = InstanceType<typeof UiRadioFancy>["$props"];
 
-const Template: Story<TComponentProps> = () => ({
+const Template: Story<TComponentProps> = (args) => ({
 	components: { UiRadioFancy },
 	setup() {
 		const modelValue = ref("1");
 
-		return { modelValue, EIconType };
+		return { modelValue, EIconType, args };
 	},
 	template: /*html*/`
 		<div class="grid gap-sm" :style="{'grid-template-columns': 'repeat(auto-fit, minmax(160px, 1fr))'}">
-			<ui-radio-fancy v-for="item in 3" :key="item" :value="String(item)" v-model="modelValue" name="radio" title="title" :icon-name="[EIconType.FAR, 'face-smile']">
-				{{args.slot}}
+			<ui-radio-fancy v-bind="args" :key="key" value="1" v-model="modelValue" name="radio"  :icon-name="[EIconType.FAR, 'face-smile']">
+				Banana
+			</ui-radio-fancy>
+			<ui-radio-fancy v-bind="args" :key="key" value="2" v-model="modelValue" name="radio" :icon-name="[EIconType.FAR, 'face-smile']">
+				Apple
+			</ui-radio-fancy>
+			<ui-radio-fancy v-bind="args" :key="key" value="3" v-model="modelValue" name="radio" :icon-name="[EIconType.FAR, 'face-smile']">
+				Orange
 			</ui-radio-fancy>
 		</div>
 	`,

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

@@ -1,31 +1,55 @@
 <template>
 	<label
-		class="ui-radio-item block p-sm border rounded-2xl hover:border-primary cursor-pointer bg-white"
-		:class="[
-			isActive ? 'border-primary pointer-events-none':'border-secondary-alt',
-		]"
+		class="ui-radio-fancy"
+		:class="disabled && 'pointer-events-none opacity-50'"
 	>
 		<input
 			v-model="radioModel"
 			type="radio"
 			:name="name"
 			:value="value"
-			class="appearance-none absolute"
+			class="peer group fixed w-0"
+			:class="disabled && 'pointer-events-none opacity-50'"
 		>
-
-		<ui-icon
-			:icon-name="iconName"
-			:size="ESize.MD"
-			class="mb-md"
-			:class="isActive && 'text-primary'"
-		/>
-		<ui-typography
-			:size="ETypographySizes.SM"
-			:kind="EColors.SECONDARY"
-			:weight="ETextWeight.SEMI_BOLD"
+		<div
+			class="
+				ui-radio-fancy__content
+				box-border
+				w-full
+				py-sm px-sm
+				border
+				border-secondary-alt-500
+				hover:border-secondary-alt-700
+				cursor-pointer
+				rounded-xl
+				active:border-sm
+				active:bg-secondary-alt-200
+				peer-checked:active:outline-4
+				peer-checked:active:outline
+				peer-checked:active:outline-offset-4
+				peer-checked:border-transparent
+				active:outline
+				active:outline-4
+				active:outline-primary
+				active:border-secondary-alt
+				peer-checked:hover:shadow-border-selected
+				peer-checked:shadow-selected-shadow"
+			:class="disabled && 'pointer-events-none opacity-50'"
 		>
-			{{ title }}
-		</ui-typography>
+			<ui-icon
+				:icon-name="iconName"
+				:size="ESize.MD"
+				class="mb-md group-checked:text-primary-500"
+				:class="value === modelValue && 'text-primary'"
+			/>
+			<ui-typography
+				:size="ETypographySizes.SM"
+				:kind="EColors.SECONDARY"
+				:weight="ETextWeight.SEMI_BOLD"
+			>
+				<slot />
+			</ui-typography>
+		</div>
 	</label>
 </template>
 
@@ -35,17 +59,15 @@
 	import UiIcon, { type TIconName } from "../ui-icon";
 	import { ESize } from "../../_types/sizing";
 	import { EColors } from "../../_types/colors";
-
 	const props = defineProps<{
 		modelValue: string;
 		name: string;
 		value: string | number;
-		title: string;
+		id: string;
 		iconName: TIconName;
+		disabled?: boolean;
 	}>();
-
 	const emit = defineEmits(["update:modelValue"]);
-
 	const radioModel = computed({
 		get() {
 			return props.modelValue;
@@ -54,6 +76,4 @@
 			emit("update:modelValue", value);
 		}
 	});
-
-	const isActive = computed(()=>props.modelValue === props.value);
 </script>