Use self-documenting components in storybook

directus · Jun 21, 2023 · c2aae34 · c2aae34
1 parent aa85a80
commit c2aae34
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git 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
@@ -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;
 }