bonkers-ui 1.0.36 → 1.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.36",
+  "version": "1.0.38",
   "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/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.1",
+    "vitest": "^0.28.3",
     "vue-eslint-parser": "^9.1.0",
     "vue-loader": "^17.0.1",
     "vue-tsc": "^1.0.24"

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-radio-fancy/ui-radio-fancy.vue

@@ -96,7 +96,7 @@
 </template>
 
 <script lang="ts" setup>
-	import { computed } from "vue";
+	import { computed, withDefaults } from "vue";
 	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
 	import type { TIconName } from "../ui-icon";
 	import { ESize } from "../../_types/sizing";
@@ -104,14 +104,16 @@
 	import { ERadioSizes } from "./_typings";
 	import uiIcon from "../ui-icon";
 
-	const props = defineProps<{
+	const props = withDefaults(defineProps<{
 		modelValue: string;
 		name: string;
 		value: string | number;
 		iconName: TIconName;
 		disabled?: boolean;
 		radioSize?: ERadioSizes;
-	}>();
+	}>(), {
+		radioSize: ERadioSizes.DEFAULT
+	});
 	const emit = defineEmits(["update:modelValue"]);
 	const radioModel = computed({
 		get() {