bonkers-ui 1.0.16 → 1.0.18

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.16",
+  "version": "1.0.18",
+  "private": false,
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
@@ -10,7 +11,8 @@
     "test": "jest",
     "deploy": "gh-pages -d storybook-static",
     "typecheck": "tsc --noEmit && vue-tsc --noEmit",
-    "i": "yarn install --frozen-lockfile"
+    "i": "yarn install --frozen-lockfile",
+    "postinstall": "husky install"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
@@ -18,43 +20,44 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/vue-fontawesome": "^3.0.1",
-    "vue": "^3.2.38"
+    "vue": "^3.2.41"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-vite": "^0.2.2",
-    "@storybook/vue3": "^6.5.10",
-    "@types/jest": "^28.1.3",
-    "@typescript-eslint/eslint-plugin": "^5.36.1",
-    "@typescript-eslint/parser": "^5.36.1",
-    "@vitejs/plugin-vue": "^3.0.3",
-    "@vue/eslint-config-typescript": "^11.0.0",
-    "@vue/test-utils": "^2.0.0",
+    "@storybook/builder-vite": "^0.2.4",
+    "@storybook/vue3": "^6.5.13",
+    "@types/jest": "^29.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.41.0",
+    "@vitejs/plugin-vue": "^3.2.0",
+    "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/test-utils": "^2.2.0",
     "@vue/vue3-jest": "^27.0.0",
     "babel-jest": "27",
-    "eslint": "8.22.0",
-    "eslint-plugin-vue": "^9.4.0",
+    "eslint": "8.26.0",
+    "eslint-plugin-vue": "^9.6.0",
     "gh-pages": "^4.0.0",
     "husky": "^8.0.1",
     "jest": "27.3.1",
     "lint-staged": "^13.0.2",
-    "postcss": "^8.4.16",
+    "postcss": "^8.4.18",
     "postcss-html": "^1.4.1",
-    "storybook-tailwind-dark-mode": "^1.0.13",
-    "stylelint": "^14.11.0",
+    "storybook-tailwind-dark-mode": "^1.0.15",
+    "stylelint": "^14.14.0",
     "stylelint-config-recommended": "^9.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard": "^28.0.0",
-    "tailwindcss": "^3.1.8",
+    "stylelint-config-standard": "^29.0.0",
+    "tailwindcss": "^3.2.1",
     "ts-jest": "^27.0.7",
-    "typescript": "^4.8.2",
-    "vite": "^3.0.9",
-    "vue-eslint-parser": "^9.0.3",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.8.4",
+    "vite": "^3.2.0",
+    "vue-eslint-parser": "^9.1.0",
     "vue-loader": "^17.0.0",
