bonkers-ui 1.0.4 → 1.0.5

package/.storybook/preview.js

@@ -6,11 +6,10 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 /* import specific icons */
-import { faUserSecret } from '@fortawesome/free-solid-svg-icons';
 import { faFaceSmile } from '@fortawesome/free-regular-svg-icons';
 
 /* add icons to the library */
-library.add(faUserSecret, faFaceSmile);
+library.add(faFaceSmile);
 
 import '../src/main.css';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",

package/src/{_colors.json → _styles/classTypes/_colors.json}

@@ -56,8 +56,8 @@
 		"700": "var(--color-accent-700)"
 	},
 	"accent-alt": {
-		"DEFAULT": "var(--color-accent)",
-		"500": "var(--color-accent-500)"
+		"DEFAULT": "var(--color-accent-alt)",
+		"500": "var(--color-accent-alt-500)"
 	},
 	"secondary-alt": {
 		"DEFAULT": "var(--color-secondary-alt)",

package/src/{_font-sizes.json → _styles/classTypes/_font-sizes.json}

@@ -2,7 +2,7 @@
 	"xxs": "var(--font-size-xxs)",
 	"xs": "var(--font-size-xs)",
 	"sm": "var(--font-size-sm)",
-	"m": "var(--font-size-m)",
+	"md": "var(--font-size-md)",
 	"lg": "var(--font-size-lg)",
 	"xl": "var(--font-size-xl)",
 	"2xl": "var(--font-size-2xl)",

package/src/{_shadow.json → _styles/classTypes/_shadow.json}

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

package/src/{_spacing.json → _styles/classTypes/_spacing.json}

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

package/src/_styles/{font-sizes.css → variables/font-sizes.css}

@@ -4,7 +4,7 @@
 		--font-size-xxs: 10px;
 		--font-size-xs: 12px;
 		--font-size-sm: 14px;
-		--font-size-m: 16px;
+		--font-size-md: 16px;
 		--font-size-lg: 18px;
 		--font-size-xl: 20px;
 		--font-size-2xl: 24px;

package/src/_styles/variables/shadow.css

@@ -0,0 +1,8 @@
+@layer base {
+	:root {
+		/* shadow sizes */
+		--shadow-size-m: 0 2px 4px 0 rgb(180 184 205 / 50%);
+		--shadow-border-primary: 0 0 0 4px rgb(69 158 74 / 50%);
+		--shadow-border-secondary: 0 0 0 4px rgb(223 225 233 / 50%);
+	}
+}

package/src/_styles/{spacing.css → variables/spacing.css}

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

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

@@ -0,0 +1,11 @@
+export enum EBadgeSize {
+	SMALL = "small",
+	MEDIUM = "medium",
+	LARGE = "large",
+}
+
+export enum EBadgeKind {
+	PRIMARY = "primary",
+	ERROR = "error",
+	ACCENT = "accent",
+}

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

@@ -0,0 +1,2 @@
+export { default } from "./ui-badge.vue";
+export { EBadgeKind, EBadgeSize } from "./_typings";

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

@@ -0,0 +1,45 @@
+import UiBadge from "./ui-badge.vue";
+import type { Story } from "@storybook/vue3";
+import { EBadgeKind, EBadgeSize } from "./_typings";
+
+export default {
+	title: "Components/ui-badge",
+	component: UiBadge,
+	argTypes: {
+		className: {
+			control: { type: "text" },
+			description: "The Element classes",
+		},
+		kind: {
+			control: { type: "select" },
+			options: Object.values(EBadgeKind),
+			description: "The Element kinds",
+		},
+		size: {
+			control: { type: "select" },
+			options: Object.values(EBadgeSize),
+			description: "The Element size",
+		}
+	},
+	args: {
+		slot: "default text",
+		kind: EBadgeKind.PRIMARY,
+		size: EBadgeSize.SMALL,
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiBadge>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiBadge },
+	setup() {
+		return { args };
+	},
+	template: `
+		<ui-badge :icon="['far', 'face-smile']" v-bind="args">
+			{{ args.slot }}
+		</ui-badge>
+	`,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,59 @@
+<template>
+	<span
+		class="ui-badge rounded-full inline-flex items-center"
+		:class="[
+			className,
+			(!size || size === EBadgeSize.SMALL) && 'px-xs py-xxs',
+			(!kind || kind === EBadgeKind.PRIMARY) && 'bg-primary-alt-300 text-primary-alt-700',
+
+			kind === EBadgeKind.ERROR && 'bg-error-300 text-error-700',
+			kind === EBadgeKind.ACCENT && 'bg-accent-300 text-accent-700',
+
+			size === EBadgeSize.MEDIUM && 'px-xs py-xs',
+			size === EBadgeSize.LARGE && 'px-sm py-xs',
+		]"
+	>
+		<ui-icon
+			v-if="icon"
+			class-name="mr-xxs"
+			:size="ESize.SM"
+			:icon-name="icon"
+		/>
+
+		<ui-typography
+			is="span"
+			:size="getBadgeSize"
+			:weight="ETextWeight.SEMI_BOLD"
+			class-name="whitespace-nowrap"
+		>
+			<slot />
+		</ui-typography>
+	</span>
+</template>
+
+<script lang="ts" setup>
+	import { computed } from "vue";
+	import { EBadgeKind, EBadgeSize } from "./_typings";
+	import UiIcon, { type TIconName } from "../ui-icon";
+	import { ESize } from "../../_types/sizing";
+	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+
+	const props = defineProps<{
+		className?: string;
+		size?: EBadgeSize;
+		kind?: EBadgeKind;
+		icon?: TIconName;
+	}>();
+
+	const getBadgeSize = computed(()=>{
+		switch (props.size) {
+			case EBadgeSize.MEDIUM:
+				return ETypographySizes.XS;
+			case EBadgeSize.LARGE:
+				return ETypographySizes.SM;
+			case EBadgeSize.SMALL:
+			default:
+				return ETypographySizes.XXS;
+		}
+	});
+</script>

package/src/components/ui-ber-rank/index.ts

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

package/src/components/ui-ber-rank/ui-ber-rank.stories.ts

@@ -0,0 +1,34 @@
+import UiBerRank from "./ui-ber-rank.vue";
+import type { Story } from "@storybook/vue3";
+
+export default {
+	title: "Components/ui-ber-rank",
+	component: UiBerRank,
+	argTypes: {
+		className: {
+			control: { type: "text" },
+			description: "The Element classes",
+		},
+		rank:{
+			control: { type: "number" },
+			description: "The Element rank from 0 to 15",
+		}
+	},
+	args: {
+		rank: 0,
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiBerRank>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiBerRank },
+	setup() {
+		return { args };
+	},
+	template: `
+		<ui-ber-rank v-bind="args" />
+	`,
+});
+
+export const Default = Template.bind({});

