React UI: Navigation Header Accordion component

.changeset/eighty-turkeys-kick.md

@@ -0,0 +1,5 @@
+---
+'@kadena/react-ui': minor
+---
+
+Introduced Accordion variant for navigational purposes

packages/libs/react-ui/src/components/Accordion/Accordion.context.ts

@@ -0,0 +1,17 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { createContext } from 'react';
+
+export type OpenSections = string[];
+
+interface IAccordionContext {
+  openSections: OpenSections;
+  setOpenSections: Dispatch<SetStateAction<OpenSections>>;
+  linked: boolean;
+}
+
+export const initialOpenSections: OpenSections = [];
+export const AccordionContext = createContext<IAccordionContext>({
+  openSections: initialOpenSections,
+  setOpenSections: () => {},
+  linked: false,
+});

packages/libs/react-ui/src/components/Accordion/Accordion.css.ts

@@ -2,10 +2,11 @@ import { sprinkles } from '@theme/sprinkles.css';
 import { vars } from '@theme/vars.css';
 import { style } from '@vanilla-extract/css';
 
-export const accordionSectionWrapperClass = style([
+export const accordionSectionClass = style([
   sprinkles({
     display: 'block',
-    marginBottom: '$6',
+    marginBottom: '$4',
+    overflow: 'hidden',
   }),
   {
     borderBottom: `1px solid ${vars.colors.$borderDefault}`,
@@ -17,18 +18,26 @@ export const accordionSectionWrapperClass = style([
   },
 ]);
 
+export const accordionHeadingTitleClass = style([
+  sprinkles({
+    fontSize: '$base',
+  }),
+]);
+
 export const accordionButtonClass = style([
   sprinkles({
+    alignItems: 'center',
     background: 'none',
     border: 'none',
     color: '$neutral5',
     cursor: 'pointer',
     display: 'flex',
     fontSize: '$base',
-    fontWeight: '$medium',
+    fontWeight: '$semiBold',
     justifyContent: 'space-between',
     padding: 0,
     paddingBottom: '$2',
+    paddingRight: '$1',
     textAlign: 'left',
     width: '100%',
   }),
@@ -43,7 +52,7 @@ export const accordionToggleIconClass = style([
     transition: 'transform 0.2s ease',
     selectors: {
       '&.isOpen': {
-        transform: 'rotate(0deg)',
+        transform: 'rotate(180deg)',
       },
     },
   },
@@ -53,8 +62,9 @@ export const accordionContentClass = style([
   sprinkles({
     color: '$neutral5',
     fontSize: '$base',
+    margin: 0,
     overflow: 'hidden',
+    padding: 0,
     paddingBottom: '$2',
-    paddingTop: '$2',
   }),
 ]);

packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx

@@ -8,8 +8,9 @@ const generateSection = (i: number): IAccordionSectionProps => ({
   title: `Section title ${i}`,
   children: (
     <p>
-      This is the content for section {i}. The type of this content is not
-      restricted: any valid HTML content is allowed.
+      This is the content for section {i}.<br />
+      The type of this content is not restricted: any valid HTML content is
+      allowed.
     </p>
   ),
   onOpen: () => console.log(`open section ${i}`),
@@ -18,12 +19,11 @@ const generateSection = (i: number): IAccordionSectionProps => ({
 const generateSections = (n: number): IAccordionSectionProps[] =>
   Array.from({ length: n }, (d, i) => generateSection(i + 1));
 
-const sampleSections: IAccordionSectionProps[] = generateSections(5);
+const sampleCount: number = 3;
+const sampleSections: IAccordionSectionProps[] = generateSections(sampleCount);
 
 type StoryProps = {
-  sectionCount: number;
   linked: boolean;
-  useCustomSections: boolean;
   customSections: IAccordionSectionProps[];
 } & IAccordionProps;
 
@@ -37,7 +37,7 @@ const meta: Meta<StoryProps> = {
     docs: {
       description: {
         component:
-          'The Accordion component allows the user to show and hide sections of content on a page.<br />These sections can be expanded and collapsed by clicking the section headers.<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: this variant of the Accordion component is meant to be used to display content. For Navigation purposes, please check the other variant within the Navigation subgroup.</em>',
+          'The Accordion component allows the user to show and hide sections of content on a page.<br />These sections can be expanded and collapsed by clicking the section headers.<br /><br /><em>Note: this variant of the Accordion component is meant to be used to display content.<br />For Navigation purposes, please use the <strong>NavAccordion</strong> within the Navigation subgroup.</em>',
       },
     },
   },
@@ -51,31 +51,6 @@ const meta: Meta<StoryProps> = {
         type: { summary: 'boolean' },
       },
     },
-    sectionCount: {
-      control: { type: 'range', min: 1, max: sampleSections.length, step: 1 },
-      description: 'Adjust sample section items count',
-      if: { arg: 'useCustomContent', neq: true },
-      table: {
-        defaultValue: { summary: 3 },
-        type: { summary: 'number' },
-      },
-    },
-    useCustomSections: {
-      control: { type: 'boolean' },
-      description: 'Define your own sections instead of the sample ones?',
-      table: {
-        defaultValue: { summary: 'false' },
-        type: { summary: 'boolean' },
-      },
-    },
-    customSections: {
-      defaultValue: [],
-      description: 'Custom sections',
-      control: {
-        type: 'array',
-      },
-      if: { arg: 'useCustomSections', eq: true },
-    },
   },
 };
 
@@ -85,30 +60,26 @@ export const Dynamic: IStory = {
   name: 'Accordion',
   args: {
     linked: false,
-    sectionCount: 3,
-    customSections: sampleSections,
   },
-  render: ({ linked, sectionCount, useCustomSections, customSections }) => {
-    const sections = useCustomSections ? customSections : sampleSections;
+  render: ({ linked }) => {
+    const sections = sampleSections;
     return (
-      <Accordion.Root linked={linked} initialOpenSection={-1}>
-        {sections
-          .slice(0, sectionCount)
-          .map(
-            (
-              { title, children, onOpen, onClose }: IAccordionSectionProps,
-              index,
-            ) => (
-              <Accordion.Section
-                onOpen={onOpen}
-                onClose={onClose}
-                title={title}
-                key={index}
-              >
-                {children}
-              </Accordion.Section>
-            ),
-          )}
+      <Accordion.Root linked={linked}>
+        {sections.map(
+          (
+            { title, children, onOpen, onClose }: IAccordionSectionProps,
+            index,
+          ) => (
+            <Accordion.Section
+              onOpen={onOpen}
+              onClose={onClose}
+              title={title}
+              key={index}
+            >
+              {children}
+            </Accordion.Section>
+          ),
+        )}
       </Accordion.Root>
     );
   },

packages/libs/react-ui/src/components/Accordion/Accordion.tsx

@@ -1,54 +1,31 @@
 'use client';
 
 import type { IAccordionSectionProps } from '.';
-import { accordionContentClass } from './Accordion.css';
+import type { OpenSections } from './Accordion.context';
+import { AccordionContext } from './Accordion.context';
 
 import type { FC, FunctionComponentElement } from 'react';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 export interface IAccordionRootProps {
   children?: FunctionComponentElement<IAccordionSectionProps>[];
   linked?: boolean;
-  initialOpenSection?: number;
+  initialOpenSection?: OpenSections;
 }
 
 export const AccordionRoot: FC<IAccordionRootProps> = ({
   children,
   linked = false,
-  initialOpenSection = undefined,
+  initialOpenSection = [],
 }) => {
-  const [openSections, setOpenSections] = useState([initialOpenSection]);
-
-  useEffect(() => {
-    if (linked && openSections.length > 1) {
-      const lastOpen = openSections.pop() || undefined;
-      setOpenSections([lastOpen]);
-    }
-  }, [linked]);
+  const [openSections, setOpenSections] =
+    useState<OpenSections>(initialOpenSection);
 
   return (
-    <div data-testid="kda-accordion-sections">
-      {React.Children.map(children, (section, sectionIndex) =>
-        React.cloneElement(
-          section as React.ReactElement<
-            HTMLElement | IAccordionSectionProps,
-            React.JSXElementConstructor<JSX.Element & IAccordionSectionProps>
-          >,
-          {
-            index: sectionIndex,
-            isOpen: openSections.includes(sectionIndex),
-            className: accordionContentClass,
-            onClick: () =>
-              openSections.includes(sectionIndex)
-                ? setOpenSections(
-                    openSections.filter((i) => i !== sectionIndex),
-                  )
-                : setOpenSections(
-                    linked ? [sectionIndex] : [...openSections, sectionIndex],
-                  ),
-          },
-        ),
-      )}
-    </div>
+    <AccordionContext.Provider
+      value={{ openSections, setOpenSections, linked }}
+    >
+      {children}
+    </AccordionContext.Provider>
   );
 };

packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx

@@ -1,59 +1,66 @@
 'use client';
 
+import { AccordionContext } from './Accordion.context';
 import {
   accordionButtonClass,
   accordionContentClass,
-  accordionSectionWrapperClass,
+  accordionHeadingTitleClass,
+  accordionSectionClass,
   accordionToggleIconClass,
 } from './Accordion.css';
 
 import { SystemIcon } from '@components/Icon';
 import classNames from 'classnames';
 import type { FC } from 'react';
-import React from 'react';
+import React, { useContext } from 'react';
 
 export interface IAccordionSectionProps {
   children?: React.ReactNode;
-  index?: number;
-  isOpen?: boolean;
-  onClick?: () => void;
   onClose?: () => void;
   onOpen?: () => void;
   title: string;
 }
 
 export const AccordionSection: FC<IAccordionSectionProps> = ({
   children,
-  isOpen,
-  onClick,
   onClose,
   onOpen,
   title,
 }) => {
+  const { openSections, setOpenSections, linked } =
+    useContext(AccordionContext);
+  const sectionId = title.replace(/\s+/g, '-').toLowerCase();
+  const isOpen = openSections.includes(sectionId);
+
   const handleClick = (): void => {
     if (isOpen) {
+      setOpenSections(
+        linked ? [] : [...openSections.filter((i) => i !== sectionId)],
+      );
       onClose?.();
     } else {
+      setOpenSections(linked ? [sectionId] : [...openSections, sectionId]);
       onOpen?.();
     }
-    onClick?.();
   };
   return (
     <section
-      className={accordionSectionWrapperClass}
+      className={accordionSectionClass}
       data-testid="kda-accordion-section"
     >
-      <button className={accordionButtonClass} onClick={handleClick}>
-        {title}
+      <button
+        className={classNames([accordionButtonClass])}
+        onClick={handleClick}
+      >
+        <h3 className={accordionHeadingTitleClass}>{title}</h3>
         <SystemIcon.Close
           className={classNames(accordionToggleIconClass, {
             isOpen,
           })}
-          size="xs"
+          size="sm"
         />
       </button>
-
-      {isOpen && children && (
+      {children && isOpen && (
         <div className={accordionContentClass}>{children}</div>
       )}
     </section>

packages/libs/react-ui/src/components/Link/Link.tsx

@@ -7,21 +7,21 @@ import type { FC, ReactNode } from 'react';
 import React from 'react';
 
 export interface ILinkProps {
-  href?: string;
-  target?: '_blank' | '_self' | '_parent' | '_top';
+  asChild?: boolean;
+  block?: boolean;
   children: ReactNode;
+  href?: string;
   icon?: keyof typeof SystemIcon;
   iconAlign?: 'left' | 'right';
-  asChild?: boolean;
-  block?: boolean;
+  target?: '_blank' | '_self' | '_parent' | '_top';
 }
 
 export const Link: FC<ILinkProps> = ({
+  asChild = false,
+  block = false,
   children,
   icon,
   iconAlign = 'left',
-  asChild = false,
-  block = false,
   ...restProps
 }) => {
   const Icon = icon && SystemIcon[icon];

packages/libs/react-ui/src/components/NavAccordion/NavAccordion.context.ts

@@ -0,0 +1,17 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { createContext } from 'react';
+
+export type NavAccordionState = string[];
+
+interface INavAccordionContext {
+  openSections: NavAccordionState;
+  setOpenSections: Dispatch<SetStateAction<NavAccordionState>>;
+  linked: boolean;
+}
+
+export const initialOpenSections: NavAccordionState = [];
+export const NavAccordionContext = createContext<INavAccordionContext>({
+  openSections: initialOpenSections,
+  setOpenSections: () => {},
+  linked: false,
+});