{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "http://schema.mydesignsystem.com/mosaic.schema.json",
  "title": "Mosaic",
  "description": "Mosaic component for displaying a collection of tiles in various layouts.",
  "type": "object",
  "properties": {
    "layout": {
      "title": "Layout",
      "description": "Layout of the mosaic component",
      "type": "string",
      "enum": [
        "alternate",
        "textLeft",
        "textRight"
      ],
      "default": "alternate"
    },
    "largeHeadlines": {
      "type": "boolean",
      "title": "Large Headlines",
      "description": "Make the headlines larger",
      "default": false
    },
    "tile": {
      "type": "array",
      "title": "Tiles",
      "description": "The tiles to display",
      "items": {
        "$schema": "http://json-schema.org/draft-07/schema#",
        "$id": "http://schema.mydesignsystem.com/tile.schema.json",
        "title": "Tile",
        "type": "object",
        "properties": {
          "headline": {
            "title": "Headline",
            "description": "Headline for the tile",
            "type": "string",
            "format": "markdown"
          },
          "sub": {
            "title": "Module Subheadline",
            "description": "Subheadline below the tile headline",
            "type": "string",
            "format": "markdown"
          },
          "text": {
            "title": "Module Text",
            "description": "Text for tile",
            "type": "string",
            "format": "markdown"
          },
          "image": {
            "type": "object",
            "properties": {
              "src": {
                "title": "Source",
                "description": "Picture source",
                "type": "string",
                "format": "image",
                "examples": [
                  "img/close-up-young-business-team-working.png"
                ]
              },
              "alt": {
                "title": "Alt text",
                "description": "Alt text to display for picture",
                "type": "string"
              }
            },
            "additionalProperties": false
          },
          "button": {
            "type": "object",
            "properties": {
              "toggle": {
                "title": "Button Toggle",
                "description": "Toggle wether the Button is displayed or not",
                "type": "boolean",
                "default": true
              },
              "label": {
                "type": "string",
                "title": "Label",
                "description": "Text content to display inside the button",
                "examples": [
                  "Book a meeting"
                ]
              },
              "url": {
                "type": "string",
                "title": "URL",
                "description": "The URL to link to when the button is clicked",
                "format": "uri"
              },
              "icon": {
                "type": "string",
                "format": "icon",
                "title": "Icon",
                "description": "Choose an icon"
              }
            },
            "additionalProperties": false
          },
          "backgroundColor": {
            "title": "Background color",
            "description": "Background color for the whole element",
            "type": "string",
            "format": "color"
          },
          "backgroundImage": {
            "title": "Background image",
            "description": "Background image for the whole element",
            "type": "string",
            "format": "image"
          },
          "textColor": {
            "title": "Text color",
            "description": "Overwrite the color to use for the text content",
            "type": "string",
            "format": "color"
          }
        },
        "additionalProperties": false,
        "required": [
          "headline",
          "image"
        ]
      },
      "minItems": 1,
      "maxItems": 20
    }
  },
  "additionalProperties": false
}