[Accordion] different ItemIndicator icons based on the prop defined on Root element.

[vipindigiqt]

I'm building a re-usable Accordion having 3 variants.

All of the 3 variants are having different look and feel in terms of the design like different icons, padding, etc.

I'm exporting the different parts of the Accordion components separately and extending the Root by adding a variant prop with all my variants and planning to pass that as a data-attribute to target using CSS.

I'm stuck at how to define different ItemIndicator icons as they all are different in each variant, also the icons are different for open and closed state of the accordion.

Any suggestions to achieve the same?

Here's the simplified code.

import * as React from 'react'
import { Accordion as BaseAccordion } from '@ark-ui/react'
import clsx from 'clsx'

interface AccordionProps
    extends React.ComponentPropsWithoutRef<typeof BaseAccordion.Root> {
    variant?: 'primary' | 'secondary' | 'help'
}

interface AccordionTriggerProps
    extends React.ComponentPropsWithoutRef<typeof BaseAccordion.ItemTrigger> {}

const Accordion = React.forwardRef<
    React.ElementRef<typeof BaseAccordion.Root>,
    AccordionProps
>((props, ref) => {
    const { className, variant = 'primary', ...rest } = props
    return (
        <BaseAccordion.Root
            data-variant={variant}
            ref={ref}
            {...rest}
        />
    )
})

const AccordionTrigger = React.forwardRef<
    React.ElementRef<typeof BaseAccordion.ItemTrigger>,
    AccordionTriggerProps
>((props, ref) => {
    const { className, children, ...rest } = props
    return (
        <BaseAccordion.ItemTrigger
            ref={ref}
            {...rest}
        >
            <span>{children}</span>
            <BaseAccordion.ItemIndicator></BaseAccordion.ItemIndicator>
        </BaseAccordion.ItemTrigger>
    )
})

const AccordionItem = React.forwardRef<
    React.ElementRef<typeof BaseAccordion.Item>,
    React.ComponentPropsWithoutRef<typeof BaseAccordion.Item>
>((props, ref) => {
    const { className, ...rest } = props
    return (
        <BaseAccordion.Item
            ref={ref}
            {...rest}
        />
    )
})

const AccordionContent = React.forwardRef<
    React.ElementRef<typeof BaseAccordion.ItemContent>,
    React.ComponentPropsWithoutRef<typeof BaseAccordion.ItemContent>
>((props, ref) => {
    const { className, ...rest } = props
    return (
        <BaseAccordion.ItemContent
            ref={ref}
            {...rest}
        />
    )
})

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
export type { AccordionProps }

[segunadebayo]

I recommend creating your own context provider for the variant prop and read it in your component

You could also read the accordion item context and combine this as needed.