bonkers-ui 1.0.4 → 1.0.7

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

@@ -0,0 +1,103 @@
+import UiCardResult from "./ui-card-result.vue";
+import UiTypography, { ETypographySizes, ETextWeight, ETextAlign } from "../ui-typography";
+import UiBadge from "../ui-badge";
+import UiListItem from "../ui-list-item";
+import UiButton, { EButtonTypes } from "../ui-button";
+import UiIcon from "../ui-icon";
+import { ESize } from "../../_types/sizing";
+import type { Story } from "@storybook/vue3";
+
+export default {
+	title: "Components/ui-card-result",
+	component: UiCardResult,
+	argTypes: {
+		exclusiveText: {
+			control: { type: "boolean" },
+			description: "Whether to show the exclusive text",
+		},
+		exclusiveTextBottom: {
+			control: { type: "boolean" },
+			description: "Whether to show the exclusive text",
+		},
+	},
+	args: {
+		slot: "default text",
+		exclusiveText: true,
+		exclusiveTextBottom: true,
+	},
+};
+
+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 };
+	},
+	template: `
+		<ui-card-result
+			v-bind="args"
+			header="Some header"
+			:exclusive-text="args.exclusiveText
+				? 'Only available on bonkers.ie'
+				: undefined"
+			:exclusive-text-bottom="args.exclusiveTextBottom
+				? 'The price changes made available on 04/04/2022 has been factored into your results'
+				: undefined"
+		>
+			<template #sidebar>
+				<ui-typography :size='ETypographySizes.XXS' line-height>
+					Special offer text
+				</ui-typography>
+			</template>
+
+			<template #default>
+				<div class="flex flex-wrap gap-xs mb-xs">
+					<ui-badge
+						v-for="item in ['10% annual overpayment allowance', 'Flexibility built in', 'Flexibility built in!', 'Flexibility built inas', 'lorem5 aslijdhsdoi ashjd oiahsjdoi ']"
+						:icon="['far', 'face-smile']"
+						:key="item"
+					>
+						{{ item }}
+					</ui-badge>
+				</div>
+
+				<ul>
+					<ui-list-item
+						v-for="item in 5"
+						class="mb-xs"
+						:key="item"
+						:icon="['far', 'face-smile']"
+					>
+						Feature item {{ item }}
+					</ui-list-item>
+				</ul>
+
+				<ui-typography
+					:weight="ETextWeight.BOLD"
+					:size="ETypographySizes.LG"
+					:align="ETextAlign.RIGHT"
+					class="mb-xs"
+				>
+					€1004.63 p/m
+				</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>
+
+			</template>
+		</ui-card-result>
+		`,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,70 @@
+<template>
+	<div class="ui-card-result__wrapper">
+		<div
+			v-if="exclusiveText"
+			class="ui-card-result__exclusive bg-primary rounded-2xl px-sm pb-lg -mb-lg"
+		>
+			<ui-typography
+				class="py-xs"
+				line-height
+				:size="ETypographySizes.XXS"
+				:kind="EColors.WHITE"
+				:align="ETextAlign.CENTER"
+				:weight="ETextWeight.SEMI_BOLD"
+			>
+				{{ exclusiveText }}
+			</ui-typography>
+		</div>
+
+		<div class="ui-card-result flex border border-secondary-alt rounded-2xl overflow-hidden">
+			<div
+				v-if="slots.sidebar"
+				class="ui-card-result__sidebar bg-secondary-alt-200 p-sm w-xl border-r border-secondary-alt flex items-center justify-center text-center"
+			>
+				<slot name="sidebar" />
+			</div>
+
+			<main class="p-sm bg-white w-full">
+				<ui-typography
+					v-if="header"
+					class="mb-xs"
+					:size="ETypographySizes.SM"
+					:weight="ETextWeight.SEMI_BOLD"
+				>
+					{{ header }}
+				</ui-typography>
+				<slot />
+			</main>
+		</div>
+
+		<div
+			v-if="exclusiveTextBottom"
+			class="ui-card-result__exclusive_bottom bg-secondary rounded-2xl px-sm pt-lg -mt-lg"
+		>
+			<ui-typography
+				class="py-xs"
+				:size="ETypographySizes.XXS"
+				:kind="EColors.WHITE"
+				:align="ETextAlign.CENTER"
+				line-height
+			>
+				{{ exclusiveTextBottom }}
+			</ui-typography>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import UiTypography, { ETypographySizes, ETextWeight, ETextAlign } from "../ui-typography";
+	import { EColors } from "../../_types/colors";
+	import { useSlots } from "vue";
+
+	const slots = useSlots();
+
+	defineProps<{
+		header?: string;
+		exclusiveText?: string;
+		exclusiveTextBottom?: string;
+	}>();
+
+</script>

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

