import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';
import * as PanelStories from './Panel.stories';
<Meta of={PanelStories} name='Usage' />
<Title />
## Purpose
The PDS Panel, copied as the base for this proposal. It adds `agentic-default`, `agentic-raised` and `agentic-sunken` variants: the AI gradient as the border, for content an agent produced or is acting on (for example an investigation report that needs approval).
## Usage
Set `variant` to `agentic-default`, `agentic-raised` or `agentic-sunken`. Each has the fill and shadow of the matching variant. Use it for a whole surface that belongs to the agent. For a single suggestion inside a chat, use the Suggestion Card instead.
The border shimmers by default (`isAnimated`). Set `isAnimated={false}` when the agent has finished.
## Implementation
See the table below for the available props. The other story shows the default variant for comparison.
<hr />
<Canvas of={PanelStories.Default} />
<Controls of={PanelStories.Default} />
Panel
The PDS v2 Panel (src/components/panels/Panel, branch v2.x) with one addition: the agentic-default, agentic-raised and agentic-sunken variants: each existing surface with the AI gradient as the border.
Extends a PDS componentOpen in Storybook