From ad2d18338dd1ab873bbbd402133ff1032cba9a5a Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 6 Oct 2023 15:25:58 +0200
Subject: [PATCH 1/3] fix addon-links stories

---
 .../template/stories/decorator.stories.ts     | 18 ++++---
 .../links/template/stories/hrefto.stories.ts  | 23 ++++++++
 .../links/template/stories/linkto.stories.ts  | 53 +++++++++++++++----
 .../links/template/stories/scroll.stories.ts  | 41 --------------
 4 files changed, 77 insertions(+), 58 deletions(-)
 create mode 100644 code/addons/links/template/stories/hrefto.stories.ts
 delete mode 100644 code/addons/links/template/stories/scroll.stories.ts

diff --git a/code/addons/links/template/stories/decorator.stories.ts b/code/addons/links/template/stories/decorator.stories.ts
index 218833a75800..2149eb5dafa4 100644
--- a/code/addons/links/template/stories/decorator.stories.ts
+++ b/code/addons/links/template/stories/decorator.stories.ts
@@ -9,29 +9,35 @@ export default {
   decorators: [withLinks],
 };
 
-export const Basic = {
+export const Target = {
+  render: () => 'This is just a story to target with the links',
+};
+
+export const KindAndStory = {
   args: {
     content: `
       <div>
-        <a class="link" href="#" data-sb-story="other">go to other</a>
+        <a class="link" href="#" data-sb-kind="addons-links-decorator" data-sb-story="story-only">go to story only</a>
       </div>
     `,
   },
 };
-export const Other = {
+
+export const StoryOnly = {
   args: {
     content: `
       <div>
-        <a class="link" href="#" data-sb-story="third">go to third</a>
+        <a class="link" href="#" data-sb-story="target">go to target</a>
       </div>
     `,
   },
 };
-export const Third = {
+
+export const KindOnly = {
   args: {
     content: `
       <div>
-        <a class="link" href="#" data-sb-story="basic">go to basic</a>
+        <a class="link" href="#" data-sb-kind="addons-links-decorator">go to target</a>
       </div>
     `,
   },
diff --git a/code/addons/links/template/stories/hrefto.stories.ts b/code/addons/links/template/stories/hrefto.stories.ts
new file mode 100644
index 000000000000..8bb2bd3e3a3a
--- /dev/null
+++ b/code/addons/links/template/stories/hrefto.stories.ts
@@ -0,0 +1,23 @@
+import { hrefTo } from '@storybook/addon-links';
+
+export default {
+  component: globalThis.Components.Html,
+  title: 'hrefTo',
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const Default = {
+  render: () => {
+    hrefTo('addons-links-hrefto', 'target').then((href) => {
+      const root = document.querySelector('#storybook-root');
+      if (!root) {
+        return;
+      }
+      const node = document.createElement('code');
+      node.innerHTML = href;
+      root.appendChild(node);
+    });
+  },
+};
diff --git a/code/addons/links/template/stories/linkto.stories.ts b/code/addons/links/template/stories/linkto.stories.ts
index bdc752c2ae17..13e549f75134 100644
--- a/code/addons/links/template/stories/linkto.stories.ts
+++ b/code/addons/links/template/stories/linkto.stories.ts
@@ -3,6 +3,7 @@ import { linkTo } from '@storybook/addon-links';
 
 export default {
   component: globalThis.Components.Button,
+  title: 'linkTo',
   args: {
     label: 'Click Me!',
   },
@@ -11,34 +12,64 @@ export default {
   },
 };
 
-export const ID = {
+export const Target = {
+  render: () => 'This is just a story to target with the links',
+};
+
+export const Id = {
   args: {
-    onClick: linkTo('addons-links-parameters--basic'),
+    onClick: linkTo('addons-links-linkto--target'),
+    label: 'addons-links-linkto--target',
   },
 };
-export const Title = {
+
+export const TitleOnly = {
   args: {
-    onClick: linkTo('addons-links-parameters'),
+    onClick: linkTo('addons/links/linkTo'),
+    label: 'addons/links/linkTo',
   },
 };
-export const Basic = {
+
+export const NormalizedTitleOnly = {
   args: {
-    onClick: linkTo('addons-links-parameters', 'basic'),
+    onClick: linkTo('addons-links-linkto'),
+    label: 'addons-links-linkto',
   },
 };
-export const Other = {
+
+export const TitleAndName = {
   args: {
-    onClick: linkTo('addons-links-parameters', 'basic'),
+    onClick: linkTo('addons/links/linkTo', 'Target'),
+    label: 'addons/links/linkTo, Target',
   },
 };
-export const Third = {
+
+export const NormalizedTitleAndName = {
   args: {
-    onClick: linkTo('addons-links-parameters', 'other'),
+    onClick: linkTo('addons-links-linkto', 'target'),
+    label: 'addons-links-linkto, target',
   },
 };
 
 export const Callback = {
   args: {
-    onClick: linkTo('addons-links-parameters', (event: Event) => 'basic'),
+    onClick: linkTo(
+      (event: Event) => 'addons-links-linkto',
+      (event: Event) => 'target'
+    ),
+  },
+};
+
+export const ToMDXDocs = {
+  args: {
+    onClick: linkTo('Configure Your Project'),
+    label: 'Configure Your Project',
+  },
+};
+
+export const ToAutodocs = {
+  args: {
+    onClick: linkTo('Example Button', 'Docs'),
+    label: 'Example Button, Docs',
   },
 };
diff --git a/code/addons/links/template/stories/scroll.stories.ts b/code/addons/links/template/stories/scroll.stories.ts
deleted file mode 100644
index a7d6a3937763..000000000000
--- a/code/addons/links/template/stories/scroll.stories.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { global as globalThis } from '@storybook/global';
-import { withLinks } from '@storybook/addon-links';
-
-export default {
-  component: globalThis.Components.Html,
-  parameters: {
-    chromatic: { disable: true },
-  },
-  decorators: [withLinks],
-};
-
-export const Basic = {
-  args: {
-    content: `
-      <div>
-        <div style="marginBottom:100vh"></div>
-        <a class="link" href="#" data-sb-story="basic">go to basic</a>
-      </div>
-    `,
-  },
-};
-export const Other = {
-  args: {
-    content: `
-      <div>
-        <div style="marginBottom:100vh"></div>
-        <a class="link" href="#" data-sb-story="basic">to to basic</a>
-      </div>
-    `,
-  },
-};
-export const Third = {
-  args: {
-    content: `
-      <div>
-        <div style="marginBottom:100vh"></div>
-        <a class="link" href="#" data-sb-story="other">go to other</a>
-      </div>
-    `,
-  },
-};

From 2a723e0deb54deef9bdfb4112d439460427f990e Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Sat, 28 Oct 2023 00:35:05 +0200
Subject: [PATCH 2/3] use play instead of render for hrefTo stories

---
 .../links/template/stories/hrefto.stories.ts  | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/code/addons/links/template/stories/hrefto.stories.ts b/code/addons/links/template/stories/hrefto.stories.ts
index 8bb2bd3e3a3a..d58844b305bd 100644
--- a/code/addons/links/template/stories/hrefto.stories.ts
+++ b/code/addons/links/template/stories/hrefto.stories.ts
@@ -6,18 +6,17 @@ export default {
   parameters: {
     chromatic: { disable: true },
   },
+  args: {
+    content: '<div><code id="content">Waiting for hrefTo to resolve...</code></div>',
+  },
 };
 
 export const Default = {
-  render: () => {
-    hrefTo('addons-links-hrefto', 'target').then((href) => {
-      const root = document.querySelector('#storybook-root');
-      if (!root) {
-        return;
-      }
-      const node = document.createElement('code');
-      node.innerHTML = href;
-      root.appendChild(node);
-    });
+  play: async () => {
+    const href = await hrefTo('addons-links-hrefto', 'target');
+    const content = document.querySelector('#content');
+    if (content) {
+      content.textContent = href;
+    }
   },
 };

From caf3f2a203aa57320b88c9360600be1d621d612c Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 24 Apr 2024 14:59:27 +0200
Subject: [PATCH 3/3] fix link stories not working in all renderers

---
 .../links/template/stories/decorator.stories.ts       | 11 ++++++++++-
 code/addons/links/template/stories/linkto.stories.ts  |  7 ++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/code/addons/links/template/stories/decorator.stories.ts b/code/addons/links/template/stories/decorator.stories.ts
index 2149eb5dafa4..53a05f380e74 100644
--- a/code/addons/links/template/stories/decorator.stories.ts
+++ b/code/addons/links/template/stories/decorator.stories.ts
@@ -10,7 +10,16 @@ export default {
 };
 
 export const Target = {
-  render: () => 'This is just a story to target with the links',
+  args: {
+    content: `
+      <div>
+      This is just a story to target with the links
+      </div>
+    `,
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 
 export const KindAndStory = {
diff --git a/code/addons/links/template/stories/linkto.stories.ts b/code/addons/links/template/stories/linkto.stories.ts
index 13e549f75134..502509a8d5aa 100644
--- a/code/addons/links/template/stories/linkto.stories.ts
+++ b/code/addons/links/template/stories/linkto.stories.ts
@@ -13,7 +13,12 @@ export default {
 };
 
 export const Target = {
-  render: () => 'This is just a story to target with the links',
+  args: {
+    label: 'This is just a story to target with the links',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 
 export const Id = {