[site] : site updates 5.0.0 iteration 1

site/site.yml

@@ -21,10 +21,17 @@ rewriteRules:
   "CONTRIBUTING.md": "/introduction/contributing"
   "docs/INSTALLATION_GUIDE.md": "/introduction"
   "docs/BROWSER_SUPPORT.md": "/introduction/browser-support"
+
   "src/modules/esl-base-element/README.md": "/core/esl-base-element"
   "src/modules/esl-mixin-element/README.md": "/core/esl-mixin-element"
   "src/modules/esl-media-query/README.md": "/core/esl-media-query"
   "src/modules/esl-traversing-query/README.md": "/core/esl-traversing-query"
+  "src/modules/esl-event-listener/README.md": "/core/esl-event-listener"
+  "src/modules/esl-event-listener/docs/1-overview.md": "/core/esl-event-listener/overview"
+  "src/modules/esl-event-listener/docs/2-public-api.md": "/core/esl-event-listener/public-api"
+  "src/modules/esl-event-listener/docs/3-extended-targets.md": "/core/esl-event-listener/extended-targets"
+  "src/modules/esl-event-listener/docs/4-core-support.md": "/core/esl-event-listener/core-support"
+
   "src/modules/esl-trigger/README.md": "/components/esl-trigger"
   "src/modules/esl-toggleable/README.md": "/components/esl-toggleable"
   "src/modules/esl-tab/README.md": "/components/esl-tab"

site/src/navigation/sidebar/sidebar-content.less

