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> = ({ - 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: , 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: , 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: , 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: 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: ellipse, href: 'http://google.com', + onClick: onLinkClick, }, ], - LinkWrapper: StoryLinkWrapper, }, } satisfies Story; @@ -190,6 +175,7 @@ export const WithCustomIcon = { right: 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: 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> = ({ - 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: , href: 'http://google.com', + onClick: onLinkClick, }, { id: '2', @@ -63,9 +43,9 @@ export const WithShortcuts = { center: 'This is an addition description', right: , href: 'http://google.com', + onClick: onLinkClick, }, ], - LinkWrapper: StoryLinkWrapper, }, } satisfies Story; @@ -79,6 +59,7 @@ export const WithShortcutsActive = { active: true, right: , href: 'http://google.com', + onClick: onLinkClick, }, { id: '2', @@ -86,8 +67,8 @@ export const WithShortcutsActive = { center: 'This is an addition description', right: , href: 'http://google.com', + onClick: onLinkClick, }, ], - LinkWrapper: StoryLinkWrapper, }, } satisfies Story;