← All proposals

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

proposals/Panel/Panel.mdx27 lines · View on GitHub
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} />