diff --git a/src/components/ui/Disclosure/Disclosure.tsx b/src/components/ui/Disclosure/Disclosure.tsx index ae21f7b2..6edec870 100644 --- a/src/components/ui/Disclosure/Disclosure.tsx +++ b/src/components/ui/Disclosure/Disclosure.tsx @@ -6,7 +6,7 @@ import DisclosureContent from "./fragments/DisclosureContent"; export type DisclosureProps = { - items:{question:string,answer: string}[] + items:{title:string, content: string}[] } const Disclosure = ({items}:DisclosureProps) => { @@ -16,10 +16,10 @@ const Disclosure = ({items}:DisclosureProps) => { {items.map((item,index) => ( - {item.question} + {item.title} - {item.answer} + {item.content} diff --git a/src/components/ui/Disclosure/contexts/DisclosureContext.tsx b/src/components/ui/Disclosure/contexts/DisclosureContext.tsx index c750306c..9f9b674e 100644 --- a/src/components/ui/Disclosure/contexts/DisclosureContext.tsx +++ b/src/components/ui/Disclosure/contexts/DisclosureContext.tsx @@ -2,7 +2,7 @@ import {createContext} from "react"; export type DisclosureContextType = { rootClass: string; - activeItem: null; - setActiveItem: (item: null) => void + activeItem: number | null; + setActiveItem: (item: number | null) => void } export const DisclosureContext = createContext({} as DisclosureContextType) \ No newline at end of file diff --git a/src/components/ui/Disclosure/contexts/DisclosureItemContext.tsx b/src/components/ui/Disclosure/contexts/DisclosureItemContext.tsx index 611ba28f..3fec32bd 100644 --- a/src/components/ui/Disclosure/contexts/DisclosureItemContext.tsx +++ b/src/components/ui/Disclosure/contexts/DisclosureItemContext.tsx @@ -1,7 +1,7 @@ import {createContext} from "react"; export type DisclosureItemContextType = { - itemValue: number | undefined; + itemValue: number; setItemValue: (value: number) => void } diff --git a/src/components/ui/Disclosure/fragments/DisclosureContent.tsx b/src/components/ui/Disclosure/fragments/DisclosureContent.tsx index 91052b8a..7dbd0a47 100644 --- a/src/components/ui/Disclosure/fragments/DisclosureContent.tsx +++ b/src/components/ui/Disclosure/fragments/DisclosureContent.tsx @@ -16,7 +16,9 @@ const DisclosureContent = ({children, className=''}:DisclosureContentProps) => { return( diff --git a/src/components/ui/Disclosure/fragments/DisclosureItem.tsx b/src/components/ui/Disclosure/fragments/DisclosureItem.tsx index ba5b3c02..49e7d39a 100644 --- a/src/components/ui/Disclosure/fragments/DisclosureItem.tsx +++ b/src/components/ui/Disclosure/fragments/DisclosureItem.tsx @@ -6,21 +6,18 @@ import { clsx } from "clsx"; export type DisclosureItemProps = { children: React.ReactNode; className?: string; - value?: number + value: number } const DisclosureItem = ({children, className='', value }:DisclosureItemProps) => { - const {activeItem, rootClass} = useContext(DisclosureContext) - const [itemValue, setItemValue] = useState(value) + const { activeItem, rootClass } = useContext(DisclosureContext) + const [itemValue, setItemValue] = useState(value) const [isOpen, setIsOpen] = useState(false) useEffect(() => { - if (activeItem === itemValue) { - setIsOpen(true); - } else { - setIsOpen(false); - } - }, [activeItem]); + setIsOpen(activeItem === itemValue) + + }, [activeItem, itemValue]); return(
{children} diff --git a/src/components/ui/Disclosure/fragments/DisclosureRoot.tsx b/src/components/ui/Disclosure/fragments/DisclosureRoot.tsx index c9b56b82..415c09ee 100644 --- a/src/components/ui/Disclosure/fragments/DisclosureRoot.tsx +++ b/src/components/ui/Disclosure/fragments/DisclosureRoot.tsx @@ -8,14 +8,16 @@ const COMPONENT_NAME = 'Disclosure'; export type DisclosureRootProps = { children: React.ReactNode; customRootClass?: string; + defaultOpen?: number | null; + 'aria-label'?: string; } -const DisclosureRoot = ({children, customRootClass}:DisclosureRootProps) => { +const DisclosureRoot = ({ children, customRootClass, 'aria-label': ariaLabel }:DisclosureRootProps) => { const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME) - const [activeItem, setActiveItem] = useState(null); + const [activeItem, setActiveItem] = useState(null); return( @@ -26,7 +28,12 @@ const DisclosureRoot = ({children, customRootClass}:DisclosureRootProps) => { setActiveItem }}> -
+
+ {children}
diff --git a/src/components/ui/Disclosure/fragments/DisclosureTrigger.tsx b/src/components/ui/Disclosure/fragments/DisclosureTrigger.tsx index fba36bf1..22b292ae 100644 --- a/src/components/ui/Disclosure/fragments/DisclosureTrigger.tsx +++ b/src/components/ui/Disclosure/fragments/DisclosureTrigger.tsx @@ -6,37 +6,33 @@ import { DisclosureItemContext } from "../contexts/DisclosureItemContext"; export type DisclosureTriggerProps = { children: React.ReactNode; className?: string; - index?: number; - + index: number; } -const DisclosureTrigger = ({children, className, index}:DisclosureTriggerProps) => { +const DisclosureTrigger = ({ children, className, index }:DisclosureTriggerProps) => { const {activeItem, setActiveItem, rootClass} = useContext(DisclosureContext) const {itemValue} = useContext(DisclosureItemContext) const handleDisclosure = () => { - if(activeItem === itemValue){ - setActiveItem(null) - } - else if(activeItem !== itemValue){ - setActiveItem(itemValue) - } + + setActiveItem(activeItem === itemValue ? null : itemValue) } return( -
+ -
) } diff --git a/src/components/ui/Disclosure/stories/Disclosure.stories.js b/src/components/ui/Disclosure/stories/Disclosure.stories.js index cd00aa55..7499945f 100644 --- a/src/components/ui/Disclosure/stories/Disclosure.stories.js +++ b/src/components/ui/Disclosure/stories/Disclosure.stories.js @@ -18,13 +18,13 @@ export const All = { className: '', items: [ { - question: "Why can't I access certain websites?", - answer: "Clear your browser's cache and cookies." + title: "Why can't I access certain websites?", + content: "Clear your browser's cache and cookies." }, { - question: "Why do I keep getting disconnected from the network?", - answer: "Ensure that your network drivers are up-to-date." + title: "Why do I keep getting disconnected from the network?", + content: "Ensure that your network drivers are up-to-date." } ] }