bonkers-ui 1.0.1 → 1.0.4

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

@@ -1,28 +1,45 @@
 <template>
 	<button
-		class="text-base text-white rounded-md"
+		class="text-base text-white rounded-md whitespace-nowrap font-bold leading-none"
+		:disabled="disabled"
 		:class="[
-			(!kind || kind === EButtonTypes.PRIMARY) && 'bg-primary',
-			kind === EButtonTypes.SECONDARY && 'bg-secondary',
-			kind === EButtonTypes.WARNING && 'bg-warning',
-			kind === EButtonTypes.ERROR && 'bg-error',
-			(!size || size === EButtonSizes.MEDIUM) && 'py-2.5 px-5',
-			size === EButtonSizes.LARGE && 'py-2.5 px-6',
-			classes
+			(!kind || kind === EButtonTypes.PRIMARY) && [primaryColor, primaryColorHover, primaryColorActive].join(' '),
+			kind === EButtonTypes.SECONDARY && 'bg-secondary hover:bg-secondary-600 active:bg-secondary-700 disabled:bg-secondary-300',
+			kind === EButtonTypes.WARNING && 'bg-warning hover:bg-warning-600 active:bg-warning-700 disabled:bg-warning-300',
+			kind === EButtonTypes.ERROR && 'bg-error hover:bg-error-600 active:bg-error-700 disabled:bg-error-300',
+			kind === EButtonTypes.PRIMARY_OVERLAY
+				&& 'text-primary border border-primary hover:bg-primary-600 hover:border-transparent hover:text-white active:bg-primary-700 active:border-transparent active:text-white disabled:text-primary-300 disabled:border-primary-300',
+			kind === EButtonTypes.SECONDARY_OVERLAY
+				&& 'text-secondary border border-secondary hover:bg-secondary-600 hover:border-transparent hover:text-white active:bg-secondary-700 active:border-transparent active:text-white disabled:text-secondary-300 disabled:border-secondary-300',
+			kind === EButtonTypes.WARNING_OVERLAY
+				&& 'text-warning border border-warning hover:bg-warning-600 hover:border-transparent hover:text-white active:bg-warning-700 active:border-transparent active:text-white disabled:text-warning-300 disabled:border-warning-300',
+			kind === EButtonTypes.ERROR_OVERLAY
+				&& 'text-error border border-error hover:bg-error-600 hover:border-transparent hover:text-white active:bg-error-700 active:border-transparent active:text-white disabled:text-error-300 disabled:border-error-300',
+			kind === EButtonTypes.LINK && 'text-accent-alt hover:text-accent-alt-600 active:text-accent-alt-700 disabled:text-accent-alt-300',
+			(!size || size === EButtonSizes.MEDIUM) && 'py-sm px-md',
+			size === EButtonSizes.SMALL && 'py-xs px-md',
+			size === EButtonSizes.LARGE && 'py-md px-md',
+			fullWidth && 'w-full',
+			disabled && 'pointer-events-none',
+			className
 		]"
 	>
-		{{ kind }}
 		<slot />
 	</button>
 </template>
 
 <script lang="ts" setup>
 	import { EButtonSizes, EButtonTypes } from "./_typings";
-
 	type TProps = {
-		classes?: string;
+		className?: string;
 		kind?: EButtonTypes;
-		size?: EButtonSizes
+		size?: EButtonSizes;
+		fullWidth?: boolean;
+		disabled?: boolean;
 	}
+
+	const primaryColor = "bg-primary disabled:bg-primary-300";
+	const primaryColorHover = "hover:bg-primary-600 ";
+	const primaryColorActive = "active:bg-primary-700 ";
 	defineProps<TProps>();
 </script>

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

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

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

