204 lines
4.7 KiB
Plaintext
204 lines
4.7 KiB
Plaintext
{
|
|
"id": "alert",
|
|
"type": "alert",
|
|
"version": "1.0.0",
|
|
"metadata": {
|
|
"name": "Alert/Notification Component",
|
|
"description": "Alert and notification messages for user feedback, system status, and important information display",
|
|
"author": "UXscii Team",
|
|
"created": "2024-01-15T00:00:00Z",
|
|
"modified": "2024-01-15T00:00:00Z",
|
|
"tags": ["alert", "notification", "message", "feedback"],
|
|
"category": "feedback",
|
|
"fidelity": "detailed"
|
|
},
|
|
"props": {
|
|
"title": "Success!",
|
|
"message": "Your changes have been saved successfully.",
|
|
"variant": "success",
|
|
"icon": "✓",
|
|
"dismissible": true,
|
|
"persistent": false,
|
|
"position": "top-right",
|
|
"duration": 5000,
|
|
"actions": [
|
|
{
|
|
"text": "Undo",
|
|
"action": "undo"
|
|
},
|
|
{
|
|
"text": "View",
|
|
"action": "view"
|
|
}
|
|
],
|
|
"showProgress": false,
|
|
"bordered": true,
|
|
"compact": false
|
|
},
|
|
"behavior": {
|
|
"states": [
|
|
{
|
|
"name": "visible",
|
|
"properties": {
|
|
"opacity": 1,
|
|
"transform": "translateX(0)",
|
|
"zIndex": 1000
|
|
}
|
|
},
|
|
{
|
|
"name": "entering",
|
|
"properties": {
|
|
"opacity": 0.5,
|
|
"transform": "translateX(100%)",
|
|
"transition": "all 0.3s ease"
|
|
}
|
|
},
|
|
{
|
|
"name": "exiting",
|
|
"properties": {
|
|
"opacity": 0,
|
|
"transform": "translateX(100%)",
|
|
"transition": "all 0.3s ease"
|
|
}
|
|
},
|
|
{
|
|
"name": "hidden",
|
|
"properties": {
|
|
"display": "none"
|
|
}
|
|
}
|
|
],
|
|
"interactions": [
|
|
{
|
|
"trigger": "click",
|
|
"action": "dismiss-alert",
|
|
"condition": "dismissible && target.isCloseButton"
|
|
},
|
|
{
|
|
"trigger": "click",
|
|
"action": "execute-action",
|
|
"condition": "target.isActionButton"
|
|
},
|
|
{
|
|
"trigger": "keydown",
|
|
"action": "dismiss-alert",
|
|
"condition": "key === 'Escape' && dismissible"
|
|
},
|
|
{
|
|
"trigger": "timeout",
|
|
"action": "auto-dismiss",
|
|
"condition": "!persistent && duration > 0"
|
|
}
|
|
],
|
|
"timing": {
|
|
"autoDismiss": true,
|
|
"defaultDuration": 5000,
|
|
"pauseOnHover": true,
|
|
"resumeOnLeave": true
|
|
},
|
|
"accessibility": {
|
|
"role": "alert",
|
|
"focusable": true,
|
|
"keyboardSupport": ["Escape", "Tab", "Enter"],
|
|
"ariaLabel": "{{variant}} alert: {{title}}"
|
|
}
|
|
},
|
|
"layout": {
|
|
"display": "block",
|
|
"positioning": "fixed",
|
|
"spacing": {
|
|
"padding": {
|
|
"top": 2,
|
|
"right": 3,
|
|
"bottom": 2,
|
|
"left": 3
|
|
},
|
|
"margin": {
|
|
"bottom": 1
|
|
}
|
|
},
|
|
"sizing": {
|
|
"minWidth": 30,
|
|
"maxWidth": 50,
|
|
"height": "auto"
|
|
}
|
|
},
|
|
"ascii": {
|
|
"templateFile": "alert.md",
|
|
"width": 50,
|
|
"height": 8,
|
|
"variables": [
|
|
{
|
|
"name": "title",
|
|
"type": "string",
|
|
"defaultValue": "Success!",
|
|
"description": "Alert title/heading text",
|
|
"required": false,
|
|
"validation": {
|
|
"max": 50
|
|
}
|
|
},
|
|
{
|
|
"name": "message",
|
|
"type": "string",
|
|
"defaultValue": "Operation completed successfully.",
|
|
"description": "Main alert message content",
|
|
"required": true,
|
|
"validation": {
|
|
"max": 200
|
|
}
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "string",
|
|
"defaultValue": "success",
|
|
"description": "Alert type and styling",
|
|
"validation": {
|
|
"enum": ["success", "warning", "error", "info", "default"]
|
|
}
|
|
},
|
|
{
|
|
"name": "icon",
|
|
"type": "string",
|
|
"defaultValue": "✓",
|
|
"description": "Icon character for alert type",
|
|
"validation": {
|
|
"max": 5
|
|
}
|
|
},
|
|
{
|
|
"name": "dismissible",
|
|
"type": "boolean",
|
|
"defaultValue": true,
|
|
"description": "Whether alert can be manually dismissed"
|
|
},
|
|
{
|
|
"name": "persistent",
|
|
"type": "boolean",
|
|
"defaultValue": false,
|
|
"description": "Whether alert stays until manually dismissed"
|
|
},
|
|
{
|
|
"name": "actions",
|
|
"type": "array",
|
|
"defaultValue": [],
|
|
"description": "Action buttons for the alert",
|
|
"validation": {
|
|
"max": 3
|
|
}
|
|
},
|
|
{
|
|
"name": "compact",
|
|
"type": "boolean",
|
|
"defaultValue": false,
|
|
"description": "Use minimal spacing and height"
|
|
},
|
|
{
|
|
"name": "bordered",
|
|
"type": "boolean",
|
|
"defaultValue": true,
|
|
"description": "Show border around alert"
|
|
}
|
|
]
|
|
}
|
|
} |