From df52caa3ff4b29dd52b5fedf14a10d899852cb02 Mon Sep 17 00:00:00 2001
From: Timo Heddes <timo.heddes@gmail.com>
Date: Wed, 4 Oct 2023 09:47:44 +0200
Subject: [PATCH] feat: support asChild and update story description

---
 .../src/components/NavAccordion/NavAccordion.stories.tsx | 9 ++++++---
 .../src/components/NavAccordion/NavAccordionLink.tsx     | 9 ++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/libs/react-ui/src/components/NavAccordion/NavAccordion.stories.tsx b/packages/libs/react-ui/src/components/NavAccordion/NavAccordion.stories.tsx
index 273afba7302..de5eec97851 100644
--- a/packages/libs/react-ui/src/components/NavAccordion/NavAccordion.stories.tsx
+++ b/packages/libs/react-ui/src/components/NavAccordion/NavAccordion.stories.tsx
@@ -18,7 +18,8 @@ const meta: Meta<StoryProps> = {
     },
     docs: {
       description: {
-        component: '',
+        component:
+          'The NavAccordion component allows the user to show and hide sections of navigational lists on a page that are grouped together.<br /><br />These sections can be expanded and collapsed by clicking the section headers.<br /><br />The component consists of four sub components:<br /><strong><NavAccordion.Root></strong> as the parent container<br /><strong><NavAccordion.Section></strong> for each navigational section (collapsable)<br /><strong><NavAccordion.Group></strong> to create sub sections (lists) that group related navigational links (collapsable)<br /><strong><NavAccordion.Link></strong> to create links that can be used to navigate<br /><br /><strong>initialOpenSection</strong><br />This optional prop can be used on the Root element to set the initially opened section.<br /><em>It defaults to `undefined` and has only been explcitly set to `-1` in the story code for demonstration purposes.</em><br /><br /><em>Note: in times when you need to use a different `Link` component (like next/link in Next.js), you can pass the `asChild` prop to the NavAccordion.Link component to pass on styles, icons, and additional props.</em><br /><br /><em>Note: this variant of the Accordion component is meant to be used to display content.<br />For content purposes, please use the <strong>Accordion</strong> within the Layout subgroup.</em>',
       },
     },
   },
@@ -65,8 +66,10 @@ export const Dynamic: IStory = {
           <NavAccordion.Link href="#developer-program">
             Developer Program
           </NavAccordion.Link>
-          <NavAccordion.Link href="#technical-grants">
-            Technical Grants
+          <NavAccordion.Link asChild>
+            <a id="asChild" href="https://kadena.io/" target="_blank">
+              Kadena.io (asChild)
+            </a>
           </NavAccordion.Link>
         </NavAccordion.Section>
       </NavAccordion.Root>
diff --git a/packages/libs/react-ui/src/components/NavAccordion/NavAccordionLink.tsx b/packages/libs/react-ui/src/components/NavAccordion/NavAccordionLink.tsx
index a2e4c96f79a..fb14403b409 100644
--- a/packages/libs/react-ui/src/components/NavAccordion/NavAccordionLink.tsx
+++ b/packages/libs/react-ui/src/components/NavAccordion/NavAccordionLink.tsx
@@ -7,18 +7,20 @@ import {
 
 import { Link } from '@components/Link';
 import classNames from 'classnames';
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import React from 'react';
 
 export interface INavAccordionLinkProps {
   active?: boolean;
-  children?: string;
+  asChild?: boolean;
+  children: ReactNode;
   deepLink?: boolean;
-  href: string;
+  href?: string;
 }
 
 export const NavAccordionLink: FC<INavAccordionLinkProps> = ({
   active,
+  asChild,
   children,
   deepLink,
   href,
@@ -31,6 +33,7 @@ export const NavAccordionLink: FC<INavAccordionLinkProps> = ({
           [navAccordionLinkActiveClass]: active,
         })}
         href={href}
+        asChild={asChild}
       >
         {children}
       </Link>