Kitchen Sink example

This example contains multiple form elements:

{
  "$thumbnail": null,
  "$key": null,
  "$dff": {
    "key": null
  },
  "$description": "Basic",
  "$schema": "http://jsf.kalmia.si/draft-1",
  "$theme": "rounded/amber",
  "$document": null,
  "$config": {},
  "$lifeCycle": {
    "$beforeFormInit": {
      "$eval": null
    },
    "$afterFormInit": {
      "$eval": null
    },
    "$beforeFormDestroy": {
      "$eval": null
    },
    "$afterFormDestroy": {
      "$eval": null
    },
    "$onFormValueChange": {
      "$eval": null
    },
    "$onFormStatusChange": {
      "$eval": null
    }
  },
  "$services": [],
  "$indexes": [],
  "$comment": null,
  "$style": null,
  "$modes": [],
  "$stylesheets": [],
  "$scripts": [],
  "$title": null,
  "$favicon": null,
  "$evalObjects": {},
  "$events": {
    "listen": {}
  },
  "$providers": {},
  "$dirtyList": [],
  "schema": {
    "type": "object",
    "properties": {
      "firstName": {
        "title": "First name",
        "type": "string",
        "required": true
      },
      "firstNameNoTitle": {
        "type": "string"
      },
      "firstNameNoPlaceholder": {
        "type": "string"
      },
      "firstNameDisabled": {
        "type": "string",
        "required": true,
        "enabledIf": "return false"
      },
      "firstNameMultiline": {
        "title": "First name multiline",
        "type": "string",
        "required": true,
        "multiline": true
      },
      "message": {
        "title": "Message",
        "type": "string",
        "minLength": 10,
        "enabledIf": {
          "$eval": "return $val.firstName === 'A'",
          "dependencies": [
            "firstName"
          ]
        }
      },
      "numberInput": {
        "type": "integer",
        "title": "Number input (linked to dropdown)",
        "required": true
      },
      "numberInputNoTitle": {
        "type": "integer"
      },
      "numberInputNoPlaceholder": {
        "type": "integer"
      },
      "numberInputDisabled": {
        "type": "integer",
        "enabledIf": "return false"
      },
      "dateInput": {
        "title": "Date input",
        "type": "date"
      },
      "dropdownInput": {
        "type": "string",
        "title": "Select an option",
        "required": true,
        "handler": {
          "type": "common/dropdown",
          "values": [
            {
              "value": "value1",
              "label": "> 5",
              "enabledIf": {
                "$eval": "return $val.numberInput > 5",
                "dependencies": [
                  "numberInput"
                ]
              }
            },
            {
              "value": "value2",
              "label": "<= 5",
              "enabledIf": {
                "$eval": "return !$val.numberInput || $val.numberInput <= 5",
                "dependencies": [
                  "numberInput"
                ]
              }
            },
            {
              "value": "value3",
              "label": "Value 3"
            },
            {
              "value": "value4",
              "label": "Value 4"
            },
            {
              "value": "value5",
              "label": "Value 5"
            }
          ]
        }
      },
      "dropdownInputDisabled": {
        "type": "string",
        "enabledIf": "return false",
        "handler": {
          "type": "common/dropdown",
          "values": [
            {
              "value": "value1",
              "label": "Value 1"
            },
            {
              "value": "value2",
              "label": "Value 2"
            },
            {
              "value": "value3",
              "label": "Value 3"
            },
            {
              "value": "value4",
              "label": "Value 4"
            },
            {
              "value": "value5",
              "label": "Value 5"
            }
          ]
        }
      },
      "booleanInput1": {
        "type": "boolean",
        "title": "Boolean input (linked to disabled button)"
      },
      "buttonToggleInput1": {
        "type": "string",
        "title": "Button toggle input",
        "handler": {
          "type": "common/button-toggle",
          "values": [
            {
              "value": "AccessControl",
              "label": "Access Control",
              "icon": "https://avatar-cdn.atlassian.com/8934b9f38626b81a0515fd961f40cb9d"
            },
            {
              "value": "TimeAndAttendance",
              "label": "Time & Attendance",
              "icon": "https://avatar-cdn.atlassian.com/8934b9f38626b81a0515fd961f40cb9d"
            },
            {
              "value": "Both",
              "label": "Both",
              "icon": "https://avatar-cdn.atlassian.com/8934b9f38626b81a0515fd961f40cb9d"
            }
          ]
        }
      },
      "buttonToggleInput2": {
        "type": "array",
        "title": "Button toggle input",
        "handler": {
          "type": "common/button-toggle",
          "values": [
            {
              "value": "AccessControl",
              "label": "Access Control",
              "icon": "https://avatar-cdn.atlassian.com/8934b9f38626b81a0515fd961f40cb9d"
            },
            {
              "value": "TimeAndAttendance",
              "label": "Time & Attendance",
              "icon": "https://avatar-cdn.atlassian.com/8934b9f38626b81a0515fd961f40cb9d"
            }
          ]
        },
        "items": {
          "type": "string"
        }
      },
      "buttonToggleInput3": {
        "type": "array",
        "title": "Button toggle input",
        "handler": {
          "type": "common/button-toggle",
          "values": {
            "$eval": "return [\n              ... (Math.random() >= 0.5 ? [{ value: 'AccessControl', label: 'Access Control', icon: 'https://avatar-cdn.atlassian.com/8934b9f38626b81a0515fd961f40cb9d' }] : []),\n              ... (Math.random() >= 0.5 ? [{ value: 'AccessControl2', label: 'Access Control2', icon: 'https://avatar-cdn.atlassian.com/8934b9f38626b81a0515fd961f40cb9d' }] : []),\n              ... (Math.random() >= 0.5 ? [{\n                value: 'TimeAndAttendance',\n                label: 'Time & Attendance',\n                icon : 'https://avatar-cdn.atlassian.com/8934b9f38626b81a0515fd961f40cb9d'\n              }] : []),\n              ... (Math.random() >= 0.5 ? [{\n                value: 'TimeAndAttendance2',\n                label: 'Time & Attendance2',\n                icon : 'https://avatar-cdn.atlassian.com/8934b9f38626b81a0515fd961f40cb9d'\n              }] : [])\n          ]",
            "dependencies": [
              "buttonToggleInput2"
            ]
          }
        },
        "items": {
          "type": "string"
        }
      },
      "arrayInput1": {
        "type": "array",
        "title": "Expansion panels",
        "items": {
          "type": "object",
          "properties": {
            "inputA": {
              "type": "string",
              "title": "Input A",
              "required": true
            },
            "inputB": {
              "type": "string",
              "handler": {
                "type": "common/dropdown",
                "values": [
                  {
                    "value": "a1",
                    "label": "Value 1"
                  },
                  {
                    "value": "a2",
                    "label": "Value 2"
                  },
                  {
                    "value": "a3",
                    "label": "Value 3"
                  },
                  {
                    "value": "a4",
                    "label": "Value 4"
                  }
                ]
              }
            }
          }
        }
      },
      "colorInput1": {
        "type": "string",
        "title": "Color",
        "handler": {
          "type": "common/color-picker",
          "options": {
            "mode": "ral"
          }
        }
      },
      "colorInput2": {
        "type": "string",
        "title": "Color",
        "handler": {
          "type": "common/color-picker",
          "options": {
            "mode": "custom"
          },
          "values": [
            {
              "value": "wood1",
              "label": "Mahagonij",
              "icon": "http://www.mkl-systems.si/uploads/mkld/Dvizna/img/panel_mahagonij.jpg",
              "lightness": "dark"
            },
            {
              "value": "wood2",
              "label": "Temni hrast",
              "icon": "http://www.mkl-systems.si/uploads/mkld/Dvizna/img/panel_oreh.jpg",
              "lightness": "dark"
            },
            {
              "value": "wood3",
              "label": "Naravni hrast",
              "icon": "http://www.mkl-systems.si/uploads/mkld/Dvizna/img/panel_naravni_hrast.jpg",
              "lightness": "dark"
            },
            {
              "value": "wood4",
              "label": "Rustikal",
              "icon": "http://www.mkl-systems.si/uploads/mkld/Dvizna/img/panel_zlati_hrast.jpg",
              "lightness": "dark"
            },
            {
              "value": "wood5",
              "label": "Zlati hrast",
              "icon": "http://www.mkl-systems.si/uploads/mkld/Dvizna/img/panel_temni_hrast.jpg",
              "lightness": "dark"
            }
          ]
        }
      },
      "colorInput3": {
        "type": "string",
        "title": "Color",
        "handler": {
          "type": "common/color-picker",
          "options": {
            "mode": "custom"
          },
          "values": [
            {
              "value": "color-1",
              "label": "Red",
              "color": "#ff0d1e"
            },
            {
              "value": "color-2",
              "label": "Orange",
              "color": "#ffc318"
            },
            {
              "value": "color-3",
              "label": "Yellow",
              "color": "#feff1c"
            },
            {
              "value": "color-4",
              "label": "Green",
              "color": "#56e02f"
            },
            {
              "value": "color-5",
              "label": "Cyan",
              "color": "#44e0cb"
            },
            {
              "value": "color-6",
              "label": "Blue",
              "color": "#486dff"
            },
            {
              "value": "color-7",
              "label": "Purple",
              "color": "#c642ff"
            }
          ]
        }
      },
      "orderCostInput": {
        "type": "number"
      },
      "orderCost": {
        "type": "object",
        "properties": {
          "loading": {
            "type": "boolean"
          },
          "data": {
            "type": "object",
            "handler": {
              "type": "any"
            },
            "properties": {}
          }
        }
      },
      "sliderInput1": {
        "type": "number",
        "minimum": 0,
        "maximum": 100,
        "handler": {
          "type": "common/slider"
        }
      },
      "sliderInput2": {
        "type": "integer",
        "minimum": 0,
        "maximum": 1000,
        "handler": {
          "type": "common/slider",
          "maximum": 10000,
          "step": 100
        }
      },
      "sliderInput3": {
        "type": "integer",
        "enabledIf": {
          "$eval": "return $val.sliderInput2 >= 5000",
          "dependencies": [
            "sliderInput2"
          ]
        },
        "handler": {
          "type": "common/slider",
          "minimum": -50,
          "maximum": 50
        }
      },
      "phase": {
        "type": "number",
        "default": 0
      }
    }
  },
  "layout": {
    "type": "div",
    "items": [
      {
        "type": "tabset",
        "__$editor_$mode_type": "list",
        "tooltip": {
          "displayAsTitleAttribute": false
        },
        "items": [
          {
            "type": "tab",
            "__$editor_$mode_type": "list",
            "tooltip": {
              "displayAsTitleAttribute": false
            },
            "title": "First tab",
            "items": [
              {
                "type": "span",
                "title": "Tab 1 text",
                "__$editor_$mode_type": "list",
                "tooltip": {
                  "displayAsTitleAttribute": false
                }
              },
              {
                "key": "sliderInput1",
                "__$editor_$mode_type": "list",
                "htmlClass": "mt-3",
                "tooltip": {
                  "displayAsTitleAttribute": false
                },
                "handlerPreferences": {
                  "__$editor_tickInterval_value": {
                    "basic": true,
                    "auto": "auto"
                  },
                  "__$editor_tickInterval_type": "basic",
                  "tickInterval": true
                },
                "preferences": {
                  "color": "primary"
                }
              }
            ]
          },
          {
            "type": "tab",
            "__$editor_$mode_type": "list",
            "tooltip": {
              "displayAsTitleAttribute": false
            },
            "title": "Second tab",
            "items": [
              {
                "key": "sliderInput3",
                "__$editor_$mode_type": "list",
                "htmlClass": "m-5",
                "tooltip": {
                  "displayAsTitleAttribute": false
                },
                "handlerPreferences": {
                  "__$editor_tickInterval_value": {
                    "basic": true,
                    "auto": "auto"
                  },
                  "__$editor_tickInterval_type": "basic",
                  "tickInterval": true
                }
              },
              {
                "type": "span",
                "title": "Tab 2 text",
                "__$editor_$mode_type": "list",
                "tooltip": {
                  "displayAsTitleAttribute": false
                },
                "htmlClass": "mb-6"
              }
            ],
            "htmlClass": "pb-5"
          }
        ]
      },
      {
        "type": "row",
        "__$editor_$mode_type": "list",
        "htmlClass": "m-3",
        "tooltip": {
          "displayAsTitleAttribute": false
        },
        "items": [
          {
            "type": "col",
            "xs": 12,
            "htmlClass": "my-3 __background-color--grey",
            "items": [
              {
                "type": "icon",
                "icon": "sync"
              },
              {
                "type": "icon",
                "htmlClass": "__color--primary",
                "icon": "sync#spin-ccw"
              },
              {
                "type": "icon",
                "icon": "sync#spin-cw"
              },
              {
                "type": "icon",
                "icon": "sync"
              }
            ]
          },
          {
            "type": "col",
            "xs": 12,
            "items": [
              {
                "type": "progress-bar",
                "mode": "determinate",
                "progress": 35,
                "htmlClass": "mb-2"
              },
              {
                "type": "progress-bar",
                "mode": "indeterminate",
                "color": "accent",
                "htmlClass": "mb-2"
              },
              {
                "type": "progress-bar",
                "mode": "buffer",
                "progress": 70,
                "color": "warn",
                "htmlClass": "mb-2"
              },
              {
                "type": "progress-bar",
                "mode": "query",
                "htmlClass": "mb-2"
              }
            ]
          },
          {
            "type": "col",
            "xs": 12,
            "htmlClass": "my-3",
            "items": [
              {
                "type": "hr"
              },
              {
                "type": "menu",
                "title": "Menu",
                "items": [
                  {
                    "type": "menu-item",
                    "title": "Option 1",
                    "icon": "bookmark",
                    "description": "Bookmark",
                    "items": [
                      {
                        "type": "menu-item",
                        "title": "Suboption 1",
                        "items": []
                      },
                      {
                        "type": "menu-item",
                        "title": "Suboption 2",
                        "items": []
                      },
                      {
                        "type": "hr"
                      },
                      {
                        "type": "menu-item",
                        "title": "Suboption 3",
                        "items": []
                      },
                      {
                        "type": "menu-item",
                        "title": "Suboption 4",
                        "items": []
                      },
                      {
                        "type": "menu-item",
                        "title": "Suboption 5",
                        "description": "Test",
                        "items": [
                          {
                            "type": "menu-item",
                            "title": "Suboption 1",
                            "items": []
                          },
                          {
                            "type": "hr"
                          },
                          {
                            "type": "menu-item",
                            "title": "Suboption 2",
                            "description": "ABC",
                            "icon": "spellcheck",
                            "items": []
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "type": "menu-item",
                    "title": "Option 2",
                    "icon": "grade",
                    "items": []
                  },
                  {
                    "type": "menu-item",
                    "title": "Option 3",
                    "icon": "playlist_add",
                    "items": []
                  }
                ]
              }
            ]
          },
          {
            "type": "col",
            "xs": 12,
            "items": [
              {
                "type": "row",
                "htmlClass": "text-center my-3",
                "items": [
                  {
                    "type": "col",
                    "xs": 12,
                    "items": [
                      {
                        "type": "row",
                        "htmlClass": "text-center my-3",
                        "items": [
                          {
                            "type": "col",
                            "items": [
                              {
                                "type": "button",
                                "title": "Button - Basic",
                                "preferences": {
                                  "color": "primary",
                                  "variant": "basic",
                                  "size": "large"
                                }
                              }
                            ]
                          },
                          {
                            "type": "col",
                            "items": [
                              {
                                "type": "button",
                                "title": "Button - Raised",
                                "preferences": {
                                  "color": "primary",
                                  "variant": "raised",
                                  "size": "large"
                                }
                              }
                            ]
                          },
                          {
                            "type": "col",
                            "items": [
                              {
                                "type": "button",
                                "title": "Button - Stroked",
                                "preferences": {
                                  "color": "primary",
                                  "variant": "stroked",
                                  "size": "large"
                                }
                              }
                            ]
                          },
                          {
                            "type": "col",
                            "items": [
                              {
                                "type": "button",
                                "title": "Button - Flat",
                                "preferences": {
                                  "color": "primary",
                                  "variant": "flat",
                                  "size": "large"
                                }
                              }
                            ]
                          },
                          {
                            "type": "col",
                            "items": [
                              {
                                "type": "button",
                                "title": "Fab",
                                "preferences": {
                                  "color": "primary",
                                  "variant": "fab",
                                  "size": "large"
                                }
                              }
                            ]
                          },
                          {
                            "type": "col",
                            "items": [
                              {
                                "type": "button",
                                "title": "MF",
                                "preferences": {
                                  "color": "primary",
                                  "variant": "mini-fab",
                                  "size": "large"
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "type": "col",
                    "xs": 12,
                    "items": [
                      {
                        "key": "buttonToggleInput1",
                        "handlerPreferences": {
                          "variant": "basic"
                        }
                      }
                    ]
                  },
                  {
                    "type": "col",
                    "items": [
                      {
                        "type": "button",
                        "title": "Button - Basic",
                        "preferences": {
                          "color": "primary",
                          "variant": "basic",
                          "size": "normal"
                        }
                      }
                    ]
                  },
                  {
                    "type": "col",
                    "items": [
                      {
                        "type": "button",
                        "title": "Button - Raised",
                        "preferences": {
                          "color": "primary",
                          "variant": "raised",
                          "size": "normal"
                        }
                      }
                    ]
                  },
                  {
                    "type": "col",
                    "items": [
                      {
                        "type": "button",
                        "title": "Button - Stroked",
                        "preferences": {
                          "color": "primary",
                          "variant": "stroked",
                          "size": "normal"
                        }
                      }
                    ]
                  },
                  {
                    "type": "col",
                    "items": [
                      {
                        "type": "button",
                        "title": "Button - Flat",
                        "preferences": {
                          "color": "primary",
                          "variant": "flat",
                          "size": "normal"
                        }
                      }
                    ]
                  },
                  {
                    "type": "col",
                    "items": [
                      {
                        "type": "button",
                        "title": "Fab",
                        "preferences": {
                          "color": "primary",
                          "variant": "fab",
                          "size": "normal"
                        }
                      }
                    ]
                  },
                  {
                    "type": "col",
                    "items": [
                      {
                        "type": "button",
                        "title": "MF",
                        "preferences": {
                          "color": "primary",
                          "variant": "mini-fab",
                          "size": "normal"
                        }
                      }
                    ]
                  },
                  {
                    "type": "col",
                    "items": [
                      {
                        "type": "button",
                        "title": "Disabled button",
                        "preferences": {
                          "color": "primary",
                          "variant": "flat",
                          "size": "normal"
                        },
                        "disabled": {
                          "$eval": "return $val.booleanInput1;",
                          "dependencies": [
                            "booleanInput1"
                          ]
                        }
                      }
                    ]
                  },
                  {
                    "type": "col",
                    "items": [
                      {
                        "type": "button",
                        "title": "Button with dynamic title {{ value }}",
                        "titleTemplateData": {
                          "$eval": "return { value: Math.random() }"
                        },
                        "preferences": {
                          "color": "primary",
                          "variant": "basic",
                          "size": "normal"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "col",
            "__$editor_order_value": {
              "first": "first",
              "last": "last"
            },
            "__$editor_$mode_type": "list",
            "__$editor_order_type": "custom",
            "tooltip": {
              "displayAsTitleAttribute": false
            },
            "items": [
              {
                "type": "badge",
                "title": "Basic",
                "htmlClass": "mr-1 mb-1"
              },
              {
                "type": "badge",
                "title": "Hot",
                "color": "red",
                "htmlClass": "mr-1 mb-1"
              },
              {
                "type": "badge",
                "title": "Cold",
                "color": "#3684da",
                "htmlClass": "mr-1 mb-1"
              },
              {
                "type": "badge",
                "title": "✉ 3",
                "color": "#7eda2d",
                "htmlClass": "mr-1 mb-1"
              },
              {
                "type": "badge",
                "title": "☆ 12",
                "color": "#f3c72e",
                "tooltip": "Favorites",
                "htmlClass": "mr-1 mb-1"
              },
              {
                "type": "badge",
                "title": "Dynamic color",
                "color": {
                  "$eval": "return 'hsl(' + 360 * Math.random() + ',' + (70 + 25 * Math.random()) + '%,' + (45 + 10 * Math.random()) + '%)'",
                  "dependencies": [
                    "phase"
                  ]
                },
                "htmlClass": "mr-1 mb-1"
              },
              {
                "type": "badge",
                "title": "Dynamic content: {{ value }}",
                "templateData": {
                  "$eval": "return { value: \"Lorem ipsum dolor sit amet \" + $val.phase }",
                  "dependencies": [
                    "phase"
                  ]
                },
                "htmlClass": "mr-1 mb-1"
              },
              {
                "type": "div",
                "items": [
                  {
                    "type": "span",
                    "title": "Inline"
                  },
                  {
                    "type": "badge",
                    "title": "Badge",
                    "htmlClass": "mx-1"
                  },
                  {
                    "type": "span",
                    "title": "with text"
                  }
                ]
              }
            ]
          },
          {
            "type": "col",
            "xs": 12,
            "sm": 6,
            "items": [
              {
                "key": "firstName",
                "placeholder": "First name",
                "preferences": {
                  "variant": "standard"
                },
                "__$editor_$mode_type": "list",
                "tooltip": {
                  "displayAsTitleAttribute": false
                }
              }
            ]
          },
          {
            "type": "col",
            "xs": 12,
            "sm": 6,
            "items": [
              {
                "key": "firstNameNoTitle",
                "placeholder": "First name",
                "preferences": {
                  "variant": "standard"
                }
              }
            ]
          },
          {
            "type": "col",
            "xs": 12,
            "sm": 6,
            "items": [
              {
                "key": "firstName",
                "placeholder": "First name",
                "preferences": {
                  "variant": "standard"
                }
              }
            ]
          },
          {
            "type": "col",
            "xs": 12,
            "sm": 6,
            "items": [
              {
                "key": "firstNameNoTitle",
                "placeholder": "First name",
                "preferences": {
                  "variant": "standard"
                }
              }
            ]
          },
          {
            "type": "col",
            "xs": 12,
            "sm": 6,
            "items": [
              {
                "key": "firstNameNoPlaceholder",
                "preferences": {
                  "variant": "standard"
                }
              }
            ]
          },
          {
            "type": "col",
            "xs": 12,
            "sm": 6,
            "items": [
              {
                "key": "dropdownInput",
                "handlerPreferences": {
                  "stepperButtons": false
                }
              }
            ]
          },
          {
            "type": "col",
            "xs": 12,
            "sm": 6,
            "items": [
              {
                "key": "dropdownInputDisabled",
                "handlerPreferences": {
                  "stepperButtons": false
                }
              }
            ]
          }
        ]
      },
      {
        "type": "image",
        "src": "https://media.giphy.com/media/3o6Zt481isNVuQI1l6/giphy.gif",
        "height": "100px",
        "__$editor_src_value": {
          "basic": "https://media.giphy.com/media/3o6Zt481isNVuQI1l6/giphy.gif"
        },
        "__$editor_$mode_type": "list",
        "__$editor_src_type": "basic",
        "tooltip": {
          "displayAsTitleAttribute": false
        }
      },
      {
        "type": "drawer",
        "items": [
          {
            "type": "drawer-header",
            "items": [
              {
                "type": "row",
                "horizontalAlign": "between",
                "items": [
                  {
                    "type": "col",
                    "xs": "content",
                    "htmlClass": "text-left",
                    "items": [
                      {
                        "type": "row",
                        "verticalAlign": "center",
                        "items": [
                          {
                            "type": "col",
                            "xs": "content",
                            "items": [
                              {
                                "type": "span",
                                "htmlClass": "font-size-h5",
                                "title": "Your price:"
                              }
                            ]
                          },
                          {
                            "type": "col",
                            "xs": "content",
                            "items": [
                              {
                                "type": "span",
                                "htmlClass": "font-size-h3 pr-2",
                                "title": "{{ value }} EUR (incl. VAT)",
                                "templateData": {
                                  "$eval": "return { value: $val.orderCost.data && $val.orderCost.data.total }",
                                  "dependencies": [
                                    "orderCost"
                                  ]
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "type": "col",
                    "xs": "content",
                    "htmlClass": "text-right",
                    "items": [
                      {
                        "type": "button",
                        "title": "Previous",
                        "onClick": {
                          "stepperPrevious": {
                            "id": "@stepper-primary"
                          }
                        },
                        "preferences": {
                          "variant": "stroked",
                          "size": "small"
                        }
                      },
                      {
                        "type": "button",
                        "htmlClass": "ml-1",
                        "title": "Next",
                        "onClick": {
                          "stepperNext": {
                            "id": "@stepper-primary"
                          }
                        },
                        "preferences": {
                          "size": "small"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "drawer-content",
            "items": [
              {
                "type": "heading",
                "level": 2,
                "htmlClass": "mb-3",
                "title": "Order summary",
                "__$editor_$mode_type": "list",
                "tooltip": {
                  "displayAsTitleAttribute": false
                }
              },
              {
                "type": "heading",
                "title": "Something",
                "level": 4
              },
              {
                "type": "heading",
                "title": "Something",
                "level": 5
              },
              {
                "type": "heading",
                "title": "Something",
                "level": 6
              },
              {
                "type": "span",
                "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
              },
              {
                "type": "hr"
              },
              {
                "type": "paragraph",
                "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
              },
              {
                "type": "button",
                "title": "I do nothing"
              }
            ],
            "__$editor_$mode_type": "list",
            "tooltip": {
              "displayAsTitleAttribute": false
            }
          }
        ],
        "__$editor_$mode_type": "list",
        "tooltip": {
          "displayAsTitleAttribute": false
        }
      },
      {
        "type": "stepper",
        "__$editor_$mode_type": "list",
        "tooltip": {
          "displayAsTitleAttribute": false
        },
        "variant": "horizontal",
        "items": []
      }
    ],
    "__$editor_$mode_type": "list",
    "tooltip": {
      "displayAsTitleAttribute": false
    },
    "scroll": {
      "vertical": false,
      "horizontal": false
    }
  }
}