fix: story tweaks

Author: asvae

packages/ui/src/components/va-menu-list/VaMenuList.stories.ts

@@ -1,11 +1,13 @@
-import { VaDivider, VaButton, VaDropdown, VaDropdownContent, VaIcon, VaAvatar } from '../../components'
+import { VaDivider, VaButton, VaDropdown, VaIcon, VaAvatar } from '../../components'
 import VaMenuList from './VaMenuList.vue'
 import VaMenuItem from './components/VaMenuItem.vue'
 import VaMenuGroup from './components/VaMenuGroup.vue'
+import { addText } from '../../../.storybook/interaction-utils/addText'
 
 export default {
   title: 'VaMenuList',
   component: VaMenuList,
+  tags: ['autodocs'],
 }
 
 export const Default = () => ({
@@ -19,23 +21,24 @@ export const Default = () => ({
 export const IconSlot = () => ({
   components: { VaMenuList, VaAvatar },
   data: () => ({
-    options: [
-      { id: '0', text: 'one', value: 'one', icon: 'accessible_forward', rightIcon: '' },
-      { id: '1', text: 'two', value: 'two', icon: '', rightIcon: 'home' },
-      { id: '2', text: 'three', value: 'three', icon: 'accessible_forward', rightIcon: '' },
-      { id: '3', text: 'four', value: 'four', icon: '', rightIcon: 'accessible_forward' },
-      { id: '4', text: 'five', value: 'five', icon: 'search' },
-    ],
-    value: false,
+    options: ['Option 1', 'Option 2', 'Option 3'],
   }),
   template: `
-  <VaMenuList :options="options" v-model="value">
+  <VaMenuList :options="options">
     <template #left-icon>
-      <va-avatar src="https://randomuser.me/api/portraits/men/2.jpg" />
+      [left-icon]
+    </template>
+    <template #icon>
+      [icon]
     </template>
   </VaMenuList>
   `,
 })
+addText(
+  IconSlot,
+  'There is no slot for right icon, only for left one.',
+  'broken',
+)
 
 const longGroupName = 'This is a very long group name that should be truncated'.repeat(10)
 export const Groups = () => ({
@@ -51,14 +54,18 @@ export const Groups = () => ({
     value: false,
   }),
   template: `
-  <VaMenuList :options="options" v-model="value">
+  <VaMenuList :options="options">
   </VaMenuList>
   `,
 })
+addText(
+  Groups,
+  'Long group name is not truncated in story. We also have too much options - should be minimal amount.',
+  'broken',
+)
 
 export const SlotUsage = () => ({
   components: { VaMenuList, VaMenuItem, VaMenuGroup },
-
   template: `
     <VaMenuList>
       <VaMenuGroup group-name="Group 1" />
@@ -78,26 +85,21 @@ export const SlotUsage = () => ({
 
 export const Color = () => ({
   components: { VaMenuList, VaMenuItem, VaMenuGroup },
-
   data: () => ({
-    options: [
-      { id: '0', text: 'one', value: 'one', icon: 'accessible_forward' },
-      { id: '1', text: 'two', value: 'two', icon: '', rightIcon: 'home' },
-      { id: '2', text: 'three', value: 'three', icon: 'accessible_forward', rightIcon: '' },
-      { id: '3', text: 'four', value: 'four', icon: '', rightIcon: 'accessible_forward' },
-      { id: '4', text: 'five', value: 'five', icon: 'search', rightIcon: '' },
-    ],
-    value: false,
+    options: ['Option 1', 'Option 2', 'Option 3'],
   }),
-
   template: `
     <VaMenuList color="warning" :options="options" />
   `,
 })
+addText(
+  Groups,
+  `I don't think we have any other component where 'color' means 'hover-color', let's make it explicit.` ,
+  'broken',
+)
 
 export const WithDivider = () => ({
   components: { VaMenuList, VaMenuItem, VaMenuGroup, VaDivider, VaButton },
-
   template: `
     <VaMenuList>
       <VaMenuItem>
@@ -120,22 +122,8 @@ export const WithDivider = () => ({
   `,
 })
 
-const subMenu = `
-<VaDropdownContent style="margin-top: calc(var(--va-menu-padding-y) * -1)">
-  <VaMenuList>
-    <VaMenuItem>
-      Group 1
-    </VaMenuItem>
-    <VaMenuItem>
-      Group 2
-    </VaMenuItem>
-  </VaMenuList>
-</VaDropdownContent>
-`
-
 export const WithDropdown = () => ({
-  components: { VaMenuList, VaMenuItem, VaMenuGroup, VaDivider, VaButton, VaDropdown, VaDropdownContent, VaIcon },
-
+  components: { VaMenuList, VaMenuItem, VaMenuGroup, VaDivider, VaButton, VaDropdown, VaIcon },
   template: `
     <VaMenuList>
       <VaMenuItem>
@@ -154,7 +142,16 @@ export const WithDropdown = () => ({
           </VaMenuItem>
         </template>
 
-        ${subMenu}
+        <VaDropdownContent style="margin-top: calc(var(--va-menu-padding-y) * -1)">
+          <VaMenuList>
+            <VaMenuItem>
+              Group 1
+            </VaMenuItem>
+            <VaMenuItem>
+              Group 2
+            </VaMenuItem>
+          </VaMenuList>
+        </VaDropdownContent>
       </VaDropdown>
 
       <VaMenuItem icon="home">

packages/ui/src/components/va-menu/VaMenu.stories.ts

@@ -1,38 +1,37 @@
 import VaMenu from './VaMenu.vue'
+import { VaButton } from '../va-button'
 
 export default {
   title: 'VaMenu',
   component: VaMenu,
+  tags: ['autodocs'],
 }
 
 export const Default = () => ({
-  components: { VaMenu },
+  components: { VaMenu, VaButton },
   data: () => ({
-    options: ['Option 1', 'Option 2', 'Option 3'],
-    value: false,
   }),
   template: `
   <VaMenu :options="options">
     <template #anchor>
-      <button>Open menu</button>
+      <VaButton>Open</VaButton>
     </template>
   </VaMenu>
   `,
 })
 
 export const OptionSelected = () => ({
-  components: { VaMenu },
+  components: { VaMenu, VaButton },
   data: () => ({
     options: ['Option 1', 'Option 2', 'Option 3'],
     value: false,
   }),
   template: `
-  [value]: {{ value }}
-  <br/>
   <VaMenu :options="options" @selected="(v) => value = v ">
     <template #anchor>
-      <button>Open menu</button>
+      <VaButton>Open</VaButton>
     </template>
   </VaMenu>
+  <p class="mt-32">value: {{ value }}</p>
   `,
 })