desy-html 5.3.0 → 6.0.0

package/docs/ds/_ds.example.menu-navigation.njk

@@ -0,0 +1,494 @@
+{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}
+
+<div class="grid lg:grid-cols-1 gap-xl mb-lg">
+  <div>
+    {{ componentMenuNavigation({
+      "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"
+      }
+    })  }}
+  </div>
+  <div>
+    {{ componentMenuNavigation({
+      "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"
+      }
+    })  }}
+  </div>
+  <div>
+    {{ componentMenuNavigation({
+      "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"
+      }
+    })  }}
+  </div>
+  <div>
+    {{ componentMenuNavigation({
+      "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"
+      }
+    })  }}
+  </div>
+  <div>
+    {{ componentMenuNavigation({
+      "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"
+      }
+    })  }}
+  </div>
+  <div>
+    {{ componentMenuNavigation({
+      "idPrefix": "header-custom-nav",
+      "classes": "bg-black 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"
+      }
+    })  }}
+  </div>
+</div>

package/docs/ds/_ds.example.searchbar.njk

@@ -1,6 +1,15 @@
 {% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
 
 <div class="grid lg:grid-cols-4 gap-xl mb-lg items-start">
+  <div>
+    {{ componentSearchbar({
+      "id": "searchbar-1",
+      "label": {
+        "text": "Buscar",
+        "classes": "not-sr-only"
+      }
+    })  }}
+  </div>
   <div>
     {{ componentSearchbar({
       "id": "searchbar-2",
@@ -35,6 +44,8 @@
       "classes": "w-full"
     })  }}
   </div>
+</div>
+<div class="grid lg:grid-cols-3 gap-xl mb-lg items-start">
   <div>
     {{ componentSearchbar({
       "id": "searchbar-5",
@@ -45,4 +56,32 @@
       "buttonClasses": "m-xs p-0.5 text-xs"
     })  }}
   </div>
+  <div>
+    {{ componentSearchbar({
+      "id": "searchbar-6",
+      "label": {
+        "text": "Buscar en esta página"
+      },
+      "button": {
+        "text": "Buscar",
+        "type": "submit",
+        "classes": "c-button--primary ml-sm"
+      },
+      "classes": "flex-1"
+    })  }}
+  </div>
+  <div>
+    {{ componentSearchbar({
+      "id": "searchbar-7",
+      "label": {
+        "text": "Buscar en esta página"
+      },
+      "button": {
+        "text": "Buscar",
+        "type": "submit",
+        "classes": "c-button--sm ml-sm"
+      },
+      "classes": "flex-1 c-input--sm"
+    })  }}
+  </div>
 </div>