import React , { useState } from 'react' ; import uniqueId from 'lodash.uniqueid' ; import 'hds-core' ; import styles from './Accordion.module.scss' ; import classNames from '../../utils/classNames' ; import { IconAngleDown , IconAngleUp } from '../../icons' ; import { useAccordion } from './useAccordion' ; import { useTheme } from '../../hooks/useTheme' ; export interface AccordionCustomTheme { '--background-color' ? : string ; '--border-color' ? : string ; '--padding-horizontal' ? : string ; '--padding-vertical' ? : string ; '--header-font-color' ? : string ; '--header-font-size' ? : string ; '--header-line-height' ? : string ; '--button-size' ? : string ; '--button-border-color-hover' ? : string ; '--header-focus-outline-color' ? : string ; '--content-font-size' ? : string ; '--content-line-height' ? : string ; } export type CommonAccordionProps = React . PropsWithChildren < { /**
     * If `true` border will be drawn around the accordion card.
     */ border ? : false ; /**
     * Use the card variant if `true`
     */ card ? : false ; /**
     * Additional class names for accordion
     */ className ? : string ; /**
     * Heading text.
     */ heading ? : string ; default headingLevel ? : number ; /**
     * The id for the accordion element
     */ id ? : string ; default initiallyOpen ? : boolean ; /**
     * Additional styles
     */ style ? : React . CSSProperties ; /**
     * Custom theme styles
     */ theme ? : AccordionCustomTheme ; } > ; export type CardAccordionProps = Omit < CommonAccordionProps , 'card' | 'border' > & { /**
     * If `true` border will be drawn around the accordion card.
     */ border ? : boolean ; /**
     * Use the card variant if `true`
     */ card : true ; } ; export type AccordionProps = CommonAccordionProps | CardAccordionProps ; export const Accordion = ( { border = false , card = false , children , className , heading , headingLevel = 2 , id , initiallyOpen = false , style , theme , } ) => { if ( theme && theme [ '--button-border-color-hover' ] ) { console . warn ( '--button-border-color-hover is deprecated, and will be removed in a future release. Please use --header-focus-outline-color instead' ) ; theme [ '--header-focus-outline-color' ] = theme [ '--button-border-color-hover' ] ; delete theme [ '--button-border-color-hover' ] ; } const [ accordionId ] = useState ( id || uniqueId ( 'accordion-' ) ) ; const customThemeClass = useTheme < AccordionCustomTheme > ( styles . accordion , theme ) ; const { isOpen , buttonProps , contentProps } = useAccordion ( { initiallyOpen } ) ; const icon = isOpen ? ( < IconAngleUp aria - hidden className = { styles . accordionButtonIcon } / > ) : ( < IconAngleDown aria - hidden className = { styles . accordionButtonIcon } / > ) ; return ( < div className = { classNames ( styles . accordion , card && styles . card , card && border && styles . border , isOpen && styles . isOpen , customThemeClass , className ) } style = { style } id = { accordionId } > < div className = { classNames ( styles . accordionHeader ) } > < div role = "button" tabIndex = { 0 } onKeyPress = { ( e ) => { if ( e . key === 'Enter' || e . key === ' ' ) { buttonProps . onClick ( ) ; } } } className = { styles . headingContainer } aria - labelledby = { `${ accordionId }-heading` } { ... buttonProps } > < div role = "heading" aria - level = { headingLevel } id = { `${ accordionId }-heading` } > { heading } < /div> { icon } < /div> < /div> < div { ... contentProps } id = { `${ accordionId }-content` } role = "region" className = { classNames ( styles . accordionContent , card && styles . card ) } aria - labelledby = { `${ accordionId }-heading` } > { children } < /div> < /div>); } ;