Storybook: [addon-docs] Linking to sections.

[ellisio]

I am using @storybook/[email protected]. Is it possible to link to a header further in the document? We have sections that are quite long and would love to link between parts of the page.

GitHub Wiki markdown would be something like this:

<Meta title="Design System|Some Page" />

## Foo

Hey, check out [Bar][#Bar]

// Imagine several hundreds of lines of markdown here.

## Bar

This is Bar! Way below the page fold.

I know there is @storybook/addon-links, but I'm not sure that works in the MDX stories from what I've gathered poking through the GitHub issues here.

[shilman]

I'm not sure! MDX support is still early and we might need to add this in 5.3! 😅

[Fleuv]

It's possible to do something like this:

## Foo

Hey, check out [Bar][#Bar]

// Imagine several hundreds of lines of markdown here.

## Bar <a id="Bar" />

This is Bar! Way below the page fold.

Some tests on Firefox v70

The href of the first anchor will be #Bar as expected, although for some reason after clicking the URL ends up using the iframe.html page:

http://localhost:6006/iframe.html?id=foo--bar&viewMode=docs#Bar

While I expected it to use the default index:

http://localhost:6006/?path=/docs/foo--bar#Bar

Also I noticed that neither the iframe.html as the default index page was capable of scrolling down to the target anchor on initial load. However at the iframe.html page I was able to scroll down to the target anchor by clicking the anchor with the href. This didn't work for the default index page after changing the href to the absolute url mentioned above.

Using LinkTo as mention in #8618 doesn't work at all.

[shilman]

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.46 containing PR #8132 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[robbeman]

Using LinkTo as mention in #8618 doesn't work at all.

The question there was to link to another story, not to link to a page anchor. In my case it did work to link to other stories. I did not test anchors, so I'm sorry if I caused confusion on that part.

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-beta.15 containing PR #9051 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[nik72619c]

Hi, could someone please link me to the sample code snippet to test it out ?

[lisamartin00]

@nik72619c you should get anchors on headers for free on .mdx files. So for example, I can link to the props section of this story:
https://storybookjs.netlify.app/official-storybook/?path=/docs/addons-docs-mdx-id--hello-story#props

Or here's a way to add them globally based off of this example (although I'm super new to addon-docs, so maybe there's a better way):

preview.js

import { DocsContainer } from '@storybook/addon-docs/blocks';
import { addParameters } from "@storybook/react";
import DocsPageTemplate from '../src/DocsPageTemplate.mdx';

addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPageTemplate,
  },
});

DocsPageTemplate.mdx

import {
  Title,
  Subtitle,
  Description,
  Primary,
  Props,
  Stories,
} from '@storybook/addon-docs/blocks';

<Title />

Hey there, [Props](#props) are below

<Subtitle />
<Description />
<Primary />

## Props
<Props />

<Stories />