bonkers-ui 1.0.61 → 1.0.63

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

@@ -1,79 +0,0 @@
-<template>
-	<button
-		class="ui-button
-			text-base
-			grid
-			touch-manipulation
-			grid-flow-col
-			items-center
-			justify-center
-			whitespace-nowrap
-			rounded-lg
-			font-bold
-			leading-none
-			"
-		:disabled="disabled"
-		:class="[
-			(!kind || kind === EButtonTypes.PRIMARY) && [primaryColor, primaryColorHover, primaryColorActive].join(' '),
-			kind === EButtonTypes.SECONDARY
-				&& 'bg-secondary text-white hover:bg-secondary-600 active:bg-secondary-700 disabled:bg-secondary-300',
-			kind === EButtonTypes.WARNING
-				&& 'bg-warning text-white hover:bg-warning-600 active:bg-warning-700 disabled:bg-warning-300',
-			kind === EButtonTypes.ERROR
-				&& 'bg-error text-white hover:bg-error-600 active:bg-error-700 disabled:bg-error-300',
-			kind === EButtonTypes.PRIMARY_OVERLAY
-				&& `border border-primary text-primary hover:border-transparent hover:bg-primary-600
-					hover:text-white active:border-transparent active:bg-primary-700
-					active:text-white disabled:border-primary-300 disabled:text-primary-300`,
-			kind === EButtonTypes.SECONDARY_OVERLAY
-				&& `border border-secondary text-secondary hover:border-transparent hover:bg-secondary-600
-					hover:text-white active:border-transparent active:bg-secondary-700
-					active:text-white disabled:border-secondary-300 disabled:text-secondary-300`,
-			kind === EButtonTypes.WARNING_OVERLAY
-				&& `border border-warning text-warning hover:border-transparent hover:bg-warning-600
-					hover:text-white active:border-transparent active:bg-warning-700
-					active:text-white disabled:border-warning-300 disabled:text-warning-300`,
-			kind === EButtonTypes.ERROR_OVERLAY
-				&& `border border-error text-error hover:border-transparent hover:bg-error-600
-					hover:text-white active:border-transparent active:bg-error-700
-					active:text-white disabled:border-error-300 disabled:text-error-300`,
-			kind === EButtonTypes.LINK && `hover:text-accent-alt-600 active:text-accent-alt-700
-				disabled:text-accent-alt-300 text-accent-alt`,
-			(!size || size === EButtonSizes.DEFAULT) && 'px-md py-sm',
-			size === EButtonSizes.SMALL && 'px-md py-xs',
-			size === EButtonSizes.MEDIUM && 'p-sm',
-			size === EButtonSizes.LARGE && 'p-md',
-			($slots.default || $slots.postfix) && 'gap-sm',
-			fullWidth && 'w-full',
-			disabled && 'pointer-events-none',
-		]"
-	>
-		<slot name="prefix" />
-
-		<slot />
-
-		<slot name="postfix" />
-	</button>
-</template>
-
-<script lang="ts" setup>
-	import { EButtonSizes, EButtonTypes } from "./_typings";
-
-	type TProps = {
-		kind?: EButtonTypes;
-		size?: EButtonSizes;
-		fullWidth?: boolean;
-		disabled?: boolean;
-	}
-
-	const primaryColor = "text-white bg-primary disabled:bg-primary-300";
-	const primaryColorHover = "hover:bg-primary-600 ";
-	const primaryColorActive = "active:bg-primary-700 ";
-
-	withDefaults( defineProps<TProps>(), {
-		kind: EButtonTypes.PRIMARY,
-		size: EButtonSizes.DEFAULT,
-		fullWidth: false,
-		disabled: false,
-	});
-</script>

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

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

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

@@ -1,20 +0,0 @@
-import { ICON_DEFAULT } from "../../CONSTANTS";
-import UiCardCta from "../ui-card-cta";
-import type { Meta } from "@storybook/vue3";
-
-export default {
-	title: "Components/ui-card-cta",
-	component: UiCardCta,
-	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-} satisfies Meta<typeof UiCardCta>;
-
-export const Default = {
-	args: {
-		iconName: ICON_DEFAULT,
-		slot: "Description",
-		invertOrder: false,
-		disabled: false,
-		title: "Title",
-		description: "Description"
-	},
-};

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

@@ -1,83 +0,0 @@
-<template>
-	<button
-		class="
-			ui-card-cta
-			group
-			w-full
-			rounded-2xl
-			border
-			border-secondary-alt-500
-			bg-white
-			p-sm
-			text-left
-			shadow-md
-			outline-0
-			hover:border-secondary-700
-			focus:shadow-border-primary
-			active:bg-secondary-alt-200
-			disabled:pointer-events-none
-			disabled:bg-secondary-alt-200"
-		:disabled="disabled"
-	>
-		<span
-			class="group-disabled:opcity-50 grid w-full items-center gap-sm"
-			:class="{
-				'grid-cols-[auto,1fr]': !invertOrder,
-				'grid-cols-[1fr,auto]': invertOrder,
-			}"
-		>
-			<slot name="iconSlot">
-				<ui-icon-wrapper>
-					<ui-icon
-						v-if="iconName"
-						:icon-name="iconName"
-						:size="ESize.SM"
-						class="text-secondary-400"
-					/>
-				</ui-icon-wrapper>
-			</slot>
-			<span
-				class="w-full"
-				:class="invertOrder && 'order-first'"
-			>
-				<slot name="titleSlot">
-					<ui-typography
-						:kind="EColors.SECONDARY_400"
-						class="mb-xxs"
-						line-height
-					>
-						{{ title }}
-					</ui-typography>
-				</slot>
-
-				<slot name="descriptionSlot">
-					<ui-typography
-						:kind="EColors.SECONDARY_300"
-						:size="ETypographySizes.SM"
-						line-height
-					>
-						{{ description }}
-					</ui-typography>
-				</slot>
-			</span>
-		</span>
-	</button>
-</template>
-
-<script lang="ts" setup>
-	import UiTypography from "../ui-typography";
-	import UiIcon from "../ui-icon";
-	import UiIconWrapper from "../ui-icon-wrapper";
-	import { ETypographySizes } from "../ui-typography";
-	import { EColors } from "../../_types/colors";
-	import type { TIconName } from "../ui-icon";
-	import { ESize } from "../../_types/sizing";
-
-	defineProps<{
-		invertOrder?: boolean;
-		disabled?: boolean;
-		iconName?: TIconName;
-		title?: string;
-		description?: string;
-	}>();
-</script>

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

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

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