package/src/components/ui-ber-rank/ui-ber-rank.vue

@@ -0,0 +1,142 @@
+<template>
+	<div class="ui-ber-rank flex">
+		<div class="ui-ber-rank__icon-wrapper relative">
+			<svg
+				class="ui-ber-rank__icon text-secondary"
+				viewBox="0 0 160 60"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M0.279251 15.36C0.279251 9.9835 0.279251 7.29524 1.32559 5.24169C2.24597 3.43534 3.71459 1.96672 5.52094 1.04634C7.5745 0 10.2627 0 15.6393 0H139.208C143.189 0 145.18 0 146.874 0.666121C148.369 1.25435 149.693 2.20864 150.724 3.44151C151.892 4.83764 152.521 6.72601 153.78 10.5027L158.93 25.9523C159.431 27.4541 159.681 28.205 159.78 28.9732C159.869 29.6549 159.869 30.3451 159.78 31.0268C159.681 31.795 159.431 32.5459 158.93 34.0477L153.78 49.4973C152.521 53.274 151.892 55.1624 150.724 56.5585C149.693 57.7914 148.369 58.7457 146.874 59.3339C145.18 60 143.189 60 139.208 60H15.6393C10.2627 60 7.5745 60 5.52094 58.9537C3.71459 58.0333 2.24597 56.5647 1.32559 54.7583C0.279251 52.7048 0.279251 50.0165 0.279251 44.64V15.36Z"
+					fill="currentColor"
+				/>
+			</svg>
+			<ui-typography
+				:kind="EColors.WHITE"
+				:weight="ETextWeight.BOLD"
+				:size="ETypographySizes.XXXL"
+				:text-transform="ETextTransform.UPPERCASE"
+				class-name="absolute top-0 left-0 w-full h-full flex justify-center items-center"
+			>
+				ber
+			</ui-typography>
+		</div>
+
+		<div class="ui-ber-rank__icon-wrapper relative">
+			<ui-typography :kind="berRankDictionary[+rank]?.color || berRankDictionary[0].color">
+				<svg
+					class="ui-ber-rank__icon"
+					viewBox="0 0 106 60"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M3.01833 20.2172C0.74308 13.3915 -0.394547 9.9786 0.287586 7.26202C0.884697 4.88404 2.36903 2.82464 4.43616 1.50619C6.79762 0 10.3951 0 17.5901 0H90.3607C95.7373 0 98.4255 0 100.479 1.04634C102.285 1.96672 103.754 3.43534 104.674 5.24169C105.721 7.29524 105.721 9.9835 105.721 15.36V44.64C105.721 50.0165 105.721 52.7048 104.674 54.7583C103.754 56.5647 102.285 58.0333 100.479 58.9537C98.4255 60 95.7373 60 90.3607 60H17.5901C10.3951 60 6.79762 60 4.43616 58.4938C2.36903 57.1754 0.884697 55.116 0.287586 52.738C-0.394547 50.0214 0.743081 46.6085 3.01834 39.7827L4.93001 34.0477C5.43062 32.5459 5.68093 31.795 5.78035 31.0268C5.86857 30.3451 5.86857 29.6549 5.78035 28.9732C5.68093 28.205 5.43062 27.4541 4.93001 25.9523L3.01833 20.2172Z"
+						fill="currentColor"
+					/>
+				</svg>
+			</ui-typography>
+
+			<ui-typography
+				:kind="EColors.WHITE"
+				:weight="ETextWeight.BOLD"
+				:size="ETypographySizes.XXXL"
+				:text-transform="ETextTransform.UPPERCASE"
+				class-name="absolute top-0 left-0 w-full h-full flex justify-center items-center"
+			>
+				{{ berRankDictionary[+rank]?.text || berRankDictionary[0].text }}
+			</ui-typography>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import UiTypography, { ETextWeight, ETypographySizes, ETextTransform } from "../ui-typography";
+	import { EColors } from "../../_types/colors";
+
+	type Ran<T extends number> = number extends T ? number :_Range<T, []>;
+	type _Range<T extends number, R extends unknown[]> = R["length"] extends T ? R[number] : _Range<T, [R["length"], ...R]>;
+
+	type TPropNumber = Ran<typeof berRankDictionary.length>
+	type TPropString = `${TPropNumber}`;
+
+	defineProps<{
+		rank: TPropNumber | TPropString; // from 0 to 15
+	}>();
+
+	const berRankDictionary = [
+		{
+			text: "N/A",
+			color: EColors.SECONDARY_ALT,
+		},
+		{
+			text: "G",
+			color: EColors.ERROR,
+		},
+		{
+			text: "F",
+			color: EColors.WARNING,
+		},
+		{
+			text: "E2",
+			color: EColors.WARNING_600,
+		},
+		{
+			text: "E1",
+			color: EColors.WARNING_600,
+		},
+		{
+			text: "D2",
+			color: EColors.WARNING_400,
+		},
+		{
+			text: "D1",
+			color: EColors.WARNING_400,
+		},
+		{
+			text: "C3",
+			color: EColors.PRIMARY_ALT,
+		},
+		{
+			text: "C2",
+			color: EColors.PRIMARY_ALT,
+		},
+		{
+			text: "C1",
+			color: EColors.PRIMARY_ALT,
+		},
+		{
+			text: "B3",
+			color: EColors.PRIMARY_ALT_600,
+		},
+		{
+			text: "B2",
+			color: EColors.PRIMARY_ALT_600,
+		},
+		{
+			text: "B1",
+			color: EColors.PRIMARY_ALT_600,
+		},
+		{
+			text: "A3",
+			color: EColors.PRIMARY_ALT_700,
+		},
+		{
+			text: "A2",
+			color: EColors.PRIMARY_ALT_700,
+		},
+		{
+			text: "A1",
+			color: EColors.PRIMARY_ALT_700,
+		},
+	] as const;
+</script>
+
+<style>
+	.ui-ber-rank__icon {
+		height: 60px;
+	}
+</style>

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