@@ -1,16 +1,10 @@
 import UiCardSimple from "./ui-card-simple.vue";
-import { Story } from "@storybook/vue3";
+import type { Story } from "@storybook/vue3";
 
 export default {
 	title: "Components/ui-card-simple",
 	component: UiCardSimple,
-	argTypes: {
-		className: {
-			control: { type: "text" },
-			description: "The Element classes",
-		},
-
-	},
+	argTypes: {},
 	args: {
 		slot: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
 	},

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

@@ -1,7 +1,6 @@
 <template>
 	<div
-		class="ui-card-simple rounded-3xl shadow-m py-md px-sm"
-		:class="className"
+		class="ui-card-simple rounded-3xl shadow-md py-md px-sm bg-white"
 	>
 		<ui-typography
 			v-if="slots.title"
@@ -28,8 +27,4 @@
 	import { useSlots } from "vue";
 
 	const slots = useSlots();
-
-	defineProps<{
-		className? : string;
-	}>();
 </script>

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

@@ -1,5 +1,5 @@
 import UiCheckbox from "./ui-checkbox.vue";
-import { Story } from "@storybook/vue3";
+import type { Story } from "@storybook/vue3";
 import { ref } from "vue";
 import { EJustify } from "../../_types/align";
 
@@ -8,10 +8,6 @@ export default {
 	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),

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

@@ -10,7 +10,6 @@
 			justify === EJustify.EVENLY && 'justify-evenly',
 			justify === EJustify.CENTER && 'justify-center',
 			disabled && 'ui-checkbox_disabled',
-			className
 		]"
 	>
 		<input
