docs: add stories for UiMenu

src/components/organisms/UiList/UiList.stories.ts

@@ -27,6 +27,8 @@ import {
   IconInHeadingStoriesSource,
   AnswerWithCheckboxStories,
   AnswerWithCheckboxStoriesSource,
+  ListBoxStories,
+  ListBoxStoriesSource,
 } from './stories';
 
 type ListArgsType = ListProps;
@@ -429,3 +431,32 @@ AnswerWithRadio.args = {
     },
   })),
 };
+export const ListBox:ListStoryType = {
+  render(args, {
+    name, argTypes,
+  }) {
+    return {
+      name,
+      components: { ListBoxStories },
+      setup() {
+        const { attrs } = getAttrs(args, argTypes, name);
+        return { attrs };
+      },
+      template: '<ListBoxStories v-bind="{...attrs}"/>',
+    };
+  },
+};
+ListBox.parameters = { docs: { source: { code: ListBoxStoriesSource } } };
+ListBox.args = {
+  items: items.map((item, index) => ({
+    ...item,
+    tag: UiCheckbox,
+    icon: 'info',
+    value: item,
+    modelValue: index === 1 && [ item ],
+    textLabelAttrs: {
+      tag: 'div',
+      class: 'list-box__label',
+    },
+  })),
+};

src/components/organisms/UiList/UiList.vue

@@ -33,15 +33,35 @@
         </UiListItem>
       </template>
     </slot>
+    <template v-if="hasLoader">
+      <component
+        :is="loader"
+        :is-loading="isLoading"
+        v-bind="defaultProps.loaderAttrs"
+      >
+        <template #loader>
+          <!-- @slot Use this slot to replace loader. -->
+          <slot name="loader" />
+        </template>
+        <!-- @slot Use this slot to place content inside button. -->
+        <slot />
+      </component>
+    </template>
   </component>
 </template>
 
 <script setup lang="ts">
 import {
+  h,
   computed,
+  ref,
+  watch,
   type HTMLAttributes,
+  defineAsyncComponent,
+  useSlots,
 } from 'vue';
 import UiListItem, { type ListItemAttrsProps } from './_internal/UiListItem.vue';
+import type { LoaderAttrsProps } from '../../molecules/UiLoader/UiLoader.vue';
 import UiListItemContent from './_internal/UiListItemContent.vue';
 import type {
   DefineAttrsProps,
@@ -63,13 +83,36 @@ export interface ListProps {
    * Use this props to pass list items.
    */
   items?: ListItem[];
+  /**
+   * Use this props to set button into loading state.
+   */
+  isLoading?: boolean;
+  /**
+   * Use this props to pass attrs for UiLoader.
+   */
+  loaderAttrs?: LoaderAttrsProps;
 }
 export type ListAttrsProps<HTMLAttrs = HTMLAttributes> = DefineAttrsProps<ListProps, HTMLAttrs>;
 
 const props = withDefaults(defineProps<ListProps>(), {
   tag: 'ul',
   items: () => ([]),
+  isLoading: false,
+  loaderAttrs: () => ({}),
 });
+const defaultProps = computed(() => ({
+  loaderAttrs: {
+    type: 'skeleton' as const,
+    'transition-type': 'show',
+    ...props.loaderAttrs,
+  },
+}));
+const hasLoader = ref(props.isLoading);
+watch(() => (props.isLoading), (isLoading) => {
+  if (isLoading && !hasLoader.value) {
+    hasLoader.value = true;
+  }
+}, { once: true });
 const itemsToRender = computed(() => (props.items
   .map((item, index) => {
     if (typeof item === 'string') {
@@ -83,6 +126,19 @@ const itemsToRender = computed(() => (props.items
       name: item.name || `list-item-${index}`,
     };
   })));
+const slots = useSlots();
+const loader = computed(() => (
+  hasLoader.value
+    ? defineAsyncComponent({
+      loader: () => import('../../molecules/UiLoader/UiLoader.vue'),
+      delay: 0,
+      loadingComponent: () => (slots.default
+        ? h('slot', slots.default())
+        : null)
+      ,
+    })
+    : null
+));
 </script>
 
 <style lang="scss">

src/components/organisms/UiList/stories/ListBox.vue

@@ -0,0 +1,74 @@
+<template>
+  <UiList
+    v-bind="args"
+    class="list-box"
+  />
+  <div class="search-dropdown-input-row">
+    <UiButton
+      class="search-dropdown-input-row__button ui-button--text"
+      @click="clickHandler"
+    >
+      <UiIcon
+        icon="plus"
+        class="ui-button__icon"
+      />
+      <UiText class="search-dropdown-input-row__button">
+        Didn't find chronic condition?
+      </UiText>
+    </UiButton>
+    <UiText class="search-dropdown-input-row__text">
+      Add with your own words
+    </UiText>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  useAttrs,
+  defineOptions,
+} from 'vue';
+import {
+  UiButton,
+  UiIcon,
+  UiList,
+  UiText,
+} from '@infermedica/component-library';
+
+defineOptions({ inheritAttrs: false });
+export interface AddEmits {
+  (e:'add'): void;
+}
+const attrs = useAttrs();
+const args = computed(() => (attrs));
+
+const emit = defineEmits<AddEmits>();
+const clickHandler = () => {
+  emit('add');
+};
+</script>
+
+<style lang="scss">
+.list-box {
+  &__label {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.search-dropdown-input-row {
+  padding: var(--space-12) var(--space-4);
+
+  &__button {
+    margin-inline: var(--space-8);
+    font: var(--font-body-1-thick);
+  }
+
+  &__text {
+    padding: var(--space-4) var(--space-12);
+    margin-inline: var(--space-32);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>

src/components/organisms/UiList/stories/index.ts

@@ -10,3 +10,5 @@ export { default as IconInHeadingStories } from './IconInHeading.vue';
 export { default as IconInHeadingStoriesSource } from './IconInHeading.vue?raw';
 export { default as AnswerWithCheckboxStories } from './AnswerWithCheckbox.vue';
 export { default as AnswerWithCheckboxStoriesSource } from './AnswerWithCheckbox.vue?raw';
+export { default as ListBoxStories } from './ListBox.vue';
+export { default as ListBoxStoriesSource } from './ListBox.vue?raw';