bonkers-ui 1.0.23 → 1.0.25

package/.storybook/BonkersTheme.js

@@ -0,0 +1,32 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+    base: 'light',
+    colorPrimary: '#56c55d',
+    colorSecondary: 'rgba(86, 197, 93, 0.9)',
+
+    // UI
+    appBg: 'white',
+    appContentBg: 'white',
+    appBorderColor: 'silver',
+    appBorderRadius: 4,
+
+    // Text colors
+    textColor: 'black',
+    textInverseColor: 'rgba(255,255,255,0.9)',
+
+    // Toolbar default and active colors
+    barTextColor: 'silver',
+    barSelectedColor: '#56c55d',
+    barBg: 'white',
+
+    // Form colors
+    inputBg: 'white',
+    inputBorder: 'silver',
+    inputTextColor: 'black',
+    inputBorderRadius: 4,
+
+    brandTitle: 'Bonkers-UI Design System',
+    brandUrl: 'https://github.com/bonkers-ie/bonkers-ui',
+    brandImage: 'https://web-assets.bonkers.ie/packs/static/logo/bonkers_logo-279f0cff5a9b71e3059a.svg',
+});

package/.storybook/manager.js

@@ -0,0 +1,7 @@
+
+import { addons } from '@storybook/addons';
+import BonkersTheme from './BonkersTheme';
+
+addons.setConfig({
+    theme: BonkersTheme,
+});

package/.storybook/preview.js

@@ -6,10 +6,10 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 /* import specific icons */
-import { faFaceSmile } from '@fortawesome/free-regular-svg-icons';
+import { faFaceSmile, faCircleCheck } from '@fortawesome/free-regular-svg-icons';
 
 /* add icons to the library */
-library.add(faFaceSmile);
+library.add(faFaceSmile, faCircleCheck);
 
 import '../src/main.css';
 
