Intentwise Primitives
Panels & Accordions
Expandable panels and accordions for recommendations and collapsible content. CollapsiblePanel supports controlled/uncontrolled state and optional localStorage persistence; RecommendationAccordion displays a list of recommendation items with optional delete actions.
CollapsiblePanel (default expanded)
Panel with title and body. Click the header to collapse or expand.
Filters
Show code
<CollapsiblePanel title="Filters" defaultExpanded={true}>
<div className="p-4">Panel content here.</div>
</CollapsiblePanel>CollapsiblePanel with header actions
Use headerActions to add buttons or summary text to the right of the title.
Advanced options
Show code
<CollapsiblePanel
title="Advanced options"
headerActions={<span className="text-xs text-iw-text-muted">3 selected</span>}
>
...
</CollapsiblePanel>RecommendationAccordion
Recommendation list
Accordion showing recommendation items with count, description (supports **bold**), and date. Optional onItemDelete callback for remove actions.
Show code
<RecommendationAccordion
title="BID OPTIMIZATION"
items={[
{ id: '1', count: 12, description: 'Sponsored Product **keyword** bids', date: '07th Mar' },
...
]}
onItemDelete={(id) => {}}
/>RecommendationAccordion (collapsed by default)
Use defaultExpanded={false} to start collapsed.
Show code
<RecommendationAccordion title="..." items={items} defaultExpanded={false} />RecommendationAccordion — clickable rows
Pass onItemClick to make the row body interactive (cursor + focus ring). Useful when each recommendation links to a detail page or filtered table view. The right-side action button is independent.
Show code
<RecommendationAccordion
title="BID OPTIMIZATION"
items={items}
onItemClick={(id) => router.push('/keywords?rec=' + id)}
onItemDelete={(id) => dismiss(id)}
/>RecommendationAccordion — restore action mode
Pass actionMode="restore" to show a "Restore" pill button instead of the trash icon (e.g. for a Dismissed tab). Wire onItemAction to restore the recommendation; falls back to onItemDelete if omitted.
Show code
<RecommendationAccordion
title="BID OPTIMIZATION"
items={dismissedItems}
actionMode="restore"
onItemAction={(id) => restore(id)}
/>RecommendationAccordion — no action button
Pass actionMode="none" to render rows without a right-side action button. Combine with onItemClick for a pure list-of-links experience.
Show code
<RecommendationAccordion
title="KEYWORD TARGETING"
items={items}
actionMode="none"
onItemClick={(id) => navigate(id)}
/>RecommendationAccordion — persisted expanded state
Pass storageKey to persist the expanded/collapsed state to localStorage. Survives reloads and remounts. Use a unique key per accordion instance.
Show code
<RecommendationAccordion
title="BID OPTIMIZATION"
items={items}
storageKey="walmart-recommendations:active:bid"
/>RecommendationAccordion — fully controlled
Pass expanded + onExpandedChange to fully own the open/close state externally. Useful when synchronizing multiple panels or driving from URL/router state.
Show code
const [open, setOpen] = useState(true);
<RecommendationAccordion
title="..."
items={items}
expanded={open}
onExpandedChange={setOpen}
/>