diff --git a/static/app/views/performance/landing/widgets/components/accordion.spec.tsx b/static/app/components/accordion/accordion.spec.tsx similarity index 91% rename from static/app/views/performance/landing/widgets/components/accordion.spec.tsx rename to static/app/components/accordion/accordion.spec.tsx index 75d33806d26fa..d868a58f37dd4 100644 --- a/static/app/views/performance/landing/widgets/components/accordion.spec.tsx +++ b/static/app/components/accordion/accordion.spec.tsx @@ -1,6 +1,6 @@ import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary'; -import Accordion from 'sentry/views/performance/landing/widgets/components/accordion'; +import Accordion from 'sentry/components/accordion/accordion'; const items = [ {header: () =>

header

, content: () =>

first content

}, diff --git a/static/app/views/performance/landing/widgets/components/accordion.tsx b/static/app/components/accordion/accordion.tsx similarity index 76% rename from static/app/views/performance/landing/widgets/components/accordion.tsx rename to static/app/components/accordion/accordion.tsx index e0f6a63f5c590..53a6297f51e7a 100644 --- a/static/app/views/performance/landing/widgets/components/accordion.tsx +++ b/static/app/components/accordion/accordion.tsx @@ -16,6 +16,7 @@ interface Props { items: AccordionItemContent[]; setExpandedIndex: (index: number) => void; buttonOnLeft?: boolean; + collapsible?: boolean; } export default function Accordion({ @@ -23,6 +24,7 @@ export default function Accordion({ setExpandedIndex, items, buttonOnLeft, + collapsible = true, }: Props) { return ( @@ -34,6 +36,7 @@ export default function Accordion({ content={item.content()} setExpandedIndex={setExpandedIndex} buttonOnLeft={buttonOnLeft} + collapsible={collapsible} > {item.header()} @@ -49,6 +52,7 @@ function AccordionItem({ setExpandedIndex, content, buttonOnLeft, + collapsible, }: { children: ReactNode; content: ReactNode; @@ -56,20 +60,35 @@ function AccordionItem({ isExpanded: boolean; setExpandedIndex: (index: number) => void; buttonOnLeft?: boolean; + collapsible?: boolean; }) { + const button = collapsible ? ( +