bonkers-ui 1.0.51 → 1.0.53

package/README.md

@@ -1,4 +1,5 @@
 # Vue 3 + TypeScript + Vite
+## [LINK](https://bonkers-ie.github.io/bonkers-ui/?path=/docs/example-introduction--docs)
 
 This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
@@ -28,7 +29,7 @@ This template should help get you started developing with Vue 3 and TypeScript i
 - After you ready to push just `merge`(not `rebase`) develop to current branch 
 - Fix merge conflicts if you have
 - Next create pull request to develop (you can do squash when merging)
-- After pull request is merged to develop you can see it in staging [https://bonkers-ie.github.io/bonkers-ui](https://bonkers-ie.github.io/bonkers-ui/?path=/story/example-introduction--page)
+- After pull request is merged to develop you can see it in staging [https://bonkers-ie.github.io/bonkers-ui](https://bonkers-ie.github.io/bonkers-ui/?path=/docs/example-introduction--docs)
 - Only after test staging you can create merge request from `develop` to `master`
 - After merge to master patch version will up x.x.^x and you can use this version in package
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bonkers-ui",
-    "version": "v1.0.51",
+    "version": "v1.0.53",
     "private": false,
     "scripts": {
         "storybook": "storybook dev -p 6006",
@@ -20,45 +20,45 @@
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/vue-fontawesome": "^3.0.3",
         "storybook-addon-designs": "^6.3.1",
-        "vue": "^3.2.47",
-        "vue-router": "^4.1.6"
+        "vue": "^3.3.4",
+        "vue-router": "^4.2.2"
     },
     "devDependencies": {
-        "@storybook/addon-essentials": "^7.0.8",
-        "@storybook/addon-links": "^7.0.8",
-        "@storybook/addon-mdx-gfm": "^7.0.8",
-        "@storybook/vue3": "^7.0.8",
-        "@storybook/vue3-vite": "^7.0.8",
-        "@typescript-eslint/eslint-plugin": "^5.59.2",
-        "@typescript-eslint/parser": "^5.59.2",
-        "@vitejs/plugin-vue": "^4.2.1",
+        "@storybook/addon-essentials": "^7.0.20",
+        "@storybook/addon-links": "^7.0.20",
+        "@storybook/addon-mdx-gfm": "^7.0.20",
+        "@storybook/vue3": "^7.0.20",
+        "@storybook/vue3-vite": "^7.0.20",
+        "@typescript-eslint/eslint-plugin": "^5.59.9",
+        "@typescript-eslint/parser": "^5.59.9",
+        "@vitejs/plugin-vue": "^4.2.3",
         "@vue/eslint-config-typescript": "^11.0.3",
         "@vue/test-utils": "^2.3.2",
-        "eslint": "8.39.0",
+        "eslint": "8.42.0",
         "eslint-plugin-storybook": "^0.6.12",
-        "eslint-plugin-vue": "^9.11.0",
+        "eslint-plugin-vue": "^9.14.1",
         "gh-pages": "^5.0.0",
         "husky": "4.3.8",
-        "jsdom": "^22.0.0",
+        "jsdom": "^22.1.0",
         "lint-staged": "^13.2.2",
-        "postcss": "^8.4.23",
+        "postcss": "^8.4.24",
         "postcss-html": "^1.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "storybook": "^7.0.8",
+        "storybook": "^7.0.20",
         "storybook-tailwind-dark-mode": "^1.0.22",
-        "stylelint": "^15.6.1",
+        "stylelint": "^15.7.0",
         "stylelint-config-recommended": "^12.0.0",
         "stylelint-config-recommended-vue": "^1.4.0",
         "stylelint-config-standard": "^33.0.0",
         "tailwindcss": "^3.3.2",
         "ts-node": "^10.9.1",
-        "typescript": "^5.0.4",
-        "vite": "^4.3.4",
-        "vitest": "^0.31.0",
-        "vue-eslint-parser": "^9.2.0",
-        "vue-loader": "^17.1.0",
-        "vue-tsc": "^1.6.4"
+        "typescript": "^5.1.3",
+        "vite": "^4.3.9",
+        "vitest": "^0.32.0",
+        "vue-eslint-parser": "^9.3.0",
+        "vue-loader": "^17.2.2",
+        "vue-tsc": "^1.6.5"
     },
     "lint-staged": {
         "*.{ts,tsx,vue}": [

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

@@ -15,12 +15,17 @@ export default {
 			control: { type: "select" },
 			options: Object.values(EBadgeSize),
 			description: "The Element size",
+		},
+		more: {
+			control: { type: "boolean" },
+			description: "The Element more",
 		}
 	},
 	args: {
 		slot: "default text",
 		kind: EBadgeKind.PRIMARY,
 		size: EBadgeSize.SMALL,
+		more: false,
 	},
 };
 
@@ -31,7 +36,7 @@ const Template: Story<TComponentProps> = (args) => ({
 	setup() {
 		return { args };
 	},
-	template: `
+	template: /*html*/`
 		<ui-badge :icon="['far', 'face-smile']" v-bind="args" class="inline-flex">
 			{{ args.slot }}
 		</ui-badge>

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

@@ -1,35 +1,52 @@
 <template>
 	<div
-		class="ui-badge rounded-full flex items-center content-center gap-xxs text-white"
+		class="ui-badge relative text-white overflow-hidden"
 		:class="[
-			(!size || size === EBadgeSize.SMALL) && 'px-xs py-xxs',
-			(!kind || kind === EBadgeKind.PRIMARY) && 'bg-primary-600',
-
-			kind === EBadgeKind.ERROR && 'bg-error-600',
-			kind === EBadgeKind.ACCENT && 'bg-accent-600',
-
-			size === EBadgeSize.MEDIUM && 'px-xs py-xs',
-			size === EBadgeSize.LARGE && 'px-sm py-xs',
-			elipsis && 'max-w-full',
+			more && 'mr-sm',
 		]"
 	>
-		<ui-icon
-			v-if="icon"
-			:size="ESize.SM"
-			:icon-name="icon"
+		<div class="relative z-[1] flex items-center content-center gap-xxs px-xs py-xxs">
+			<ui-icon
+				v-if="icon"
+				:size="ESize.XS"
+				:icon-name="icon"
+			/>
+
+			<ui-typography
+				v-if="slots.default"
+				:size="getBadgeSize"
+				:weight="ETextWeight.SEMI_BOLD"
+				class="whitespace-nowrap"
+				line-height
+				:class="[
+					elipsis && 'overflow-hidden overflow-ellipsis',
+				]"
+			>
+				<slot />
+			</ui-typography>
+		</div>
+
+		<div
+			v-if="more"
+			class="absolute top-0 left-[15px] w-full h-full bg-primary-300 rounded-full border border-white"
 		/>
 
-		<ui-typography
-			v-if="slots.default"
-			:size="getBadgeSize"
-			:weight="ETextWeight.REGULAR"
-			class="whitespace-nowrap"
+		<div
+			v-if="more"
+			class="absolute top-0 left-xs w-full h-full bg-primary-400 rounded-full border border-white"
+		/>
+
+		<div
+			class="absolute rounded-full top-0 left-0 w-full h-full"
 			:class="[
-				elipsis && 'overflow-hidden overflow-ellipsis',
+				(!kind || kind === EBadgeKind.PRIMARY) && 'bg-primary-600',
+
+				kind === EBadgeKind.ERROR && 'bg-error-600',
+				kind === EBadgeKind.ACCENT && 'bg-accent-600',
+				elipsis && 'max-w-full',
+				more && 'border border-white',
 			]"
-		>
-			<slot />
-		</ui-typography>
+		/>
 	</div>
 </template>
 
@@ -45,6 +62,7 @@
 		kind?: EBadgeKind;
 		icon?: TIconName;
 		elipsis?: boolean;
+		more?: boolean;
 	}>();
 
 	const slots = useSlots();

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

