bonkers-ui 1.0.35 → 1.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.35",
+  "version": "1.0.37",
   "private": false,
   "scripts": {
     "storybook": "start-storybook -p 6006",
@@ -18,28 +18,28 @@
     "@fortawesome/free-brands-svg-icons": "^6.2.1",
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
-    "@fortawesome/vue-fontawesome": "^3.0.2",
-    "@vueuse/components": "^9.10.0",
-    "@vueuse/core": "^9.10.0",
-    "vue": "^3.2.45"
+    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@vueuse/components": "^9.12.0",
+    "@vueuse/core": "^9.12.0",
+    "vue": "^3.2.47"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-vite": "^0.2.7",
-    "@storybook/vue3": "^6.5.15",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
+    "@storybook/builder-vite": "^0.4.0",
+    "@storybook/vue3": "^6.5.16",
+    "@typescript-eslint/eslint-plugin": "^5.50.0",
+    "@typescript-eslint/parser": "^5.50.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/test-utils": "^2.2.7",
-    "eslint": "8.31.0",
-    "eslint-plugin-vue": "^9.8.0",
-    "gh-pages": "^4.0.0",
+    "@vue/test-utils": "^2.2.9",
+    "eslint": "8.33.0",
+    "eslint-plugin-vue": "^9.9.0",
+    "gh-pages": "^5.0.0",
     "husky": "4.3.8",
-    "jsdom": "^21.0.0",
+    "jsdom": "^21.1.0",
     "lint-staged": "^13.1.0",
     "postcss": "^8.4.21",
     "postcss-html": "^1.4.1",
@@ -50,9 +50,9 @@
     "stylelint-config-standard": "^29.0.0",
     "tailwindcss": "^3.2.4",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4",
-    "vitest": "^0.27.0",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.0",
+    "vitest": "^0.28.3",
     "vue-eslint-parser": "^9.1.0",
     "vue-loader": "^17.0.1",
     "vue-tsc": "^1.0.24"

package/src/_styles/classTypes/_shadow.json

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

package/src/_styles/variables/shadow.css

@@ -5,6 +5,7 @@
 		--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-selected-disabled: 0 0 0 4px var(--color-primary-300);
 		--shadow-border-secondary: 0 0 0 4px rgb(223 225 233 / 50%);
 	}
 }

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