@@ -58,7 +57,6 @@
 
 	defineProps<{
 		modelValue: boolean;
-		className?: string;
 		justify?: EJustify;
 		invertOrder?: boolean;
 		disabled?: boolean;

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

@@ -1,3 +1,10 @@
-export type TIconPrefix = "fab" | "far" | "fas" | "fal" | "fad" | "fat";
+export enum EIconType {
+	FAR = "far",
+	FAS = "fas",
+	FAB = "fab",
+	FAL = "fal",
+	FAD = "fad",
+	FAT = "fat",
+}
 
-export type TIconName = [TIconPrefix, string];
+export type TIconName = [EIconType, string];

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

@@ -1,5 +1,5 @@
 import UiIcon from "./ui-icon.vue";
-import { Story } from "@storybook/vue3";
+import type { Story } from "@storybook/vue3";
 import { ESize } from "../../_types/sizing";
 
 export default {
@@ -7,10 +7,6 @@ export default {
 	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",
@@ -39,7 +35,7 @@ const Template: Story<TComponentProps> = (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']" />
+		<ui-icon v-bind="args" :icon-name="['far', 'fa-face-smile']" />
 	`,
 });
 

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { Story } from "@storybook/vue3";
+import type { Story } from "@storybook/vue3";
 import UiInput from "./ui-input.vue";
 import Icon from "../../_samples/icon.vue";
 import { ref } from "vue";
@@ -9,10 +9,6 @@ export default {
 	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",
@@ -26,10 +22,16 @@ export default {
 			control: { type: "boolean" },
 			description: "The full width size",
 		},
+		disabled: {
+			control: { type: "boolean" },
+			description: "The Element disabled state",
+		},
 	},
 	args: {
 		placeholder: "Placeholder",
-		fullWidth: false
+		fullWidth: false,
+		kind: undefined,
+		disabled: false,
 	}
 };
 
@@ -47,7 +49,7 @@ const Template: Story<MyComponentProps> = (args: MyComponentProps) => ({
 		};
 	},
 	template: `
-		<ui-input v-bind="args" v-model="valueModel" />
+		<ui-input v-bind="args" v-model="valueModel" heading="heading" sub-label="subLabel" />
 	`
 });
 

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

@@ -1,30 +1,51 @@
 <template>
-	<div
-		class="ui-input grid rounded-md border border-secondary-alt-500 bg-white max-w-xs items-center p-xs gap-xs"
-		:class="[
-			kind === EInputTypes.PRIMARY && 'border-primary',
-			fullWidth && 'max-w-full',
-			className,
-		]"
-	>
-		<div class="icon-wrapper">
-			<slot name="prefix-icon" />
-		</div>
-		<input
-			class="bg-transparent border-0 outline-0"
-			type="text"
-			:placeholder="placeholder"
-			:value="modelValue"
-			@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
+	<div class="ui-input">
+		<ui-typography
+			v-if="heading"
+			:weight="ETextWeight.BOLD"
+			class="mb-sm"
+		>
+			{{ heading }}
+		</ui-typography>
+		<div
+			class="ui-input__wrapper grid rounded-lg border bg-white max-w-xs items-center p-sm gap-xs"
+			:class="[
+				!kind && 'border-secondary-alt-500 hover:border-secondary-alt-700',
+				kind === EInputTypes.PRIMARY && 'border-primary',
+				kind === EInputTypes.ERROR && 'border-error',
+
+				disabled && 'border-secondary-alt-300 bg-secondary-alt-200',
+
+				fullWidth && 'max-w-full',
+			]"
 		>
-		<div class="icon-wrapper">
-			<slot name="postfix-icon" />
+			<div class="icon-wrapper">
+				<slot name="prefix-icon" />
+			</div>
+			<input
+				class="bg-transparent border-0 outline-0"
+				type="text"
+				:placeholder="placeholder"
+				:value="modelValue"
+				@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
+			>
+			<div class="icon-wrapper">
+				<slot name="postfix-icon" />
+			</div>
 		</div>
+		<ui-typography
+			v-if="subLabel"
+			:size="ETypographySizes.SM"
+			class="mt-sm"
+		>
+			{{ subLabel }}
+		</ui-typography>
 	</div>
 </template>
 
 <script lang="ts" setup>
 	import { EInputTypes } from "./_typings";
+	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
 
 	defineProps<{
 		placeholder?: string;
@@ -32,14 +53,20 @@
 		disabled?: boolean;
 		fullWidth?: boolean;
 		kind?: EInputTypes;
-		className?: string;
+		heading?: string;
+		subLabel?: string;
 	}>();
 
 	defineEmits(["update:modelValue"]);
 </script>
 
 <style scoped>
-	.ui-input {
+	.ui-input__wrapper {
 		grid-template-columns: auto 1fr auto;
 	}
+
+	.ui-input__wrapper input::placeholder {
+		color: var(--color-secondary-alt-500);
+		font-style: italic;
+	}
 </style>

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

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

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

@@ -0,0 +1,44 @@
+import { ref } from "vue";
+import UiInputRange from "./ui-input-range.vue";
+import type { Story } from "@storybook/vue3";
+
+export default {
+	title: "Components/ui-input-range",
+	component: UiInputRange,
+	argTypes: {
+		min:{
+			control: { type: "number" },
+			description: "The Element min value",
+		},
+		max:{
+			control: { type: "number" },
+			description: "The Element max value",
+		},
+		step:{
+			control: { type: "number" },
+			description: "The Element max value",
+		}
+	},
+	args: {
+		min: 0,
+		max: 100,
+		step: 1,
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiInputRange>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiInputRange },
+	setup() {
+		const modelValue = ref(50);
+
+		return { args, modelValue };
+	},
+	template: `
+		<ui-input-range v-bind="args" v-model:modelValue="modelValue"/>
+		<div>{{ modelValue }}</div>
+	`,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,60 @@
+<template>
+	<div
+		class="ui-input-range relative h-lg"
+	>
+		<input
+			class="appearance-none cursor-pointer bg-transparent w-full h-full"
+			type="range"
+			:min="min"
+			:max="max"
+			:value="modelValue"
+			:step="step"
+			@input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+		>
+		<div class="ui-input-range__line h-xs w-full bg-secondary-alt rounded absolute left-0 -z-10" />
+		<div
+			class="ui-input-range__line h-xs bg-primary rounded absolute left-0 -z-10"
+			:style="{
+				width: getPercentage + '%',
+			}"
+		/>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import { computed } from "vue";
+
+	const props = defineProps<{
+		modelValue: string | number;
+		min: string | number;
+		max: string | number;
+		step: string | number;
+	}>();
+
+	defineEmits<{
+		(e: "update:modelValue", state: string | number): void
+	}>();
+
+	const getPercentage = computed(() => {
+		return Math.round(((+props.modelValue - +props.min) / (+props.max - +props.min)) * 100);
+	});
+</script>
+
+<style scoped>
+	input[type="range"]::-webkit-slider-thumb {
+		appearance: none;
+		background-color: var(--color-primary);
+		height: 13px;
+		width: 13px;
+		border-radius: 50%;
+		border: var(--xs) solid var(--color-white);
+		box-shadow: 0 0 0 4px var(--color-primary);
+		box-sizing: content-box;
+		z-index: 1;
+	}
+
+	.ui-input-range__line {
+		top: 50%;
+		transform: translate3d(0, -50%, 0);
+	}
+</style>

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

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

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

@@ -0,0 +1,35 @@
+import UiIconList from "./ui-list-item.vue";
+import type { Story } from "@storybook/vue3";
+
+export default {
+	title: "Components/ui-list-item",
+	component: UiIconList,
+	argTypes: {},
+	args: {
+		slot: "default text",
+	}
+};
+
+type TComponentProps = InstanceType<typeof UiIconList>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiIconList },
+	setup() {
+		return { args };
+	},
+	template: `
+		<ul>
+			<ui-icon-list :icon="['far', 'face-smile']">
+				{{args.slot}}
+			</ui-icon-list>
+			<ui-icon-list :icon="['far', 'face-smile']">
+				{{args.slot}}
+			</ui-icon-list>
+			<ui-icon-list :icon="['far', 'face-smile']">
+				{{args.slot}}
+			</ui-icon-list>
+		</ul>
+	`
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,29 @@
+<template>
+	<li class="ui-icon-list">
+		<ui-icon
+			v-if="icon"
+			class="mr-xs"
+			:size="ESize.SM"
+			:icon-name="icon"
+		/>
+
+		<ui-typography
+			is="span"
+			:weight="ETextWeight.SEMI_BOLD"
+			:size="ETypographySizes.SM"
+		>
+			<slot />
+		</ui-typography>
+	</li>
+</template>
+
+<script lang="ts" setup>
+	import UiIcon, { type TIconName } from "../ui-icon";
+	import { ESize } from "../../_types/sizing";
+	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+
+	defineProps<{
+		icon?: TIconName;
+	}>();
+
+</script>

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

@@ -1,5 +1,5 @@
 import UiRadio from "./ui-radio.vue";
-import { Story } from "@storybook/vue3";
+import type { Story } from "@storybook/vue3";
 import { ref } from "vue";
 import { EJustify } from "../../_types/align";
 
@@ -8,10 +8,6 @@ export default {
 	component: UiRadio,
 	// 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),
@@ -21,11 +17,16 @@ export default {
 			control: { type: "boolean" },
 			description: "The Element order",
 		},
+		disabled: {
+			control: { type: "boolean" },
+			description: "The Element disabled state",
+		},
 	},
 	args: {
 		slot: "Some text",
 		justify: EJustify.START,
 		invertOrder: false,
+		disabled: false,
 	},
 };
 
@@ -36,7 +37,7 @@ const Template: Story<TComponentProps> = (args) => ({
 	components: { UiRadio },
 	// The story's `args` need to be mapped into the template through the `setup()` method
 	setup() {
-		const modelValue = ref("value2");
+		const modelValue = ref("value4");
 
 		return { args, modelValue };
 	},
@@ -52,7 +53,7 @@ const Template: Story<TComponentProps> = (args) => ({
 			<ui-radio v-bind="args" name="radio" value="value3" v-model="modelValue">
 				{{args.slot}}
 			</ui-radio>
-			<ui-radio v-bind="args" name="radio" value="value4" v-model="modelValue">
+			<ui-radio v-bind="args" name="radio" disabled value="value4" v-model="modelValue">
 				{{args.slot}}
 			</ui-radio>
 		</div>