@@ -28,8 +28,8 @@
 					<ui-icon
 						v-if="iconName"
 						:icon-name="iconName"
-						:size="ESize.MD"
-						class="text-secondary-700"
+						:size="ESize.SM"
+						class="text-secondary-400"
 					/>
 				</ui-icon-wrapper>
 			</slot>
@@ -39,8 +39,7 @@
 				:class="invertOrder && 'order-first'"
 			>
 				<ui-typography
-					:kind="EColors.SECONDARY"
-					:weight="ETextWeight.SEMI_BOLD"
+					:kind="EColors.SECONDARY_400"
 					class="mb-xxs"
 					line-height
 				>
@@ -63,7 +62,7 @@
 	import UiTypography from "../ui-typography";
 	import UiIcon from "../ui-icon";
 	import UiIconWrapper from "../ui-icon-wrapper";
-	import { ETypographySizes, ETextWeight } from "../ui-typography";
+	import { ETypographySizes } from "../ui-typography";
 	import { EColors } from "../../_types/colors";
 	import type { TIconName } from "../ui-icon";
 	import { ESize } from "../../_types/sizing";

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

@@ -1,3 +1,4 @@
+import { EColors } from "./../../_types/colors";
 import UiCardResult from "./ui-card-result.vue";
 import UiTypography, { ETypographySizes, ETextWeight, ETextAlign } from "../ui-typography";
 import UiBadge from "../ui-badge";
