bonkers-ui 1.0.17 → 1.0.19

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.17",
+  "version": "1.0.19",
+  "private": false,
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
@@ -10,7 +11,8 @@
     "test": "jest",
     "deploy": "gh-pages -d storybook-static",
     "typecheck": "tsc --noEmit && vue-tsc --noEmit",
-    "i": "yarn install --frozen-lockfile"
+    "i": "yarn install --frozen-lockfile",
+    "postinstall": "husky install"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
@@ -18,43 +20,44 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/vue-fontawesome": "^3.0.1",
-    "vue": "^3.2.38"
+    "vue": "^3.2.41"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-vite": "^0.2.2",
-    "@storybook/vue3": "^6.5.10",
-    "@types/jest": "^28.1.3",
-    "@typescript-eslint/eslint-plugin": "^5.36.1",
-    "@typescript-eslint/parser": "^5.36.1",
-    "@vitejs/plugin-vue": "^3.0.3",
-    "@vue/eslint-config-typescript": "^11.0.0",
-    "@vue/test-utils": "^2.0.0",
+    "@storybook/builder-vite": "^0.2.4",
+    "@storybook/vue3": "^6.5.13",
+    "@types/jest": "^29.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.41.0",
+    "@vitejs/plugin-vue": "^3.2.0",
+    "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/test-utils": "^2.2.0",
     "@vue/vue3-jest": "^27.0.0",
     "babel-jest": "27",
-    "eslint": "8.22.0",
-    "eslint-plugin-vue": "^9.4.0",
+    "eslint": "8.26.0",
+    "eslint-plugin-vue": "^9.6.0",
     "gh-pages": "^4.0.0",
     "husky": "^8.0.1",
     "jest": "27.3.1",
     "lint-staged": "^13.0.2",
-    "postcss": "^8.4.16",
+    "postcss": "^8.4.18",
     "postcss-html": "^1.4.1",
-    "storybook-tailwind-dark-mode": "^1.0.13",
-    "stylelint": "^14.11.0",
+    "storybook-tailwind-dark-mode": "^1.0.15",
+    "stylelint": "^14.14.0",
     "stylelint-config-recommended": "^9.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard": "^28.0.0",
-    "tailwindcss": "^3.1.8",
+    "stylelint-config-standard": "^29.0.0",
+    "tailwindcss": "^3.2.1",
     "ts-jest": "^27.0.7",
-    "typescript": "^4.8.2",
-    "vite": "^3.0.9",
-    "vue-eslint-parser": "^9.0.3",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.8.4",
+    "vite": "^3.2.0",
+    "vue-eslint-parser": "^9.1.0",
     "vue-loader": "^17.0.0",
