Storybook docs description for primary slot

[AlekseyPn]

Hi, i need help.
How i can write description for primary slot with vue story, and how i can describe props or events, i have not found how i can do it.
And i have not found describes for parameters.docs api. I lost many hours in tried find describes((

[shilman]

Use JSDoc, like this: https://github.com/storybookjs/storybook/blob/next/examples/vue-kitchen-sink/src/stories/components/InfoButton.vue

[AlekseyPn]

@shilman Thanks for reply, I talk about that example, on the third line "description" rendered by JSDoc, from this example https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/docspage.md#description
But when i use it in my stories with vue, it doesn't applied

[shilman]

Does this help? 3bcaaeb

[HoraceKeung]

It works and would like to share the following info from my experience in case of any misunderstanding:

1. The comment for the description should be inside the Vue single file component, not in the story
2. The comment must be right above this line of code: export default {
   i.e.

<script>
import Another from '~/components/Another'
/**
 * Component description
 */
export default {...}
</script>

The above will work and the below will not

<script>
/**
 * Component description
 */
import Another from '~/components/Another'
export default {...}
</script>

3. It won't apply if the story is written with MDX (and it is expected I believe)

[shilman]

@HoraceKeung thanks! for MDX, you should be able to do:

import { Description } from '@storybook/addon-docs/blocks';
import { Component } from './component';

<Description of={Component} />

[AlekseyPn]

@HoraceKeung Thanks!!!

[HoraceKeung]

@shilman Thank you! Would like to mention that in Vue, it is import Component from './Component';, also I think it should be import { Description } from '@storybook/addon-docs/blocks'; Speaking of docs blocks, I couldn't find documentation regarding all the available docs blocks, but I guess it is coming soon on this page? https://storybook.js.org/docs/formats/mdx-syntax/

[shilman]

@HoraceKeung thanks, fixed. yes docs coming soon 🙈

[annacv]

Use JSDoc, like this: https://github.com/storybookjs/storybook/blob/next/examples/vue-kitchen-sink/src/stories/components/InfoButton.vue

Hi @shilman it works properly :) But, what about slots, how can we add a slots' description? I've noticed it "catches" the slot when used as a tag (instead of using it as <div slot: 'bla'/>) but I'm not achieving how to customize the description. Any idea? Thks!

[ecarrera]

@annacv you can describe slots with @slot tag.

<template>
  <div>
    <!-- @slot Use this slot header -->
    <slot name="header"></slot>

    <!--
      @slot Modal footer
      @binding item an item passed to the footer
		-->
    <slot name="footer" :item="item" />
  </div>
</template>

Here is the reference: https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api#slots

[MatthijsBe]

Is there any other way to do this, or exclude this on a production build?

My point is that when I inspect any component that uses @slot description it also shows in the dom.

[alexcroox]

Has anyone managed to define this subheader in their story? Looking at the storybook documentation for the docs page i just can't get it to work, I've tried:

export default {
  title: `Forms/Form Elements/${Component.name}`,
  component: Component,
  docs: {
    description: {
      story: 'A subheader of the docs page here'
    }
  }
}

export default {
  title: `Forms/Form Elements/${Component.name}`,
  component: Component,
  componentSubtitle:  'A subheader of the docs page here'
}