@@ -32,7 +33,7 @@ type TComponentProps = InstanceType<typeof UiCardResult>["$props"];
 const Template: Story<TComponentProps> = (args) => ({
 	components: { UiCardResult, UiTypography, UiBadge, UiListItem, UiButton, UiIcon },
 	setup() {
-		return { args, ETypographySizes, ETextWeight, ETextAlign, EButtonTypes, ESize };
+		return { args, ETypographySizes, ETextWeight, ETextAlign, EButtonTypes, ESize, EColors };
 	},
 	template:
 	/*html*/`
@@ -47,54 +48,97 @@ const Template: Story<TComponentProps> = (args) => ({
 				: undefined"
 		>
 			<template #sidebar>
-				<ui-typography :size='ETypographySizes.XXS' line-height :style="{height: '64px', width: '64px', border: '1px solid black'}" class="flex items-center">
-					Special offer text
-				</ui-typography>
+				<div class="flex gap-sm">
+					<ui-typography :size='ETypographySizes.XXS' line-height :style="{height: '64px', width: '64px', border: '1px solid black'}" class="flex items-center p-sm text-center">
+						Special offer text
+					</ui-typography>
+
+					<ui-typography :size='ETypographySizes.XXS' line-height :style="{height: '64px', width: '64px', border: '1px solid black'}" class="flex items-center p-sm text-center">
+						Special offer text
+					</ui-typography>
+				</div>
 			</template>
 
 			<template #default>
-				<div class="flex flex-wrap gap-xs mb-xs">
+				<div class="flex flex-wrap gap-xs mb-sm">
 					<ui-badge
-						v-for="item in ['10% annual overpayment allowance', 'Flexibility built in', 'Flexibility built in!', 'Flexibility built inas', 'lorem5 aslijdhsdoi ashjd oiahsjdoi ']"
+						v-for="item in ['Free bank tranfers']"
 						:icon="['far', 'face-smile']"
 						:key="item"
 					>
 						{{ item }}
 					</ui-badge>
+
+					<ui-badge
+						:icon="['far', 'face-smile']"
+						more
+					>
+						more...
+					</ui-badge>
+
+					<div
+						class="flex gap-xs items-center justify-center"
+						:style="{marginLeft: 'auto'}"
+					>
+						<ui-icon
+							class="text-primary"
+							:size="ESize.SM"
+							:icon-name="['far', 'face-smile']"
+						/>
+
+						<ui-icon
+							class="text-primary"
+							:size="ESize.SM"
+							:icon-name="['far', 'face-smile']"
+						/>
+
+						<ui-icon
+							class="text-secondary-alt-300"
+							:size="ESize.SM"
+							:icon-name="['far', 'face-smile']"
+						/>
+					</div>
 				</div>
 
 				<ul>
 					<ui-list-item
-						v-for="item in 5"
-						class="mb-xs"
+						v-for="item in 4"
+						class="mb-xxs items-center"
 						:key="item"
 						:icon="['far', 'face-smile']"
-						:title="'Feature item ' + item"
-					/>
+						icon-class="text-secondary-alt"
+					>
+						<p>
+							<ui-typography is="span" :weight="ETextWeight.BOLD">
+								{{item}}
+							</ui-typography>
+
+							<span> Feature item</span>
+						</p>
+					</ui-list-item>
 				</ul>
 
+				<ui-typography class="mb-sm" underline :size="ETypographySizes.SM" :kind="EColors.SECONDARY">
+					Some link
+				</ui-typography>
+
 				<div :style="{display: 'grid', gridTemplateColumns: '1fr 1fr'}" class="items-center gap-sm">
 					<ui-typography
 						:weight="ETextWeight.BOLD"
-						:size="ETypographySizes.XXL"
+						:size="ETypographySizes.XL"
+						:kind="EColors.SECONDARY"
 					>
-						€1004.63 p/m
+						<p class="mb-xxs">€1004.63</p>
+						<ui-typography
+							:size="ETypographySizes.XS"
+							:kind="EColors.SECONDARY_400"
+						>
+							Monthly fee
+						</ui-typography>
 					</ui-typography>
 
-					<div class="flex gap-sm">
-						<ui-button :kind="EButtonTypes.SECONDARY_OVERLAY">
-							<template #prefix>
-								<ui-icon
-									:icon-name="['far', 'face-smile']"
-									:size="ESize.SM"
-								/>
-							</template>
-						</ui-button>
-
-						<ui-button full-width>Some text</ui-button>
-					</div>
+					<ui-button full-width>Some text</ui-button>
 				</div>
-
 			</template>
 		</ui-card-result>
 

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

@@ -17,7 +17,7 @@
 			</ui-typography>
 		</div>
 
-		<div class="grid border border-secondary-alt-400 rounded-2xl overflow-hidden bg-white">
+		<div class="grid relative border border-secondary-alt-400 rounded-2xl overflow-hidden bg-white">
 			<div class="ui-card-result__header grid gap-xs justify-between items-center rounded-lg bg-secondary-alt-200 p-xs m-xs mb-sm">
 				<ui-typography
 					v-if="header"
@@ -25,6 +25,7 @@
 					class="flex-1 line-clamp"
 					:size="ETypographySizes.SM"
 					:weight="ETextWeight.SEMI_BOLD"
+					:kind="EColors.SECONDARY"
 				>
 					{{ header }}
 				</ui-typography>
@@ -32,20 +33,20 @@
 				<slot name="sidebar" />
 			</div>
 
-			<main class="p-sm w-full overflow-hidden bg-white">
+			<main class="p-sm pt-0 w-full overflow-hidden bg-white">
 				<slot />
 			</main>
 		</div>
 
 		<div
 			v-if="exclusiveTextBottom"
-			class="bg-secondary rounded-2xl px-sm pt-lg -mt-lg"
+			class="bg-secondary-alt-200 rounded-2xl px-sm pt-lg -mt-lg border border-secondary-alt-400"
 			@click="exclusiveBottomClickAction"
 		>
 			<ui-typography
 				class="py-xs"
 				:size="ETypographySizes.XXS"
-				:kind="EColors.WHITE"
+				:kind="EColors.SECONDARY"
 				:align="ETextAlign.CENTER"
 				line-height
 			>

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

@@ -9,5 +9,6 @@ export enum EInputType {
 	NUMBER = "number",
 	TEL = "tel",
 	PASSWORD = "password",
-	EMAIL = "email"
+	EMAIL = "email",
+	DATE = "date",
 }

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

@@ -22,6 +22,7 @@
 			<slot name="prefix-icon" />
 
 			<input
+				:autocomplete="autocomplete"
 				:value="modelValue"
 				:pattern="pattern"
 				class="bg-transparent border-0 outline-none w-full placeholder:text-secondary-alt placeholder:italic"
@@ -39,6 +40,7 @@
 		<slot name="subLabel">
 			<ui-typography
 				v-if="subLabel"
+				line-height
 				:size="ETypographySizes.SM"
 				:kind="EColors.SECONDARY_ALT"
 				class="mt-xs"
@@ -65,9 +67,11 @@
 		maxlength?: string;
 		minlength?: string;
 		focusHandler?: (e:FocusEvent) => void;
+		autocomplete?: string;
 	}>(), {
 		modelValue: "",
 		placeholder: "",
+		autocomplete: "off",
 		heading: undefined,
 		subLabel: undefined,
 		pattern: undefined,

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

@@ -35,8 +35,10 @@ const Template: Story<TComponentProps> = (args) => ({
 
 		return { args, modelValue };
 	},
-	template: `
-		<ui-input-range v-bind="args" v-model:modelValue="modelValue"/>
+	template: /*html*/`
+		<div :style="{border: '1px solid'}">
+			<ui-input-range v-bind="args" v-model:modelValue="modelValue"/>
+		</div>
 		<div>{{ modelValue }}</div>
 	`,
 });

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

