bonkers-ui 1.0.35 → 1.0.36

package/package.json

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

package/src/_styles/classTypes/_shadow.json

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

package/src/_styles/variables/shadow.css

@@ -5,6 +5,7 @@
 		--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-selected-disabled: 0 0 0 4px var(--color-primary-300);
 		--shadow-border-secondary: 0 0 0 4px rgb(223 225 233 / 50%);
 	}
 }

package/src/components/ui-plain-radio/index.ts

@@ -0,0 +1 @@
+export { default } from "./ui-plain-radio.vue";

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

@@ -0,0 +1,59 @@
+import UiPlainRadio from "./ui-plain-radio.vue";
+import { ETypographySizes } from "../ui-typography";
+import  EColors  from "../ui-typography";
+import type { Story } from "@storybook/vue3";
+import { ref } from "vue";
+
+export default {
+	title: "Components/ui-plain-radio",
+	component: UiPlainRadio, ETypographySizes, EColors,
+	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+	argTypes: {
+		disabled: {
+			control: { type: "boolean" },
+		},
+		header: {
+			control: { type: "text" },
+		},
+		subHeader: {
+			control: { type: "text" },
+		}
+	},
+	args: {
+		disabled: false,
+		header: "Header",
+		subHeader: "SubHeader"
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiPlainRadio>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiPlainRadio },
+
+	setup() {
+		const modelValue = ref("1");
+
+		return { modelValue, args, ETypographySizes, EColors };
+
+	},
+
+	template: /*html*/ `
+		<div :style="{display: 'grid', gridGap: '5px'}">
+			<ui-plain-radio
+				v-for="item in 2"
+				:name="String(item)"
+				:key="item"
+				:value="String(item)"
+				v-model="modelValue"
+				:header="args.header"
+				:sub-header="args.subHeader"
+				title="title"
+				:disabled="args.disabled"
+			>
+			</ui-plain-radio>
+		</div>
+	`,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,115 @@
+<template>
+	<label
+		class="ui-plain-radio relative mb-sm"
+		:for="name + value"
+	>
+
+		<input
+			:id="name + value"
+			v-model="radioModel"
+			:value="value"
+			name="ui-plain-radio"
+			type="radio"
+			:disabled="disabled"
+			class="appearance-none absolute peer"
+		>
+
+		<div
+			class="ui-plain-radio__content
+				grid
+				grid-flow-col
+				justify-start
+				items-center
+				gap-sm
+				box-border
+				w-full
+				h-full
+				py-sm px-sm
+				border
+				border-secondary-alt-500
+				bg-white
+				hover:border-secondary-alt-700
+				cursor-pointer
+				rounded-xl
+
+				before:absolute
+				before:-z-10
+				before:box-border
+				before:rounded-[16px]
+				before:bg-primary-300
+
+				peer-checked:border-transparent
+				peer-checked:active:shadow-border-primary
+				peer-checked:active:before:-top-xs
+				peer-checked:active:before:-bottom-xs
+				peer-checked:active:before:-left-xs
+				peer-checked:active:before:-right-xs
+
+				peer-checked:hover:shadow-border-selected
+				peer-checked:shadow-selected-shadow
+
+				peer-active:before:-top-xxs
+				peer-active:before:-bottom-xxs
+				peer-active:before:-left-xxs
+				peer-active:before:-right-xxs
+
+				peer-focus:before:-top-xs
+				peer-focus:before:-bottom-xs
+				peer-focus:before:-left-xs
+				peer-focus:before:-right-xs
+			"
+			:class="disabled && 'pointer-events-none border-secondary-alt-400 peer-checked:shadow-border-primary-disabled'"
+		>
+			<ui-radio
+				v-model="radioModel"
+				:value="value"
+				:name="name"
+				:disabled="disabled"
+				class="pointer-events-none"
+			/>
+
+			<span>
+				<ui-typography
+					:size="ETypographySizes.SM"
+					:kind="EColors.SECONDARY"
+					:weight="ETextWeight.SEMI_BOLD"
+					line-height
+				>
+					{{ header }}
+				</ui-typography>
+				<ui-typography
+					:size="ETypographySizes.XS"
+					:kind="EColors.SECONDARY_ALT"
+				>
+					{{ subHeader }}
+				</ui-typography>
+			</span>
+		</div>
+	</label>
+</template>
+
+<script lang="ts" setup>
+	import { computed } from "vue";
+	import UiRadio from "../ui-radio";
+	import UiTypography, { ETypographySizes, EColors, ETextWeight } from "../ui-typography";
+
+	const props = defineProps<{
+		modelValue: string;
+		header: string;
+		subHeader: string;
+		name: string;
+		value: string;
+		disabled?: boolean;
+	}>();
+
+	const emit = defineEmits(["update:modelValue"]);
+
+	const radioModel = computed({
+		get() {
+			return props.modelValue;
+		},
+		set(value) {
+			emit ("update:modelValue", value);
+		}
+	});
+</script>

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

@@ -0,0 +1,4 @@
+export enum ERadioSizes {
+	DEFAULT = "default",
+	MINIMAL = "minimal"
+}

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

@@ -1,5 +1,6 @@
+import { ERadioSizes } from "./_typings";
 import { ref } from "vue";
-import UiRadioFancy from "./ui-radio-fancy.vue";
+import UiRadioFancy from "../ui-radio-fancy";
 import type { Story } from "@storybook/vue3";
 import { EIconType } from "../ui-icon/_typings";
 
@@ -16,11 +17,17 @@ export default {
 			control: { type: "boolean" },
 			description: "The full width size",
 		},
+		radioSize: {
+			control: { type: "select" },
+			options: Object.values(ERadioSizes),
+			description: "The radio kinds",
+		},
 	},
 	args: {
 		slot: "Description",
 		invertOrder: false,
-		disabled: false
+		disabled: false,
+		radioSize: ERadioSizes.DEFAULT
 	},
 };
 
