desy-html 8.10.2 → 8.12.0

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

@@ -5,6 +5,7 @@
     "data": {
       "name": "por defecto",
       "classes": "mt-base",
+      "id": "tree-default",
       "fieldset": {
         "legend": {
           "text": "Selecciona organismo"
@@ -990,6 +991,7 @@
     "data": {
       "name": "with-many-depth-levels",
       "classes": "mt-base",
+      "id": "tree-item-deep",
       "fieldset": {
         "legend": {
           "text": "Selecciona organismo"
@@ -1810,5 +1812,450 @@
         }
       ]
     }
+  },
+  {
+    "name": "Mostrar u ocultar un item con JavaScript",
+    "description": 'Puedes usar con javascript la función global <code>activateItemsTree(tree, element, show)</code>, para mostrar u ocultar todos los items, usando el id del elemento, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se se mostrará el item expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemsTree("tree-item-js", "tree-item-js-example-item-1", true)</code> para mostrar todos los items expandidos.',
+    "data": {
+      "name": "por defecto",
+      "classes": "mt-base",
+      "id": "tree-item-js",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "idPrefix": "tree-item-js-example",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "tree-item-js-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": "tree-item-js-example-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "tree-item-js-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": "tree-item-js-example-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "tree-item-js-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": "tree-item-js-example-item-3"
+            }
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "Mostrar u ocultar todos los items con JavaScript",
+    "description": 'Puedes usar con javascript la función global <code>activateItemsTree(tree, elements, show)</code>, para mostrar u ocultar todos los items, usando los id de los elementos, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateItemsTree("tree-multiple-items-js", ["tree-multiple-items-js-1", "tree-multiple-items-js-2"], true)</code> para mostrar todos los items expandidos.',
+    "data": {
+      "name": "por defecto",
+      "classes": "mt-base",
+      "id": "tree-multiple-items-js",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "idPrefix": "tree-multiple-items-js-example",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "tree-multiple-items-js-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-multiple-items-js-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "tree-multiple-items-js-2",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "tree-multiple-items-js-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "tree-multiple-items-js-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-multiple-items-js-3"
+            }
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "Mostrar u ocultar todos los items con JavaScript con diferentes estados",
+    "description": 'Puedes usar con javascript la función global <code>activateItemsTree(tree, elements)</code>, para mostrar u ocultar todos los items, usando los id de los elementos, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateItemsTree("tree-multiple-items-states-js", [["tree-multiple-items-states-item-1", true], ["tree-multiple-items-states-item-3", false]])</code> para mostrar todos los items expandidos.',
+    "data": {
+      "name": "por defecto",
+      "classes": "mt-base",
+      "id": "tree-multiple-items-states-js",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "idPrefix": "tree-multiple-items-states-example",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "tree-multiple-items-states-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-multiple-items-states-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "tree-multiple-items-states-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": "tree-multiple-items-states-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "tree-multiple-items-states-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-multiple-items-states-item-3"
+            }
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "Mostrar u ocultar un item con muchos niveles de profundidad con JavaScript ",
+    "description": 'Puedes usar con javascript la función global <code>activateItemsTree(tree, element, show)</code>, para mostrar u ocultar un item, usando el id del elemento, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se se mostrará el item expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemsTree("tree-item-deep-js", "sub-sub-sub-tree-item-nodes-2-2-2-2", true)</code> se abrirá el último elemento del arbol, y el resto de elementos superiores.',
+    "data": {
+      "name": "with-many-depth-levels",
+      "classes": "mt-base",
+      "id": "tree-item-deep-js",
+      "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": false,
+          "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"
+                                }
+                              ]
+                            }
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              }
+            ]
+          }
+        }
+      ]
+    }
   }
 ] %}

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

@@ -135,7 +135,7 @@
   {% if params.searchbar %}
     {{ componentSearchbar(params.searchbar)  }}
   {% endif %}
-  <ul class="c-tree {%- if params.classes %} {{ params.classes }}{% endif %}" role="tree" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-tree">
+  <ul class="c-tree {%- if params.classes %} {{ params.classes }}{% endif %}" id="{%- if params.id %}{{ params.id }}{% endif %}" role="tree" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-tree">
     {% for item in params.items %}
       {% if item %}
         {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}

package/src/templates/components/tree/params.tree.yaml

@@ -60,6 +60,10 @@ params:
     type: string
     required: false
     description: Classes to add to the heading.
+  - name: id
+    type: string
+    required: false
+    description: Specific id attribute for the component. If omitted, then idPrefix option will be applied.
 - name: headingLevel
   type: number
   required: false
@@ -160,4 +164,4 @@ accessibilityCriteria: |
   - indicate if content is expanded or collapsed
   - indicate that there is collapsed content to interact with
 
-  Note that alphagov have known issues against this criteria: https://github.com/alphagov/govuk_elements/issues/575
+  Note that alphagov have known issues against this criteria: https://github.com/alphagov/govuk_elements/issues/575