93 lines
4.6 KiB
JSON
93 lines
4.6 KiB
JSON
{
|
|
"name": "FaqDouble",
|
|
"description": "FAQ section with two-column accordion layout and optional header.",
|
|
"details": "Use for displaying frequently asked questions in a two-column layout for better space utilization. Layout: Optional TextBox Header → Card Container with Two Columns of Accordions. FAQs are automatically split into two equal columns (first half in left column, second half in right). On mobile, columns stack vertically. Supports two animation types: 'smooth' (height transition) and 'instant' (immediate show/hide). Only one accordion item can be open at a time across both columns. Each FAQ requires a unique id, title (question), and content (answer). Content supports HTML for rich formatting. Card container has rounded-theme styling. Best for FAQ pages with many questions where horizontal space is available.",
|
|
"constraints": {
|
|
"textRules": {
|
|
"title": {
|
|
"required": true,
|
|
"example": "Frequently Asked Questions",
|
|
"minChars": 2,
|
|
"maxChars": 50
|
|
},
|
|
"description": {
|
|
"required": true,
|
|
"example": "Find answers to common questions about our products and services",
|
|
"minChars": 5,
|
|
"maxChars": 250
|
|
},
|
|
"tag": {
|
|
"required": false,
|
|
"example": "Help",
|
|
"minChars": 2,
|
|
"maxChars": 30
|
|
}
|
|
},
|
|
"faqRules": {
|
|
"faqs": {
|
|
"required": true,
|
|
"minItems": 1,
|
|
"example": "[{\"id\": \"1\", \"title\": \"What is your return policy?\", \"content\": \"We offer a 30-day money-back guarantee.\"}]",
|
|
"note": "Array of FAQ items. Each item requires unique id, title (question), and content (answer with HTML support). Items are automatically split into two columns."
|
|
},
|
|
"animationType": {
|
|
"required": false,
|
|
"default": "smooth",
|
|
"options": [
|
|
"smooth",
|
|
"instant"
|
|
],
|
|
"note": "Animation type for accordion open/close. 'smooth' uses height transition, 'instant' shows/hides immediately."
|
|
}
|
|
}
|
|
},
|
|
"propsSchema": {
|
|
"faqs": "Array<{ id: string, title: string, content: string }> - FAQ items",
|
|
"title": "string",
|
|
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
|
|
"description": "string",
|
|
"tag?": "string",
|
|
"tagIcon?": "LucideIcon",
|
|
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
|
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
|
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
|
"faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
|
|
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
|
|
"useInvertedBackground": "boolean",
|
|
"animationType?": "'smooth' | 'instant' (default: 'smooth')",
|
|
"ariaLabel?": "string (default: 'FAQ section')",
|
|
"className?": "string",
|
|
"containerClassName?": "string",
|
|
"textBoxTitleClassName?": "string",
|
|
"titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
|
|
"titleImageClassName?": "string - For styling images in inline-image layout",
|
|
"textBoxDescriptionClassName?": "string",
|
|
"textBoxClassName?": "string",
|
|
"textBoxTagClassName?": "string",
|
|
"textBoxButtonContainerClassName?": "string",
|
|
"textBoxButtonClassName?": "string",
|
|
"textBoxButtonTextClassName?": "string",
|
|
"faqsContainerClassName?": "string",
|
|
"columnClassName?": "string",
|
|
"accordionClassName?": "string",
|
|
"accordionTitleClassName?": "string",
|
|
"accordionIconContainerClassName?": "string",
|
|
"accordionIconClassName?": "string",
|
|
"accordionContentClassName?": "string"
|
|
},
|
|
"usageExample": "<FaqDouble faqs={[{id: '1', title: 'What is your return policy?', content: 'We offer a 30-day money-back guarantee on all our products.'}, {id: '2', title: 'How long does shipping take?', content: 'Standard shipping typically takes 5-7 business days.'}, {id: '3', title: 'Do you ship internationally?', content: 'Yes, we ship to over 100 countries worldwide.'}]} title=\"Frequently Asked Questions\" description=\"Find answers to common questions\" textboxLayout=\"default\" useInvertedBackground={false} />",
|
|
"do": [
|
|
"Use for help pages",
|
|
"Use for support sections",
|
|
"Requires faqs[]",
|
|
"Requires titleSegments?[]",
|
|
"Requires buttons?[]"
|
|
],
|
|
"dont": [],
|
|
"editRules": {
|
|
"textOnly": true,
|
|
"layoutLocked": true,
|
|
"styleLocked": true
|
|
}
|
|
}
|