@@ -38,7 +38,7 @@ const Template: Story<TComponentProps> = (args) => ({
 	/*html*/`
 		<ui-card-result
 			v-bind="args"
-			header="Some header"
+			header="Some header Some header Some header Some header Some header Some header"
 			:exclusive-text="args.exclusiveText
 				? 'Only available on bonkers.ie'
 				: undefined"
@@ -47,7 +47,7 @@ const Template: Story<TComponentProps> = (args) => ({
 				: undefined"
 		>
 			<template #sidebar>
-				<ui-typography :size='ETypographySizes.XXS' line-height>
+				<ui-typography :size='ETypographySizes.XXS' line-height :style="{height: '64px', width: '64px', border: '1px solid black'}" class="flex items-center">
 					Special offer text
 				</ui-typography>
 			</template>
@@ -73,26 +73,26 @@ const Template: Story<TComponentProps> = (args) => ({
 					/>
 				</ul>
 
-				<ui-typography
-					:weight="ETextWeight.BOLD"
-					:size="ETypographySizes.LG"
-					:align="ETextAlign.RIGHT"
-					class="mb-xs"
-				>
-					€1004.63 p/m
-				</ui-typography>
+				<div :style="{display: 'grid', gridTemplateColumns: '1fr 1fr'}" class="items-center gap-sm">
+					<ui-typography
+						:weight="ETextWeight.BOLD"
+						:size="ETypographySizes.XXL"
+					>
+						€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>
+					<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>
+						<ui-button full-width>Some text</ui-button>
+					</div>
 				</div>
 
 			</template>

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

@@ -1,8 +1,8 @@
 <template>
-	<div class="ui-card-result__wrapper">
+	<div class="ui-card-result">
 		<div
 			v-if="exclusiveText"
-			class="ui-card-result__exclusive bg-primary rounded-2xl px-sm pb-lg -mb-lg"
+			class="bg-primary rounded-2xl px-sm pb-lg -mb-lg"
 		>
 			<ui-typography
 				class="py-xs"
@@ -16,30 +16,29 @@
 			</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>
-
+		<div class="flex border border-secondary-alt-400 rounded-2xl overflow-hidden">
 			<main class="p-sm bg-white w-full overflow-hidden">
-				<ui-typography
-					v-if="header"
-					class="mb-xs"
-					:size="ETypographySizes.SM"
-					:weight="ETextWeight.SEMI_BOLD"
-				>
-					{{ header }}
-				</ui-typography>
+				<div class="flex gap-xs justify-between items-center rounded-lg bg-secondary-alt-200 p-xs mb-sm">
+					<ui-typography
+						v-if="header"
+						line-height
+						class="flex-1 truncate"
+						:size="ETypographySizes.SM"
+						:weight="ETextWeight.SEMI_BOLD"
+					>
+						{{ header }}
+					</ui-typography>
+
+					<slot name="sidebar" />
+				</div>
+
 				<slot />
 			</main>
 		</div>
 
 		<div
 			v-if="exclusiveTextBottom"
-			class="ui-card-result__exclusive_bottom bg-secondary rounded-2xl px-sm pt-lg -mt-lg"
+			class="bg-secondary rounded-2xl px-sm pt-lg -mt-lg"
 		>
 			<ui-typography
 				class="py-xs"

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

@@ -16,6 +16,7 @@
 			<ui-icon
 				v-if="icon"
 				class="bg-white z-[1] mt-[0.2em]"
+				:class="iconClass"
 				:icon-name="icon"
 				:size="ESize.SM"
 			/>
@@ -46,10 +47,12 @@
 		title?: string
 		kind?: EListItemTypes
 		size?: EListItemSizes
+		iconClass?: string
 	}>(), {
 		kind: EListItemTypes.DEFAULT,
 		size: EListItemSizes.COMPACT,
 		title: "",
+		iconClass: "text-secondary-alt",
 		icon: undefined
 	});
 

package/src/components/ui-plain-radio/index.ts

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

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

@@ -0,0 +1,59 @@
+import UiPlainRadio from "./ui-plain-radio.vue";
+import { ETypographySizes } from "../ui-typography";
+import  EColors  from "../ui-typography";
+import type { Story } from "@storybook/vue3";
+import { ref } from "vue";
+
+export default {
+	title: "Components/ui-plain-radio",
+	component: UiPlainRadio, ETypographySizes, EColors,
+	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+	argTypes: {
+		disabled: {
+			control: { type: "boolean" },
+		},
+		header: {
+			control: { type: "text" },
+		},
+		subHeader: {
+			control: { type: "text" },
+		}
+	},
+	args: {
+		disabled: false,
+		header: "Header",
+		subHeader: "SubHeader"
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiPlainRadio>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiPlainRadio },
+
+	setup() {
+		const modelValue = ref("1");
+
+		return { modelValue, args, ETypographySizes, EColors };
+
+	},
+
+	template: /*html*/ `
+		<div :style="{display: 'grid', gridGap: '5px'}">
+			<ui-plain-radio
+				v-for="item in 2"
+				:name="String(item)"
+				:key="item"
+				:value="String(item)"
+				v-model="modelValue"
+				:header="args.header"
+				:sub-header="args.subHeader"
+				title="title"
+				:disabled="args.disabled"
+			>
+			</ui-plain-radio>
+		</div>
+	`,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,115 @@
+<template>
+	<label
+		class="ui-plain-radio relative mb-sm"
+		:for="name + value"
+	>
+
+		<input
+			:id="name + value"
+			v-model="radioModel"
+			:value="value"
+			name="ui-plain-radio"
+			type="radio"
+			:disabled="disabled"
+			class="appearance-none absolute peer"
+		>
+
+		<div
+			class="ui-plain-radio__content
+				grid
+				grid-flow-col
+				justify-start
+				items-center
+				gap-sm
+				box-border
+				w-full
+				h-full
+				py-sm px-sm
+				border
+				border-secondary-alt-500
+				bg-white
+				hover:border-secondary-alt-700
+				cursor-pointer
+				rounded-xl
+
+				before:absolute
+				before:-z-10
+				before:box-border
+				before:rounded-[16px]
+				before:bg-primary-300
+
+				peer-checked:border-transparent
+				peer-checked:active:shadow-border-primary
+				peer-checked:active:before:-top-xs
+				peer-checked:active:before:-bottom-xs
+				peer-checked:active:before:-left-xs
+				peer-checked:active:before:-right-xs
+
+				peer-checked:hover:shadow-border-selected
+				peer-checked:shadow-selected-shadow
+
+				peer-active:before:-top-xxs
+				peer-active:before:-bottom-xxs
+				peer-active:before:-left-xxs
+				peer-active:before:-right-xxs
+
+				peer-focus:before:-top-xs
+				peer-focus:before:-bottom-xs
+				peer-focus:before:-left-xs
+				peer-focus:before:-right-xs
+			"
+			:class="disabled && 'pointer-events-none border-secondary-alt-400 peer-checked:shadow-border-primary-disabled'"
+		>
+			<ui-radio
+				v-model="radioModel"
+				:value="value"
+				:name="name"
+				:disabled="disabled"
+				class="pointer-events-none"
+			/>
+
+			<span>
+				<ui-typography
+					:size="ETypographySizes.SM"
+					:kind="EColors.SECONDARY"
+					:weight="ETextWeight.SEMI_BOLD"
+					line-height
+				>
+					{{ header }}
+				</ui-typography>
+				<ui-typography
+					:size="ETypographySizes.XS"
+					:kind="EColors.SECONDARY_ALT"
+				>
+					{{ subHeader }}
+				</ui-typography>
+			</span>
+		</div>
+	</label>
+</template>
+
+<script lang="ts" setup>
+	import { computed } from "vue";
+	import UiRadio from "../ui-radio";
+	import UiTypography, { ETypographySizes, EColors, ETextWeight } from "../ui-typography";
+
+	const props = defineProps<{
+		modelValue: string;
+		header: string;
+		subHeader: string;
+		name: string;
+		value: string;
+		disabled?: boolean;
+	}>();
+
+	const emit = defineEmits(["update:modelValue"]);
+
+	const radioModel = computed({
+		get() {
+			return props.modelValue;
+		},
+		set(value) {
+			emit ("update:modelValue", value);
+		}
+	});
+</script>

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

@@ -0,0 +1,4 @@
+export enum ERadioSizes {
+	DEFAULT = "default",
+	MINIMAL = "minimal"
+}

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

@@ -1,5 +1,6 @@
+import { ERadioSizes } from "./_typings";
 import { ref } from "vue";
-import UiRadioFancy from "./ui-radio-fancy.vue";
+import UiRadioFancy from "../ui-radio-fancy";
 import type { Story } from "@storybook/vue3";
 import { EIconType } from "../ui-icon/_typings";
 
@@ -16,11 +17,17 @@ export default {
 			control: { type: "boolean" },
 			description: "The full width size",
 		},
+		radioSize: {
+			control: { type: "select" },
+			options: Object.values(ERadioSizes),
+			description: "The radio kinds",
+		},
 	},
 	args: {
 		slot: "Description",
 		invertOrder: false,
-		disabled: false
+		disabled: false,
+		radioSize: ERadioSizes.DEFAULT
 	},
 };
 
@@ -31,18 +38,12 @@ const Template: Story<TComponentProps> = (args) => ({
 	setup() {
 		const modelValue = ref("1");
 
-		return { modelValue, EIconType, args };
+		return { modelValue, EIconType, args, ERadioSizes };
 	},
 	template: /*html*/`
 		<div class="grid gap-sm" :style="{'grid-template-columns': 'repeat(auto-fit, minmax(160px, 1fr))'}">
-			<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 v-for="item in 2" :key="item" :value="String(item)" v-model="modelValue" name="radio" title="title" :icon-name="[EIconType.FAR, 'face-smile']" :radioSize="args.radioSize" :disabled="args.disabled">
+				{{args.slot}}
 			</ui-radio-fancy>
 		</div>
 	`,

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

@@ -13,6 +13,7 @@
 			:name="name"
 			:value="value"
 			class="peer group appearance-none absolute"
+			:disabled="disabled"
 		>
 		<div
 			class="
@@ -54,18 +55,39 @@
 				peer-focus:before:-left-xs
 				peer-focus:before:-right-xs
 			"
-			:class="disabled && 'pointer-events-none'"
+			:class="[disabled && 'pointer-events-none border-secondary-alt-400 peer-checked:shadow-border-primary-disabled',
+				radioSize === ERadioSizes.DEFAULT && 'default',
+				radioSize === ERadioSizes.MINIMAL && 'flex gap-sm align-middle']"
 		>
-			<ui-icon
-				:icon-name="iconName"
-				:size="ESize.MD"
-				class="mb-md group-checked:text-primary-500"
-				:class="value === modelValue && 'text-primary'"
-			/>
+			<div
+				v-if="radioSize === ERadioSizes.DEFAULT"
+			>
+				<ui-icon
+					:icon-name="iconName"
+					:size="ESize.MD"
+					class=" mb-md peer-checked:text-primary-500"
+					:class="[value === modelValue && 'text-primary',
+						disabled && 'text-secondary-alt-400',
+						disabled && value === modelValue && 'text-primary-300'
+					]"
+				/>
+			</div>
+			<div v-else-if="radioSize === ERadioSizes.MINIMAL">
+				<ui-icon
+					:icon-name="iconName"
+					:size="ESize.MD"
+					:class="[value === modelValue && 'text-primary',
+						disabled && 'text-secondary-alt-400',
+						disabled && value === modelValue && 'text-primary-300'
+					]"
+				/>
+
+			</div>
 			<ui-typography
 				:size="ETypographySizes.SM"
 				:kind="EColors.SECONDARY"
 				:weight="ETextWeight.SEMI_BOLD"
+				class="pt-xxs"
 			>
 				<slot />
 			</ui-typography>
@@ -76,15 +98,19 @@
 <script lang="ts" setup>
 	import { computed } from "vue";
 	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
-	import UiIcon, { type TIconName } from "../ui-icon";
+	import type { TIconName } from "../ui-icon";
 	import { ESize } from "../../_types/sizing";
 	import { EColors } from "../../_types/colors";
+	import { ERadioSizes } from "./_typings";
+	import uiIcon from "../ui-icon";
+
 	const props = defineProps<{
 		modelValue: string;
 		name: string;
 		value: string | number;
 		iconName: TIconName;
 		disabled?: boolean;
+		radioSize?: ERadioSizes;
 	}>();
 	const emit = defineEmits(["update:modelValue"]);
 	const radioModel = computed({

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

@@ -4,6 +4,7 @@
 		class="ui-typography"
 		:class="[
 			size === ETypographySizes.MD && 'text-md',
+			size === ETypographySizes.XXS && 'text-xxs',
 			size === ETypographySizes.XS && 'text-xs',
 			size === ETypographySizes.SM && 'text-sm',
 			size === ETypographySizes.LG && 'text-lg',