component.schema.json

{
  "$anchor": "accordion-component",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "type": "object",
  "$merge": {
    "source": {
      "$ref": "component"
    },
    "with": {
      "properties": {
        "_supportedLayout": {
          "type": "string",
          "title": "Supported layout",
          "default": "full-width",
          "enum": [
            "full-width",
            "half-width",
            "both"
          ],
          "_adapt": {
            "editorOnly": true
          }
        },
        "instruction": {
          "type": "string",
          "title": "Instruction",
          "default": "Select the headings to find out more.",
          "_adapt": {
            "translatable": true
          }
        },
        "_setCompletionOn": {
          "type": "string",
          "title": "Completion criteria",
          "description": "Whether completion is based on the learner having viewed all the accordion items - or just having viewed the component",
          "default": "allItems",
          "enum": [
            "inview",
            "allItems"
          ],
          "_backboneForms": "Select"
        },
        "_items": {
          "type": "array",
          "title": "Items",
          "items": {
            "type": "object",
            "properties": {
              "title": {
                "type": "string",
                "title": "Title",
                "default": "",
                "_adapt": {
                  "translatable": true
                }
              },
              "body": {
                "type": "string",
                "title": "Body",
                "description": "This is the item body text that is hidden until the item title is clicked on",
                "default": "",
                "_adapt": {
                  "translatable": true
                },
                "_backboneForms": "TextArea"
              },
              "_imageAlignment": {
                "type": "string",
                "title": "Image alignment",
                "description": "Defines the alignment of the item image. Full: Image spans the entire width of the container below the text area. Left: Image aligned to the left of the text area. Right: Image aligned to the right of the text area. The default alignment is `full`. For smaller screens the alignment defaults to `full`.",
                "default": "full",
                "enum": [
                  "full",
                  "left",
                  "right"
                ],
                "_backboneForms": "Select"
              },
              "_graphic": {
                "type": "object",
                "title": "Graphic",
                "default": {},
                "properties": {
                  "alt": {
                    "type": "string",
                    "title": "Alternative text",
                    "description": "A description of the image; required when it has meaning that must be conveyed to the learner. For 'decorative' images, leave this blank",
                    "default": "",
                    "_adapt": {
                      "translatable": true
                    }
                  },
                  "src": {
                    "type": "string",
                    "isObjectId": true,
                    "title": "Source",
                    "description": "Optional image which will be rendered with the item body text",
                    "_backboneForms": {
                      "type": "Asset",
                      "media": "image"
                    }
                  },
                  "attribution": {
                    "type": "string",
                    "title": "Attribution",
                    "description": "Text to be displayed as an attribution",
                    "default": "",
                    "_adapt": {
                      "translatable": true
                    }
                  }
                }
              },
              "_classes": {
                "type": "string",
                "title": "Custom classes",
                "description": "Custom classes that are applied to the accordion item. Supported classes 'align-image-left' and 'align-image-right' are available to align item image to the left or right in desktop view. On smaller screens the item image defaults underneath the item body text. Additional classes can be used but they must be predefined in one of the Less files. Separate multiple classes with a space",
                "default": ""
              }
            }
          }
        },
        "_shouldCollapseItems": {
          "type": "boolean",
          "title": "Automatically collapse items",
          "description": "If disabled, upon expansion of an accordion item, any previously expanded items will not be collapsed",
          "default": true
        },
        "_shouldExpandFirstItem": {
          "type": "boolean",
          "title": "Expand first item by default",
          "default": false
        }
      }
    }
  }
}