desy-html 5.2.2 → 6.1.0

package/src/templates/components/menu-navigation/_examples.menu-navigation.njk

@@ -0,0 +1,1080 @@
+{% set exampleComponent = "menu-navigation" %}
+{% set examples =  [
+  {
+    "name": "default",
+    "data": {
+      "idPrefix": "default-example",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "default-example-item-1",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "default-example-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "default-example-item-2",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "default-example-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "default-example-item-3",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "default-example-item-3"
+            }
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  },
+  {
+    "name": "with disabled item",
+    "data": {
+      "idPrefix": "with-disabled-item-example",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2"
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "disabled": true
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  },
+  {
+    "name": "with active item",
+    "data": {
+      "idPrefix": "with-active-item-example",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "active": true
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  },
+  {
+    "name": "with target in links",
+    "data": {
+      "idPrefix": "with-targets-in-links-example",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "target": "_blank",
+          "attributes": {
+            "title": "Se abre en ventana nueva"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "target": "_blank",
+          "attributes": {
+            "title": "Se abre en ventana nueva"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "target": "_blank",
+          "attributes": {
+            "title": "Se abre en ventana nueva"
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  },
+  {
+    "name": "with dividers",
+    "data": {
+      "idPrefix": "with-dividers-example",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "divider": {
+            "html": '<div class="absolute h-11 border-l border-neutral-base"></div>'
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "with-dividers-example-parent",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2",
+                "divider": true
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-dividers-example-parent"
+            }
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 4"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  },
+  {
+    "name": "small",
+    "description": "Using classes to display small items",
+    "data": {
+      "idPrefix": "small-example",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "small-example-item-1",
+          "classes": "c-menu-navigation__button--sm -mr-sm",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "small-example-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "small-example-item-2",
+          "classes": "c-menu-navigation__button--sm -mr-sm",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "small-example-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "small-example-item-3",
+          "classes": "c-menu-navigation__button--sm -mr-sm",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "small-example-item-3"
+            }
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  },
+  {
+    "name": "primary",
+    "description": "Using classes to display primary items",
+    "data": {
+      "idPrefix": "primary-example",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "primary-example-item-1",
+          "classes": "c-menu-navigation__button--primary",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "primary-example-item-1"
+            }
+          }
+        },
+        {
+          "text": "Active Item 2",
+          "id": "primary-example-item-2",
+          "classes": "c-menu-navigation__button--primary",
+          "active": true,
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2",
+                "active": true
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "primary-example-item-2"
+            }
+          }
+        },
+        {
+          "text": "Disabled Item 3",
+          "id": "primary-example-item-3",
+          "classes": "c-menu-navigation__button--primary",
+          "disabled": true,
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "primary-example-item-3"
+            }
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  },
+  {
+    "name": "transparent",
+    "description": "Using classes to display transparent items",
+    "data": {
+      "idPrefix": "transparent-example",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "transparent-example-item-1",
+          "classes": "c-menu-navigation__button--transparent",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "transparent-example-item-1"
+            }
+          }
+        },
+        {
+          "text": "Active Item 2",
+          "id": "transparent-example-item-2",
+          "classes": "c-menu-navigation__button--transparent",
+          "active": true,
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2",
+                "active": true
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "transparent-example-item-2"
+            }
+          }
+        },
+        {
+          "text": "Disabled Item 3",
+          "id": "transparent-example-item-3",
+          "classes": "c-menu-navigation__button--transparent",
+          "disabled": true,
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "transparent-example-item-3"
+            }
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  },
+  {
+    "name": "with last item in right side",
+    "data": {
+      "idPrefix": "right-example",
+      "classes": "c-menu-navigation--last-right",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "right-example-item-1",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "right-example-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "right-example-item-2",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "right-example-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "right-example-item-3",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "right-example-item-3"
+            }
+          }
+        },
+        {
+          "text": "Item 4",
+          "id": "right-example-item-4",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "right-example-item-4"
+            }
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  },
+  {
+    "name": "with very long option text",
+    "data": {
+      "idPrefix": "with-very-ling-text-example",
+      "items": [
+        {
+          "href": "#",
+          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. 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."
+        },
+        {
+          "href": "#",
+          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. 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."
+        },
+        {
+          "href": "#",
+          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. 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."
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  },
+  {
+    "name": "with a children item active",
+    "data": {
+      "idPrefix": "nav-item-with-children-active",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "nav-item-item-1-a",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2",
+                "active": true
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "nav-item-item-1-a"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "nav-item-item-2-a",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2",
+                "active": true
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "nav-item-item-2-a"
+            }
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  },
+  {
+    "name": "with disabled or without href in a parent and child",
+    "description": "Use hasUnderline true when you will have mixed, disabled or without href items and normal items.",
+    "data": {
+      "idPrefix": "nav-item-without-href",
+      "items": [
+        {
+          "text": "Item 1 disabled",
+          "id": "nav-item-item-1-b",
+          "disabled": true,
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2 disabled",
+                "disabled": true
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "nav-item-item-1-b"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "nav-item-item-2-b",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "text": "Subitem 2 without href  with href asdfasf adf asdf asdf asdf asdf"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "nav-item-item-2-b"
+            }
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  },
+  {
+    "name": "header",
+    "description": "A menu navigation can be nested in customNavigationHtml in Header component.",
+    "data": {
+      "idPrefix": "header-custom-nav",
+      "classes": "bg-neutral-lighter c-menu-navigation--last-right w-full",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "header-custom-nav-item-1",
+          "classes": "c-menu-navigation__button--header -mr-base uppercase",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "header-custom-nav-item-1"
+            }
+          }
+        },
+        {
+          "text": "Active Item 2",
+          "id": "header-custom-nav-item-2",
+          "classes": "c-menu-navigation__button--header -mr-base uppercase",
+          "active": true,
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2",
+                "active": true
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "header-custom-nav-item-2"
+            }
+          }
+        },
+        {
+          "text": "Disabled Item 3",
+          "id": "header-custom-nav-item-3",
+          "classes": "c-menu-navigation__button--header -mr-base uppercase",
+          "disabled": true,
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "header-custom-nav-item-3"
+            }
+          }
+        },
+        {
+          "text": "Item 4 right",
+          "id": "header-custom-nav-item-4",
+          "classes": "c-menu-navigation__button--header uppercase",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "header-custom-nav-item-4"
+            }
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  },
+  {
+    "name": "with idPrefix",
+    "description": "See code to display the idPrefix applied",
+    "data": {
+      "idPrefix": "with-id-prefix-example",
+      "items": [
+        {
+          "href": "#",
+          "text": "Option 1"
+        },
+        {
+          "href": "#",
+          "text": "Option 2"
+        },
+        {
+          "href": "#",
+          "text": "Option 3"
+        },
+        {
+          "href": "#",
+          "text": "Option 4"
+        },
+        {
+          "href": "#",
+          "text": "Option 5"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  },
+  {
+    "name": "with individual ids",
+    "description": "See code to display the ids applied",
+    "data": {
+      "idPrefix": "with-individual-ids-example",
+      "items": [
+        {
+          "href": "#",
+          "text": "Option 1",
+          "id": "option-A"
+        },
+        {
+          "href": "#",
+          "text": "Option 2",
+          "id": "option-B"
+        },
+        {
+          "href": "#",
+          "text": "Option 3",
+          "id": "option-C"
+        },
+        {
+          "href": "#",
+          "text": "Option 4",
+          "id": "option-D"
+        },
+        {
+          "href": "#",
+          "text": "Option 5",
+          "id": "option-E"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  },
+  {
+    "name": "with attributes",
+    "description": "See code to display the attributes applied",
+    "data": {
+      "idPrefix": "with-attributes-example",
+      "attributes": {
+        "id": "nav-id-example"
+      },
+      "items": [
+        {
+          "href": "#",
+          "text": "Option 1",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Option 2",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        },
+        {
+          "text": "Option 3",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          },
+          "sub": {
+            "attributes": {
+              "data-attribute-1": "value-A",
+              "data-attribute-2": "value-B",
+              "data-attribute-3": "value-C"
+            },
+            "items": [
+              {
+                "href": "#",
+                "text": "Simple link",
+                "attributes": {
+                  "data-attribute-1": "value-A",
+                  "data-attribute-2": "value-B",
+                  "data-attribute-3": "value-C"
+                }
+              },
+              {
+                "href": "#",
+                "text": "Simple link"
+              },
+              {
+                "href": "#",
+                "text": "Simple link"
+              }
+            ]
+          }
+        },
+        {
+          "href": "#",
+          "text": "Option 4",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Option 5",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  },
+  {
+    "name": "with mixed items",
+    "data": {
+      "name": "with-sub-items",
+      "idPrefix": "with-mixed-items-example",
+      "items": [
+        {
+          "href": "#",
+          "text": "Simple link"
+        },
+        {
+          "text": "Item without href and disabled",
+          "disabled": true
+        },
+        {
+          "href": "#",
+          "text": "Simple link"
+        },
+        {
+          "text": "Parent with divider",
+          "divider": {
+            "html": '<div class="absolute h-11 border-l border-neutral-base"></div>'
+          },
+          "id": "with-sub-items-1",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Simple link"
+              },
+              {
+                "href": "#",
+                "text": "Simple link",
+                "target": "_blank",
+                "attributes": {
+                  "title": "Se abre en ventana nueva"
+                }
+              },
+              {
+                "href": "#",
+                "text": "Simple link"
+              },
+              {
+                "href": "#",
+                "text": "Simple link",
+                "divider": true
+              },
+              {
+                "href": "#",
+                "text": "Simple link"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-sub-items-1"
+            }
+          }
+        },
+        {
+          "href": "#",
+          "text": "Simple link"
+        },
+        {
+          "href": "#",
+          "text": "Simple link"
+        },
+        {
+          "text": "Parent",
+          "id": "with-sub-items-2",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem"
+              },
+              {
+                "href": "#",
+                "text": "Active subitem",
+                "active" : true
+              },
+              {
+                "text": "Subitem without href and disabled",
+                "disabled": true
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-sub-items-2"
+            }
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation"
+      }
+    }
+  }
+] %}