120 lines
2.6 KiB
Plaintext
120 lines
2.6 KiB
Plaintext
{
|
|
"id": "primary-button",
|
|
"type": "button",
|
|
"version": "1.0.0",
|
|
"metadata": {
|
|
"name": "Primary Button",
|
|
"description": "A primary action button with emphasis styling for main user actions",
|
|
"author": "UXscii Team",
|
|
"created": "2024-01-01T00:00:00Z",
|
|
"modified": "2024-01-01T00:00:00Z",
|
|
"tags": ["button", "primary", "action"],
|
|
"category": "input",
|
|
"fidelity": "detailed"
|
|
},
|
|
"props": {
|
|
"text": "Button",
|
|
"disabled": false,
|
|
"size": "medium",
|
|
"fullWidth": false,
|
|
"ariaLabel": ""
|
|
},
|
|
"behavior": {
|
|
"states": [
|
|
{
|
|
"name": "default",
|
|
"properties": {
|
|
"background": "primary",
|
|
"textColor": "white",
|
|
"border": "solid"
|
|
}
|
|
},
|
|
{
|
|
"name": "hover",
|
|
"properties": {
|
|
"background": "primary-dark",
|
|
"textColor": "white",
|
|
"border": "solid"
|
|
},
|
|
"triggers": ["mouseenter"]
|
|
},
|
|
{
|
|
"name": "active",
|
|
"properties": {
|
|
"background": "primary-darker",
|
|
"textColor": "white",
|
|
"border": "inset"
|
|
},
|
|
"triggers": ["mousedown"]
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"properties": {
|
|
"background": "gray-light",
|
|
"textColor": "gray-dark",
|
|
"border": "dashed"
|
|
}
|
|
}
|
|
],
|
|
"interactions": [
|
|
{
|
|
"trigger": "click",
|
|
"action": "emit-click-event"
|
|
},
|
|
{
|
|
"trigger": "keydown",
|
|
"action": "emit-click-event",
|
|
"condition": "key === 'Enter' || key === ' '"
|
|
}
|
|
],
|
|
"accessibility": {
|
|
"role": "button",
|
|
"focusable": true,
|
|
"keyboardSupport": ["Enter", "Space"],
|
|
"ariaLabel": "{{ariaLabel || text}}"
|
|
}
|
|
},
|
|
"layout": {
|
|
"display": "inline-block",
|
|
"positioning": "static",
|
|
"spacing": {
|
|
"padding": {
|
|
"top": 1,
|
|
"right": 2,
|
|
"bottom": 1,
|
|
"left": 2
|
|
}
|
|
},
|
|
"sizing": {
|
|
"minWidth": 8,
|
|
"height": 3
|
|
}
|
|
},
|
|
"ascii": {
|
|
"templateFile": "primary-button.md",
|
|
"width": 16,
|
|
"height": 3,
|
|
"variables": [
|
|
{
|
|
"name": "text",
|
|
"type": "string",
|
|
"defaultValue": "Button",
|
|
"description": "The text displayed on the button",
|
|
"required": true,
|
|
"validation": {
|
|
"max": 20
|
|
}
|
|
},
|
|
{
|
|
"name": "width",
|
|
"type": "number",
|
|
"defaultValue": 16,
|
|
"description": "Button width in characters",
|
|
"validation": {
|
|
"min": 8,
|
|
"max": 40
|
|
}
|
|
}
|
|
]
|
|
}
|
|
} |