Add doc strings with examples to new components

Modify commit message

Signed-off-by: Phillip Rak <[email protected]>

pkg/rancher-components/src/components/RcButton/RcButton.vue

@@ -1,4 +1,12 @@
 <script setup lang="ts">
+/**
+ * A button element used for performing actions, such as submitting forms or
+ * opening dialogs.
+ *
+ * Example:
+ *
+ * <rc-button primary @click="doAction">Perform an Action</rc-button>
+ */
 import { computed, ref, defineExpose } from 'vue';
 import { ButtonRoleProps, ButtonSizeProps } from './types';
 

pkg/rancher-components/src/components/RcDropdown/RcDropdown.vue

@@ -1,4 +1,25 @@
 <script setup lang="ts">
+/**
+ * Offers a list of choices to the user, such as a set of actions or functions.
+ * Opened by activating RcDropdownTrigger.
+ *
+ * Example:
+ *
+ *  <rc-dropdown :aria-label="t('nav.actionMenu.label')">
+ *    <rc-dropdown-trigger tertiary>
+ *      <i class="icon icon-actions" />
+ *    </rc-dropdown-trigger>
+ *    <template #dropdownCollection>
+ *      <rc-dropdown-item @click="performAction()">
+ *        Action 1
+ *      </rc-dropdown-item>
+ *      <rc-dropdown-separator />
+ *      <rc-dropdown-item @click="performAction()">
+ *        Action 2
+ *      </rc-dropdown-item>
+ *    </template>
+ *  </rc-dropdown>
+ */
 import { useTemplateRef } from 'vue';
 import { useClickOutside } from '@shell/composables/useClickOutside';
 import { useDropdownContext } from '@components/RcDropdown/useDropdownContext';

pkg/rancher-components/src/components/RcDropdown/RcDropdownItem.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+/**
+ * An item for a dropdown menu. Used in conjunction with RcDropdown.
+ */
 import { inject } from 'vue';
 import { DropdownContext, defaultContext } from './types';
 

pkg/rancher-components/src/components/RcDropdown/RcDropdownTrigger.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+/**
+ * A button that opens a menu. Used in conjunction with `RcDropdown.vue`.
+ */
 import { inject, onMounted, useTemplateRef } from 'vue';
 import { RcButton, RcButtonType } from '@components/RcButton';
 import { DropdownContext, defaultContext } from './types';