@@ -19,6 +19,24 @@ export const parameters = {
 	darkMode: false,
 	stylePreview: true,
 	actions: {argTypesRegex: "^on[A-Z].*"},
+	backgrounds: {
+		default: "Bonkers",
+		values: [
+			{
+				name: "Bonkers",
+				value: "url(https://web-assets.bonkers.ie/maverick/img/about.0ed347c.png)",
+			},
+			{
+				name: "Light",
+				value: "#ffffff"
+			},
+			{
+				name: "Dark",
+				value: "#202124"
+			}
+		],
+	},
+	layout: "padded",
 	controls: {
 		matchers: {
 			color: /(background|color)$/i,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "private": false,
   "scripts": {
     "storybook": "start-storybook -p 6006",
@@ -19,6 +19,8 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/vue-fontawesome": "^3.0.1",
+    "@vueuse/components": "^9.4.0",
+    "@vueuse/core": "^9.4.0",
     "husky": "4.3.8",
     "vue": "^3.2.41"
   },

package/src/_styles/classTypes/_shadow.json

@@ -1,4 +1,6 @@
 {
 	"md": "var(--shadow-size-md)",
-	"border-primary": "var(--shadow-border-primary)"
+	"border-primary": "var(--shadow-border-primary)",
+	"border-selected": "var(--shadow-border-selected)",
+	"selected-shadow": "var(--shadow-selected-shadow)"
 }

package/src/_styles/variables/shadow.css

@@ -3,6 +3,8 @@
 		/* shadow sizes */
 		--shadow-size-md: 0 2px 4px 0 rgb(180 184 205 / 50%);
 		--shadow-border-primary: 0 0 0 4px rgb(69 158 74 / 50%);
+		--shadow-border-selected: 0 0 0 4px rgb(69 158 74 / 100%);
+		--shadow-selected-shadow: 0 0 0 4px var(--color-primary-500);
 		--shadow-border-secondary: 0 0 0 4px rgb(223 225 233 / 50%);
 	}
 }

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

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

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

@@ -0,0 +1,42 @@
+<template>
+	<transition-group
+		name="fade"
+		enter-active-class="transition-opacity duration-300"
+		leave-active-class="transition-opacity duration-300 opacity-0"
+		enter-from-class="opacity-0"
+		leave-to-class="opacity-0"
+	>
+		<div
+			v-if="visible"
+			class="
+				backdrop-color
+				fixed
+				backdrop-blur-sm
+				transition-all
+				inset-0
+				z-0
+				"
+		/>
+
+		<slot />
+	</transition-group>
+</template>
+
+<script lang="ts" setup>
+
+	withDefaults(
+		defineProps<{
+			visible?: boolean;
+		}>(),
+		{
+			visible: true,
+		}
+	);
+
+</script>
+
+<style lang="css" scoped>
+	.backdrop-color {
+		background-color: rgb(0 0 0 / 50%);
+	}
+</style>

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

@@ -54,7 +54,7 @@ const Template: Story<TComponentProps> = (args) => ({
 		return { args, ESize };
 	},
 	// And then the `args` are bound to your component with `v-bind="args"`
-	template: `
+	template: /*html*/`
 		<ui-button :kind="args.kind"
 				   :size="args.size"
 				   :fullWidth="args.fullWidth"
@@ -82,7 +82,7 @@ const TemplateAll: Story<TComponentProps> = () => ({
 		return { EButtonSizes, EButtonTypes };
 	},
 
-	template: `
+	template: /*html*/`
 		<div :style="{
 			display: 'flex',
 			flexWrap: 'wrap'

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

@@ -1,2 +1,2 @@
 export { default } from "./ui-icon-wrapper.vue";
-export { EIconWrapperTypes } from "./_typings";
+export { EIconWrapperTypes, EIconWrapperSizes } from "./_typings";

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

@@ -20,13 +20,15 @@
 			<slot name="prefix-icon" />
 
 			<input
-				v-model="inputModel"
+				:value="modelValue"
+				:pattern="pattern"
 				class="bg-transparent border-0 outline-none w-full placeholder:text-secondary-alt placeholder:italic"
 				:type="type || 'text'"
 				:placeholder="placeholder"
-				:pattern="pattern"
 				:maxlength="maxlength"
 				:minlength="minlength"
+				@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
+				@focus="focusHandler"
 			>
 
 			<slot name="postfix-icon" />
@@ -42,11 +44,10 @@
 </template>
 
 <script lang="ts" setup>
-	import { computed } from "vue";
 	import { EInputKinds, EInputType } from "./_typings";
 	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
 
-	const props = defineProps<{
+	withDefaults(defineProps<{
 		placeholder?: string;
 		modelValue: string;
 		disabled?: boolean;
@@ -57,17 +58,11 @@
 		pattern?: string;
 		maxlength?: string;
 		minlength?: string;
-	}>();
-
-	const emit = defineEmits(["update:modelValue"]);
-
-	const inputModel = computed({
-		get() {
-			return props.modelValue;
-		},
-		set(value) {
-			emit("update:modelValue", value);
-		}
+		focusHandler?: (e:FocusEvent) => void;
+	}>(), {
+		modelValue: ""
 	});
 
+	defineEmits(["update:modelValue"]);
+
 </script>

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

@@ -42,18 +42,19 @@ const Template: Story<TComponentProps> = (args) => ({
 	},
 	template:/*html*/`
 			<ul>
-				<ui-list-item :icon="['far', 'face-smile']" title="title only" :kind="args.kind" :size="args.size">
+				<ui-list-item v-bind="args" :icon="['far', 'face-smile']" title="title only">
 					{{args.slot}}
 				</ui-list-item>
 
-				<ui-list-item :icon="['far', 'face-smile']" :kind="args.kind" :size="args.size">
+				<ui-list-item v-bind="args" :icon="['far', 'face-smile']">
 					text only
 				</ui-list-item>
 
-				<ui-list-item v-for= "item in 5" :key="item" :icon="['far', 'face-smile']" :title="args.title" :kind="args.kind" :size="args.size">
+				<ui-list-item v-bind="args" v-for= "item in 5" :key="item" :icon="['far', 'face-smile']">
 					{{ args.title }}
 				</ui-list-item>
-				<ui-list-item class="compact-list-item"  :icon="['far', 'face-smile']" :size="args.size" :title="args.title">
+
+				<ui-list-item v-bind="args" class="compact-list-item"  :icon="['far', 'face-smile']" />
 			</ul>
 	`,
 });

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

@@ -11,14 +11,14 @@
 			v-if="kind===EListItemTypes.PROGRESS"
 			class="ui-list-item__line bg-primary-300 h-full absolute w-xxs left-xs -translate-x-2/4 top-sm group-last:hidden"
 		/>
-		
+
 		<ui-icon
 			v-if="icon"
-			:kind="pickKind"
 			class="bg-white text-primary"
 			:icon-name="icon"
 			:size="ESize.SM"
 		/>
+
 		<div>
 			<ui-typography
 				v-if="title"
@@ -32,30 +32,21 @@
 </template>
 
 <script lang="ts" setup>
-	import { computed } from "vue";
 	import UiIcon, { type TIconName } from "../ui-icon";
 	import UiTypography, { ETextWeight } from "../ui-typography";
 	import { ESize } from "../../_types/sizing";
-	import { EListItemTypes } from "./_types";
-	import { EListItemSizes } from "./_types";
+	import { EListItemTypes, EListItemSizes } from "./_types";
 
-	const props = withDefaults(defineProps<{
-		icon: TIconName
+	withDefaults(defineProps<{
+		icon?: TIconName
 		title?: string
 		kind?: EListItemTypes
-		size: EListItemSizes
+		size?: EListItemSizes
 	}>(), {
 		kind: EListItemTypes.DEFAULT,
 		size: EListItemSizes.COMPACT,
-		title: ""
-	});
-
-	const pickKind = computed(()=>{
-		switch(props.kind){
-			case EListItemTypes.DEFAULT: return EListItemTypes.DEFAULT;
-			case EListItemTypes.PROGRESS: return EListItemTypes.PROGRESS;
-			default: return EListItemTypes.DEFAULT;
-		}
+		title: "",
+		icon: undefined
 	});
 
 </script>

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

@@ -0,0 +1,6 @@
+export enum EModalSizes {
+	SM = "sm",
+	MD = "md",
+	LG = "lg",
+	RESPONSIVE = "responsive",
+}

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

@@ -0,0 +1,2 @@
+export { default } from "./ui-modal.vue";
+export { EModalSizes } from "./_typings";

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

@@ -0,0 +1,103 @@
+import { ref } from "vue";
+import type { Story } from "@storybook/vue3";
+import UiModal from "./ui-modal.vue";
+import UiButton from "../ui-button";
+import UiBackdrop from "../ui-backdrop";
+import UiIcon from "../ui-icon";
+import UiTypography from "../ui-typography";
+import { ESize } from "../../_types/sizing";
+import { EModalSizes } from "./_typings";
+
+export default {
+	title: "Components/ui-modal",
+	component: UiModal,
+	argTypes: {
+		title: {
+			control: { type: "text" },
+			description: "The modal title text",
+		},
+		modalSize: {
+			control: { type: "select" },
+			options: Object.values(EModalSizes),
+			description: "The modal kinds",
+		},
+		modalVisible: {
+			control: { type: "boolean" },
+			description: "Control Modal Visibility",
+		},
+
+	},
+	args: {
+		title: "Password Updated",
+		body: "You can now use your new security info to sign in to your account",
+		modalSize: ESize.SM,
+	}
+};
+
+type TComponentProps = InstanceType<typeof UiModal>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiModal, UiBackdrop, UiButton, UiIcon, UiTypography },
+	setup() {
+		const isVisible = ref(false);
+
+		const showModal = () => {
+			isVisible.value = true;
+		};
+
+		const closeModal = () => {
+			isVisible.value = false;
+		};
+
+		return { args, showModal, closeModal, isVisible, ESize };
+	},
+	template:/*html*/`
+			<transition
+				name="ui-modal"
+				mode="out-in"
+				appear
+				enter-active-class="transition delay-100"
+				enter-from-class="opacity-0 translate-y-1/4"
+				enter-to-class="opacity-100 translate-y-0"
+				leave-active-class="transition"
+				leave-to-class="opacity-0 translate-y-1/4"
+				leave-from-class="opacity-100 translate-y-0"
+			>
+				<ui-modal
+					v-if="isVisible"
+					:title="args.title"
+					:modalSize="args.modalSize"
+					:closeModal="closeModal"
+				>
+					<template #icon>
+						<ui-icon class="text-primary"  :icon-name="['far', 'circle-check']" :size=ESize.XL  />
+					</template>
+					<template #title>
+						<ui-typography class="text-2xl font-bold">{{ args.title }}</ui-typography>
+					</template>
+
+					<template #default >
+						{{args.body}}
+					</template>
+					<template #footer>
+						<ui-button
+							fullWidth
+							@click="closeModal"
+						>
+							Ok
+						</ui-button>
+						</template>
+				</ui-modal>
+			</transition>
+
+			<ui-backdrop v-if="isVisible" />
+
+			<div class="absolute" style="top: calc(50vh - 2rem); left: calc(50vw - 4rem)">
+				<ui-button @click="showModal">
+					Toggle Modal
+				</ui-button>
+			</div>
+			`
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,71 @@
+<template>
+	<div
+		v-on-click-outside="closeModal"
+		class="
+				ui-modal
+				absolute
+				m-auto
+				flex flex-col
+				items-center
+				z-10
+				opacity-0
+				inset-0
+				rounded-2xl
+				shadow-md
+				p-md
+				bg-white
+				overflow-y-scroll
+			"
+		:class="[
+			modalSize === EModalSizes.SM &&'h-fit max-h-[24rem] max-w-[24rem]',
+			modalSize === EModalSizes.MD &&'h-fit max-h-[32rem] max-w-[32rem]',
+			modalSize === EModalSizes.LG &&'h-fit max-h-[40rem] max-w-[40rem]',
+			modalSize === EModalSizes.RESPONSIVE && 'h-5/6 w-11/12',
+		]"
+	>
+		<div
+			class="mt-md mb-sm"
+		>
+			<slot name="icon" />
+		</div>
+		<ui-typography
+			v-if="title"
+			class="my-md"
+			:weight="ETextWeight.BOLD"
+			:align="ETextAlign.CENTER"
+			:size="ETypographySizes.LG"
+		>
+			{{ title }}
+		</ui-typography>
+		<ui-typography
+			:weight="ETextWeight.REGULAR"
+			:align="ETextAlign.CENTER"
+			line-height
+			class="text-secondary mb-md"
+		>
+			<slot />
+		</ui-typography>
+
+		<div class="w-full mt-auto">
+			<slot name="footer" />
+		</div>
+	</div>
+</template>
+<script lang="ts" setup>
+	import { vOnClickOutside } from "@vueuse/components";
+	import { ETypographySizes } from "../ui-typography/";
+	import UiTypography, { ETextWeight, ETextAlign } from "../ui-typography";
+	import { EModalSizes } from "./_typings";
+
+	withDefaults(
+		defineProps<{
+			title: string;
+			modalSize?: EModalSizes;
+			closeModal: () => void;
+		}>(),
+		{
+			modalSize: EModalSizes.SM,
+		}
+	);
+
+</script>

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

@@ -7,23 +7,42 @@ export default {
 	title: "Components/ui-radio-fancy",
 	component: UiRadioFancy,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {},
-	args: {},
+	argTypes: {
+		invertOrder: {
+			control: { type: "boolean" },
+			description: "The Element order",
+		},
+		disabled: {
+			control: { type: "boolean" },
+			description: "The full width size",
+		},
+	},
+	args: {
+		slot: "Description",
+		invertOrder: false,
+		disabled: false
+	},
 };
 
 type TComponentProps = InstanceType<typeof UiRadioFancy>["$props"];
 
-const Template: Story<TComponentProps> = () => ({
+const Template: Story<TComponentProps> = (args) => ({
 	components: { UiRadioFancy },
 	setup() {
 		const modelValue = ref("1");
 
-		return { modelValue, EIconType };
+		return { modelValue, EIconType, args };
 	},
 	template: /*html*/`
 		<div class="grid gap-sm" :style="{'grid-template-columns': 'repeat(auto-fit, minmax(160px, 1fr))'}">
-			<ui-radio-fancy v-for="item in 3" :key="item" :value="String(item)" v-model="modelValue" name="radio" title="title" :icon-name="[EIconType.FAR, 'face-smile']">
-				{{args.slot}}
+			<ui-radio-fancy v-bind="args" :key="key" value="1" v-model="modelValue" name="radio"  :icon-name="[EIconType.FAR, 'face-smile']">
+				Banana
+			</ui-radio-fancy>
+			<ui-radio-fancy v-bind="args" :key="key" value="2" v-model="modelValue" name="radio" :icon-name="[EIconType.FAR, 'face-smile']">
+				Apple
+			</ui-radio-fancy>
+			<ui-radio-fancy v-bind="args" :key="key" value="3" v-model="modelValue" name="radio" :icon-name="[EIconType.FAR, 'face-smile']">
+				Orange
 			</ui-radio-fancy>
 		</div>
 	`,

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

@@ -1,31 +1,55 @@
 <template>
 	<label
-		class="ui-radio-item block p-sm border rounded-2xl hover:border-primary cursor-pointer bg-white"
-		:class="[
-			isActive ? 'border-primary pointer-events-none':'border-secondary-alt',
-		]"
+		class="ui-radio-fancy"
+		:class="disabled && 'pointer-events-none opacity-50'"
 	>
 		<input
 			v-model="radioModel"
 			type="radio"
 			:name="name"
 			:value="value"
-			class="appearance-none absolute"
+			class="peer group fixed w-0"
+			:class="disabled && 'pointer-events-none opacity-50'"
 		>
-
-		<ui-icon
-			:icon-name="iconName"
-			:size="ESize.MD"
-			class="mb-md"
-			:class="isActive && 'text-primary'"
-		/>
-		<ui-typography
-			:size="ETypographySizes.SM"
-			:kind="EColors.SECONDARY"
-			:weight="ETextWeight.SEMI_BOLD"
+		<div
+			class="
+				ui-radio-fancy__content
+				box-border
+				w-full
+				py-sm px-sm
+				border
+				border-secondary-alt-500
+				hover:border-secondary-alt-700
+				cursor-pointer
+				rounded-xl
+				active:border-sm
+				active:bg-secondary-alt-200
+				peer-checked:active:outline-4
+				peer-checked:active:outline
+				peer-checked:active:outline-offset-4
+				peer-checked:border-transparent
+				active:outline
+				active:outline-4
+				active:outline-primary
+				active:border-secondary-alt
+				peer-checked:hover:shadow-border-selected
+				peer-checked:shadow-selected-shadow"
+			:class="disabled && 'pointer-events-none opacity-50'"
 		>
-			{{ title }}
-		</ui-typography>
+			<ui-icon
+				:icon-name="iconName"
+				:size="ESize.MD"
+				class="mb-md group-checked:text-primary-500"
+				:class="value === modelValue && 'text-primary'"
+			/>
+			<ui-typography
+				:size="ETypographySizes.SM"
+				:kind="EColors.SECONDARY"
+				:weight="ETextWeight.SEMI_BOLD"
+			>
+				<slot />
+			</ui-typography>
+		</div>
 	</label>
 </template>
 
@@ -35,17 +59,15 @@
 	import UiIcon, { type TIconName } from "../ui-icon";
 	import { ESize } from "../../_types/sizing";
 	import { EColors } from "../../_types/colors";
-
 	const props = defineProps<{
 		modelValue: string;
 		name: string;
 		value: string | number;
-		title: string;
+		id: string;
 		iconName: TIconName;
+		disabled?: boolean;
 	}>();
-
 	const emit = defineEmits(["update:modelValue"]);
-
 	const radioModel = computed({
 		get() {
 			return props.modelValue;
@@ -54,6 +76,4 @@
 			emit("update:modelValue", value);
 		}
 	});
-
-	const isActive = computed(()=>props.modelValue === props.value);
 </script>