Added story to Dropdown (#382)

packages/alto/src/components/Dropdown/Dropdown.stories.ts

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { ref } from 'vue';
+import { Dropdown } from '~/components';
+import type { DropdownValue } from '~/types';
+
+type Story = StoryObj<typeof Dropdown>;
+const meta: Meta<typeof Dropdown> = {
+  title: 'Application/Dropdowns/Dropdown',
+  component: Dropdown,
+  tags: ['dropdown', 'select', 'option', 'options'],
+  argTypes: {
+    modelValue: { table: { disable: true } },
+    items: { table: { disable: true } },
+    item: { table: { disable: true } },
+    search: { table: { disable: true } },
+    clearable: {
+      if: { arg: 'multiple', truthy: false },
+    },
+    selectedItemsLabel: {
+      if: { arg: 'multiple', truthy: true },
+    },
+    limit: {
+      if: { arg: 'multiple', truthy: true },
+    },
+    searchInputPlaceholder: {
+      if: { arg: 'searchable', truthy: true },
+    },
+  },
+  args: {
+    placeholder: 'Select item',
+    disabled: false,
+    clearable: false,
+    multiple: false,
+    selectedItemsLabel: 'Selected items',
+    limit: 0,
+    emptyStateMessage: 'No results were found',
+    searchable: false,
+    searchInputPlaceholder: 'Search',
+    isLoading: false,
+  },
+};
+
+export const Default: Story = {
+  render: args => ({
+    components: { Dropdown },
+    setup() {
+      const items: Array<DropdownValue> = [
+        { label: 'Arabic', key: 1 },
+        { label: 'English', key: 2 },
+        { label: 'German', key: 3 },
+        { label: 'French', key: 4 },
+        { label: 'Dutch', key: 5 },
+        { label: 'Hindi', key: 6 },
+      ];
+
+      const value = ref(null);
+
+      return { args, items, value };
+    },
+    template: '<Dropdown v-model="value" v-bind="args" :items="items" />',
+  }),
+};
+
+export default meta;

packages/alto/src/components/Dropdown/Dropdown.vue

@@ -10,8 +10,8 @@ import { setPosition } from '~/helpers';
 import { Loader } from '~/components';
 
 const props = withDefaults(defineProps<DropdownProps>(), {
-  multiSelectLabel: 'Selected items',
-  noDataText: 'No results were found',
+  selectedItemsLabel: 'Selected items',
+  emptyStateMessage: 'No results were found',
   clearable: true,
   limit: 0,
   searchInputPlaceholder: 'Search',
@@ -37,14 +37,14 @@ function asArray() {
 }
 
 const selectedOptions = computed(() => {
-  const { modelValue, placeholder, multiple, multiSelectLabel } = props;
+  const { modelValue, placeholder, multiple, selectedItemsLabel } = props;
   if (modelValue) {
     if (!multiple) {
       return (modelValue as DropdownValue).label;
     }
 
     if (multiple && asArray().length) {
-      return multiSelectLabel;
+      return selectedItemsLabel;
     }
   }
 
@@ -339,7 +339,7 @@ onClickOutside(dropdown, () => show.value = false);
         </div>
 
         <div v-else class="no-results">
-          {{ noDataText }}
+          {{ emptyStateMessage }}
         </div>
         <div v-if="isLoading" class="loading">
           <Loader :size="15" />

packages/alto/src/components/Dropdown/types.ts

@@ -33,8 +33,8 @@ export interface DropdownProps extends DropdownCommonProps {
   placeholder?: string
   multiple?: boolean
   disabled?: boolean
-  multiSelectLabel?: string
+  selectedItemsLabel?: string
   clearable?: boolean
-  noDataText?: string
+  emptyStateMessage?: string
   limit?: number
 }

packages/alto/src/components/Status/EditableStatus.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
 import { ref } from 'vue';
 import { Status } from '~/components';
-import type { StatusObject } from '~/components/Status/types';
+import type { StatusObject } from '~/types';
 
 type Story = StoryObj<typeof Status>;
 const meta: Meta<typeof Status> = {