@@ -31,18 +38,12 @@ const Template: Story<TComponentProps> = (args) => ({
 	setup() {
 		const modelValue = ref("1");
 
-		return { modelValue, EIconType, args };
+		return { modelValue, EIconType, args, ERadioSizes };
 	},
 	template: /*html*/`
 		<div class="grid gap-sm" :style="{'grid-template-columns': 'repeat(auto-fit, minmax(160px, 1fr))'}">
-			<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 v-for="item in 2" :key="item" :value="String(item)" v-model="modelValue" name="radio" title="title" :icon-name="[EIconType.FAR, 'face-smile']" :radioSize="args.radioSize" :disabled="args.disabled">
+				{{args.slot}}
 			</ui-radio-fancy>
 		</div>
 	`,

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

@@ -13,6 +13,7 @@
 			:name="name"
 			:value="value"
 			class="peer group appearance-none absolute"
+			:disabled="disabled"
 		>
 		<div
 			class="
@@ -54,18 +55,39 @@
 				peer-focus:before:-left-xs
 				peer-focus:before:-right-xs
 			"
-			:class="disabled && 'pointer-events-none'"
+			:class="[disabled && 'pointer-events-none border-secondary-alt-400 peer-checked:shadow-border-primary-disabled',
+				radioSize === ERadioSizes.DEFAULT && 'default',
+				radioSize === ERadioSizes.MINIMAL && 'flex gap-sm align-middle']"
 		>
-			<ui-icon
-				:icon-name="iconName"
-				:size="ESize.MD"
-				class="mb-md group-checked:text-primary-500"
-				:class="value === modelValue && 'text-primary'"
-			/>
+			<div
+				v-if="radioSize === ERadioSizes.DEFAULT"
+			>
+				<ui-icon
+					:icon-name="iconName"
+					:size="ESize.MD"
+					class=" mb-md peer-checked:text-primary-500"
+					:class="[value === modelValue && 'text-primary',
+						disabled && 'text-secondary-alt-400',
+						disabled && value === modelValue && 'text-primary-300'
+					]"
+				/>
+			</div>
+			<div v-else-if="radioSize === ERadioSizes.MINIMAL">
+				<ui-icon
+					:icon-name="iconName"
+					:size="ESize.MD"
+					:class="[value === modelValue && 'text-primary',
+						disabled && 'text-secondary-alt-400',
+						disabled && value === modelValue && 'text-primary-300'
+					]"
+				/>
+
+			</div>
 			<ui-typography
 				:size="ETypographySizes.SM"
 				:kind="EColors.SECONDARY"
 				:weight="ETextWeight.SEMI_BOLD"
+				class="pt-xxs"
 			>
 				<slot />
 			</ui-typography>
@@ -76,15 +98,19 @@
 <script lang="ts" setup>
 	import { computed } from "vue";
 	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
-	import UiIcon, { type TIconName } from "../ui-icon";
+	import type { TIconName } from "../ui-icon";
 	import { ESize } from "../../_types/sizing";
 	import { EColors } from "../../_types/colors";
+	import { ERadioSizes } from "./_typings";
+	import uiIcon from "../ui-icon";
+
 	const props = defineProps<{
 		modelValue: string;
 		name: string;
 		value: string | number;
 		iconName: TIconName;
 		disabled?: boolean;
+		radioSize?: ERadioSizes;
 	}>();
 	const emit = defineEmits(["update:modelValue"]);
 	const radioModel = computed({

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

@@ -4,6 +4,7 @@
 		class="ui-typography"
 		:class="[
 			size === ETypographySizes.MD && 'text-md',
+			size === ETypographySizes.XXS && 'text-xxs',
 			size === ETypographySizes.XS && 'text-xs',
 			size === ETypographySizes.SM && 'text-sm',
 			size === ETypographySizes.LG && 'text-lg',