🚸 Accordion Component

actifyjs · Jun 9, 2024 · d0c5a59 · d0c5a59
1 parent 07eca68
commit d0c5a59
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 47 deletions.
diff --git a/apps/docs/content/components/accordion.md b/apps/docs/content/components/accordion.md
@@ -7,6 +7,10 @@ description: Accordion display a list of high-level options that can expand/coll
 
 <usage></usage>
 
+## Tips
+
+`asChild` prop can use to override `Header` style and `Content` style
+
 ## Props
 
 | Props      | Type      | Description                                                                  | Default     |

diff --git a/apps/docs/src/usages/accordion.tsx b/apps/docs/src/usages/accordion.tsx
@@ -15,19 +15,24 @@ export default () => {
       </Accordion.Item>
       <Accordion.Item>
         <Accordion.Header asChild>
-          <div
-            // @ts-expect-error
-            className={({ active }) =>
-              `font-black cursor-pointer flex items-center justify-between ${
-                active ? 'text-error [&>div]:rotate-90' : '[&>div]:rotate-0'
-              }`
-            }
-          >
-            <p className="text-2xl font-bold">What is Actify?</p>
-            <div className="transition-transform duration-300">
-              <Icon>keyboard_arrow_down</Icon>
+          {({ active }) => (
+            <div
+              className={`text-2xl cursor-pointer ${
+                active
+                  ? 'text-error flex items-center justify-between'
+                  : 'flex items-center justify-between'
+              }`}
+            >
+              <p>What is Actify? (custom header style)</p>
+              <div
+                className={`transition-transform duration-300 ${
+                  active ? 'rotate-90' : 'rotate-0'
+                }`}
+              >
+                <Icon className="[--md-icon-size:36px]">arrow_downward</Icon>
+              </div>
             </div>
-          </div>
+          )}
         </Accordion.Header>
         <Accordion.Content>
           Actify is an open source react component library written in Vite +
@@ -36,34 +41,21 @@ export default () => {
         </Accordion.Content>
       </Accordion.Item>
       <Accordion.Item>
-        <Accordion.Header asChild>
-          {
-            // @ts-expect-error
-            ({ active }) => (
-              <div
-                className={
-                  active
-                    ? 'text-purple-500 flex items-center justify-between'
-                    : 'flex items-center justify-between'
-                }
-              >
-                <p>Why Actify?</p>
-                <div
-                  className={`transition-transform duration-300 ${
-                    active ? 'rotate-90' : 'rotate-0'
-                  }`}
-                >
-                  <Icon>keyboard_arrow_down</Icon>
-                </div>
-              </div>
-            )
-          }
-        </Accordion.Header>
-        <Accordion.Content>
-          Actify is a powerful React Component Library built from the ground up
-          to be easy to learn and rewarding to master. Our collection of UI
-          components maintain a consistent style throughout your application
-          with enough customization options to meet any use-case.
+        <Accordion.Header>Why Actify? (custom content style)</Accordion.Header>
+        <Accordion.Content asChild>
+          {({ active }) => (
+            <div
+              className={`grid duration-300 grid-rows-[0fr] transition-[grid-template-rows] ${active ? 'grid-rows-[1fr]' : ''}`}
+            >
+              <p className="overflow-hidden text-2xl text-primary">
+                Actify is a powerful React Component Library built from the
+                ground up to be easy to learn and rewarding to master. Our
+                collection of UI components maintain a consistent style
+                throughout your application with enough customization options to
+                meet any use-case.
+              </p>
+            </div>
+          )}
         </Accordion.Content>
       </Accordion.Item>
     </Accordion>

diff --git a/packages/actify/src/components/Accordion/AccordionContent.tsx b/packages/actify/src/components/Accordion/AccordionContent.tsx
@@ -3,6 +3,7 @@
 import React, { useMemo } from 'react'
 
 import { Slot } from './../Slot'
+import { Text } from './../Text'
 import clsx from 'clsx'
 import styles from './actify.module.css'
 import { useAccordion } from './AccordionContext'
@@ -11,7 +12,9 @@ export interface AccordionContentProps
   extends Omit<React.ComponentProps<'div'>, 'children'> {
   index?: number
   asChild?: boolean
-  children?: ((_?: any) => React.ReactNode) | React.ReactNode
+  children?:
+    | ((props: { active?: boolean }) => React.ReactNode)
+    | React.ReactNode
 }
 
 const AccordionContent = (props: AccordionContentProps) => {
@@ -46,7 +49,7 @@ const AccordionContent = (props: AccordionContentProps) => {
 
   return (
     <div {...rest} className={classes}>
-      {children as React.ReactNode}
+      <Text style={{ overflow: 'hidden' }}>{children as React.ReactNode}</Text>
     </div>
   )
 }

diff --git a/packages/actify/src/components/Accordion/AccordionHeader.tsx b/packages/actify/src/components/Accordion/AccordionHeader.tsx
@@ -9,11 +9,14 @@ import clsx from 'clsx'
 import styles from './actify.module.css'
 import { useAccordion } from './AccordionContext'
 
-export type AccordionHeaderProps = {
+export interface AccordionHeaderProps
+  extends Omit<React.ComponentProps<'div'>, 'children'> {
   index?: number
   asChild?: boolean
-  children?: ((_?: any) => React.ReactNode) | React.ReactNode
-} & React.ComponentProps<'div'>
+  children?:
+    | ((props: { active?: boolean }) => React.ReactNode)
+    | React.ReactNode
+}
 
 const AccordionHeader = (props: AccordionHeaderProps) => {
   const { index, asChild, className, children, ...rest } = props
@@ -46,7 +49,6 @@ const AccordionHeader = (props: AccordionHeaderProps) => {
           active,
           ...rest
         }}
-        className={classes}
       >
         {typeof children === 'function' ? children({ active }) : children}
       </Slot>
@@ -55,7 +57,7 @@ const AccordionHeader = (props: AccordionHeaderProps) => {
 
   return (
     <div {...rest} onClick={handleClick} className={classes}>
-      <Text>{children}</Text>
+      <Text>{children as React.ReactNode}</Text>
       <div
         style={{
           transitionDuration: '300ms',