-    "vue-tsc": "^0.40.5"
+    "vue-tsc": "^1.0.9"
   },
   "jest": {
     "preset": "ts-jest",

package/src/_styles/classTypes/_spacing.json

@@ -1,5 +1,7 @@
 {
 	"0": "var(--zero)",
+	"px": "var(--px)",
+	"auto": "var(--auto)",
 	"xxs": "var(--xxs)",
 	"xs": "var(--xs)",
 	"sm": "var(--sm)",

package/src/_styles/variables/spacing.css

@@ -1,7 +1,9 @@
 @layer base {
 	:root {
 		/* spacing */
+		--auto: auto;
 		--zero: 0;
+		--px: 1px;
 		--xxs: 4px;
 		--xs: 8px;
 		--sm: 16px;

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

@@ -5,7 +5,7 @@
 			(!kind || kind === EAlertTypes.PRIMARY) && 'border-primary',
 			kind === EAlertTypes.WARNING && 'border-warning',
 			kind === EAlertTypes.ERROR && 'border-error',
-			kind === EAlertTypes.SECONDARY && 'border-secondary',
+			kind === EAlertTypes.SECONDARY && 'border-secondary'
 		]"
 	>
 		<ui-icon

package/src/components/ui-button/ui-button.test.ts

@@ -1,4 +1,4 @@
-import { mount, } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import UiButton from "./ui-button.vue";
 
 describe("VButton.test.ts", () => {

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

@@ -1,5 +1,6 @@
 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";
@@ -28,21 +29,23 @@ export default {
 type TComponentProps = InstanceType<typeof UiCardCta>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiCardCta, UiIcon, UiTypography },
+	components: { UiCardCta, UiIcon, UiTypography, UiIconWrapper },
 	setup() {
 		return { args, ESize };
 	},
-	template: `
+	template: /*html*/ `
 		<ui-card-cta v-bind="args">
-			<template v-slot:icon>
-				<ui-icon :size="ESize.MD" has-wrapper class="text-white" :icon-name="['far', 'fa-face-smile']" />
+			<template #icon>
+				<ui-icon-wrapper>
+					<ui-icon :icon-name="['far', 'fa-face-smile']" :size=ESize.MD />
+				</ui-icon-wrapper>
 			</template>
 
-			<template v-slot:title>
+			<template #title>
 				Title
 			</template>
 
-			<template v-slot:description>
+			<template #description>
 				{{args.slot}}
 			</template>
 		</ui-card-cta>

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

@@ -1,24 +1,25 @@
 <template>
 	<button
-		class="ui-card-cta 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"
+		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"
 		:disabled="disabled"
 	>
 		<span
-			class="ui-card-cta__wrapper grid gap-sm items-center"
+			class="ui-card-cta__wrapper w-full grid gap-sm items-center"
 			:class="[
 				invertOrder && 'ui-card-cta_inverted',
 			]"
 		>
 			<slot name="icon" />
 			<span
-				v-if="slots.title && slots.description"
-				class="ui-card-cta__text-wrapper"
+				v-if="$slots.title && $slots.description"
+				class="w-full"
 				:class="invertOrder && 'order-first'"
 			>
 				<ui-typography
 					:kind="EColors.SECONDARY"
 					:weight="ETextWeight.SEMI_BOLD"
 					class="mb-xxs"
+					line-height
 				>
 					<slot name="title" />
 				</ui-typography>
@@ -26,6 +27,7 @@
 				<ui-typography
 					:kind="EColors.SECONDARY_300"
 					:size="ETypographySizes.SM"
+					line-height
 				>
 					<slot name="description" />
 				</ui-typography>
@@ -35,13 +37,10 @@
 </template>
 
 <script lang="ts" setup>
-	import { useSlots } from "vue";
 	import UiTypography from "../ui-typography";
 	import { ETypographySizes, ETextWeight } from "../ui-typography";
 	import { EColors } from "../../_types/colors";
 
-	const slots = useSlots();
-
 	defineProps<{
 		invertOrder?: boolean;
 		disabled?: boolean;
@@ -52,26 +51,16 @@
 <style scoped>
 	.ui-card-cta {
 		text-align: unset;
-		width: 100%;
-	}
-
-	.ui-card-cta:disabled {
-		pointer-events: none;
 	}
 
 	.ui-card-cta__wrapper {
 		grid-template-columns: auto 1fr;
-		width: 100%;
 	}
 
 	.ui-card-cta:disabled .ui-card-cta__wrapper {
 		opacity: 0.5;
 	}
 
-	.ui-card-cta__text-wrapper {
-		width: 100%;
-	}
-
 	.ui-card-cta_inverted {
 		grid-template-columns: 1fr auto;
 	}

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

@@ -34,7 +34,8 @@ const Template: Story<TComponentProps> = (args) => ({
 	setup() {
 		return { args, ETypographySizes, ETextWeight, ETextAlign, EButtonTypes, ESize };
 	},
-	template: `
+	template:
+	/*html*/`
 		<ui-card-result
 			v-bind="args"
 			header="Some header"
@@ -96,6 +97,7 @@ const Template: Story<TComponentProps> = (args) => ({
 
 			</template>
 		</ui-card-result>
+
 		`,
 });
 

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

@@ -17,7 +17,8 @@ const Template: Story<TComponentProps> = (args) => ({
 	setup() {
 		return { args };
 	},
-	template: `
+	template: /*html*/`
+
 		<ui-card-simple>
 			<template v-slot:title>
 				I want to borrow for

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

@@ -1,2 +1,3 @@
 export { default } from "./ui-icon.vue";
+export { ESize } from "../../_types/sizing";
 export type { TIconName }from "./_typings";

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

@@ -7,10 +7,6 @@ export default {
 	component: UiIcon,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
-		hasWrapper:{
-			control: { type: "boolean" },
-			description: "The Icon show wrapper",
-		},
 		size: {
 			control: { type: "select" },
 			options: Object.values(ESize),
@@ -20,7 +16,6 @@ export default {
 	},
 	args: {
 		size: ESize.LG,
-		hasWrapper: false,
 	},
 };
 

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

@@ -10,7 +10,6 @@
 			size === ESize.LG && 'h-lg w-lg',
 			size === ESize.XL && 'h-xl w-xl',
 			size === ESize.XXL && 'h-xxl w-xxl',
-			hasWrapper && 'p-sm bg-primary rounded-2xl',
 		]"
 	/>
 </template>
@@ -20,7 +19,6 @@
 	import type { TIconName } from "./_typings";
 
 	defineProps<{
-		hasWrapper?: boolean;
 		size: ESize;
 		iconName: TIconName;
 	}>();

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

@@ -0,0 +1,10 @@
+export enum EIconWrapperTypes {
+	PRIMARY = "primary",
+	SECONDARY = "secondary",
+}
+export enum EIconWrapperSizes {
+	DEFAULT = "default",
+	SMALL = "sm",
+	MEDIUM = "md",
+	LARGE = "lg"
+}

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

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

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

@@ -0,0 +1,57 @@
+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 {
+	title: "Components/ui-icon-wrapper",
+	component: UiIconWrapper,
+	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+	argTypes: {
+		kind: {
+			control: { type: "select" },
+			options: Object.values(EIconWrapperTypes),
+			description: "The Icon Wrapper kinds",
+		},
+		size: {
+			control: { type: "select" },
+			options: Object.values(EIconWrapperSizes),
+			description: "The Icon Wrapper sizes",
+		}
+	},
+	args: {
+		slot: "icon",
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiIconWrapper>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiIconWrapper, UiIcon, UiNotificationBadge },
+	setup() {
+		return { args, ESize, EBadgeOrigin };
+	},
+	template: /*html*/`
+		<ui-icon-wrapper kind="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">
+			<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', 'fa-face-smile']" :size=ESize.LG />
+			<UiNotificationBadge slot="badge" :origin=EBadgeOrigin.DEFAULT>
+			2
+			</UiNotificationBadge>
+		</ui-icon-wrapper>
+		`
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,43 @@
+<template>
+	<div
+		class="icon-wrapper w-fit h-fit grid place-items-center relative rounded-3xl"
+		:class="[
+			kind === EIconWrapperTypes.PRIMARY && 'text-white bg-primary',
+			kind === EIconWrapperTypes.SECONDARY && 'text-black bg-secondary-alt-200',
+			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',
+			size === EIconWrapperSizes.LARGE && 'py-lg px-lg icon-wrapper_offset-lg',
+		]"
+	>
+		<slot />
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import { EIconWrapperSizes, EIconWrapperTypes } from "./_typings";
+
+	type TProps = {
+		kind?: EIconWrapperTypes;
+		size?: EIconWrapperSizes;
+	}
+
+	withDefaults(defineProps<TProps>(),{
+		kind: EIconWrapperTypes.PRIMARY,
+		size: EIconWrapperSizes.DEFAULT,
+	});
+
+</script>
+
+<style scoped>
+	.icon-wrapper_offset-md :deep(.notification-badge) {
+		top: 4px;
+		right: 4px;
+	}
+
+	.icon-wrapper_offset-lg :deep(.notification-badge) {
+		top: 8px;
+		right: 8px;
+	}
+
+</style>

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

@@ -49,8 +49,9 @@ const Template: Story<MyComponentProps> = (args: MyComponentProps) => ({
 			valueModel
 		};
 	},
-	template: `
-		<ui-input v-bind="args" v-model="valueModel" heading="heading" sub-label="subLabel" />
+	template: /*html*/`
+		<ui-input v-bind="args" v-model="valueModel" heading="heading" sub-label="subLabel" pattern="[\\d]{9}"
+		/>
 	`
 });
 
@@ -67,7 +68,7 @@ const TemplateAll: Story<MyComponentProps> = (args: MyComponentProps) => ({
 			valueModel
 		};
 	},
-	template: `
+	template: /*html*/`
 		<div :style="{
 			display: 'grid',
 			gridGap: '12px'
@@ -77,12 +78,12 @@ const TemplateAll: Story<MyComponentProps> = (args: MyComponentProps) => ({
 			</ui-input>
 			<ui-input v-bind="args" v-model="valueModel">
 				<template v-slot:prefix-icon>
-					<icon :size="16" />
+					<Icon :size="16" />
 				</template>
 			</ui-input>
 			<ui-input v-bind="args" v-model="valueModel">
 				<template v-slot:postfix-icon>
-					<icon :size="16" />
+					<Icon :size="16" />
 				</template>
 			</ui-input>
 		</div>

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

@@ -1,4 +1,4 @@
-EInputKinds<template>
+<template>
 	<div class="ui-input">
 		<ui-typography
 			v-if="heading"
@@ -7,7 +7,7 @@ EInputKinds<template>
 		>
 			{{ heading }}
 		</ui-typography>
-		<div
+		<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',
@@ -25,11 +25,13 @@ EInputKinds<template>
 				:placeholder="placeholder"
 				:value="modelValue"
 				:pattern="pattern"
+				:maxlength="maxlength"
+				:minlength="minlength"
 				@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
 			>
 
 			<slot name="postfix-icon" />
-		</div>
+		</label>
 		<ui-typography
 			v-if="subLabel"
 			:size="ETypographySizes.SM"
@@ -53,6 +55,8 @@ EInputKinds<template>
 		subLabel?: string;
 		type?: EInputType;
 		pattern?: string;
+		maxlength?: string;
+		minlength?: string;
 	}>();
 
 	defineEmits(["update:modelValue"]);

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

@@ -0,0 +1,5 @@
+export enum EListItemTypes {
+    DEFAULT = "DEFAULT",
+    COMPACT = "COMPACT", 
+    PROGRESS = "PROGRESS"
+}

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

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

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

@@ -1,19 +1,21 @@
 import UiListItem from "./ui-list-item.vue";
 import type { Story } from "@storybook/vue3";
+import { EListItemTypes } from "./_types";
 
 export default {
 	title: "Components/ui-list-item",
 	component: UiListItem,
 	argTypes: {
-		description: {
-			control: { type: "text" },
-			title: "The Element title",
+		kind: {
+			control: { type: "select" },
+			options: Object.values(EListItemTypes),
+			description: "The Element title",
 		}
 	},
 	args: {
-		slot: "some description text: lorem",
 		title: "default text",
-	}
+		kind: EListItemTypes.DEFAULT
+	},
 };
 
 type TComponentProps = InstanceType<typeof UiListItem>["$props"];
@@ -23,17 +25,13 @@ const Template: Story<TComponentProps> = (args) => ({
 	setup() {
 		return { args };
 	},
-	template: `
-		<ul class="grid gap-sm">
-			<ui-list-item :icon="['far', 'face-smile']" :title="args.title">
-			</ui-list-item>
-			<ui-list-item :icon="['far', 'face-smile']" :title="args.title">
-				{{args.slot}}
-			</ui-list-item>
-			<ui-list-item :icon="['far', 'face-smile']" :title="args.title">
-			</ui-list-item>
-		</ul>
-	`
+	template:/*html*/`
+			<ul>
+				<ui-list-item v-for= "item in 5" :key="item" :icon="['far', 'face-smile']" :title="args.title" :kind="args.kind">
+					{{ args.title }}
+				</ui-list-item>
+			</ul>
+	`,
 });
 
 export const Default = Template.bind({});

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

@@ -1,36 +1,56 @@
+
 <template>
-	<li class="ui-icon-list flex">
-		<ui-icon
-			v-if="icon"
-			class="mr-xs"
-			:size="ESize.SM"
-			:icon-name="icon"
+	<li class="ui-list-item flex gap-xs relative group">
+		<div
+			v-if="kind===EListItemTypes.PROGRESS"
+			class="ui-list-item__line bg-primary-300 h-full absolute w-xxs left-xs -translate-x-2/4 top-sm group-last:hidden"
 		/>
+		<div
+			class="z-0"
+			:class="[kind === EListItemTypes.DEFAULT && 'pb-sm',
+				kind === EListItemTypes.COMPACT && 'pb-xs', 
+				kind === EListItemTypes.PROGRESS &&'pb-md']"
+		>
+			<ui-icon
+				v-if="icon"
+				:kind="pickKind"
+				class="bg-white text-primary"
+				:icon-name="icon"
+				:size="ESize.SM"
+			/>
+		</div>
 
-		<div>
-			<ui-typography
+		<slot>
+			<ui-typography 
 				:weight="ETextWeight.SEMI_BOLD"
 			>
 				{{ title }}
 			</ui-typography>
-			<p
-				v-if="$slots.default"
-				class="mt-xs"
-			>
-				<slot />
-			</p>
-		</div>
+		</slot>
 	</li>
 </template>
 
 <script lang="ts" setup>
+	import { computed } from "vue";
 	import UiIcon, { type TIconName } from "../ui-icon";
-	import { ESize } from "../../_types/sizing";
 	import UiTypography, { ETextWeight } from "../ui-typography";
+	import { ESize } from "../../_types/sizing";
+	import { EListItemTypes } from "./_types";
+	
+	const props = withDefaults(defineProps<{
+		icon: TIconName;
+		title: string;
+		kind?:EListItemTypes;
+	}>(), {
+		kind: EListItemTypes.DEFAULT
+	});
 
-	defineProps<{
-		icon?: TIconName;
-		title?: string;
-	}>();
+	const pickKind = computed(()=>{
+		switch(props.kind){
+			case EListItemTypes.COMPACT: return EListItemTypes.COMPACT;
+			case EListItemTypes.PROGRESS: return EListItemTypes.PROGRESS;
+			default: return EListItemTypes.DEFAULT;
+		}
+	});
 
 </script>

package/src/components/ui-notification-badge/_types.ts

@@ -0,0 +1,11 @@
+export enum EBadgeOrigin {
+	DEFAULT = "default",
+	OFFSET_TOP_RIGHT = "offset-top-right"
+}
+
+export enum ENotificationBadgeSizes {
+	DEFAULT = "default",
+	SMALL = "sm",
+	MEDIUM = "md",
+	LARGE = "lg"
+}

package/src/components/ui-notification-badge/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ui-notification-badge.vue";
+export { EBadgeOrigin } from "./_types";