bonkers-ui 1.0.34 → 1.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "private": false,
   "scripts": {
     "storybook": "start-storybook -p 6006",
@@ -8,9 +8,9 @@
     "lint:script": "eslint --fix './src/**/*.{ts,tsx,vue}'",
     "lint:style": "stylelint --fix './src/**/*.{css,scss,vue}'",
     "lint:markup": "vue-tsc --noEmit",
-    "test": "jest",
     "deploy": "gh-pages -d storybook-static",
     "typecheck": "tsc --noEmit && vue-tsc --noEmit",
+    "test": "vitest run",
     "i": "yarn install --frozen-lockfile"
   },
   "dependencies": {
@@ -18,9 +18,9 @@
     "@fortawesome/free-brands-svg-icons": "^6.2.1",
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
-    "@fortawesome/vue-fontawesome": "^3.0.0-5",
-    "@vueuse/components": "^9.8.2",
-    "@vueuse/core": "^9.8.2",
+    "@fortawesome/vue-fontawesome": "^3.0.2",
+    "@vueuse/components": "^9.10.0",
+    "@vueuse/core": "^9.10.0",
     "vue": "^3.2.45"
   },
   "devDependencies": {
@@ -28,55 +28,34 @@
     "@storybook/addon-essentials": "^6.5.15",
     "@storybook/addon-links": "^6.5.15",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-vite": "^0.2.6",
+    "@storybook/builder-vite": "^0.2.7",
     "@storybook/vue3": "^6.5.15",
-    "@types/jest": "^29.2.4",
-    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.47.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/test-utils": "^2.2.6",
-    "@vue/vue3-jest": "^29.2.2",
-    "babel-jest": "29.3.1",
-    "eslint": "8.30.0",
+    "@vue/test-utils": "^2.2.7",
+    "eslint": "8.31.0",
     "eslint-plugin-vue": "^9.8.0",
     "gh-pages": "^4.0.0",
     "husky": "4.3.8",
-    "jest": "27.3.1",
+    "jsdom": "^21.0.0",
     "lint-staged": "^13.1.0",
-    "postcss": "^8.4.20",
+    "postcss": "^8.4.21",
     "postcss-html": "^1.4.1",
     "storybook-tailwind-dark-mode": "^1.0.15",
-    "stylelint": "^14.16.0",
+    "stylelint": "^14.16.1",
     "stylelint-config-recommended": "^9.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard": "^29.0.0",
     "tailwindcss": "^3.2.4",
-    "ts-jest": "^27.0.7",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4",
-    "vite": "^4.0.2",
+    "vite": "^4.0.4",
+    "vitest": "^0.27.0",
     "vue-eslint-parser": "^9.1.0",
     "vue-loader": "^17.0.1",
-    "vue-tsc": "^1.0.16"
-  },
-  "jest": {
-    "preset": "ts-jest",
-    "moduleFileExtensions": [
-      "vue",
-      "js",
-      "jsx",
-      "ts"
-    ],
-    "testEnvironment": "jsdom",
-    "moduleNameMapper": {
-      "^@/(.*)$": "<rootDir>/src/$1"
-    },
-    "transform": {
-      ".*\\.(js)$": "babel-jest",
-      "^.+\\.tsx?$": "ts-jest",
-      ".*\\.(vue)$": "@vue/vue3-jest"
-    }
+    "vue-tsc": "^1.0.24"
   },
   "lint-staged": {
     "*.{ts,tsx,vue}": [

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-button/ui-button.test.ts

@@ -1,7 +1,10 @@
 import { mount } from "@vue/test-utils";
 import UiButton from "./ui-button.vue";
+import { test, expect } from "vitest";
+
+test("VButton.test.ts", async () => {
+	expect(UiButton).toBeTruthy();
 
-describe("VButton.test.ts", () => {
 	it("renders props.msg when passed", () => {
 		const className = "message";
 		const wrapper = mount(UiButton, {
@@ -12,4 +15,5 @@ describe("VButton.test.ts", () => {
 
 		expect(wrapper.classes()).toContain(className);
 	});
+
 });

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

@@ -5,7 +5,7 @@ export enum EIconType {
 	FAL = "fal",
 	FAD = "fad",
 	FAT = "fat",
-	BRANDS = "brands",
+	BRANDS = "fa-brands",
 }
 
 export type TIconName = [EIconType, string];

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',

package/tsconfig.json

@@ -2,7 +2,7 @@
 	"compilerOptions": {
 		"types": [
 			"vite/client",
-			"jest"
+			"vitest/globals"
 		],
 		"target": "esnext",
 		"module": "esnext",

package/vitest.config.ts

@@ -0,0 +1,17 @@
+
+import { defineConfig, UserConfig } from "vite";
+import type { InlineConfig } from "vitest";
+
+import Vue from "@vitejs/plugin-vue";
+
+interface VitestConfigExport extends UserConfig {
+	test: InlineConfig;
+}
+
+export default defineConfig({
+	plugins: [Vue()],
+	test: {
+		globals: true,
+		environment: "jsdom",
+	},
+} as VitestConfigExport);