@@ -1,7 +1,8 @@
 import UiButton from "../ui-button";
+import UiIcon from "../ui-icon";
+import { ESize } from "../../_types/sizing";
 import { EButtonSizes, EButtonTypes } from "./_typings";
-import { Story } from "@storybook/vue3";
-
+import type { Story } from "@storybook/vue3";
 export default {
 	title: "Components/ui-button",
 	component: UiButton,
@@ -33,10 +34,18 @@ export default {
 		slot: {
 			control: { type: "text" },
 			description: "The slot text or component",
+		},
+		hasPrefix:{
+			control: { type: "boolean" },
+		},
+		hasPostfix:{
+			control: { type: "boolean" },
 		}
 	},
 	args: {
 		slot: "default text",
+		hasPrefix: false,
+		hasPostfix: false,
 	},
 };
 
@@ -44,10 +53,10 @@ type TComponentProps = InstanceType<typeof UiButton>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
 	// Components used in your story `template` are defined in the `components` object
-	components: { UiButton },
+	components: { UiButton, UiIcon },
 	// The story's `args` need to be mapped into the template through the `setup()` method
 	setup() {
-		return { args };
+		return { args, ESize };
 	},
 	// And then the `args` are bound to your component with `v-bind="args"`
 	template: `
@@ -57,7 +66,19 @@ const Template: Story<TComponentProps> = (args) => ({
 				   :fullWidth="args.fullWidth"
 				   :disabled="args.disabled"
 		>
-		${args.slot}
+			<template #prefix v-if="args.hasPrefix">
+				<ui-icon
+					:icon-name="['far', 'face-smile']"
+				 	:size="ESize.SM"
+				/>
+			</template>
+			${args.slot}
+			<template #postfix v-if="args.hasPostfix">
+				<ui-icon
+					:icon-name="['far', 'face-smile']"
+					:size="ESize.SM"
+				/>
+			</template>
 		</ui-button>`,
 });
 const TemplateAll: Story<TComponentProps> = () => ({

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

@@ -1,12 +1,12 @@
 <template>
 	<button
-		class="text-base text-white rounded-md whitespace-nowrap font-bold leading-none"
+		class="ui-button justify-center grid text-base rounded-lg whitespace-nowrap font-bold leading-none touch-manipulation"
 		:disabled="disabled"
 		:class="[
 			(!kind || kind === EButtonTypes.PRIMARY) && [primaryColor, primaryColorHover, primaryColorActive].join(' '),
-			kind === EButtonTypes.SECONDARY && 'bg-secondary hover:bg-secondary-600 active:bg-secondary-700 disabled:bg-secondary-300',
-			kind === EButtonTypes.WARNING && 'bg-warning hover:bg-warning-600 active:bg-warning-700 disabled:bg-warning-300',
-			kind === EButtonTypes.ERROR && 'bg-error hover:bg-error-600 active:bg-error-700 disabled:bg-error-300',
+			kind === EButtonTypes.SECONDARY && 'text-white bg-secondary hover:bg-secondary-600 active:bg-secondary-700 disabled:bg-secondary-300',
+			kind === EButtonTypes.WARNING && 'text-white bg-warning hover:bg-warning-600 active:bg-warning-700 disabled:bg-warning-300',
+			kind === EButtonTypes.ERROR && 'text-white bg-error hover:bg-error-600 active:bg-error-700 disabled:bg-error-300',
 			kind === EButtonTypes.PRIMARY_OVERLAY
 				&& 'text-primary border border-primary hover:bg-primary-600 hover:border-transparent hover:text-white active:bg-primary-700 active:border-transparent active:text-white disabled:text-primary-300 disabled:border-primary-300',
 			kind === EButtonTypes.SECONDARY_OVERLAY
@@ -24,12 +24,31 @@
 			className
 		]"
 	>
-		<slot />
+		<span
+			v-if="slots.prefix"
+			class="ui-button__prefix"
+			:class="(slots.default || slots.postfix) && 'mr-sm'"
+		>
+			<slot name="prefix" />
+		</span>
+
+		<span>
+			<slot />
+		</span>
+
+		<span
+			v-if="slots.postfix"
+			class="ui-button__postfix"
+			:class="(slots.default || slots.prefix) && 'ml-sm'"
+		>
+			<slot name="postfix" />
+		</span>
 	</button>
 </template>
 
 <script lang="ts" setup>
 	import { EButtonSizes, EButtonTypes } from "./_typings";
+	import { useSlots } from "vue";
 	type TProps = {
 		className?: string;
 		kind?: EButtonTypes;
@@ -38,8 +57,17 @@
 		disabled?: boolean;
 	}
 
-	const primaryColor = "bg-primary disabled:bg-primary-300";
+	const slots = useSlots();
+
+	const primaryColor = "text-white bg-primary disabled:bg-primary-300";
 	const primaryColorHover = "hover:bg-primary-600 ";
 	const primaryColorActive = "active:bg-primary-700 ";
+
 	defineProps<TProps>();
 </script>
+
+<style>
+	.ui-button {
+		grid-template-columns: auto auto auto;
+	}
+</style>

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

@@ -1,8 +1,8 @@
-import UiCardCta from "./ui-card-cta.vue";
+import UiCardCta from "../ui-card-cta";
 import UiIcon from "../ui-icon";
 import { ESize } from "../../_types/sizing";
 import UiTypography from "../ui-typography";
-import { Story } from "@storybook/vue3";
+import type { Story } from "@storybook/vue3";
 
 export default {
 	title: "Components/ui-card-cta",
@@ -18,10 +18,6 @@ export default {
 			control: { type: "boolean" },
 			description: "The Element order",
 		},
-		fullWidth: {
-			control: { type: "boolean" },
-			description: "The full width size",
-		},
 		disabled: {
 			control: { type: "boolean" },
 			description: "The full width size",
@@ -30,7 +26,6 @@ export default {
 	args: {
 		slot: "Description",
 		invertOrder: false,
-		fullWidth: false,
 		disabled: false
 	},
 };
@@ -45,7 +40,7 @@ const Template: Story<TComponentProps> = (args) => ({
 	template: `
 		<ui-card-cta v-bind="args">
 			<template v-slot:icon>
-				<ui-icon :size="ESize.MD" has-wrapper class-name="text-white" :icon-name="['fas', 'fa-user-secret']" />
+				<ui-icon :size="ESize.MD" has-wrapper class-name="text-white" :icon-name="['far', 'fa-face-smile']" />
 			</template>
 
 			<template v-slot:title>

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

@@ -1,8 +1,8 @@
 <template>
 	<button
-		class="ui-card-cta outline-0 border border-secondary-alt-500 rounded-2xl p-sm shadow-m hover:border-secondary-700 focus:shadow-border-primary active:bg-secondary-alt-200 disabled:bg-secondary-alt-200"
+		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"
 		:disabled="disabled"
-		:class="[!fullWidth && 'ui-card-cta_cropped', className]"
+		:class="[className]"
 	>
 		<span
 			class="ui-card-cta__wrapper grid gap-sm items-center"
@@ -38,7 +38,7 @@
 <script lang="ts" setup>
 	import { useSlots } from "vue";
 	import UiTypography from "../ui-typography";
-	import { ETypographyColors, ETypographySizes, ETextWeight } from "../ui-typography/_typings";
+	import { ETypographySizes, ETextWeight } from "../ui-typography";
 	import { EColors } from "../../_types/colors";
 
 	const slots = useSlots();
@@ -46,7 +46,6 @@
 	defineProps<{
 		className?: string;
 		invertOrder?: boolean;
-		fullWidth?: boolean;
 		disabled?: boolean;
 	}>();
 
@@ -75,10 +74,6 @@
 		width: 100%;
 	}
 
-	.ui-card-cta_cropped {
-		max-width: 382px;
-	}
-
 	.ui-card-cta_inverted {
 		grid-template-columns: 1fr auto;
 	}

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

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