201 lines
4.6 KiB
Plaintext
201 lines
4.6 KiB
Plaintext
{
|
|
"id": "badge",
|
|
"type": "badge",
|
|
"version": "1.0.0",
|
|
"metadata": {
|
|
"name": "Badge/Tag Component",
|
|
"description": "Status indicators, labels, and informational tags with various styles and interactive capabilities",
|
|
"author": "UXscii Team",
|
|
"created": "2024-01-15T00:00:00Z",
|
|
"modified": "2024-01-15T00:00:00Z",
|
|
"tags": ["badge", "tag", "label", "status", "indicator"],
|
|
"category": "display",
|
|
"fidelity": "detailed"
|
|
},
|
|
"props": {
|
|
"text": "New",
|
|
"variant": "default",
|
|
"size": "medium",
|
|
"removable": false,
|
|
"clickable": false,
|
|
"icon": "",
|
|
"color": "primary",
|
|
"outlined": false,
|
|
"pill": false,
|
|
"count": null,
|
|
"maxCount": 99,
|
|
"dot": false
|
|
},
|
|
"behavior": {
|
|
"states": [
|
|
{
|
|
"name": "default",
|
|
"properties": {
|
|
"background": "primary",
|
|
"textColor": "white",
|
|
"border": "none"
|
|
}
|
|
},
|
|
{
|
|
"name": "hover",
|
|
"properties": {
|
|
"background": "primary-dark",
|
|
"textColor": "white",
|
|
"cursor": "pointer"
|
|
},
|
|
"triggers": ["mouseenter"],
|
|
"condition": "clickable || removable"
|
|
},
|
|
{
|
|
"name": "active",
|
|
"properties": {
|
|
"background": "primary-darker",
|
|
"textColor": "white",
|
|
"transform": "scale(0.95)"
|
|
},
|
|
"triggers": ["mousedown"],
|
|
"condition": "clickable"
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"properties": {
|
|
"background": "gray-light",
|
|
"textColor": "gray-dark",
|
|
"opacity": 0.6
|
|
}
|
|
}
|
|
],
|
|
"interactions": [
|
|
{
|
|
"trigger": "click",
|
|
"action": "emit-click-event",
|
|
"condition": "clickable && !disabled"
|
|
},
|
|
{
|
|
"trigger": "click",
|
|
"action": "remove-badge",
|
|
"condition": "removable && target.isRemoveButton"
|
|
},
|
|
{
|
|
"trigger": "keydown",
|
|
"action": "emit-click-event",
|
|
"condition": "key === 'Enter' && clickable"
|
|
},
|
|
{
|
|
"trigger": "keydown",
|
|
"action": "remove-badge",
|
|
"condition": "key === 'Delete' && removable"
|
|
}
|
|
],
|
|
"accessibility": {
|
|
"role": "status",
|
|
"focusable": true,
|
|
"keyboardSupport": ["Enter", "Delete"],
|
|
"ariaLabel": "{{text}} badge"
|
|
}
|
|
},
|
|
"layout": {
|
|
"display": "inline-block",
|
|
"positioning": "static",
|
|
"spacing": {
|
|
"padding": {
|
|
"top": 0,
|
|
"right": 1,
|
|
"bottom": 0,
|
|
"left": 1
|
|
},
|
|
"margin": {
|
|
"right": 1
|
|
}
|
|
},
|
|
"sizing": {
|
|
"small": {
|
|
"height": 1,
|
|
"minWidth": 3
|
|
},
|
|
"medium": {
|
|
"height": 1,
|
|
"minWidth": 4
|
|
},
|
|
"large": {
|
|
"height": 1,
|
|
"minWidth": 5
|
|
}
|
|
}
|
|
},
|
|
"ascii": {
|
|
"templateFile": "badge.md",
|
|
"width": 12,
|
|
"height": 1,
|
|
"variables": [
|
|
{
|
|
"name": "text",
|
|
"type": "string",
|
|
"defaultValue": "New",
|
|
"description": "Badge text content",
|
|
"required": true,
|
|
"validation": {
|
|
"max": 20
|
|
}
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "string",
|
|
"defaultValue": "default",
|
|
"description": "Badge style variant",
|
|
"validation": {
|
|
"enum": ["default", "success", "warning", "error", "info", "secondary"]
|
|
}
|
|
},
|
|
{
|
|
"name": "size",
|
|
"type": "string",
|
|
"defaultValue": "medium",
|
|
"description": "Badge size variant",
|
|
"validation": {
|
|
"enum": ["small", "medium", "large"]
|
|
}
|
|
},
|
|
{
|
|
"name": "removable",
|
|
"type": "boolean",
|
|
"defaultValue": false,
|
|
"description": "Whether badge can be removed with X button"
|
|
},
|
|
{
|
|
"name": "clickable",
|
|
"type": "boolean",
|
|
"defaultValue": false,
|
|
"description": "Whether badge responds to click events"
|
|
},
|
|
{
|
|
"name": "outlined",
|
|
"type": "boolean",
|
|
"defaultValue": false,
|
|
"description": "Use outline style instead of filled"
|
|
},
|
|
{
|
|
"name": "pill",
|
|
"type": "boolean",
|
|
"defaultValue": false,
|
|
"description": "Use rounded pill shape"
|
|
},
|
|
{
|
|
"name": "count",
|
|
"type": "number",
|
|
"defaultValue": null,
|
|
"description": "Numeric count for notification badges",
|
|
"validation": {
|
|
"min": 0,
|
|
"max": 999
|
|
}
|
|
},
|
|
{
|
|
"name": "dot",
|
|
"type": "boolean",
|
|
"defaultValue": false,
|
|
"description": "Show as small dot indicator without text"
|
|
}
|
|
]
|
|
}
|
|
} |