bonkers-ui 1.0.26 → 1.0.28

package/package.json

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

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

@@ -1,10 +1,11 @@
 <template>
 	<button
-		class="ui-button justify-center grid text-base rounded-lg whitespace-nowrap font-bold leading-none touch-manipulation items-center"
+		class="ui-button grid justify-center items-center grid-flow-col text-base rounded-lg whitespace-nowrap font-bold leading-none touch-manipulation "
 		:disabled="disabled"
 		:class="[
 			(!kind || kind === EButtonTypes.PRIMARY) && [primaryColor, primaryColorHover, primaryColorActive].join(' '),
-			kind === EButtonTypes.SECONDARY && 'text-white bg-secondary hover:bg-secondary-600 active:bg-secondary-700 disabled:bg-secondary-300',
+			kind === EButtonTypes.SECONDARY
+				&& 'text-white bg-secondary hover:bg-secondary-600 active:bg-secondary-700 disabled:bg-secondary-300',
 			kind === EButtonTypes.WARNING && 'text-white bg-warning hover:bg-warning-600 active:bg-warning-700 disabled:bg-warning-300',
 			kind === EButtonTypes.ERROR && 'text-white bg-error hover:bg-error-600 active:bg-error-700 disabled:bg-error-300',
 			kind === EButtonTypes.PRIMARY_OVERLAY
@@ -20,35 +21,22 @@
 			size === EButtonSizes.SMALL && 'py-xs px-md',
 			size === EButtonSizes.MEDIUM && 'py-sm px-sm',
 			size === EButtonSizes.LARGE && 'py-md px-md',
+			($slots.default || $slots.postfix) && 'gap-sm',
 			fullWidth && 'w-full',
 			disabled && 'pointer-events-none',
 		]"
 	>
-		<span
-			v-if="slots.prefix"
-			class="ui-button__prefix"
-			:class="(slots.default || slots.postfix) && 'mr-sm'"
-		>
-			<slot name="prefix" />
-		</span>
+		<slot name="prefix" />
 
-		<span>
-			<slot />
-		</span>
+		<slot />
 
-		<span
-			v-if="slots.postfix"
-			class="ui-button__postfix"
-			:class="(slots.default || slots.prefix) && 'ml-sm'"
-		>
-			<slot name="postfix" />
-		</span>
+		<slot name="postfix" />
 	</button>
 </template>
 
 <script lang="ts" setup>
 	import { EButtonSizes, EButtonTypes } from "./_typings";
-	import { useSlots } from "vue";
+
 	type TProps = {
 		kind?: EButtonTypes;
 		size?: EButtonSizes;
@@ -56,17 +44,14 @@
 		disabled?: boolean;
 	}
 
-	const slots = useSlots();
-
 	const primaryColor = "text-white bg-primary disabled:bg-primary-300";
 	const primaryColorHover = "hover:bg-primary-600 ";
 	const primaryColorActive = "active:bg-primary-700 ";
 
-	defineProps<TProps>();
+	withDefaults( defineProps<TProps>(), {
+		kind: EButtonTypes.PRIMARY,
+		size: EButtonSizes.DEFAULT,
+		fullWidth: false,
+		disabled: false,
+	});
 </script>
-
-<style>
-	.ui-button {
-		grid-template-columns: auto auto auto;
-	}
-</style>

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

@@ -1 +1 @@
-export { default } from "./ui-card-simple.vue";
+export { default } from "./ui-result-card.vue";

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

@@ -18,8 +18,10 @@
 	import { ESize } from "../../_types/sizing";
 	import type { TIconName } from "./_typings";
 
-	defineProps<{
-		size: ESize;
+	withDefaults(defineProps<{
+		size?: ESize;
 		iconName: TIconName;
-	}>();
+	}>(), {
+		size: ESize.SM
+	});	
 </script>

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

@@ -9,7 +9,6 @@
 			:name="name"
 			:value="value"
 			class="peer group appearance-none absolute"
-			:class="disabled && 'pointer-events-none opacity-50'"
 		>
 		<div
 			class="

package/src/components/ui-result-card-range/_types.ts

@@ -0,0 +1,8 @@
+export enum EResultCardRangeSizes {
+DEFAULT = "DEFAULT",
+}
+
+export enum EResultCardRangeTypes {
+    DEFAULT = "DEFAULT",
+    FULL = "FULL",
+}

package/src/components/ui-result-card-range/index.ts

@@ -0,0 +1 @@
+export { default } from "./ui-result-card-range.vue";

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

@@ -0,0 +1,68 @@
+import UiResultCardRange from "../ui-result-card-range";
+
+export default {
+	title: "Components/ui-result-card-range",
+	component: UiResultCardRange,
+	argTypes: {
+		slot: {
+			control: { type: "text" },
+			description: "The slot text or component",
+		},
+		title: {
+			control: { type: "text" },
+			description: "The title text",
+		},
+	},
+	args: {
+		title: "This is a Title",
+		slot: "This is the body",
+	},
+};
+
+const Template = (args) => ({
+	components: { UiResultCardRange },
+	setup() {
+		return { args };
+	},
+	template:/*html*/`
+		<ui-result-card-range :icon-name="['far', 'fa-face-smile']" :title="args.title">
+			{{args.slot}}
+		</ui-result-card-range>
+    `,
+});
+
+const TemplateAll = (args) => ({
+	components: { UiResultCardRange },
+	setup() {
+		return { args };
+	},
+	template:/*html*/`
+    <div class="ui-result-card-range grid gap-sm w-full">
+		
+		<ui-result-card-range style="grid-column: 1 / 1"
+		 	:icon-name="['far', 'fa-face-smile']" :title="args.title">
+			{{args.slot}}
+		</ui-result-card-range>
+
+		<ui-result-card-range style="grid-column: 2 / 2"
+			 :icon-name="['far', 'fa-face-smile']" :title="args.title">
+			 {{args.slot}}
+
+		</ui-result-card-range>
+		
+		<ui-result-card-range style="grid-column: 1 / 3; flex-direction: row; justify-content: space-between;">
+
+				<b>25/02/2022</b>
+				<b>→</b>
+				<b>26/01/2023</b>
+
+		</ui-result-card-range>
+	</div>
+    `,
+});
+
+export const singleCard = Template.bind({
+	
+});
+
+export const FullCard = TemplateAll.bind({});

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

@@ -0,0 +1,46 @@
+<template>
+	<div
+		class="
+			ui-result-card-range
+			w-full
+			flex
+			flex-col
+			items-center
+			border
+			border-secondary-alt-300
+			bg-secondary-alt-200
+			rounded-2xl
+			text-secondary-500 p-md"
+	>
+		<ui-icon
+			v-if="iconName"
+			class="rounded-full mb-md"
+			:size="ESize.MD"
+			:icon-name="iconName"
+		/>
+		<ui-typography 
+			v-if="title"
+			class="mb-xs"
+			:size="ETypographySizes.MD"
+			:weight="ETextWeight.BOLD"
+			:align="ETextAlign.CENTER"
+		>
+			{{ title }}
+		</ui-typography>
+		
+		<slot />
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import uiIcon, { ESize, type TIconName } from "../ui-icon";
+	import UiTypography, { ETextWeight, ETypographySizes, ETextAlign } from "../ui-typography";
+
+	defineProps<{
+		iconName?: TIconName;
+		title?: string;
+		size?: string;
+		description?: string;
+	}>();
+
+</script>