diff --git a/code/addons/links/template/stories/decorator.stories.ts b/code/addons/links/template/stories/decorator.stories.ts
new file mode 100644
index 00000000000..0feaa2d2927
--- /dev/null
+++ b/code/addons/links/template/stories/decorator.stories.ts
@@ -0,0 +1,38 @@
+import globalThis from 'global';
+import { withLinks } from '@storybook/addon-links';
+
+export default {
+ component: globalThis.Components.Html,
+ parameters: {
+ chromatic: { disable: true },
+ },
+ decorators: [withLinks],
+};
+
+export const Basic = {
+ args: {
+ content: `
+
+ `,
+ },
+};
+export const Other = {
+ args: {
+ content: `
+
+ `,
+ },
+};
+export const Third = {
+ args: {
+ content: `
+
+ `,
+ },
+};
diff --git a/code/addons/links/template/stories/parameters.stories.ts b/code/addons/links/template/stories/parameters.stories.ts
new file mode 100644
index 00000000000..edbdc577d75
--- /dev/null
+++ b/code/addons/links/template/stories/parameters.stories.ts
@@ -0,0 +1,34 @@
+import globalThis from 'global';
+import { linkTo } from '@storybook/addon-links';
+
+export default {
+ component: globalThis.Components.Button,
+ args: {
+ children: 'Click Me!',
+ },
+ parameters: {
+ chromatic: { disable: true },
+ },
+};
+
+export const Basic = {
+ args: {
+ onClick: linkTo('basic'),
+ },
+};
+export const Other = {
+ args: {
+ onClick: linkTo('basic'),
+ },
+};
+export const Third = {
+ args: {
+ onClick: linkTo('other'),
+ },
+};
+
+export const Callback = {
+ args: {
+ onClick: linkTo('Addons/Links', (event: Event) => 'basic'),
+ },
+};
diff --git a/code/addons/links/template/stories/scroll.stories.ts b/code/addons/links/template/stories/scroll.stories.ts
new file mode 100644
index 00000000000..18b1e48a700
--- /dev/null
+++ b/code/addons/links/template/stories/scroll.stories.ts
@@ -0,0 +1,41 @@
+import globalThis from 'global';
+import { withLinks } from '@storybook/addon-links';
+
+export default {
+ component: globalThis.Components.Html,
+ parameters: {
+ chromatic: { disable: true },
+ },
+ decorators: [withLinks],
+};
+
+export const Basic = {
+ args: {
+ content: `
+
+ `,
+ },
+};
+export const Other = {
+ args: {
+ content: `
+
+ `,
+ },
+};
+export const Third = {
+ args: {
+ content: `
+
+ `,
+ },
+};
diff --git a/code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js b/code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
index ed68dadf6f3..2245f7116cd 100644
--- a/code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
+++ b/code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
@@ -1,6 +1,5 @@
import React from 'react';
-import { linkTo } from '@storybook/addon-links';
import { Welcome } from '../react-demo';
export default {
@@ -11,6 +10,6 @@ export default {
},
};
-export const ToStorybook = () => ;
+export const ToStorybook = () => {}} />;
ToStorybook.storyName = 'to Storybook';
diff --git a/code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.mdx b/code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.mdx
index e4af6a74ae8..8b4c5d14e1c 100644
--- a/code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.mdx
+++ b/code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.mdx
@@ -1,4 +1,3 @@
-import { linkTo } from '@storybook/addon-links';
import { Welcome } from '../react-demo';
import { Meta, Story } from '@storybook/addon-docs';
@@ -10,5 +9,5 @@ import { Meta, Story } from '@storybook/addon-docs';
/>
-
+ {}} />
diff --git a/code/examples/angular-cli/src/stories/addons/docs/addon-docs.stories.mdx b/code/examples/angular-cli/src/stories/addons/docs/addon-docs.stories.mdx
index 81707cbebfd..49ae5dd72ec 100644
--- a/code/examples/angular-cli/src/stories/addons/docs/addon-docs.stories.mdx
+++ b/code/examples/angular-cli/src/stories/addons/docs/addon-docs.stories.mdx
@@ -1,7 +1,6 @@
import { moduleMetadata } from '@storybook/angular';
import { Story, Meta, ArgsTable } from '@storybook/addon-docs';
import { Welcome, Button } from '../.././angular-demo';
-import { linkTo } from '@storybook/addon-links';
import { DocButtonComponent } from './doc-button/doc-button.component';
# Storybook Docs for Angular
diff --git a/code/examples/angular-cli/src/stories/addons/links/addon-links.stories.ts b/code/examples/angular-cli/src/stories/addons/links/addon-links.stories.ts
index 3902099f518..cb84b90ac77 100644
--- a/code/examples/angular-cli/src/stories/addons/links/addon-links.stories.ts
+++ b/code/examples/angular-cli/src/stories/addons/links/addon-links.stories.ts
@@ -1,4 +1,3 @@
-import { linkTo } from '@storybook/addon-links';
import { Button } from '../../angular-demo';
export default {
@@ -9,7 +8,7 @@ export default {
export const ButtonWithLinkToAnotherStory = () => ({
props: {
text: 'Go to Welcome Story',
- onClick: linkTo('Welcome'),
+ onClick: () => {},
},
});
diff --git a/code/examples/angular-cli/src/stories/welcome-angular.stories.ts b/code/examples/angular-cli/src/stories/welcome-angular.stories.ts
index 200f29ea4aa..48c0f874577 100644
--- a/code/examples/angular-cli/src/stories/welcome-angular.stories.ts
+++ b/code/examples/angular-cli/src/stories/welcome-angular.stories.ts
@@ -1,5 +1,4 @@
import type { Meta, StoryFn } from '@storybook/angular';
-import { linkTo } from '@storybook/addon-links';
import { AppComponent } from '../app/app.component';
export default {
@@ -9,6 +8,6 @@ export default {
export const ToAngular: StoryFn = () => ({
component: AppComponent,
props: {
- showApp: linkTo('Button'),
+ showApp: () => {},
},
});
diff --git a/code/examples/angular-cli/src/stories/welcome-storybook.stories.ts b/code/examples/angular-cli/src/stories/welcome-storybook.stories.ts
index 326f727a9e4..698119ce641 100644
--- a/code/examples/angular-cli/src/stories/welcome-storybook.stories.ts
+++ b/code/examples/angular-cli/src/stories/welcome-storybook.stories.ts
@@ -1,5 +1,4 @@
import type { Meta, StoryFn } from '@storybook/angular';
-import { linkTo } from '@storybook/addon-links';
import { Welcome } from './angular-demo';
export default {
@@ -9,6 +8,6 @@ export default {
export const ToStorybook: StoryFn = () => ({
component: Welcome,
props: {
- showApp: linkTo('Button'),
+ showApp: () => {},
},
});
diff --git a/code/examples/cra-kitchen-sink/src/stories/welcome.stories.js b/code/examples/cra-kitchen-sink/src/stories/welcome.stories.js
index 06d3158c7cd..f954ada420a 100644
--- a/code/examples/cra-kitchen-sink/src/stories/welcome.stories.js
+++ b/code/examples/cra-kitchen-sink/src/stories/welcome.stories.js
@@ -1,5 +1,4 @@
import React from 'react';
-import { linkTo } from '@storybook/addon-links';
import { Welcome } from '../components/react-demo';
export default {
@@ -7,5 +6,5 @@ export default {
component: Welcome,
};
-export const Story1 = () => ;
+export const Story1 = () => {}} />;
Story1.title = 'to Storybook';
diff --git a/code/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx b/code/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx
index 24295d69c04..44d3b1bec7f 100644
--- a/code/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx
+++ b/code/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx
@@ -1,5 +1,4 @@
import React from 'react';
-import { linkTo } from '@storybook/addon-links';
import type { ComponentMeta, ComponentStoryFn } from '@storybook/react';
import { Welcome } from './react-demo';
@@ -8,8 +7,6 @@ export default {
component: Welcome,
} as ComponentMeta;
-export const ToStorybook: ComponentStoryFn = () => (
-
-);
+export const ToStorybook: ComponentStoryFn = () => {}} />;
ToStorybook.storyName = 'to Storybook';
diff --git a/code/examples/cra-ts-kitchen-sink/src/stories/0-Welcome.stories.tsx b/code/examples/cra-ts-kitchen-sink/src/stories/0-Welcome.stories.tsx
index 017927c9e78..8e1c86c827a 100644
--- a/code/examples/cra-ts-kitchen-sink/src/stories/0-Welcome.stories.tsx
+++ b/code/examples/cra-ts-kitchen-sink/src/stories/0-Welcome.stories.tsx
@@ -1,5 +1,4 @@
import React from 'react';
-import { linkTo } from '@storybook/addon-links';
import { Welcome } from '../components/react-demo';
export default {
@@ -7,6 +6,6 @@ export default {
component: Welcome,
};
-export const ToStorybook = () => ;
+export const ToStorybook = () => {}} />;
ToStorybook.storyName = 'to Storybook';
diff --git a/code/examples/ember-cli/stories/addon-links.stories.js b/code/examples/ember-cli/stories/addon-links.stories.js
deleted file mode 100644
index 11c4ca811a0..00000000000
--- a/code/examples/ember-cli/stories/addon-links.stories.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-import { linkTo } from '@storybook/addon-links';
-
-export default {
- title: 'Addon/Links',
-};
-
-export const GoToWelcome = () => ({
- template: hbs``,
- context: {
- onClick: linkTo('Welcome'),
- },
-});
-
-GoToWelcome.storyName = 'Go to welcome';
diff --git a/code/examples/html-kitchen-sink/stories/welcome.stories.js b/code/examples/html-kitchen-sink/stories/welcome.stories.js
index 6410a83ee83..2c14bbdf947 100644
--- a/code/examples/html-kitchen-sink/stories/welcome.stories.js
+++ b/code/examples/html-kitchen-sink/stories/welcome.stories.js
@@ -1,11 +1,8 @@
-import { withLinks } from '@storybook/addon-links';
-
import './welcome.css';
import welcome from './welcome.html';
export default {
title: 'Welcome',
- decorators: [withLinks],
};
export const Welcome = () => welcome;
diff --git a/code/examples/official-storybook/stories/addon-links/button.stories.tsx b/code/examples/official-storybook/stories/addon-links/button.stories.tsx
deleted file mode 100644
index 73b9352134c..00000000000
--- a/code/examples/official-storybook/stories/addon-links/button.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { linkTo } from '@storybook/addon-links';
-
-export default {
- title: 'Addons/Links/Button',
-};
-
-export const First = () => (
-
-);
-
-export const Second = () => (
-
-);
diff --git a/code/examples/official-storybook/stories/addon-links/href.stories.js b/code/examples/official-storybook/stories/addon-links/href.stories.js
deleted file mode 100644
index 3f5e86ed470..00000000000
--- a/code/examples/official-storybook/stories/addon-links/href.stories.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { hrefTo } from '@storybook/addon-links';
-
-export default {
- title: 'Addons/Links/Href',
-};
-
-export const Log = () => {
- hrefTo('Addons/Links/Href', 'log');
-
- return See action logger;
-};
-Log.parameters = {
- options: {
- panel: 'storybook/actions/panel',
- },
-};
diff --git a/code/examples/official-storybook/stories/addon-links/link.stories.js b/code/examples/official-storybook/stories/addon-links/link.stories.js
deleted file mode 100644
index 110ea0cb8d3..00000000000
--- a/code/examples/official-storybook/stories/addon-links/link.stories.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import LinkTo from '@storybook/addon-links/react';
-
-export default {
- title: 'Addons/Links/Link',
-};
-
-export const First = () => Go to Second;
-export const Second = () => Go to First;
diff --git a/code/examples/official-storybook/stories/addon-links/scroll.stories.js b/code/examples/official-storybook/stories/addon-links/scroll.stories.js
deleted file mode 100644
index 134bb026f88..00000000000
--- a/code/examples/official-storybook/stories/addon-links/scroll.stories.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { Fragment } from 'react';
-import LinkTo from '@storybook/addon-links/react';
-
-export default {
- title: 'Addons/Links/Scroll position',
- decorators: [
- (storyFn) => (
-
- Scroll down to see the link
- {storyFn()}
-
- ),
- ],
-};
-
-export const First = () => Go to Second;
-export const Second = () => Go to First;
diff --git a/code/examples/official-storybook/stories/addon-links/select.stories.js b/code/examples/official-storybook/stories/addon-links/select.stories.js
deleted file mode 100644
index debbf867a38..00000000000
--- a/code/examples/official-storybook/stories/addon-links/select.stories.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import { linkTo } from '@storybook/addon-links';
-import LinkTo from '@storybook/addon-links/react';
-
-export default {
- title: 'Addons/Links/Select',
-};
-
-export const Index = () => (
-
-);
-
-export const First = () => Go back;
-export const Second = () => Go back;
-export const Third = () => Go back;
diff --git a/code/examples/official-storybook/stories/demo/welcome.stories.js b/code/examples/official-storybook/stories/demo/welcome.stories.js
index e4a389f8b85..491b1b57e0c 100644
--- a/code/examples/official-storybook/stories/demo/welcome.stories.js
+++ b/code/examples/official-storybook/stories/demo/welcome.stories.js
@@ -1,5 +1,4 @@
import React from 'react';
-import { linkTo } from '@storybook/addon-links';
import { Welcome } from '../../components/react-demo';
export default {
@@ -10,5 +9,5 @@ export default {
// Some other valid values:
// - 'other-demo-buttonmdx--with-text'
// - 'Other/Demo/ButtonMdx'
-export const ToStorybook = () => ;
+export const ToStorybook = () => {}} />;
ToStorybook.storyName = 'to Storybook';
diff --git a/code/examples/preact-kitchen-sink/src/stories/addon-links.stories.js b/code/examples/preact-kitchen-sink/src/stories/addon-links.stories.js
deleted file mode 100644
index d4f681eb342..00000000000
--- a/code/examples/preact-kitchen-sink/src/stories/addon-links.stories.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { linkTo } from '@storybook/addon-links';
-import Button from '../Button';
-
-export default {
- title: 'Addons/Links',
-};
-
-export const GoToWelcome = () => (
-
-);
-
-GoToWelcome.storyName = 'Go to welcome';
diff --git a/code/examples/preact-kitchen-sink/src/stories/welcome.stories.js b/code/examples/preact-kitchen-sink/src/stories/welcome.stories.js
index bda98cb70aa..bf681a0c28d 100644
--- a/code/examples/preact-kitchen-sink/src/stories/welcome.stories.js
+++ b/code/examples/preact-kitchen-sink/src/stories/welcome.stories.js
@@ -1,4 +1,3 @@
-import { linkTo } from '@storybook/addon-links';
import Welcome from '../Welcome';
export default {
@@ -8,6 +7,6 @@ export default {
},
};
-export const ToStorybook = () => ;
+export const ToStorybook = () => {}} />;
ToStorybook.storyName = 'to Storybook';
diff --git a/code/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js b/code/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js
deleted file mode 100644
index 74ec418fe8a..00000000000
--- a/code/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { linkTo } from '@storybook/addon-links';
-
-import ActionLinkView from './views/ActionLinkView.svelte';
-
-export default {
- title: 'Addon/Links',
-};
-
-export const GoToWelcomeView = () => ({
- Component: ActionLinkView,
- on: {
- click: linkTo('Welcome'),
- },
-});
-
-GoToWelcomeView.storyName = 'Go to welcome view';
diff --git a/code/examples/vue-kitchen-sink/src/stories/addon-links.stories.js b/code/examples/vue-kitchen-sink/src/stories/addon-links.stories.js
deleted file mode 100644
index ff4bf352b05..00000000000
--- a/code/examples/vue-kitchen-sink/src/stories/addon-links.stories.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { linkTo } from '@storybook/addon-links';
-
-export default {
- title: 'Addon/Links',
-};
-
-export const GoToWelcome = () => ({
- template: 'This buttons links to Welcome',
- methods: {
- click: linkTo('Welcome'),
- },
-});
-
-GoToWelcome.storyName = 'Go to welcome';
diff --git a/code/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js b/code/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js
index 35df982eb80..fcb2c800bb1 100644
--- a/code/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js
+++ b/code/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js
@@ -1,5 +1,3 @@
-import { linkTo } from '@storybook/addon-links';
-
import Welcome from '../Welcome.vue';
export default {
@@ -9,7 +7,7 @@ export default {
export const WelcomeStory = () => {
return {
- render: (h) => h(Welcome, { listeners: { buttonRequested: linkTo('Button') } }),
+ render: (h) => h(Welcome, { listeners: { buttonRequested: () => {} } }),
};
};
WelcomeStory.storyName = 'Welcome';
diff --git a/code/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js b/code/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
index dd03e934e7d..1094973c65d 100644
--- a/code/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
+++ b/code/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
@@ -1,5 +1,3 @@
-import { linkTo } from '@storybook/addon-links';
-
import MyButton from './Button.vue';
export default {
@@ -41,7 +39,7 @@ export const TemplateMethods = () => ({
MyButton rendered in a template + props & methods
`,
methods: {
- action: linkTo('Button'),
+ action: () => {},
},
});