BaseBadge Component

components/src/base-badge/base-badge.story.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import BaseBadge from './base-badge.vue';
+
+const state = reactive({
+	size: 'medium',
+	label: 'Badge',
+	color: 'primary',
+	caps: false,
+	border: false,
+});
+</script>
+
+<template>
+	<Story title="Base / Badge">
+		<template #controls>
+			<HstSelect
+				v-model="state.size"
+				title="Size"
+				:options="{
+					small: 'Small',
+					medium: 'Medium',
+					large: 'Large',
+				}"
+			/>
+			<HstSelect
+				v-model="state.color"
+				title="Color"
+				:options="{
+					primary: 'Primary',
+					gray: 'Gray',
+				}"
+			/>
+			<HstText v-model="state.label" title="Icon" />
+			<HstCheckbox v-model="state.caps" title="Caps" />
+			<HstCheckbox v-model="state.border" title="Border" />
+		</template>
+
+		<BaseBadge :size="state.size" :color="state.color" :label="state.label" :caps="state.caps" :border="state.border" />
+	</Story>
+</template>

components/src/base-badge/base-badge.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+export interface BaseBadgeProps {
+	/**
+	 * Size of the badge. Controls both font size and icon size.
+	 * @values small, medium, large
+	 */
+	size?: 'small' | 'medium' | 'large';
+
+	/**
+	 * Color of the badge.
+	 * @values primary, white, danger
+	 */
+	color?: 'primary' | 'gray';
+
+	/**
+	 * Whether the badge should be displayed in all caps.
+	 */
+	caps?: boolean;
+
+	/**
+	 * Whether the badge should have a border.
+	 */
+	border?: boolean;
+
+	/**
+	 * Label of the badge.
+	 */
+	label?: string;
+
+	/**
+	 * URL to navigate to when the badge is clicked.
+	 */
+	href?: string;
+
+	/**
+	 * Target of the link.
+	 * @values _blank, _self, _parent, _top
+	 */
+	target?: '_blank' | '_self' | '_parent' | '_top';
+
+	/**
+	 * Aria label for the badge if using as a link.
+	 */
+	ariaLabel?: string;
+}
+
+const props = withDefaults(defineProps<BaseBadgeProps>(), {
+	size: 'medium',
+	color: 'primary',
+});
+
+const as = computed(() => {
+	if (props.href) {
+		// router-link is not displaying correctly in Histoire
+		return 'a';
+	} else {
+		return 'span';
+	}
+});
+
+const badgeProps = computed(() => {
+	if (props.href) {
+		return {
+			href: props.href,
+			target: props.target,
+			...(props.ariaLabel && { 'aria-label': props.ariaLabel }),
+		};
+	} else {
+		return {};
+	}
+});
+
+const borderColor = computed(() => {
+	switch (props.color) {
+		case 'primary':
+			return 'var(--purple-300)';
+		default:
+			return 'var(--gray-300)';
+	}
+});
+</script>
+
+<template>
+	<component
+		:is="as"
+		:class="[
+			'badge-base',
+			`badge-${props.color}`,
+			`badge-${props.size}`,
+			{
+				caps: props.caps,
+				border: props.border,
+			},
+		]"
+		v-bind="badgeProps"
+	>
+		<slot>{{ label }}</slot>
+	</component>
+</template>
+
+<style scoped>
+/* Base */
+.badge-base {
+	display: inline-flex;
+	align-items: center;
+	text-decoration: none;
+	border-top-right-radius: 9999px;
+	border-bottom-right-radius: 9999px;
+	border-top-left-radius: 9999px;
+	border-bottom-left-radius: 9999px;
+	font-weight: 600;
+	font-family: var(--family-display);
+}
+
+/* Colors */
+.badge-primary {
+	background-color: var(--purple-50);
+	color: var(--purple-600);
+}
+
+.badge-gray {
+	background-color: var(--gray-50);
+	color: var(--gray-600);
+}
+
+/* Sizes */
+.badge-small {
+	font-size: var(--text-xs);
+	padding: 2px 8px;
+}
+
+.badge-medium {
+	font-size: var(--text-sm);
+	padding: 4px 12px;
+}
+
+.badge-large {
+	font-size: var(--text-md);
+	padding: 6px 16px;
+}
+
+/* Props */
+.border {
+	border: 1px solid v-bind(borderColor);
+}
+
+.caps {
+	text-transform: uppercase;
+}
+</style>

components/src/index.ts

@@ -1,2 +1,3 @@
 export { default as BaseIcon } from './base-icon/base-icon.vue';
-export { default as BaseDivider } from './base-button/base-divider.vue';
+export { default as BaseBadge } from './base-badge/base-badge.vue';
+export { default as BaseDivider } from './base-button/base-divider.vue';

components/src/theme/main.css

@@ -8,6 +8,17 @@
 	--primary: var(--purple-400);
 	--secondary: var(--pink-200);
 
+	--gray-50: #f9fafb;
+	--gray-100: #f4f5f7;
+	--gray-200: #e5e7eb;
+	--gray-300: #d2d6dc;
+	--gray-400: #9fa6b2;
+	--gray-500: #6b7280;
+	--gray-600: #4b5563;
+	--gray-700: #374151;
+	--gray-800: #252f3f;
+	--gray-900: #161e2e;
+
 	--purple-50: #ede5ff;
 	--purple-100: #d0c0fd;
 	--purple-200: #af95fd;