docs: add stories for UiMenu

src/components/organisms/UiMenu/UiMenu.stories.ts

@@ -16,7 +16,10 @@ import {
   BasicStoriesSource,
   ItemsViaSlotStories,
   HasOutsideElementsStories,
+  HasButtonStories,
+  HasButtonStoriesSource,
 } from './stories';
+import { withVModel } from '../../../../.storybook/decorators';
 
 type MenuArgsType = MenuProps;
 type MenuMetaType = Meta<MenuArgsType>;
@@ -42,6 +45,10 @@ const meta = {
   title: 'Organisms/Menu',
   component: UiMenu,
   args: {
+    translation: {
+      label: 'Didn\'t find chronic condition?',
+      hint: 'Add with your own words',
+    },
     ...metaArgs,
     items,
   },
@@ -139,4 +146,44 @@ export const HasOutsideElements: MenuStoryType = {
     };
   },
 };
+export const HasButton:MenuStoryType = {
+  render(args, {
+    name, argTypes,
+  }) {
+    return {
+      name,
+      components: { HasButtonStories },
+      setup() {
+        const { attrs } = getAttrs(args, argTypes, name);
+
+        return { attrs };
+      },
+      template: `
+      <HasButtonStories v-bind="{...attrs}" :translation="translation"/>
+      `,
+    };
+  },
+};
+HasButton.args = {
+  modelValue: [ 'ADHD — hyperactive type' ],
+  items: [
+    'ADHD — hyperactive type',
+    'ADHD — inattentive type',
+    'Abdominal aortic aneurysm',
+    'Achalasia',
+    'Acne',
+    'Acoustic neuroma',
+    'Painful swallowing',
+    'Stuffy nose',
+    'Sneeze',
+    'Muscle pain',
+    'Runny nose',
+    'Wernicke`s encephalopathy',
+    'Whipworm infection',
+    'Wilson`s disease',
+    'Zollinger-Ellison syndrome',
+  ],
+};
+HasButton.decorators = [ withVModel ];
+HasButton.parameters = { docs: { source: { code: HasButtonStoriesSource } } };
 

src/components/organisms/UiMenu/UiMenu.vue

@@ -17,7 +17,9 @@
             v-bind="item"
             :name="item.name"
           >
-            <UiText>{{ item.label }}</UiText>
+            <UiText tag="span">
+              {{ item.label }}
+            </UiText>
           </slot>
         </UiMenuItem>
       </template>
@@ -224,4 +226,8 @@ defineExpose({
     }
   }
 }
+
+div:has(.has-button) {
+  max-width: none !important; // overwriting styles from template
+}
 </style>

src/components/organisms/UiMenu/stories/HasButton.vue

@@ -0,0 +1,164 @@
+<template>
+  <UiPopover class="has-button">
+    <UiMenu
+      v-bind="args"
+      :items="itemsToRender"
+      role="listbox"
+      aria-label="Chronic condition"
+      aria-multiselectable="true"
+      aria-activedescendant=""
+      :aria-busy="!allPredefinedOptionsAreLoaded"
+    >
+      <template
+        v-for="({
+          label, name, checkboxAttrs,
+        }, index) in itemsToRender"
+        #[`menu-item-${index}`]
+        :key="name"
+      >
+        <UiCheckbox v-bind="checkboxAttrs" :aria-label="label">
+          {{ label }}
+        </UiCheckbox>
+      </template>
+      <template #custom-option @keyup.enter="handleCustomOptionClick">
+        <UiIcon
+          icon="plus"
+          class="ui-button__icon has-button__custom-option-icon"
+        />
+        <UiText
+          tag="span"
+          class="ui-text--body-1-thick"
+        >
+          Didn't find chronic condition?
+        </UiText>
+        <UiText
+          tag="span"
+          class="has-button__custom-option-hint"
+        >
+          Add with your own words
+        </UiText>
+      </template>
+    </UiMenu>
+  </UiPopover>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  useAttrs,
+  defineOptions,
+  onMounted,
+  ref,
+  inject,
+} from 'vue';
+import {
+  UiCheckbox,
+  UiIcon,
+  UiMenu,
+  UiPopover,
+  UiText,
+} from '@infermedica/component-library';
+import { equal } from '../../../../utilities/helpers';
+
+defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const args = computed(() => (Object.keys(attrs).reduce((object, key) => {
+  if (key !== 'items') {
+    return {
+      ...object,
+      [key]: args[key],
+    };
+  }
+  return object;
+}, {})));
+
+const value = inject('value', []);
+const allPredefinedOptionsAreLoaded = ref(false);
+onMounted(() => {
+  setTimeout(() => {
+    allPredefinedOptionsAreLoaded.value = true;
+  }, 1000);
+});
+
+const handleUpdateModelValue = (val) => (value['value'].includes(val)
+  ? value['value'].filter((option) => (!equal(val, option)))
+  : [
+    ...value['value'],
+    val,
+  ]);
+const handleOptionClick = (val) => {
+  value['value'] = handleUpdateModelValue(val);
+};
+const handleCustomOptionClick = () => {
+  console.log('emit cusomOtptionClick');
+};
+const itemsToRender = computed(() => {
+  const customOption = {
+    name: 'custom-option',
+    class: 'has-button__custom-option',
+    listItemAttrs: { class: 'ui-list-item ui-menu-item has-button__menu-item--has-border' },
+    onClick: () => handleCustomOptionClick(),
+  };
+  const items = (attrs.items as any).map((item) => ({
+    label: item,
+    checkboxAttrs: {
+      modelValue: value['value'],
+      value: item,
+      disabled: true,
+    },
+    onClick: () => handleOptionClick(item),
+  }));
+  return [
+    ...items,
+    (
+      allPredefinedOptionsAreLoaded.value
+        ? customOption
+        : {}
+    ),
+  ].map((item, index) => ({
+    ...item,
+    'aria-selected': false,
+    'aria-setsize': items.length + (
+      allPredefinedOptionsAreLoaded.value
+        ? 1
+        : 0
+    ),
+    'aria-posinet': index + 1,
+  }));
+});
+</script>
+
+<style lang="scss">
+@use "../../../../styles/mixins";
+.has-button {
+  --popover-content-padding-block: 0;
+  --popover-content-padding-inline: 0;
+
+  max-height: 20rem;
+  overflow-y: auto;
+
+  &__menu-item {
+    &--has-border {
+      border: 1px solid var(--color-border-divider);
+      border-width: 1px 0 0 0 ;
+    }
+  }
+
+  &__custom-option {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+    text-align: start;
+    gap: 0 var(--space-12);
+
+    &-icon {
+      --button-icon-margin-inline: 0;
+      --button-icon-margin-block: 0;
+    }
+
+    &-hint {
+      grid-column: 2;
+    }
+  }
+}
+</style>

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

@@ -4,3 +4,5 @@ export { default as ItemsViaSlotStories } from './ItemsViaSlot.vue';
 export { default as ItemsViaSlotStoriesSource } from './ItemsViaSlot.vue?raw';
 export { default as HasOutsideElementsStories } from './HasOutsideElements.vue';
 export { default as HasOutsideElementsStoriesSource } from './HasOutsideElements.vue?raw';
+export { default as HasButtonStories } from './HasButton.vue';
+export { default as HasButtonStoriesSource } from './HasButton.vue?raw';