desy-html 5.0.1 → 5.2.1

package/src/templates/components/tree/_examples.tree.njk

@@ -0,0 +1,1171 @@
+{% set exampleComponent = "tree" %}
+{% set examples =  [
+  {
+    "name": "default",
+    "data": {
+      "name": "default",
+      "classes": "mt-base",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "items": [
+        {
+          "text": "Item 1",
+          "value": "item-1"
+        },
+        {
+          "text": "Item 2",
+          "value": "item-2"
+        },
+        {
+          "text": "Item 3",
+          "value": "item-2"
+        }
+      ]
+    }
+  },
+  {
+    "name": "type checkbox",
+    "data": {
+      "name": "type-checkbox",
+      "classes": "mt-base",
+      "type": "checkbox",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "items": [
+        {
+          "text": "Item 1",
+          "value": "item-1"
+        },
+        {
+          "text": "Item 2",
+          "value": "item-2"
+        },
+        {
+          "text": "Item 3",
+          "value": "item-2"
+        }
+      ]
+    }
+  },
+  {
+    "name": "with hint and error",
+    "data": {
+      "name": "with-hint-and-error",
+      "classes": "mt-base",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "hint": {
+        "text": "Selecciona el organismo al que perteneces."
+      },
+      "errorMessage": {
+        "text": "Error: No tienes permiso para seleccionar ese organismo."
+      },
+      "items": [
+        {
+          "text": "Item 1",
+          "value": "item-1"
+        },
+        {
+          "text": "Item 2",
+          "value": "item-2",
+          "checked": true
+        },
+        {
+          "text": "Item 3",
+          "value": "item-2"
+        }
+      ]
+    }
+  },
+  {
+    "name": "with disabled item",
+    "data": {
+      "name": "with-disabled-item",
+      "classes": "mt-base",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "hint": {
+        "text": "Selecciona el organismo al que perteneces."
+      },
+      "items": [
+        {
+          "text": "Item 1",
+          "value": "item-1"
+        },
+        {
+          "text": "Item 2",
+          "value": "item-2"
+        },
+        {
+          "text": "Item 3",
+          "value": "item-3",
+          "disabled": true
+        }
+      ]
+    }
+  },
+  {
+    "name": "with active item",
+    "data": {
+      "name": "with-active-item",
+      "classes": "mt-base",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "hint": {
+        "text": "Selecciona el organismo al que perteneces."
+      },
+      "items": [
+        {
+          "text": "Item 1",
+          "value": "item-1"
+        },
+        {
+          "text": "Item 2",
+          "value": "item-2",
+          "active": true
+        },
+        {
+          "text": "Item 3",
+          "value": "item-3"
+        }
+      ]
+    }
+  },
+  {
+    "name": "with hints on items",
+    "data": {
+      "name": "with-hints-on-items",
+      "classes": "mt-base",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "items": [
+        {
+          "text": "Item 1",
+          "value": "item-1",
+          "hint": {
+            "text": "Hint on item"
+          }
+        },
+        {
+          "text": "Item 2",
+          "value": "item-2",
+          "hint": {
+            "text": "Hint on item"
+          }
+
+        },
+        {
+          "text": "Item 3",
+          "value": "item-2",
+          "hint": {
+            "text": "Hint on item"
+          }
+
+        }
+      ]
+    }
+  },
+  {
+    "name": "with very long option text",
+    "data": {
+      "name": "with-very-long-option-text",
+      "classes": "mt-base",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "hint": {
+        "text": "Selecciona el organismo al que perteneces."
+      },
+      "items": [
+        {
+          "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.",
+          "value": "item-1"
+        },
+        {
+          "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.",
+          "value": "item-2"
+        },
+        {
+          "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.",
+          "value": "item-3"
+        }
+      ]
+    }
+  },
+  {
+    "name": "with legend as page heading",
+    "data": {
+      "name": "with-legend-as-page-heading",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo",
+          "classes": "c-h2",
+          "isPageHeading": true
+        },
+        "headingLevel": 2
+      },
+      "items": [
+        {
+          "text": "Item 1",
+          "value": "item-1"
+        },
+        {
+          "text": "Item 2",
+          "value": "item-2"
+        },
+        {
+          "text": "Item 3",
+          "value": "item-2"
+        }
+      ]
+    }
+  },
+  {
+    "name": "without fieldset",
+    "data": {
+      "name": "without-fieldset",
+      "items": [
+        {
+          "text": "Item 1",
+          "value": "item-1"
+        },
+        {
+          "text": "Item 2",
+          "value": "item-2"
+        },
+        {
+          "text": "Item 3",
+          "value": "item-2"
+        }
+      ]
+    }
+  },
+  {
+    "name": "with all parent items",
+    "data": {
+      "name": "with-all-parent-items",
+      "classes": "mt-base",
+      "type": "checkbox",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "hint": {
+        "text": "Selecciona el organismo al que perteneces."
+      },
+      "idPrefix": "parent-example",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "parent-example-item-1",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "parent-example-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "parent-example-item-2",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "parent-example-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "parent-example-item-3",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "parent-example-item-3"
+            }
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "with a parent item opened",
+    "description": "expanded: true",
+    "data": {
+      "name": "with-a-parent-item-opened",
+      "classes": "mt-base",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "hint": {
+        "text": "Selecciona el organismo al que perteneces."
+      },
+      "idPrefix": "tree-item",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "tree-item-item-1",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "tree-item-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "tree-item-item-2",
+          "expanded": true,
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "tree-item-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "tree-item-item-3",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "tree-item-item-3"
+            }
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "with many depth levels",
+    "data": {
+      "name": "with-many-depth-levels",
+      "classes": "mt-base",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "hint": {
+        "text": "Selecciona el organismo al que perteneces."
+      },
+      "idPrefix": "tree-item-nodes",
+      "items": [
+        {
+          "text": "Item 1",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Item 2",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Item 3",
+          "expanded": true,
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "sub": {
+                  "items": [
+                    {
+                      "text": "Subitem 1",
+                      "value": "subitem-1"
+                    },
+                    {
+                      "text": "Subitem 2",
+                      "value": "subitem-2"
+                    },
+                    {
+                      "text": "Subitem 3",
+                      "value": "subitem-3"
+                    }
+                  ]
+                }
+              },
+              {
+                "text": "Subitem 2",
+                "sub": {
+                  "items": [
+                    {
+                      "text": "Subitem 1",
+                      "value": "subitem-1"
+                    },
+                    {
+                      "text": "Subitem 2",
+                      "value": "subitem-2"
+                    },
+                    {
+                      "text": "Subitem 3",
+                      "value": "subitem-3"
+                    }
+                  ]
+                }
+              },
+              {
+                "text": "Subitem 3",
+                "expanded": true,
+                "sub": {
+                  "items": [
+                    {
+                      "text": "Subitem 1",
+                      "value": "subitem-1"
+                    },
+                    {
+                      "text": "Subitem 2",
+                      "value": "subitem-2"
+                    },
+                    {
+                      "text": "Subitem 3",
+                      "value": "subitem-3",
+                      "expanded": true,
+                      "sub": {
+                        "items": [
+                          {
+                            "text": "Subitem 1",
+                            "sub": {
+                              "items": [
+                                {
+                                  "text": "Subitem 1",
+                                  "value": "subitem-1"
+                                },
+                                {
+                                  "text": "Subitem 2",
+                                  "value": "subitem-2"
+                                },
+                                {
+                                  "text": "Subitem 3",
+                                  "value": "subitem-3"
+                                }
+                              ]
+                            }
+                          },
+                          {
+                            "text": "Subitem 2",
+                            "sub": {
+                              "items": [
+                                {
+                                  "text": "Subitem 1",
+                                  "value": "subitem-1"
+                                },
+                                {
+                                  "text": "Subitem 2",
+                                  "value": "subitem-2"
+                                },
+                                {
+                                  "text": "Subitem 3",
+                                  "value": "subitem-3"
+                                }
+                              ]
+                            }
+                          },
+                          {
+                            "text": "Subitem 3",
+                            "expanded": true,
+                            "sub": {
+                              "items": [
+                                {
+                                  "text": "Subitem 1",
+                                  "value": "subitem-1"
+                                },
+                                {
+                                  "text": "Subitem 2",
+                                  "value": "subitem-2"
+                                },
+                                {
+                                  "text": "Subitem 3",
+                                  "value": "subitem-3"
+                                }
+                              ]
+                            }
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              }
+            ]
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "indeterminate",
+    "data": {
+      "name": "indeterminate",
+      "classes": "mt-base",
+      "type": "checkbox",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "hint": {
+        "text": "Selecciona el organismo al que perteneces."
+      },
+      "idPrefix": "indeterminate-example",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "indeterminate-example-item-1",
+          "isIndeterminate": true,
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "indeterminate-example-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "indeterminate-example-item-2",
+          "isIndeterminate": true,
+          "indeterminateChecked": true,
+          "checked": false,
+          "expanded": true,
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2",
+                "checked": true
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "indeterminate-example-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "indeterminate-example-item-3",
+          "isIndeterminate": true,
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "indeterminate-example-item-3"
+            }
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "with searchbar",
+    "data": {
+      "name": "with-searchbar",
+      "classes": "mt-base",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "searchbar": {
+        "id": "with-searchbar-searchbar",
+        "label": {
+          "text": "Buscar"
+        },
+        "placeholder": "Buscar organismo"
+      },
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "with-searchbar-item-1",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-searchbar-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "with-searchbar-item-2",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-searchbar-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "with-searchbar-item-3",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-searchbar-item-3"
+            }
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "with searchbar error",
+    "data": {
+      "name": "with-searchbar-error",
+      "classes": "mt-base",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "searchbar": {
+        "id": "with-searchbar-error-searchbar",
+        "label": {
+          "text": "Buscar"
+        },
+        "placeholder": "Buscar organismo",
+        "errorMessage": {
+          "text": "Error: Introduce al menos un carácter",
+          "classes": "mt-xs"
+        }
+      },
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "with-searchbar-error-item-1",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-searchbar-error-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "with-searchbar-error-item-2",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-searchbar-error-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "with-searchbar-error-item-3",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-searchbar-error-item-3"
+            }
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "small",
+    "description": "with classes applied",
+    "data": {
+      "name": "with-classes-applied",
+      "classes": "c-tree--sm mt-sm",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "hint": {
+        "text": "Selecciona el organismo al que perteneces."
+      },
+      "items": [
+        {
+          "text": "Option 1",
+          "value": "option-1",
+          "classes": "-mt-xs pt-1",
+          "label": {
+            "classes": "text-sm -mt-1"
+          }
+        },
+        {
+          "text": "Option 2",
+          "value": "option-2",
+          "classes": "-mt-xs pt-1",
+          "label": {
+            "classes": "text-sm -mt-1"
+          },
+          "expanded": true,
+          "id": "classes-1",
+          "sub": {
+            "items": [
+              {
+                "text": "Item",
+                "value": "item",
+                "classes": "-mt-xs pt-1",
+                "label": {
+                  "classes": "text-sm -mt-1"
+                }
+              },
+              {
+                "text": "Item",
+                "value": "item",
+                "classes": "-mt-xs pt-1",
+                "label": {
+                  "classes": "text-sm -mt-1"
+                },
+                "active": true
+              },
+              {
+                "text": "Item",
+                "value": "item",
+                "classes": "-mt-xs pt-1",
+                "label": {
+                  "classes": "text-sm -mt-1"
+                }
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "classes-1"
+            }
+          }
+        },
+        {
+          "text": "Option 3",
+          "value": "option-3",
+          "classes": "-mt-xs pt-1",
+          "label": {
+            "classes": "text-sm -mt-1"
+          }
+        },
+        {
+          "text": "Option 4",
+          "value": "option-4",
+          "classes": "-mt-xs pt-1",
+          "label": {
+            "classes": "text-sm -mt-1"
+          }
+        },
+        {
+          "text": "Option 5",
+          "value": "option-5",
+          "classes": "-mt-xs pt-1",
+          "label": {
+            "classes": "text-sm -mt-1"
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "with idPrefix",
+    "description": "See code to display the idPrefix applied",
+    "data": {
+      "name": "with-idprefix",
+      "classes": "mt-base",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "hint": {
+        "text": "Selecciona el organismo al que perteneces."
+      },
+      "idPrefix": "tree-menu-item",
+      "items": [
+        {
+          "text": "Option 1",
+          "value": "option-1"
+        },
+        {
+          "text": "Option 2",
+          "value": "option-2"
+        },
+        {
+          "text": "Option 3",
+          "value": "option-3"
+        },
+        {
+          "text": "Option 4",
+          "value": "option-4"
+        },
+        {
+          "text": "Option 5",
+          "value": "option-5"
+        }
+      ]
+    }
+  },
+  {
+    "name": "with individual ids",
+    "description": "See code to display the ids applied",
+    "data": {
+      "name": "with-individual-ids",
+      "classes": "mt-base",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "hint": {
+        "text": "Selecciona el organismo al que perteneces."
+      },
+      "items": [
+        {
+          "text": "Option 1",
+          "value": "option-1",
+          "id": "option-A"
+        },
+        {
+          "text": "Option 2",
+          "value": "option-2",
+          "id": "option-B"
+        },
+        {
+          "text": "Option 3",
+          "value": "option-3",
+          "id": "option-C"
+        },
+        {
+          "text": "Option 4",
+          "value": "option-4",
+          "id": "option-D"
+        },
+        {
+          "text": "Option 5",
+          "value": "option-5",
+          "id": "option-E"
+        }
+      ]
+    }
+  },
+  {
+    "name": "with attributes",
+    "description": "See code to display the attributes applied",
+    "data": {
+      "name": "with-attributes",
+      "classes": "mt-base",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "hint": {
+        "text": "Selecciona el organismo al que perteneces."
+      },
+      "attributes": {
+        "id": "tree-id-example"
+      },
+      "items": [
+        {
+          "text": "Option 1",
+          "value": "option-1",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        },
+        {
+          "text": "Option 2",
+          "value": "option-2",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        },
+        {
+          "text": "Option 3",
+          "value": "option-3",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          },
+          "expanded": true,
+          "sub": {
+            "attributes": {
+              "sub-data-attribute-1": "sub-value-A",
+              "sub-data-attribute-2": "sub-value-B",
+              "sub-data-attribute-3": "sub-value-C"
+            },
+            "items": [
+              {
+                "text": "Item",
+                "value": "item",
+                "attributes": {
+                  "item-data-attribute-1": "item-value-A",
+                  "item-data-attribute-2": "item-value-B",
+                  "item-data-attribute-3": "item-value-C"
+                }
+              },
+              {
+                "text": "Item",
+                "value": "item"
+              },
+              {
+                "text": "Item",
+                "value": "item"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Option 4",
+          "value": "option-4",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        },
+        {
+          "text": "Option 5",
+          "value": "option-5",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        }
+      ]
+    }
+  }
+] %}