linkTo seems to expect the humanized story name

[skrivanos]

Describe the bug

It seems like linkTo expects the humanized story name as the second parameter, rather than what the function is called. I.e. giving it "withEmoji" fails and "With Emoji" succeeds. This does not align with the docs where it looks like you should use the same name as the function itself.

To Reproduce

1. Use snippet below
2. Click on the button
3. No navigation.

Expected behavior
Navigate to the withEmoji story.

Code snippets

Does not work:

import React from 'react';
import { linkTo } from '@storybook/addon-links';
import Button from '../Button';

export default { title: 'Button' };

export const withText = () => (
  <Button onClick={linkTo('Button', 'withEmoji')}>Change To Emojis</Button>
);

export const withEmoji = () => (
  <Button>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
);

Works:

import React from 'react';
import { linkTo } from '@storybook/addon-links';
import Button from '../Button';

export default { title: 'Button' };

export const withText = () => (
  <Button onClick={linkTo('Button', 'With Emoji')}>Change To Emojis</Button>
);

export const withEmoji = () => (
  <Button>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
);

System:

Environment Info:

  System:
    OS: macOS 10.15.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
  Binaries:
    Node: 10.16.3 - /usr/local/opt/node@10/bin/node
    Yarn: 1.19.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/opt/node@10/bin/npm
  Browsers:
    Chrome: 80.0.3987.122
    Firefox: 72.0.2
    Safari: 13.0.3
  npmPackages:
    @storybook/addon-actions: ^5.3.14 => 5.3.14
    @storybook/addon-links: ^5.3.14 => 5.3.14
    @storybook/react: ^5.3.14 => 5.3.14**Additional context**

[garystephens]

I just hit the same issue, took a while to work out the solution. The docs say:

Second (optional) parameter is the story name (what you named with exported name).

which doesn't seem to tally with the implementation. Plus exported name is tagged as code, but that's not valid code, is it?

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[skrivanos]

As far as I know the bug is still there.

[garystephens]

At the very least, the documentation should be updated as it doesn't tally with the implementation.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[mikestopcontinues]

I would defintely consider this a bug. When looking at the story file, I see the names prior to humanization, so I should be able to use them the same. It seems the addon should humanize whatever is passed to it before creating the anchor slug from the result.

Here's another example of what doesn't currently work:

export default {
  title: 'common/Example',
  component: Example,
};

export const Default = () => (
  <Example>
    <LinkTo story="LinkedTo">Link</LinkTo>
  </Example>
);

export const LinkedTo = () => (
  <Example>You have arrived.</Example>
);

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[mikestopcontinues]

This is still an issue.

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[mikestopcontinues]

Still an issue.