@@ -1,9 +1,8 @@
 <template>
 	<div
-		class="ui-input-range relative h-lg mx-xs py-xs box-content"
+		class="ui-input-range relative h-lg py-xs box-content"
 	>
 		<input
-			ref="track"
 			v-model.number="rangeModel"
 			class="appearance-none absolute top-0 left-0 cursor-pointer bg-transparent w-full h-full"
 			type="range"
@@ -12,11 +11,13 @@
 			:step="step"
 			@touchmove="moveHandler"
 		>
+
 		<div
-			class="ui-input-range__line h-xs w-full bg-secondary-alt rounded absolute left-0 -z-10 -translate-y-1/2"
+			class="h-xs w-full bg-secondary-alt rounded absolute top-1/2 left-0 -translate-y-1/2 pointer-events-none"
 		/>
+
 		<div
-			class="ui-input-range__line h-xs bg-primary rounded absolute left-0 -z-10 -translate-y-1/2"
+			class="h-xs bg-primary rounded absolute top-1/2 left-0 -translate-y-1/2 pointer-events-none"
 			:style="{
 				width: getPercentage + '%',
 			}"
@@ -116,10 +117,6 @@
 		box-shadow: none;
 	}
 
-	.ui-input-range__line {
-		top: 50%;
-	}
-
 	.ui-input-range__thumb {
 		top: 50%;
 		border-width: 12px;

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

@@ -46,9 +46,9 @@ export const Default = (args) => ({
 	},
 	template:/*html*/`
 			<ul>
-				<ui-list-item v-bind="args" :icon="ICON_DEFAULT" title="title only" />
+				<ui-list-item v-bind="args" :icon="ICON_DEFAULT" title="title only" icon-class="text-secondary-alt" />
 
-				<ui-list-item :icon="ICON_DEFAULT" :spacing="args.spacing">
+				<ui-list-item :icon="ICON_DEFAULT" :kind="args.kind" :spacing="args.spacing">
 					text only
 				</ui-list-item>
 
@@ -56,7 +56,7 @@ export const Default = (args) => ({
 					{{ args.title }}
 				</ui-list-item>
 
-				<ui-list-item v-bind="args" :icon="ICON_DEFAULT" />
+				<ui-list-item v-bind="args" icon-class="text-secondary-alt" :icon="ICON_DEFAULT" />
 			</ul>
 	`,
 });

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