@@ -21,7 +21,6 @@ esl-d-sidebar {
     margin: 0 2px;
     padding: 0 8px;
     align-items: center;
-    margin-bottom: 20px;
 
     color: inherit;
     text-decoration: none;
@@ -39,13 +38,12 @@ esl-d-sidebar {
 
   .sidebar-title {
     flex: 1 0 auto;
-    padding-left: 2px;
+    padding-inline: 16px;
     overflow: hidden;
 
     font-size: 0.95rem;
     font-weight: 600;
     line-height: 20px;
-    text-align: center;
     text-transform: uppercase;
 
     opacity: 1;
@@ -63,7 +61,8 @@ esl-d-sidebar {
 
     height: 100%;
     margin-top: 0;
-    @media @md-lg {
+
+    @media @md-xl {
       margin-top: 30px;
     }
   }

site/src/navigation/sidebar/sidebar-primary-nav.less

@@ -112,9 +112,7 @@ esl-d-sidebar {
     transform-origin: center;
     transition: transform 0.5s ease-in-out;
   }
-  .sidebar-nav-item-trigger[active] {
-    &.sidebar-nav-item-arrow::after {
-      transform: rotate(180deg);
-    }
+  .sidebar-nav-item-arrow[active]::after {
+    transform: rotate(180deg);
   }
 }

site/src/navigation/sidebar/sidebar-seccondary-nav.less

@@ -4,19 +4,24 @@ esl-d-sidebar {
   .sidebar-nav-secondary {
     width: 100%;
   }
+
   .sidebar-nav-secondary-list {
     padding: 2px 0;
   }
+
   .sidebar-nav-secondary-item {
     display: block;
     position: relative;
-    padding: 10px 35px 10px 70px;
+    padding-block: 10px;
+    padding-inline-end: 35px;
+    padding-inline-start: var(--padding-inline-start);
+    --padding-inline-start: 70px;
 
     @media @sm {
-      padding-left: 81px;
+      --padding-inline-start: 81px;
     }
     @media @md-xl {
-      padding-left: 66px;
+      --padding-inline-start: 66px;
     }
 
     &.active {
@@ -27,7 +32,40 @@ esl-d-sidebar {
         fade(@nav-dark-selected, 0%)
       );
     }
+
+    &.sidebar-nav-item-container {
+      padding: 0;
+    }
+
+    .sidebar-nav-item-heading {
+      display: block;
+      padding-block: 10px;
+      padding-inline-end: 35px;
+      padding-inline-start: var(--padding-inline-start);
+
+      .sidebar-nav-secondary-link {
+        display: inline-block;
+      }
+
+      .sidebar-nav-item-trigger {
+        display: inline-block;
+        position: relative;
+        margin: 0;
+
+        // Extra click area
+        &::before {
+          content: '';
+          position: absolute;
+          inset: -5px;
+        }
+      }
+    }
+
+    .sidebar-nav-secondary-item {
+      padding-inline-start: calc(var(--padding-inline-start) + 30px);
+    }
   }
+
   .sidebar-nav-secondary-link {
     display: block;
     font-size: 1rem;

site/src/navigation/sidebar/sidebar-share.less

@@ -20,15 +20,13 @@ esl-d-sidebar {
       padding-left: 36px;
     }
 
-    .esl-share {
+    .esl-share-list {
+      max-width: 100%;
       display: flex;
       align-items: center;
-    }
+      justify-content: space-between;
 
-    .esl-share-list {
-      max-width: 100%;
-      flex: 0 0 auto;
-      margin: 0 -5px; // Offset for facebook icon
+      margin: 0 -4px; // Offset for facebook icon
       gap: 1.75rem;
       @media @sm-xl {
         gap: 0.65rem;

site/src/navigation/sidebar/sidebar.less

@@ -1,6 +1,12 @@
 @import (reference) '../../common/variables.less';
 
 esl-d-sidebar {
+  --esl-sidebar-width: 100vw;
+  --esl-sidebar-width-closed: 72px;
+  @media @sm-xl {
+    --esl-sidebar-width: 21rem;
+  }
+
   display: block;
   @media print {
     display: none;
@@ -36,13 +42,7 @@ esl-d-sidebar {
 
   &,
   & .sidebar-content {
-    width: 100vw;
-    @media @sm {
-      width: 20rem;
-    }
-    @media @md-xl {
-      width: 16.875rem;
-    }
+    width: var(--esl-sidebar-width);
   }
 
   @media @xs-sm {
@@ -58,19 +58,15 @@ esl-d-sidebar {
   @media @md-xl {
     position: relative;
     top: 0;
+    max-width: var(--esl-sidebar-width-closed);
     height: var(--100vh, 100vh);
-    max-width: 72px;
-
     @supports (height: 100dvh) {
       height: 100dvh;
     }
   }
 
   &.open {
-    max-width: 100vw;
-    @media @md-xl {
-      max-width: 16.875rem;
-    }
+    max-width: var(--esl-sidebar-width);
   }
 
   @media @md-xl {

site/src/navigation/sidebar/sidebar.ts

@@ -15,7 +15,7 @@ export class ESLDemoSidebar extends ESLToggleable {
   @prop() public override closeOnEsc = true;
   @prop() public override closeOnOutsideAction = true;
 
-  @prop() public submenus: string = '.sidebar-nav-secondary';
+  @prop() public submenus: string = 'esl-panel';
   @prop() public activeMenuAttr: string = 'data-open';
 
   @boolAttr({name: 'animation'}) protected _animation: boolean;
@@ -44,9 +44,13 @@ export class ESLDemoSidebar extends ESLToggleable {
   }
 
   public expandActive(noAnimate: boolean = false): void {
-    this.$submenus
-      .filter((menu) => menu.hasAttribute('data-open'))
-      .forEach((menu) => menu.show({noAnimate, activator: this}));
+    const $open = this.$submenus.filter((menu) => menu.hasAttribute('data-open'));
+    const $children = $open.filter((menu) => !!menu.parentElement?.closest(this.submenus));
+    const $roots = $open.filter((menu) => !$children.includes(menu));
+
+    // TODO: fix order on ESLPanel level
+    $children.forEach(($menu) => $menu.show({noAnimate: true, activator: this}));
+    $roots.forEach(($menu) => $menu.show({noAnimate, activator: this}));
   }
 
   protected override updateA11y(): void {

site/src/playground/ui-playground.ts

@@ -15,10 +15,17 @@ UIPRenderingTemplatesService.add('default', `
     <head>
       <title>{title}</title>
       <base href="${location.origin}"/>
+      <style>
+        html, body {
+          overflow: clip;
+          height: 100%;
+          max-height: 100%;
+        }
+      </style>
       <link rel="stylesheet" href="/bundles/lib.css">
       <script type="module">{script}</script>
     </head>
-    <body style="overflow: hidden;">
+    <body>
       <div uip-content-root>{content}</div>
     </body>
   </html>

site/views/_includes/navigation/footer-menu.njk

@@ -8,7 +8,7 @@
              close-on-esc>
     <ul class="footer-list">
       {% if collections[collection] %}
-        {% for item in collections[collection] | exclude('data.hidden') | releasedStrict | sortBy('order', 'name') %}
+        {% for item in collections[collection] | exclude('data.hidden') | exclude('data.parent') | releasedStrict | sortBy('order', 'name') %}
           <li class="footer-item">
             <a class="footer-link" href="{{ item.url | url }}">{{ item.data.name }}</a>
           </li>

site/views/_includes/navigation/sidebar-item.njk

@@ -1,12 +1,11 @@
-{% macro navitem(title, collection, icon, opt = {}) %}
+{% macro navItem(title, collection, icon, opt = {}) %}
   {% set isDraftCollection = collection == 'draft' %}
   {% set isPrimaryActive = functions.isActivePath(page.url, collection) %}
 
   {% if isDraftCollection and not env.isDev %}
-
-    {% set items = collections[collection] | filter('url', page.url) %}
+    {% set items = collections[collection] | filter('url', page.url) | tree %}
   {% else %}
-    {% set items = collections[collection] | released %}
+    {% set items = collections[collection] | released | tree %}
   {% endif %}
 
   {% if items.length %}
@@ -35,40 +34,80 @@
              {% if isPrimaryActive %}data-open{% endif %}
              group="esl-nav"
              fallback-duration="400">
-    <ul class="sidebar-nav-secondary-list">
-      <esl-a11y-group targets="::child(li)::find(.sidebar-nav-secondary-link)"></esl-a11y-group>
-      {% for item in items | sortBy('order', 'name') %}
-        {% set isActive = page.url === item.url %}
-        {% set isDraft = [].concat(item.data.tags).includes('draft') %}
-        {% set isNew = [].concat(item.data.tags).includes('new') %}
-        {% set isBeta = [].concat(item.data.tags).includes('beta') %}
-        {% set isDeprecated = [].concat(item.data.tags).includes('deprecated') %}
-        {% set isPlayground = [].concat(item.data.tags).includes('playground') %}
-        <li class="sidebar-nav-secondary-item {{ 'active' if isActive }} {{ 'draft' if isDraft }}"
-            {% if isActive %}aria-selected="true"{% endif %}>
-          <a class="sidebar-nav-secondary-link"
-             {% if isActive %}aria-current="page"{% endif %} {% if isDraft %}rel="nofollow"{% endif %}
-             href="{{ item.url | url }}">
-            {% if isNew %}
-              <sup class="badge badge-sup badge-success badge-sidebar">new</sup>
-            {% endif %}
-            {% if isBeta %}
-              <sup class="badge badge-sup badge-warning badge-sidebar">beta</sup>
-            {% endif %}
-            {% if isDraft %}
-              <sup class="badge badge-sup badge-danger badge-sidebar" {% if isDraftCollection %}hidden{% endif %}>draft</sup>
-            {% endif %}
-            {% if isDeprecated %}
-              <span class="badge badge-img badge-deprecated badge-sidebar" aria-label="Deprecated component" title="Deprecated component"></span>
-            {% endif %}
-            {% if isPlayground %}
-              <span class="badge badge-img badge-playground badge-sidebar" aria-label="Live code" title="Page with a live code example"></span>
-            {% endif %}
-            {{ item.data.name }}
-          </a>
-        </li>
-      {% endfor %}
-    </ul>
+    {{ linkList(items, isDraftCollection) }}
   </esl-panel>
   {% endif %}
 {% endmacro %}
+
+{% macro linkList(items, isDraftCollection) %}
+  <ul class="sidebar-nav-secondary-list">
+    <esl-a11y-group targets="::child(li)::find(.sidebar-nav-secondary-link)"></esl-a11y-group>
+    {% for item in items | sortBy('order', 'name') %}
+      {% if item.children.length %}
+        {{ subnavItem(item, isDraftCollection) }}
+      {% else %}
+        {{ link(item, isDraftCollection) }}
+      {% endif %}
+    {% endfor %}
+  </ul>
+{% endmacro %}
+
+{% macro subnavItem(item, isDraftCollection) %}
+  {% set isActive = page.url === item.url %}
+  {% set hasActive = functions.isActivePath(page.url, item.url) %}
+  {% set isDraft = [].concat(item.data.tags).includes('draft') %}
+
+  <li class="sidebar-nav-secondary-item sidebar-nav-item-container {{ 'draft' if isDraft }}"
+      {% if hasActive %}aria-selected="true"{% endif %}>
+    <div class="sidebar-nav-item-heading sidebar-nav-item-heading-secondary {{ 'active' if hasActive }}">
+      <a class="sidebar-nav-secondary-link"
+         {% if isActive %}aria-current="page"{% endif %} {% if isDraft %}rel="nofollow"{% endif %}
+         href="{{ item.url | url }}">
+        {{ badgeByTags(item.data.tags, isDraftCollection) }}
+        {{ item.data.name }}
+      </a>
+      <esl-trigger class="sidebar-nav-item-trigger sidebar-nav-item-arrow"
+                   target="::parent::next"
+                   a11y-label-active="Collapse {{ item.data.name }} section"
+                   a11y-label-inactive="Expand {{ item.data.name }} section"
+                   {% if hasActive %}active{% endif %}>
+      </esl-trigger>
+    </div>
+
+    <esl-panel class="sidebar-nav-secondary {{ 'open' if hasActive }}"
+               {% if hasActive %}data-open{% endif %}
+               fallback-duration="400">
+      {{ linkList(item.children, isDraftCollection) }}
+    </esl-panel>
+  </li>
+{% endmacro %}
+
+{% macro link(item, isDraftCollection) %}
+  {% set isActive = page.url === item.url %}
+  {% set isDraft = [].concat(item.data.tags).includes('draft') %}
+
+  <li class="sidebar-nav-secondary-item {{ 'active' if isActive }} {{ 'draft' if isDraft }}"
+      {% if isActive %}aria-selected="true"{% endif %}>
+    <a class="sidebar-nav-secondary-link"
+       {% if isActive %}aria-current="page"{% endif %} {% if isDraft %}rel="nofollow"{% endif %}
+       href="{{ item.url | url }}">
+      {{ badgeByTags(item.data.tags, isDraftCollection) }}
+      {{ item.data.name }}
+    </a>
+  </li>
+{% endmacro %}
+
+{% macro badgeByTags(tags, isDraftCollection) %}
+  {# Tags checks ordered by priority, due to displaying single badge #}
+  {% if tags.includes('deprecated') %}
+    <span class="badge badge-sidebar badge-img badge-deprecated" title="Deprecated component" aria-label="Deprecated component"></span>
+  {% elif tags.includes('draft') and not isDraftCollection %}
+    <sup class="badge badge-sidebar badge-sup badge-danger" title="Just a draft version of the page">draft</sup>
+  {% elif tags.includes('beta') %}
+    <sup class="badge badge-sidebar badge-sup badge-warning" title="Beta version (could change in a minor update)">beta</sup>
+  {% elif tags.includes('updated') %}
+    <sup class="badge badge-sidebar badge-sup badge-success" title="Updated" aria-label="Updated">upd*</sup>
+  {% elif tags.includes('new') %}
+    <sup class="badge badge-sidebar badge-sup badge-success" title="New article and functionality">new</sup>
+  {% endif %}
+{% endmacro %}