63 lines
1.3 KiB
TypeScript
63 lines
1.3 KiB
TypeScript
// @ts-nocheck
|
|
import * as mod from "./dock-prompt"
|
|
import { create } from "../storybook/scaffold"
|
|
|
|
const docs = `### Overview
|
|
Docked prompt layout for questions and permission requests.
|
|
|
|
Use with form controls or confirmation buttons in the footer.
|
|
|
|
### API
|
|
- Required: \`kind\` (question | permission), \`header\`, \`children\`, \`footer\`.
|
|
- Optional: \`ref\` for measuring or focus management.
|
|
|
|
### Variants and states
|
|
- Question and permission layouts (data attributes).
|
|
|
|
### Behavior
|
|
- Pure layout component; behavior handled by parent.
|
|
|
|
### Accessibility
|
|
- Ensure header and footer content provide clear context and actions.
|
|
|
|
### Theming/tokens
|
|
- Uses \`data-component="dock-prompt"\` with kind data attribute.
|
|
|
|
`
|
|
|
|
const story = create({
|
|
title: "UI/DockPrompt",
|
|
mod,
|
|
args: {
|
|
kind: "question",
|
|
header: "Header",
|
|
children: "Prompt content",
|
|
footer: "Footer",
|
|
},
|
|
})
|
|
|
|
export default {
|
|
title: "UI/DockPrompt",
|
|
id: "components-dock-prompt",
|
|
component: story.meta.component,
|
|
tags: ["autodocs"],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: docs,
|
|
},
|
|
},
|
|
},
|
|
}
|
|
|
|
export const Basic = story.Basic
|
|
|
|
export const Permission = {
|
|
args: {
|
|
kind: "permission",
|
|
header: "Allow access?",
|
|
children: "This action needs permission to proceed.",
|
|
footer: "Approve or deny",
|
|
},
|
|
}
|