From 81b677571d73e73818bf33e6e1da3011a5b09e9d Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 31 Jul 2024 16:49:08 +0200
Subject: [PATCH] Fix LinkWrapper on TooltipLinkList stories

---
 .../tooltip/TooltipLinkList.stories.tsx       | 44 +++++++------------
 .../src/manager/container/Menu.stories.tsx    | 29 +++---------
 2 files changed, 20 insertions(+), 53 deletions(-)

diff --git a/code/core/src/components/components/tooltip/TooltipLinkList.stories.tsx b/code/core/src/components/components/tooltip/TooltipLinkList.stories.tsx
index 84186de35444..8b3bd9798115 100644
--- a/code/core/src/components/components/tooltip/TooltipLinkList.stories.tsx
+++ b/code/core/src/components/components/tooltip/TooltipLinkList.stories.tsx
@@ -1,5 +1,4 @@
-import type { FunctionComponent, MouseEvent, PropsWithChildren, ReactElement } from 'react';
-import React, { Children, cloneElement } from 'react';
+import React from 'react';
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
 import { LinkIcon, LinuxIcon } from '@storybook/icons';
@@ -9,26 +8,6 @@ import ellipseUrl from './assets/ellipse.png';
 
 const onLinkClick = action('onLinkClick');
 
-interface StoryLinkWrapperProps {
-  href: string;
-  passHref?: boolean;
-}
-
-const StoryLinkWrapper: FunctionComponent<PropsWithChildren<StoryLinkWrapperProps>> = ({
-  href,
-  passHref = false,
-  children,
-}) => {
-  const child = Children.only(children) as ReactElement;
-  return cloneElement(child, {
-    href: passHref && href,
-    onClick: (e: MouseEvent) => {
-      e.preventDefault();
-      onLinkClick(href);
-    },
-  });
-};
-
 export default {
   component: TooltipLinkList,
   decorators: [
@@ -57,15 +36,16 @@ export const WithoutIcons = {
         title: 'Link 1',
         center: 'This is an addition description',
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
       {
         id: '2',
         title: 'Link 2',
         center: 'This is an addition description',
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
     ],
-    LinkWrapper: StoryLinkWrapper,
   },
 } satisfies Story;
 
@@ -78,15 +58,16 @@ export const WithOneIcon = {
         center: 'This is an addition description',
         icon: <LinkIcon />,
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
       {
         id: '2',
         title: 'Link 2',
         center: 'This is an addition description',
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
     ],
-    LinkWrapper: StoryLinkWrapper,
   },
 } satisfies Story;
 
@@ -99,15 +80,16 @@ export const ActiveWithoutAnyIcons = {
         active: true,
         center: 'This is an addition description',
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
       {
         id: '2',
         title: 'Link 2',
         center: 'This is an addition description',
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
     ],
-    LinkWrapper: StoryLinkWrapper,
   },
 } satisfies Story;
 
@@ -120,6 +102,7 @@ export const ActiveWithSeparateIcon = {
         icon: <LinkIcon />,
         center: 'This is an addition description',
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
       {
         id: '2',
@@ -127,9 +110,9 @@ export const ActiveWithSeparateIcon = {
         active: true,
         center: 'This is an addition description',
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
     ],
-    LinkWrapper: StoryLinkWrapper,
   },
 } satisfies Story;
 
@@ -143,15 +126,16 @@ export const ActiveAndIcon = {
         icon: <LinkIcon />,
         center: 'This is an addition description',
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
       {
         id: '2',
         title: 'Link 2',
         center: 'This is an addition description',
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
     ],
-    LinkWrapper: StoryLinkWrapper,
   },
 } satisfies Story;
 
@@ -166,6 +150,7 @@ export const WithIllustration = {
         right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
         center: 'This is an addition description',
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
       {
         id: '2',
@@ -173,9 +158,9 @@ export const WithIllustration = {
         center: 'This is an addition description',
         right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
     ],
-    LinkWrapper: StoryLinkWrapper,
   },
 } satisfies Story;
 
@@ -190,6 +175,7 @@ export const WithCustomIcon = {
         right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
         center: 'This is an addition description',
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
       {
         id: '2',
@@ -197,8 +183,8 @@ export const WithCustomIcon = {
         center: 'This is an addition description',
         right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
     ],
-    LinkWrapper: StoryLinkWrapper,
   },
 } satisfies Story;
diff --git a/code/core/src/manager/container/Menu.stories.tsx b/code/core/src/manager/container/Menu.stories.tsx
index 401a39e7e545..05dbd45ae173 100644
--- a/code/core/src/manager/container/Menu.stories.tsx
+++ b/code/core/src/manager/container/Menu.stories.tsx
@@ -1,5 +1,4 @@
-import type { FC, MouseEvent, PropsWithChildren, ReactElement } from 'react';
-import React, { Children, cloneElement } from 'react';
+import React from 'react';
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
 import { TooltipLinkList, WithTooltip } from '@storybook/core/components';
@@ -7,26 +6,6 @@ import { Shortcut } from './Menu';
 
 const onLinkClick = action('onLinkClick');
 
-interface StoryLinkWrapperProps {
-  href: string;
-  passHref?: boolean;
-}
-
-const StoryLinkWrapper: FC<PropsWithChildren<StoryLinkWrapperProps>> = ({
-  href,
-  passHref = false,
-  children,
-}) => {
-  const child = Children.only(children) as ReactElement;
-  return cloneElement(child, {
-    href: passHref && href,
-    onClick: (e: MouseEvent) => {
-      e.preventDefault();
-      onLinkClick(href);
-    },
-  });
-};
-
 export default {
   component: TooltipLinkList,
   decorators: [
@@ -56,6 +35,7 @@ export const WithShortcuts = {
         center: 'This is an addition description',
         right: <Shortcut keys={['⌘']} />,
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
       {
         id: '2',
@@ -63,9 +43,9 @@ export const WithShortcuts = {
         center: 'This is an addition description',
         right: <Shortcut keys={['⌘', 'K']} />,
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
     ],
-    LinkWrapper: StoryLinkWrapper,
   },
 } satisfies Story;
 
@@ -79,6 +59,7 @@ export const WithShortcutsActive = {
         active: true,
         right: <Shortcut keys={['⌘']} />,
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
       {
         id: '2',
@@ -86,8 +67,8 @@ export const WithShortcutsActive = {
         center: 'This is an addition description',
         right: <Shortcut keys={['⌘', 'K']} />,
         href: 'http://google.com',
+        onClick: onLinkClick,
       },
     ],
-    LinkWrapper: StoryLinkWrapper,
   },
 } satisfies Story;