I recently started switching a Storybook that was based on the MDX format to the Component Story Format 3.0 format, skipping the 2.0 entirely… so some things were not that clear to me. I’m documenting them here for the reference of myself and others. Thse examples work in Storybook 6.5, and I believe also in 7.0 since the team worked on full backwards compatibility.

You can pass storyName below an exported story to give it another name:

export const HeadingWithSpacingExamples = () => (
  <>
    <Heading variant="h1" spacing>
      h1
    </Heading>
    <Heading variant="h2" spacing>
      h2
    </Heading>
    <Heading variant="h3" spacing>
      h3
    </Heading>
    <Heading variant="h4" spacing>
      h4
    </Heading>
  </>
);

HeadingWithSpacingExamples.storyName = 'With spacing';

You can add a description to a component using parameters.docs.description.story :

export const HeadingExamples = () => (
  <>
    <Heading variant="h1">h1</Heading>
    <Heading variant="h2">h2</Heading>
    <Heading variant="h3">h3</Heading>
    <Heading variant="h4">h4</Heading>
  </>
);

HeadingExamples.parameters = {
  docs: {
    description: {
      story: 'The component doesn’t have built-in spacing by default.',
    },
  },
};

You can add a description to a (top level) component itself by passing parameters.docs.description.component:

export default {
  title: 'Typography/Heading',
  component: Heading,

  args: {
    variant: 'h1',
    children: 'Heading',
  },
  parameters: {
    docs: {
      description: {
        component: 'The header component.',
      },
    },
  },
};

This is a bit wieldy, so in the newest Storybook, 7.0, you apparently you can do that with JSDoc:

/**
 * @description My description
 */

I’ve yet to test that.