@@ -1,167 +0,0 @@
-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";
-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,
-			EColors 
-		};
-	},
-	template:
-	/*html*/`
-		<ui-card-result
-			v-bind="args"
-			header="Some header Some header Some header Some header Some 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>
-				<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 gap-xs items-center mb-xs"
-				>
-					<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 class="flex flex-wrap gap-xs mb-sm">
-					<ui-badge
-						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>
-
-				<ul>
-					<ui-list-item
-						v-for="item in 4"
-						class="mb-xxs items-center"
-						:key="item"
-						:icon="['far', 'face-smile']"
-						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>
-
-				<div :style="{display: 'grid', gridTemplateColumns: '1fr 1fr'}" class="items-center gap-sm mb-sm">
-					<ui-typography underline :size="ETypographySizes.SM" :kind="EColors.ACCENT">
-						Full Details
-					</ui-typography>
-
-					<ui-typography
-						class="text-right"
-						:weight="ETextWeight.BOLD"
-						:size="ETypographySizes.XL"
-						:kind="EColors.SECONDARY"
-					>
-						<p class="mb-xxs">€1004.63</p>
-						<ui-typography
-							:size="ETypographySizes.XS"
-							:kind="EColors.SECONDARY_400"
-						>
-							Monthly fee
-						</ui-typography>
-					</ui-typography>
-				</div>
-				<ui-button full-width>Some text</ui-button>
-			</template>
-		</ui-card-result>
-
-		`,
-});
-
-export const Default = Template.bind({});

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

@@ -1,97 +0,0 @@
-<template>
-	<div class="ui-card-result">
-		<div
-			v-if="exclusiveText"
-			class="-mb-lg rounded-2xl bg-primary px-sm pb-lg"
-			@click="exclusiveClickAction"
-		>
-			<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="relative grid overflow-hidden rounded-2xl border border-secondary-alt-400 bg-white">
-			<div
-				class="
-				ui-card-result__header
-				m-xs
-				mb-sm
-				grid
-				items-center
-				justify-between
-				gap-xs
-				rounded-lg
-				bg-secondary-alt-200
-				p-xs
-			"
-			>
-				<ui-typography
-					v-if="header"
-					line-height
-					class="line-clamp flex-1"
-					:size="ETypographySizes.SM"
-					:weight="ETextWeight.BOLD "
-					:kind="EColors.SECONDARY"
-				>
-					{{ header }}
-				</ui-typography>
-
-				<slot name="sidebar" />
-			</div>
-
-			<main class="w-full overflow-hidden bg-white p-sm pt-0">
-				<slot />
-			</main>
-		</div>
-
-		<div
-			v-if="exclusiveTextBottom"
-			class="-mt-lg rounded-2xl border border-secondary-alt-400 bg-secondary-alt-200 px-sm pt-lg"
-			@click="exclusiveBottomClickAction"
-		>
-			<ui-typography
-				class="py-xs"
-				:size="ETypographySizes.XXS"
-				:kind="EColors.SECONDARY"
-				: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";
-
-	defineProps<{
-		header?: string;
-		exclusiveText?: string;
-		exclusiveTextBottom?: string;
-		exclusiveClickAction?: () => void;
-		exclusiveBottomClickAction?: () => void;
-	}>();
-
-</script>
-
-<style scoped>
-	.ui-card-result__header {
-		grid-template-columns: 1fr auto;
-	}
-
-	.line-clamp {
-		display: -webkit-box;
-		overflow: hidden;
-		-webkit-line-clamp: 2;
-		-webkit-box-orient: vertical;
-	}
-</style>

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

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

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

@@ -1,40 +0,0 @@
-import UiCardSimple from "./ui-card-simple.vue";
-import type { Story } from "@storybook/vue3";
-
-export default {
-	title: "Components/ui-card-simple",
-	component: UiCardSimple,
-	argTypes: {},
-	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: /*html*/`
-
-		<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

@@ -1,30 +0,0 @@
-<template>
-	<div
-		class="ui-card-simple rounded-3xl bg-white px-sm py-md shadow-md"
-	>
-		<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();
-</script>

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

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

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

@@ -1,71 +0,0 @@
-import UiCheckbox from "./ui-checkbox.vue";
-import type { 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: {
-		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.slot}
-		</ui-checkbox>
-	`,
-});
-
-export const Default = Template.bind({});