handoff-app/integration/components/accordion/1.0.0/accordion.json

Automated documentation toolchain for building client side documentation from figma

{
  "title": "Accordion",
  "image": "https://placehold.co/1360x900",
  "description": "Collapsible sections for toggling sections of content on and off.",
  "figma": "https://www.figma.com/design/0gKWw8gYChpItKWzh8o23N/SS%26C-Design-System?node-id=301-598&t=qoaWE7Tx8sH4njGu-4",
  "type": "block",
  "group": "Accordion",
  "categories": ["Components"],
  "tags": ["accordion"],
  "should_do": ["Show a list of items in an accordion format.", "Allow users to expand and collapse each item individually."],
  "should_not_do": ["Use this component for a large number of items."],
  "changelog": [
    {
      "version": "1.0.0",
      "date": "2021-01-01",
      "changes": ["Initial version."]
    }
  ],
  "previews": {
    "generic": {
      "title": "Generic",
      "values": {
        "id": "accordion",
        "items": [
          {
            "id": "accordion-item-1",
            "title": "Accordion Item 1",
            "paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.",
            "image": {
              "url": "https://placehold.co/1360x900",
              "alt": "Image alt text"
            }
          },
          {
            "id": "accordion-item-2",
            "title": "Accordion Item 2",
            "paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.",
            "image": {
              "url": "https://placehold.co/1360x900",
              "alt": "Image alt text"
            }
          },
          {
            "id": "accordion-item-3",
            "title": "Accordion Item 3",
            "paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.",
            "image": {
              "url": "https://placehold.co/1360x900",
              "alt": "Image alt text"
            }
          }
        ]
      }
    }
  },
  "properties": {
    "id": {
      "name": "ID",
      "description": "Unique identifier for the accordion.",
      "type": "text",
      "default": "accordion",
      "rules": {
        "required": true,
        "content": {
          "min": 5,
          "max": 25
        },
        "pattern": "^[a-z0-9-]+$"
      }
    },
    "items": {
      "name": "Items",
      "description": "Accordion items",
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "id": {
            "name": "ID",
            "description": "Unique identifier for the accordion item.",
            "type": "text",
            "default": "accordion-item-1",
            "rules": {
              "required": true,
              "content": {
                "min": 5,
                "max": 25
              },
              "pattern": "^[a-z0-9-]+$"
            }
          },
          "title": {
            "name": "Title",
            "description": "Title of the accordion item.",
            "type": "text",
            "default": "Accordion Item 1",
            "rules": {
              "required": true,
              "content": {
                "min": 5,
                "max": 25
              }
            }
          },
          "paragraph": {
            "name": "Paragraph",
            "description": "Paragraph of the accordion item.",
            "type": "text",
            "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.",
            "rules": {
              "required": true,
              "content": {
                "min": 5,
                "max": 100
              }
            }
          },
          "image": {
            "name": "Image",
            "description": "Image of the accordion item.",
            "type": "image",
            "default": {
              "url": "https://placehold.co/1360x900",
              "alt": "Image alt text"
            },
            "rules": {
              "required": true,
              "dimensions": {
                "min": {
                  "width": 1360,
                  "height": 900
                },
                "max": {
                  "width": 1360,
                  "height": 900
                }
              }
            }
          }
        }
      },
      "rules": {
        "required": true,
        "min": 1,
        "max": 10
      }
    }
  }
}