@@ -1,7 +1,7 @@
 
 <template>
 	<li
-		class="ui-list-item grid grid-flow-col justify-start gap-xs relative group"
+		class="ui-list-item grid grid-flow-col justify-start gap-xs relative group text-secondary"
 		:class="[
 			size === EListItemSize.SM && 'text-sm',
 			size === EListItemSize.MD && 'text-md',
@@ -17,24 +17,29 @@
 		<slot name="icon">
 			<ui-icon
 				v-if="icon"
-				class="bg-white z-[1]"
+				class="bg-white"
+				:class="iconClass"
 				:icon-name="icon"
 				:size="ESize.SM"
 			/>
 		</slot>
 
-		<ui-typography
-			:weight="ETextWeight.LIGHT"
-			class="grid gap-sm"
-		>
+		<div>
 			<ui-typography
 				v-if="title"
 				:weight="ETextWeight.SEMI_BOLD"
 			>
 				{{ title }}
 			</ui-typography>
-			<slot />
-		</ui-typography>
+
+			<ui-typography
+				v-if="$slots.default"
+				:class="[title && 'mt-xxs']"
+				:weight="ETextWeight.LIGHT"
+			>
+				<slot />
+			</ui-typography>
+		</div>
 	</li>
 </template>
 
@@ -50,12 +55,14 @@
 		kind?: EListItemTypes
 		size?: EListItemSize
 		spacing?: EListItemSpacing
+		iconClass?: string
 	}>(), {
 		kind: EListItemTypes.DEFAULT,
 		size: EListItemSize.SM,
 		spacing: EListItemSpacing.COMPACT,
 		title: "",
-		icon: undefined
+		icon: undefined,
+		iconClass: "",
 	});
 
 </script>

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

@@ -13,12 +13,13 @@
 				bg-white
 				overflow-y-scroll
 				max-height
+				max-width
 			"
 		:class="[
 			modalSize === EModalSizes.SM &&'h-fit max-w-[24rem]',
 			modalSize === EModalSizes.MD &&'h-fit max-w-[32rem]',
 			modalSize === EModalSizes.LG &&'h-fit max-w-[40rem]',
-			modalSize === EModalSizes.RESPONSIVE && 'max-width h-full',
+			modalSize === EModalSizes.RESPONSIVE && 'h-full',
 		]"
 	>
 		<div

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

@@ -96,7 +96,7 @@
 </template>
 
 <script lang="ts" setup>
-	import { computed, withDefaults } from "vue";
+	import { computed } from "vue";
 	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
 	import type { TIconName } from "../ui-icon";
 	import { ESize } from "../../_types/sizing";

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

@@ -5,6 +5,7 @@
 		<slot name="header">
 			<ui-typography
 				:weight="ETextWeight.BOLD"
+				line-height
 				class="mb-sm"
 			>
 				{{ header }}
@@ -56,7 +57,9 @@
 					:size="ETypographySizes.SM"
 					class="w-full"
 					line-height
-				>{{ title }}</ui-typography>
+				>
+					{{ title }}
+				</ui-typography>
 			</slot>
 		</label>
 	</div>