-    "vue-tsc": "^0.40.5"
+    "vue-tsc": "^1.0.9"
   },
   "jest": {
     "preset": "ts-jest",

package/src/_styles/classTypes/_spacing.json

@@ -1,5 +1,7 @@
 {
 	"0": "var(--zero)",
+	"px": "var(--px)",
+	"auto": "var(--auto)",
 	"xxs": "var(--xxs)",
 	"xs": "var(--xs)",
 	"sm": "var(--sm)",

package/src/_styles/variables/spacing.css

@@ -1,7 +1,9 @@
 @layer base {
 	:root {
 		/* spacing */
+		--auto: auto;
 		--zero: 0;
+		--px: 1px;
 		--xxs: 4px;
 		--xs: 8px;
 		--sm: 16px;

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

@@ -5,7 +5,7 @@
 			(!kind || kind === EAlertTypes.PRIMARY) && 'border-primary',
 			kind === EAlertTypes.WARNING && 'border-warning',
 			kind === EAlertTypes.ERROR && 'border-error',
-			kind === EAlertTypes.SECONDARY && 'border-secondary',
+			kind === EAlertTypes.SECONDARY && 'border-secondary'
 		]"
 	>
 		<ui-icon

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

@@ -1,4 +1,4 @@
-import { mount, } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import UiButton from "./ui-button.vue";
 
 describe("VButton.test.ts", () => {

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

@@ -1,5 +1,6 @@
 import UiCardCta from "../ui-card-cta";
 import UiIcon from "../ui-icon";
+import UiIconWrapper from "../ui-icon-wrapper";
 import { ESize } from "../../_types/sizing";
 import UiTypography from "../ui-typography";
 import type { Story } from "@storybook/vue3";
@@ -28,21 +29,23 @@ export default {
 type TComponentProps = InstanceType<typeof UiCardCta>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiCardCta, UiIcon, UiTypography },
+	components: { UiCardCta, UiIcon, UiTypography, UiIconWrapper },
 	setup() {
 		return { args, ESize };
 	},
-	template: `
+	template: /*html*/ `
 		<ui-card-cta v-bind="args">
-			<template v-slot:icon>
-				<ui-icon :size="ESize.MD" has-wrapper class="text-white" :icon-name="['far', 'fa-face-smile']" />
+			<template #icon>
+				<ui-icon-wrapper>
+					<ui-icon :icon-name="['far', 'fa-face-smile']" :size=ESize.MD />
+				</ui-icon-wrapper>
 			</template>
 
-			<template v-slot:title>
+			<template #title>
 				Title
 			</template>
 
-			<template v-slot:description>
+			<template #description>
 				{{args.slot}}
 			</template>
 		</ui-card-cta>

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

@@ -1,18 +1,18 @@
 <template>
 	<button
-		class="ui-card-cta outline-0 border border-secondary-alt-500 rounded-2xl p-sm shadow-md hover:border-secondary-700 focus:shadow-border-primary active:bg-secondary-alt-200 disabled:bg-secondary-alt-200"
+		class="ui-card-cta w-full outline-0 border border-secondary-alt-500 rounded-2xl p-sm shadow-md hover:border-secondary-700 focus:shadow-border-primary active:bg-secondary-alt-200 disabled:bg-secondary-alt-200 disabled:pointer-events-none"
 		:disabled="disabled"
 	>
 		<span
-			class="ui-card-cta__wrapper grid gap-sm items-center"
+			class="ui-card-cta__wrapper w-full 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"
+				v-if="$slots.title && $slots.description"
+				class="w-full"
 				:class="invertOrder && 'order-first'"
 			>
 				<ui-typography
@@ -35,13 +35,10 @@
 </template>
 
 <script lang="ts" setup>
-	import { useSlots } from "vue";
 	import UiTypography from "../ui-typography";
 	import { ETypographySizes, ETextWeight } from "../ui-typography";
 	import { EColors } from "../../_types/colors";
 
-	const slots = useSlots();
-
 	defineProps<{
 		invertOrder?: boolean;
 		disabled?: boolean;
@@ -52,26 +49,16 @@
 <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_inverted {
 		grid-template-columns: 1fr auto;
 	}

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

@@ -34,7 +34,8 @@ const Template: Story<TComponentProps> = (args) => ({
 	setup() {
 		return { args, ETypographySizes, ETextWeight, ETextAlign, EButtonTypes, ESize };
 	},
-	template: `
+	template:
+	/*html*/`
 		<ui-card-result
 			v-bind="args"
 			header="Some header"
@@ -96,6 +97,7 @@ const Template: Story<TComponentProps> = (args) => ({
 
 			</template>
 		</ui-card-result>
+
 		`,
 });
 

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

@@ -17,7 +17,8 @@ const Template: Story<TComponentProps> = (args) => ({
 	setup() {
 		return { args };
 	},
-	template: `
+	template: /*html*/`
+
 		<ui-card-simple>
 			<template v-slot:title>
 				I want to borrow for

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

@@ -7,10 +7,6 @@ export default {
 	component: UiIcon,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
-		hasWrapper:{
-			control: { type: "boolean" },
-			description: "The Icon show wrapper",
-		},
 		size: {
 			control: { type: "select" },
 			options: Object.values(ESize),
@@ -20,7 +16,6 @@ export default {
 	},
 	args: {
 		size: ESize.LG,
-		hasWrapper: false,
 	},
 };
 

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

@@ -10,7 +10,6 @@
 			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',
 		]"
 	/>
 </template>
@@ -20,7 +19,6 @@
 	import type { TIconName } from "./_typings";
 
 	defineProps<{
-		hasWrapper?: boolean;
 		size: ESize;
 		iconName: TIconName;
 	}>();

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

@@ -0,0 +1,10 @@
+export enum EIconWrapperTypes {
+	PRIMARY = "primary",
+	SECONDARY = "secondary",
+}
+export enum EIconWrapperSizes {
+	DEFAULT = "default",
+	SMALL = "sm",
+	MEDIUM = "md",
+	LARGE = "lg"
+}

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

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

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

@@ -0,0 +1,57 @@
+import UiIconWrapper from "../ui-icon-wrapper";
+import UiIcon from "../ui-icon";
+import UiNotificationBadge, { EBadgeOrigin } from "../ui-notification-badge";
+import { EIconWrapperSizes, EIconWrapperTypes } from "./_typings";
+import { ESize } from "../../_types/sizing";
+import type { Story } from "@storybook/vue3";
+
+export default {
+	title: "Components/ui-icon-wrapper",
+	component: UiIconWrapper,
+	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+	argTypes: {
+		kind: {
+			control: { type: "select" },
+			options: Object.values(EIconWrapperTypes),
+			description: "The Icon Wrapper kinds",
+		},
+		size: {
+			control: { type: "select" },
+			options: Object.values(EIconWrapperSizes),
+			description: "The Icon Wrapper sizes",
+		}
+	},
+	args: {
+		slot: "icon",
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiIconWrapper>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiIconWrapper, UiIcon, UiNotificationBadge },
+	setup() {
+		return { args, ESize, EBadgeOrigin };
+	},
+	template: /*html*/`
+		<ui-icon-wrapper kind="primary" v-bind="args" class="mb-sm">
+			<p> ${args.slot} </p>
+			<UiNotificationBadge :origin=EBadgeOrigin.OFFSET_TOP_RIGHT>
+				1
+			</UiNotificationBadge>
+		</ui-icon-wrapper>
+
+		<ui-icon-wrapper kind="secondary" v-bind="args" class="mb-sm">
+			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Emblem-person-blue.svg/640px-Emblem-person-blue.svg.png" width="20" height="20" />
+		</ui-icon-wrapper>
+
+		<ui-icon-wrapper kind="primary"  v-bind="args">
+			<ui-icon :icon-name="['far', 'fa-face-smile']" :size=ESize.LG />
+			<UiNotificationBadge slot="badge" :origin=EBadgeOrigin.DEFAULT>
+			2
+			</UiNotificationBadge>
+		</ui-icon-wrapper>
+		`
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,43 @@
+<template>
+	<div
+		class="icon-wrapper w-fit h-fit grid place-items-center relative rounded-3xl"
+		:class="[
+			kind === EIconWrapperTypes.PRIMARY && 'text-white bg-primary',
+			kind === EIconWrapperTypes.SECONDARY && 'text-black bg-secondary-alt-200',
+			size === EIconWrapperSizes.DEFAULT && 'py-sm px-sm',
+			size === EIconWrapperSizes.SMALL && 'py-xs px-xs',
+			size === EIconWrapperSizes.MEDIUM && 'py-md px-md icon-wrapper_offset-md',
+			size === EIconWrapperSizes.LARGE && 'py-lg px-lg icon-wrapper_offset-lg',
+		]"
+	>
+		<slot />
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import { EIconWrapperSizes, EIconWrapperTypes } from "./_typings";
+
+	type TProps = {
+		kind?: EIconWrapperTypes;
+		size?: EIconWrapperSizes;
+	}
+
+	withDefaults(defineProps<TProps>(),{
+		kind: EIconWrapperTypes.PRIMARY,
+		size: EIconWrapperSizes.DEFAULT,
+	});
+
+</script>
+
+<style scoped>
+	.icon-wrapper_offset-md :deep(.notification-badge) {
+		top: 4px;
+		right: 4px;
+	}
+
+	.icon-wrapper_offset-lg :deep(.notification-badge) {
+		top: 8px;
+		right: 8px;
+	}
+
+</style>

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

@@ -49,8 +49,9 @@ const Template: Story<MyComponentProps> = (args: MyComponentProps) => ({
 			valueModel
 		};
 	},
-	template: `
-		<ui-input v-bind="args" v-model="valueModel" heading="heading" sub-label="subLabel" />
+	template: /*html*/`
+		<ui-input v-bind="args" v-model="valueModel" heading="heading" sub-label="subLabel" pattern="[\\d]{9}"
+		/>
 	`
 });
 
@@ -67,7 +68,7 @@ const TemplateAll: Story<MyComponentProps> = (args: MyComponentProps) => ({
 			valueModel
 		};
 	},
-	template: `
+	template: /*html*/`
 		<div :style="{
 			display: 'grid',
 			gridGap: '12px'
@@ -77,12 +78,12 @@ const TemplateAll: Story<MyComponentProps> = (args: MyComponentProps) => ({
 			</ui-input>
 			<ui-input v-bind="args" v-model="valueModel">
 				<template v-slot:prefix-icon>
-					<icon :size="16" />
+					<Icon :size="16" />
 				</template>
 			</ui-input>
 			<ui-input v-bind="args" v-model="valueModel">
 				<template v-slot:postfix-icon>
-					<icon :size="16" />
+					<Icon :size="16" />
 				</template>
 			</ui-input>
 		</div>

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

@@ -1,4 +1,4 @@
-EInputKinds<template>
+<template>
 	<div class="ui-input">
 		<ui-typography
 			v-if="heading"
@@ -7,7 +7,7 @@ EInputKinds<template>
 		>
 			{{ heading }}
 		</ui-typography>
-		<div
+		<label
 			class="ui-input__wrapper flex w-full rounded-lg border bg-white items-center p-sm gap-xs"
 			:class="[
 				!kind && 'border-secondary-alt-500 hover:border-secondary-alt-700',
@@ -25,11 +25,13 @@ EInputKinds<template>
 				:placeholder="placeholder"
 				:value="modelValue"
 				:pattern="pattern"
+				:maxlength="maxlength"
+				:minlength="minlength"
 				@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
 			>
 
 			<slot name="postfix-icon" />
-		</div>
+		</label>
 		<ui-typography
 			v-if="subLabel"
 			:size="ETypographySizes.SM"
@@ -53,6 +55,8 @@ EInputKinds<template>
 		subLabel?: string;
 		type?: EInputType;
 		pattern?: string;
+		maxlength?: string;
+		minlength?: string;
 	}>();
 
 	defineEmits(["update:modelValue"]);

package/src/components/ui-notification-badge/_types.ts

@@ -0,0 +1,11 @@
+export enum EBadgeOrigin {
+	DEFAULT = "default",
+	OFFSET_TOP_RIGHT = "offset-top-right"
+}
+
+export enum ENotificationBadgeSizes {
+	DEFAULT = "default",
+	SMALL = "sm",
+	MEDIUM = "md",
+	LARGE = "lg"
+}

package/src/components/ui-notification-badge/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ui-notification-badge.vue";
+export { EBadgeOrigin } from "./_types";

package/src/components/ui-notification-badge/ui-notification-badge.stories.ts

@@ -0,0 +1,38 @@
+import UiNotificationBadge from ".";
+import type { Story } from "@storybook/vue3";
+import { EBadgeOrigin } from "./_types";
+
+export default {
+	title: "Components/ui-notification-badge",
+	component: UiNotificationBadge,
+	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+	argTypes: {
+		origin: {
+			control: { type: "select" },
+			options: Object.values(EBadgeOrigin),
+			description: "The Element origin",
+		}
+	},
+	args: {
+		slot: "1",
+		origin: EBadgeOrigin.OFFSET_TOP_RIGHT,
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiNotificationBadge>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiNotificationBadge },
+	setup() {
+		return { args };
+	},
+	template: /*html*/`
+		<div class="relative rounded-full bg-primary w-lg h-lg">
+			<ui-notification-badge :origin="args.origin">
+				{{args.slot}}
+			</ui-notification-badge>
+		</div>
+		`
+});
+
+export const Default = Template.bind({});

package/src/components/ui-notification-badge/ui-notification-badge.vue

@@ -0,0 +1,28 @@
+<template>
+	<div
+		class="notification-badge absolute min-w-sm h-sm font-bold text-xxs rounded-full border border-white text-white bg-error text-center leading-none"
+		:class="[
+			origin === EBadgeOrigin.DEFAULT && 'top-0 right-0',
+			origin === EBadgeOrigin.OFFSET_TOP_RIGHT && '-top-xxs -right-xxs',
+		]"
+	>
+		<slot />
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import { EBadgeOrigin } from "./_types";
+
+	withDefaults(defineProps<{
+		origin?: EBadgeOrigin,
+	}>(),{
+		origin: EBadgeOrigin.DEFAULT,
+	});
+
+</script>
+
+<style>
+	.notification-badge {
+		padding: 2px;
+	}
+</style>

package/src/components/ui-order-card/_types.ts

@@ -0,0 +1,4 @@
+export enum EOrderCardTypes {
+    DEFAULT = "DEFAULT",
+    WARNING = "WARNING"
+}

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

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

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

@@ -0,0 +1,51 @@
+import UiOrderCard from "./ui-order-card.vue";
+import type { Story } from "@storybook/vue3";
+import { EOrderCardTypes } from "./_types";
+
+export default {
+	title: "Components/ui-order-card",
+	component: UiOrderCard,
+	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+	argTypes: {
+		kind: {
+			control: { type: "select" },
+			options: Object.values(EOrderCardTypes),
+			description: "The Element kinds",
+		},
+	},
+
+	args: {
+		slot: "But we still need your gas and electricity meter readings before processing it.",
+		kind: EOrderCardTypes.DEFAULT
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiOrderCard>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiOrderCard },
+	setup() {
+
+		return { args };
+	},
+
+	template: /*html*/`
+		<ui-order-card v-bind="args" :iconName="['far', 'fa-face-smile']">
+			<template #title>
+				Thank you for your order!
+			</template>
+
+			<template #textBody>
+				{{args.slot}}
+			</template>
+
+			<template #footer>
+				We’ll send a confirmation email to william.moran@bonkers.ie
+			</template>
+		</ui-order-card>
+
+		
+	`,
+});
+
+export const Default = Template.bind({});