diff options
Diffstat (limited to 'packages')
-rw-r--r-- | packages/taler-wallet-webextension/src/stories.tsx | 43 |
1 files changed, 37 insertions, 6 deletions
diff --git a/packages/taler-wallet-webextension/src/stories.tsx b/packages/taler-wallet-webextension/src/stories.tsx index 9fe0ca4e4..a032222a0 100644 --- a/packages/taler-wallet-webextension/src/stories.tsx +++ b/packages/taler-wallet-webextension/src/stories.tsx @@ -22,6 +22,7 @@ import { setupI18n } from "@gnu-taler/taler-util"; import { styled } from "@linaria/react"; import { ComponentChild, + ComponentChildren, Fragment, FunctionComponent, h, @@ -242,33 +243,63 @@ function ExampleList({ ); } +/** + * Prevents the UI from redirecting and inform the dev + * where the <a /> should have redirected + * @returns + */ +function PreventLinkNavigation({ + children, +}: { + children: ComponentChildren; +}): VNode { + return ( + <div + onClick={(e) => { + let t: any = e.target; + do { + if (t.localName === "a" && t.getAttribute("href")) { + alert(`should navigate to: ${t.attributes.href.value}`); + e.stopImmediatePropagation(); + e.stopPropagation(); + e.preventDefault(); + return false; + } + } while ((t = t.parentNode)); + }} + > + {children} + </div> + ); +} + function getWrapperForGroup(group: string): FunctionComponent { switch (group) { case "popup": return function PopupWrapper({ children }: any) { return ( - <Fragment> + <PreventLinkNavigation> <PopupNavBar /> <PopupBox>{children}</PopupBox> - </Fragment> + </PreventLinkNavigation> ); }; case "wallet": return function WalletWrapper({ children }: any) { return ( - <Fragment> + <PreventLinkNavigation> <LogoHeader /> <WalletNavBar /> <WalletBox>{children}</WalletBox> - </Fragment> + </PreventLinkNavigation> ); }; case "cta": return function WalletWrapper({ children }: any) { return ( - <Fragment> + <PreventLinkNavigation> <WalletBox>{children}</WalletBox> - </Fragment> + </PreventLinkNavigation> ); }; default: |