@@ -0,0 +1,62 @@
+import UiCardCta from "./ui-card-cta.vue";
+import UiIcon from "../ui-icon";
+import { ESize } from "../../_types/sizing";
+import UiTypography from "../ui-typography";
+import { Story } from "@storybook/vue3";
+
+export default {
+	title: "Components/ui-card-cta",
+	component: UiCardCta,
+	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+	argTypes: {
+		className: {
+			control: { type: "text" },
+			description: "The Element classes",
+		},
+
+		invertOrder: {
+			control: { type: "boolean" },
+			description: "The Element order",
+		},
+		fullWidth: {
+			control: { type: "boolean" },
+			description: "The full width size",
+		},
+		disabled: {
+			control: { type: "boolean" },
+			description: "The full width size",
+		},
+	},
+	args: {
+		slot: "Description",
+		invertOrder: false,
+		fullWidth: false,
+		disabled: false
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiCardCta>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiCardCta, UiIcon, UiTypography },
+	setup() {
+		return { args, ESize };
+	},
+	template: `
+		<ui-card-cta v-bind="args">
+			<template v-slot:icon>
+				<ui-icon :size="ESize.MD" has-wrapper class-name="text-white" :icon-name="['fas', 'fa-user-secret']" />
+			</template>
+
+			<template v-slot:title>
+				Title
+			</template>
+
+			<template v-slot:description>
+				{{args.slot}}
+			</template>
+		</ui-card-cta>
+		`
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,85 @@
+<template>
+	<button
+		class="ui-card-cta outline-0 border border-secondary-alt-500 rounded-2xl p-sm shadow-m hover:border-secondary-700 focus:shadow-border-primary active:bg-secondary-alt-200 disabled:bg-secondary-alt-200"
+		:disabled="disabled"
+		:class="[!fullWidth && 'ui-card-cta_cropped', className]"
+	>
+		<span
+			class="ui-card-cta__wrapper 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"
+				:class="invertOrder && 'order-first'"
+			>
+				<ui-typography
+					:kind="EColors.SECONDARY"
+					:weight="ETextWeight.SEMI_BOLD"
+					class-name="mb-xxs"
+				>
+					<slot name="title" />
+				</ui-typography>
+
+				<ui-typography
+					:kind="EColors.SECONDARY_300"
+					:size="ETypographySizes.SM"
+				>
+					<slot name="description" />
+				</ui-typography>
+			</span>
+		</span>
+	</button>
+</template>
+
+<script lang="ts" setup>
+	import { useSlots } from "vue";
+	import UiTypography from "../ui-typography";
+	import { ETypographyColors, ETypographySizes, ETextWeight } from "../ui-typography/_typings";
+	import { EColors } from "../../_types/colors";
+
+	const slots = useSlots();
+
+	defineProps<{
+		className?: string;
+		invertOrder?: boolean;
+		fullWidth?: boolean;
+		disabled?: boolean;
+	}>();
+
+</script>
+
+<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_cropped {
+		max-width: 382px;
+	}
+
+	.ui-card-cta_inverted {
+		grid-template-columns: 1fr auto;
+	}
+</style>

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

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

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

@@ -0,0 +1,41 @@
+import UiCardSimple from "./ui-card-simple.vue";
+import { Story } from "@storybook/vue3";
+
+export default {
+	title: "Components/ui-card-simple",
+	component: UiCardSimple,
+	argTypes: {
+		className: {
+			control: { type: "text" },
+			description: "The Element classes",
+		},
+
+	},
+	args: {
+		slot: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiCardSimple>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiCardSimple },
+	setup() {
+		return { args };
+	},
+	template: `
+		<ui-card-simple>
+			<template v-slot:title>
+				I want to borrow for
+			</template>
+			<p class="mb-md text-center">
+				{{args.slot}}
+			</p>
+			<template v-slot:footerSubtitle>
+				Type in or adjust the amount
+			</template>
+		</ui-card-simple>
+	`,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,35 @@
+<template>
+	<div
+		class="ui-card-simple rounded-3xl shadow-m py-md px-sm"
+		:class="className"
+	>
+		<ui-typography
+			v-if="slots.title"
+			:weight="ETextWeight.BOLD"
+			:align="ETextAlign.CENTER"
+			class="pb-md"
+		>
+			<slot name="title" />
+		</ui-typography>
+
+		<slot />
+
+		<ui-typography
+			v-if="slots.footerSubtitle"
+			:align="ETextAlign.CENTER"
+		>
+			<slot name="footerSubtitle" />
+		</ui-typography>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import UiTypography, { ETextWeight, ETextAlign } from "../ui-typography";
+	import { useSlots } from "vue";
+
+	const slots = useSlots();
+
+	defineProps<{
+		className? : string;
+	}>();
+</script>

package/src/components/ui-checkbox/intext.ts

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

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

@@ -0,0 +1,62 @@
+import UiCheckbox from "./ui-checkbox.vue";
+import { Story } from "@storybook/vue3";
+import { ref } from "vue";
+import { EJustify } from "../../_types/align";
+
+export default {
+	title: "Components/ui-checkbox",
+	component: UiCheckbox,
+	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+	argTypes: {
+		className: {
+			control: { type: "text" },
+			description: "The Element classes",
+		},
+		justify: {
+			control: { type: "select" },
+			options: Object.values(EJustify),
+			description: "The Element justify",
+		},
+		invertOrder: {
+			control: { type: "boolean" },
+			description: "The Element order",
+		},
+		disabled: {
+			control: { type: "boolean" },
+			description: "The Element disabled state",
+		},
+		modelValue: {
+			control: { type: "boolean" },
+			description: "The Element disabled state",
+		},
+
+	},
+	args: {
+		slot: "Some text",
+		justify: EJustify.START,
+		invertOrder: false,
+		disabled: false,
+		modelValue: false,
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiCheckbox>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	// Components used in your story `template` are defined in the `components` object
+	components: { UiCheckbox },
+	// The story's `args` need to be mapped into the template through the `setup()` method
+	setup() {
+		const modelValue = ref(true);
+
+		return { args, modelValue };
+	},
+	// And then the `args` are bound to your component with `v-bind="args"`
+	template: `
+		<ui-checkbox v-bind="args" v-model:modelValue="args.modelValue">
+			${args.slot}
+		</ui-checkbox>
+	`,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,152 @@
+<template>
+	<label
+		class="ui-checkbox grid cursor-pointer"
+		:class="[
+			slots.default && 'items-center gap-sm',
+			(!justify || justify === EJustify.START) && 'justify-start',
+			justify === EJustify.END && 'justify-end',
+			justify === EJustify.AROUND && 'justify-around',
+			justify === EJustify.BETWEEN && 'justify-between',
+			justify === EJustify.EVENLY && 'justify-evenly',
+			justify === EJustify.CENTER && 'justify-center',
+			disabled && 'ui-checkbox_disabled',
+			className
+		]"
+	>
+		<input
+			:checked="modelValue"
+			class="appearance-none absolute"
+			type="checkbox"
+			:disabled="disabled"
+			@input="$emit('update:modelValue', !!($event.target as HTMLInputElement)?.value)"
+		>
+		<span
+			class="ui-checkbox_custom w-md h-md flex items-center justify-center border border-secondary-alt-500 rounded relative hover:border-secondary-alt-700"
+			:class="invertOrder && 'order-last'"
+		>
+			<svg
+				class="ui-checkbox__icon text-white"
+				width="16"
+				height="12"
+				viewBox="0 0 16 12"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M1 4.40106L6.60071 10.1135L15.1694 1.71245"
+					stroke="currentColor"
+					stroke-width="1.6"
+					stroke-linecap="round"
+				/>
+			</svg>
+
+		</span>
+		<span
+			v-if="slots.default"
+			class="ui-checkbox__slot-wrapper"
+		>
+			<slot />
+		</span>
+	</label>
+</template>
+
+<script lang="ts" setup>
+	import { useSlots } from "vue";
+	import { EJustify } from "../../_types/align";
+
+	const slots = useSlots();
+
+	defineProps<{
+		modelValue: boolean;
+		className?: string;
+		justify?: EJustify;
+		invertOrder?: boolean;
+		disabled?: boolean;
+	}>();
+
+	defineEmits<{
+		(e: "update:modelValue", state: boolean): void
+	}>();
+</script>
+
+<style scoped>
+	.ui-checkbox {
+		grid-template-columns: auto auto;
+	}
+
+	.ui-checkbox_custom {
+		transition: background-color ease-in-out 0.3s 0.3s, border-width ease-in-out 0.2s;
+	}
+
+	.ui-checkbox__icon {
+		stroke-dasharray: 70;
+		stroke-dashoffset: 70;
+		transition: stroke-dashoffset 0.3s ease-in-out;
+	}
+
+	input + .ui-checkbox_custom:active {
+		transition: background-color ease-in-out 0.1s;
+		background-color: var(--color-secondary-alt-200);
+	}
+
+	input + .ui-checkbox_custom:active,
+	input:focus + .ui-checkbox_custom {
+		box-shadow: var(--shadow-border-primary);
+	}
+
+	input:disabled + .ui-checkbox_custom {
+		background-color: var(--color-secondary-alt-200);
+		border-color: var(--color-secondary-alt-400);
+	}
+
+	input:checked + .ui-checkbox_custom .ui-checkbox__icon {
+		stroke-dashoffset: 0;
+	}
+
+	input:checked + .ui-checkbox_custom > svg {
+		opacity: 1;
+	}
+
+	input:checked + .ui-checkbox_custom {
+		border-width: 0;
+		background-color: var(--color-primary);
+		transition: background-color ease-in-out 0.1s, border-width ease-in-out 0.1s, box-shadow ease-in-out 0.2s;
+		animation: cb-pop 0.5s ease-in-out;
+	}
+
+	input:checked + .ui-checkbox_custom:hover {
+		background-color: var(--color-primary-600);
+	}
+
+	input:checked + .ui-checkbox_custom:active {
+		background-color: var(--color-primary-700);
+	}
+
+	input:checked:disabled + .ui-checkbox_custom {
+		background-color: var(--color-primary-300);
+		border: 1px solid var(--color-primary-400);
+	}
+
+	.ui-checkbox_disabled {
+		pointer-events: none;
+		cursor: default;
+	}
+
+	@keyframes cb-pop {
+		0% {
+			transform: scale(1);
+		}
+
+		33% {
+			transform: scale(0.95);
+		}
+
+		66% {
+			transform: scale(1.05);
+		}
+
+		100% {
+			transform: scale(1);
+		}
+	}
+</style>

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

@@ -0,0 +1,3 @@
+export type TIconPrefix = "fab" | "far" | "fas" | "fal" | "fad" | "fat";
+
+export type TIconName = [TIconPrefix, string];

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

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

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

@@ -0,0 +1,46 @@
+import UiIcon from "./ui-icon.vue";
+import { Story } from "@storybook/vue3";
+import { ESize } from "../../_types/sizing";
+
+export default {
+	title: "Components/ui-icon",
+	component: UiIcon,
+	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+	argTypes: {
+		className: {
+			control: { type: "text" },
+			description: "The Element classes",
+		},
+		hasWrapper:{
+			control: { type: "boolean" },
+			description: "The Icon show wrapper",
+		},
+		size: {
+			control: { type: "select" },
+			options: Object.values(ESize),
+			description: "The Element size",
+		}
+
+	},
+	args: {
+		size: ESize.LG,
+		hasWrapper: false,
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiIcon>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	// Components used in your story `template` are defined in the `components` object
+	components: { UiIcon },
+	// The story's `args` need to be mapped into the template through the `setup()` method
+	setup() {
+		return { args };
+	},
+	// And then the `args` are bound to your component with `v-bind="args"`
+	template: `
+		<ui-icon v-bind="args" :icon-name="['fas', 'fa-user-secret']" />
+	`,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,29 @@
+<template>
+	<font-awesome-icon
+		class="ui-icon"
+		:icon="iconName"
+		:class="[
+			size === ESize.XXS && 'h-xxs w-xxs',
+			size === ESize.XS && 'h-xs w-xs',
+			size === ESize.SM && 'h-sm w-sm',
+			size === ESize.MD && 'h-md w-md',
+			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',
+			className
+		]"
+	/>
+</template>
+
+<script lang="ts" setup>
+	import { ESize } from "../../_types/sizing";
+	import type { TIconName } from "./_typings";
+
+	defineProps<{
+		className?: string;
+		hasWrapper?: boolean;
+		size: ESize;
+		iconName: TIconName;
+	}>();
+</script>

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

@@ -0,0 +1,6 @@
+export enum EInputTypes {
+	PRIMARY = "primary",
+	SECONDARY = "secondary",
+	ERROR = "error",
+	WARNING = "warning",
+}

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

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

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

@@ -0,0 +1,90 @@
+import { Story } from "@storybook/vue3";
+import UiInput from "./ui-input.vue";
+import Icon from "../../_samples/icon.vue";
+import { ref } from "vue";
+import { EInputTypes } from "./_typings";
+
+export default {
+	title: "Components/ui-input",
+	component: UiInput,
+	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+	argTypes: {
+		className: {
+			control: { type: "text" },
+			description: "Custom class",
+		},
+		placeholder: {
+			control: { type: "text" },
+			description: "Placeholder",
+		},
+		kind: {
+			control: { type: "select" },
+			options: Object.values(EInputTypes),
+			description: "The input kinds",
+		},
+		fullWidth: {
+			control: { type: "boolean" },
+			description: "The full width size",
+		},
+	},
+	args: {
+		placeholder: "Placeholder",
+		fullWidth: false
+	}
+};
+
+type MyComponentProps = InstanceType<typeof UiInput>["$props"];
+
+const Template: Story<MyComponentProps> = (args: MyComponentProps) => ({
+	components:{
+		UiInput
+	},
+	setup(){
+		const valueModel = ref("");
+		return{
+			args,
+			valueModel
+		};
+	},
+	template: `
+		<ui-input v-bind="args" v-model="valueModel" />
+	`
+});
+
+const TemplateAll: Story<MyComponentProps> = (args: MyComponentProps) => ({
+	components:{
+		UiInput,
+		Icon
+	},
+	setup(){
+		const valueModel = ref("");
+
+		return{
+			args,
+			valueModel
+		};
+	},
+	template: `
+		<div :style="{
+			display: 'grid',
+			gridGap: '12px'
+		}">
+			<ui-input v-bind="args" v-model="valueModel">
+				<template v-slot:prefix-icon> € </template>
+			</ui-input>
+			<ui-input v-bind="args" v-model="valueModel">
+				<template v-slot:prefix-icon>
+					<icon :size="16" />
+				</template>
+			</ui-input>
+			<ui-input v-bind="args" v-model="valueModel">
+				<template v-slot:postfix-icon>
+					<icon :size="16" />
+				</template>
+			</ui-input>
+		</div>
+	`
+});
+
+export const Default = Template.bind({});
+export const AllInputs = TemplateAll.bind({});