From c2aae343bb5e15c7432f07a82007e1dcf5fc5060 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 21 Jun 2023 16:20:40 -0400
Subject: [PATCH] Use self-documenting components in storybook

---
 components/src/base-icon/base-icon.story.vue |  2 +-
 components/src/base-icon/base-icon.vue       | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/components/src/base-icon/base-icon.story.vue b/components/src/base-icon/base-icon.story.vue
index 4ce91480..3748e005 100644
--- a/components/src/base-icon/base-icon.story.vue
+++ b/components/src/base-icon/base-icon.story.vue
@@ -10,7 +10,7 @@ const state = reactive({
 </script>
 
 <template>
-	<Story title="Base / Icon" auto-props-disabled>
+	<Story title="Base / Icon">
 		<template #controls>
 			<HstText v-model="state.name" title="Name" />
 			<HstSlider v-model="state.weight" :step="100" :min="100" :max="700" title="Weight" />
diff --git a/components/src/base-icon/base-icon.vue b/components/src/base-icon/base-icon.vue
index 00e628f5..f37f3c4c 100644
--- a/components/src/base-icon/base-icon.vue
+++ b/components/src/base-icon/base-icon.vue
@@ -2,8 +2,22 @@
 import { computed, unref } from 'vue';
 
 export interface BaseIconProps {
+	/**
+	 * Name of the Material Symbol to use.
+	 * @see https://fonts.google.com/icons for all available icons
+	 */
 	name: string;
+
+	/**
+	 * Size of the icon. Controls both font size and optical size
+	 * @values small, medium, large
+	 */
 	size?: 'small' | 'medium' | 'large';
+
+	/**
+	 * Weight of the icon. Similar to font-weight
+	 * @values 100, 200, 300, 400, 500, 600, 700
+	 */
 	weight?: number;
 }