feat: improve structure

kadena-community · Oct 3, 2023 · a15f04b · a15f04b
1 parent 82eb94a
commit a15f04b
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 28 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
@@ -45,7 +45,6 @@ export const Dynamic: IStory = {
   render: ({ linked }) => {
     return (
       <NavAccordion.Root linked={linked} initialOpenSection={-1}>
-        {/* <NavAccordion.Link>Introduction</NavAccordion.Link> */}
         <NavAccordion.Section title="Developers">
           <NavAccordion.Group title="Guides">
             <NavAccordion.Link href="#pact">
@@ -70,7 +69,6 @@ export const Dynamic: IStory = {
             Technical Grants
           </NavAccordion.Link>
         </NavAccordion.Section>
-        {/* <NavAccordion.Link>Pact Reference</NavAccordion.Link> */}
       </NavAccordion.Root>
     );
   },

diff --git a/packages/libs/react-ui/src/components/NavAccordion/NavAccordionGroup.tsx b/packages/libs/react-ui/src/components/NavAccordion/NavAccordionGroup.tsx
@@ -7,6 +7,7 @@ import {
   navAccordionGroupIconClass,
   navAccordionGroupListClass,
   navAccordionGroupTitleClass,
+  navAccordionListItemClass,
 } from './NavAccordion.css';
 import type { INavAccordionLinkProps } from './NavAccordionLink';
 
@@ -57,18 +58,20 @@ export const NavAccordionGroup: FC<INavAccordionGroupProps> = ({
       </button>
       {isOpen && children && (
         <ul className={navAccordionGroupListClass}>
-          {React.Children.map(children, (section) =>
-            React.cloneElement(
-              section as React.ReactElement<
-                INavAccordionLinkProps,
-                React.JSXElementConstructor<INavAccordionLinkProps>
-              >,
-              {
-                deepLink: true,
-                active: section.props.active,
-              },
-            ),
-          )}
+          {React.Children.map(children, (section) => (
+            <li className={navAccordionListItemClass}>
+              {React.cloneElement(
+                section as React.ReactElement<
+                  INavAccordionLinkProps,
+                  React.JSXElementConstructor<INavAccordionLinkProps>
+                >,
+                {
+                  deepLink: true,
+                  active: section.props.active,
+                },
+              )}
+            </li>
+          ))}
         </ul>
       )}
     </div>

diff --git a/packages/libs/react-ui/src/components/NavAccordion/NavAccordionLink.tsx b/packages/libs/react-ui/src/components/NavAccordion/NavAccordionLink.tsx
@@ -2,7 +2,6 @@ import {
   navAccordionDeepLinkClass,
   navAccordionLinkActiveClass,
   navAccordionLinkClass,
-  navAccordionListItemClass,
 } from './NavAccordion.css';
 
 import { Link } from '@components/Link';
@@ -24,16 +23,14 @@ export const NavAccordionLink: FC<INavAccordionLinkProps> = ({
   href,
 }) => {
   return (
-    <li className={navAccordionListItemClass}>
-      <Link
-        _className={classNames(navAccordionLinkClass, {
-          [navAccordionDeepLinkClass]: deepLink,
-          [navAccordionLinkActiveClass]: active,
-        })}
-        href={href}
-      >
-        {children}
-      </Link>
-    </li>
+    <Link
+      _className={classNames(navAccordionLinkClass, {
+        [navAccordionDeepLinkClass]: deepLink,
+        [navAccordionLinkActiveClass]: active,
+      })}
+      href={href}
+    >
+      {children}
+    </Link>
   );
 };
diff --git a/packages/libs/react-ui/src/components/NavAccordion/NavAccordionSection.tsx b/packages/libs/react-ui/src/components/NavAccordion/NavAccordionSection.tsx
@@ -7,14 +7,18 @@ import {
   navAccordionSectionWrapperClass,
   navAccordionToggleIconClass,
 } from './NavAccordion.css';
+import type { INavAccordionGroupProps } from './NavAccordionGroup';
+import type { INavAccordionLinkProps } from './NavAccordionLink';
 
 import { SystemIcon } from '@components/Icon';
 import classNames from 'classnames';
-import type { FC } from 'react';
+import type { FC, FunctionComponentElement } from 'react';
 import React from 'react';
 
 export interface INavAccordionSectionProps {
-  children?: React.ReactNode;
+  children?: FunctionComponentElement<
+    INavAccordionGroupProps | INavAccordionLinkProps
+  >[];
   index?: number;
   isOpen?: boolean;
   onClick?: () => void;