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: ` +
+ go to basic +
+ `, + }, +}; +export const Other = { + args: { + content: ` +
+ to to basic +
+ `, + }, +}; +export const Third = { + args: { + content: ` +
+ go to other +
+ `, + }, +}; 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: ` +
+
+ go to basic +
+ `, + }, +}; +export const Other = { + args: { + content: ` +
+
+ to to basic +
+ `, + }, +}; +export const Third = { + args: { + content: ` +
+
+ go to other +
+ `, + }, +}; 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: () => {}, }, });