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>;
@@ -46,10 +49,6 @@ const meta = {
     items,
   },
   argTypes: { ...metaArgTypes },
-  decorators: [ () => ({
-    name: 'LMaxWidth',
-    template: '<div style="max-width: 21.875rem"><story /></div>',
-  }) ],
   parameters: { chromatic: { disableSnapshot: false } },
 } satisfies MenuMetaType;
 export default meta;
@@ -70,15 +69,22 @@ export const Basic: MenuStoryType = {
   },
 };
 Basic.parameters = { docs: { source: { code: BasicStoriesSource } } };
+Basic.decorators = [ () => ({
+  name: 'LMaxWidth',
+  template: '<div style="max-width: 21.875rem"><story /></div>',
+}) ];
+
 export const Compact: MenuStoryType = { ...Basic };
 Compact.args = { class: 'ui-menu--compact' };
+
 export const HasSelectedItem: MenuStoryType = { ...Basic };
 HasSelectedItem.args = {
   items: items.map((item, index) => ({
     ...item,
     class: [ { 'ui-menu-item--is-selected': index === 1 } ],
   })),
 };
+
 export const HasSuffix: MenuStoryType = { ...Basic };
 HasSuffix.args = {
   items: [
@@ -101,6 +107,7 @@ HasSuffix.args = {
     })),
   ],
 };
+
 export const HasPrefix: MenuStoryType = { ...Basic };
 HasPrefix.args = {
   items: items.map((item) => ({
@@ -109,6 +116,7 @@ HasPrefix.args = {
     prefixAttrs: { icon: 'calendar' },
   })),
 };
+
 export const ItemsViaSlot: MenuStoryType = {
   render(args, {
     name, argTypes,
@@ -124,6 +132,11 @@ export const ItemsViaSlot: MenuStoryType = {
     };
   },
 };
+ItemsViaSlot.decorators = [ () => ({
+  name: 'LMaxWidth',
+  template: '<div style="max-width: 21.875rem"><story /></div>',
+}) ];
+
 export const HasOutsideElements: MenuStoryType = {
   render(args, {
     name, argTypes,
@@ -139,4 +152,55 @@ export const HasOutsideElements: MenuStoryType = {
     };
   },
 };
+HasOutsideElements.decorators = [ () => ({
+  name: 'LMaxWidth',
+  template: '<div style="max-width: 21.875rem"><story /></div>',
+}) ];
+
+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}"/>
+      `,
+    };
+  },
+};
+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 = [
+  () => ({
+    name: 'LMaxWidth',
+    template: '<div style="max-width: 41.25rem"><story /></div>',
+  }),
+  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>

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

@@ -0,0 +1,170 @@
+<template>
+  <UiPopover class="has-button">
+    <UiMenu
+      v-bind="args"
+      :items="itemsToRender"
+      role="listbox"
+      aria-label="Chronic condition"
+      aria-multiselectable="true"
+      :aria-activedescendant="focusedOption"
+      :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>
+        <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 focusedOption = ref('');
+const handleFocus = (item) => {
+  focusedOption.value = item;
+};
+
+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(),
+    onKeyup: ({ key }) => { key === 'enter' ? handleCustomOptionClick() : ''; },
+  };
+  const items = (attrs.items as any).map((item) => ({
+    label: item,
+    checkboxAttrs: {
+      modelValue: value.value,
+      value: item,
+      disabled: true,
+    },
+    onClick: () => handleOptionClick(item),
+    onFocus: () => handleFocus(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;
+  --popover-content-max-height: 20rem;
+  --popover-box-shadow: none;
+
+  &__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';