bonkers-ui 1.0.2 → 1.0.5

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

@@ -0,0 +1,107 @@
+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: {
+		className: {
+			control: { type: "text" },
+			description: "The Element classes",
+		},
+		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-name="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-name="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-name="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-name="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-name="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,5 +1,5 @@
 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",

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

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="ui-card-simple rounded-3xl shadow-m py-md px-sm"
+		class="ui-card-simple rounded-3xl shadow-md py-md px-sm"
 		:class="className"
 	>
 		<ui-typography

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";
 

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

@@ -18,7 +18,7 @@
 			class="appearance-none absolute"
 			type="checkbox"
 			:disabled="disabled"
-			@input="$emit('update:modelValue', $event.target.checked)"
+			@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"

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 {
@@ -39,7 +39,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

@@ -18,7 +18,7 @@
 
 <script lang="ts" setup>
 	import { ESize } from "../../_types/sizing";
-	import { TIconName } from "./_typings";
+	import type { TIconName } from "./_typings";
 
 	defineProps<{
 		className?: string;

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";
@@ -26,10 +26,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 +53,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,52 @@
 <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.value)"
+	<div class="ui-input">
+		<ui-typography
+			v-if="heading"
+			:weight="ETextWeight.BOLD"
+			class-name="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',
+				className,
+			]"
 		>
-		<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-name="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;
@@ -33,13 +55,20 @@
 		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,48 @@
+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: {
+		className: {
+			control: { type: "text" },
+			description: "The Element classes",
+		},
+		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,62 @@
+<template>
+	<div
+		class="ui-input-range relative h-lg"
+		:class="className"
+	>
+		<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;
+		className?: string;
+	}>();
+
+	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,40 @@
+import UiIconList from "./ui-list-item.vue";
+import type { Story } from "@storybook/vue3";
+
+export default {
+	title: "Components/ui-list-item",
+	component: UiIconList,
+	argTypes: {
+		className: {
+			control: { type: "text" },
+			description: "The Element classes",
+		},
+	},
+	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-name="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";
 
@@ -21,11 +21,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 +41,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 +57,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>

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

@@ -9,6 +9,7 @@
 			justify === EJustify.BETWEEN && 'justify-between',
 			justify === EJustify.EVENLY && 'justify-evenly',
 			justify === EJustify.CENTER && 'justify-center',
+			disabled && 'pointer-events-none',
 			className
 		]"
 	>
@@ -18,11 +19,12 @@
 			type="radio"
 			:name="name"
 			:value="value"
+			:disabled="disabled"
 			class="appearance-none absolute"
-			@input="$emit('update:modelValue', $event.target.value)"
+			@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
 		>
 		<span
-			class="ui-radio_custom block w-md h-md border border-2 border-primary rounded-full relative"
+			class="ui-radio_custom block w-md h-md border border-secondary-alt rounded-full relative hover:border-secondary-alt-700 focus:border-secondary-alt-700"
 			:class="invertOrder && 'order-last'"
 		>
 			<span class="ui-radio__dot absolute top-2/4 left-2/4 w-xs h-xs block bg-primary rounded-full" />
@@ -42,13 +44,14 @@
 		value: string;
 		justify?: EJustify;
 		invertOrder?: boolean;
+		disabled?: boolean;
 	}>();
 
 	defineEmits(["update:modelValue"]);
 
 	const localValue = ref(props.modelValue);
 
-	watch(()=>props.modelValue, (newValue)=>{
+	watch(() => props.modelValue, (newValue) => {
 		if(newValue !== localValue.value){
 			localValue.value = newValue;
 		}
@@ -65,7 +68,37 @@
 		transition: transform 0.2s ease-in-out;
 	}
 
+	input:disabled + .ui-radio_custom {
+		border: 1px solid var(--color-secondary-alt-400);
+		background-color: var(--color-secondary-alt-200);
+	}
+
+	input:focus + .ui-radio_custom {
+		box-shadow: var(--shadow-border-primary);
+	}
+
+	input:checked + .ui-radio_custom {
+		border: 2px solid var(--color-primary);
+	}
+
 	input:checked + .ui-radio_custom .ui-radio__dot {
 		transform: translate3d(-50%, -50%, 0) scale(1);
 	}
+
+	input:checked + .ui-radio_custom:hover {
+		border: 2px solid var(--color-primary-600);
+	}
+
+	input:checked + .ui-radio_custom:hover .ui-radio__dot {
+		background-color: var(--color-primary-600);
+	}
+
+	input:checked:disabled + .ui-radio_custom {
+		border: 2px solid var(--color-primary-300);
+		background-color: var(--color-white);
+	}
+
+	input:checked:disabled + .ui-radio_custom .ui-radio__dot {
+		background-color: var(--color-primary-300);
+	}
 </style>