docs: v3 in dropdown (#2704)

* docs: v3 in dropdown

* docs: adjust dropdown dom

see #2703

Author: bennypowers

docs/_data/versions.json

@@ -1,9 +1,15 @@
 [
+  {
+    "version": "v3.0.0",
+    "slug": "v3",
+    "label": "v3",
+    "current": true
+  },
   {
     "version": "v2.0.0",
     "slug": "v2",
     "label": "v2",
-    "current": true
+    "current": false
   },
   {
     "version": "v1.12.3",

docs/_includes/_nav.njk

@@ -12,48 +12,27 @@
             <img alt="PatternFly Elements"
                  src="{{ '/images/pfe-logo-icon-white.svg' | url }}"
                  width="57.5" height="57.5">
-          </picture>  
+          </picture>
         </a>
       </div>
-      {# TODO: implement pf-dropdown
-      <pf-dropdown id="docs-versions-dropdown" aria-label="Docs Versions" label="Docs Versions">
-        {% for version in versions %}
-        {%- if version.current -%}
-          {%- set prefix = '' -%}
-        {%- else -%}
-          {%- set prefix = '/' + version.slug -%}
-        {%- endif %}
-        <pf-dropdown-item
-            item-type="link"
-            data-version="{{ version.slug }}"
-            data-label="{{ version.label }}">
-          <a href="{{ prefix }}{{ page.url }}">{{ version.label }}</a>
-        </pf-dropdown-item>
-        {% endfor %}
+      <pf-dropdown id="docs-versions-dropdown">
+        <pf-button slot="trigger"
+                   variant="control"
+                   icon="caret-down"
+                   icon-set="fas">Versions</pf-button>
+        <pf-dropdown-menu slot="menu">
+          {% for version in versions %}
+          {%- if version.current -%}
+            {%- set prefix = '' -%}
+          {%- else -%}
+            {%- set prefix = '/' + version.slug -%}
+          {%- endif %}
+          <pf-dropdown-item href="{{ prefix }}{{ page.url }}" {{ 'disabled' if version.current }}>
+            {{ version.label }}
+          </pf-dropdown-item>
+          {% endfor %}
+        </pf-dropdown-menu>
       </pf-dropdown>
-      #}
-      <select id="docs-versions-dropdown" aria-label="Docs Versions" oninput="location.href=this.options[this.selectedIndex].value">
-        {% for version in versions %}
-        {%- if version.current -%}
-          {%- set prefix = '' -%}
-        {%- else -%}
-          {%- set prefix = '/' + version.slug -%}
-        {%- endif %}
-        <option
-            value="{{ prefix }}{{ page.url }}"
-            data-version="{{ version.slug }}"
-            data-label="{{ version.label }}">{{ version.label }}</option>
-        {% endfor %}
-      </select>
-      <script type="module">
-        const dropdown = document.getElementById('docs-versions-dropdown');
-        const items = dropdown.querySelectorAll('[data-version]');
-        const versions = Object.fromEntries(Array.from(items, x => [x.dataset.version, x]));
-        const [fst] = new URL(location.href).pathname.split('/').filter(Boolean);
-        let [highest] = Object.keys(versions).sort().reverse();
-        const selected = fst in versions ? versions[fst] : versions[highest];
-        dropdown.setAttribute('label', selected.dataset.label);
-      </script>
     </div>
   </div>
 
@@ -62,7 +41,7 @@
     data-controls="mobile-menu-menu-container">
     <span class="l-header__burger-icon"></span>
     <span class="menu-toggle-assistive-text element-invisible">Toggle menu visibility</span>
-  </label>  
+  </label>
   <div class="menu-toggle__toggleable site-navigation__outer-wrapper">
     <nav class="l-header__site-navigation site-navigation menu-toggle__toggleable-content-wrapper">
       <ul class="site-navigation__wrapper">

netlify.toml

@@ -6,3 +6,9 @@
   to = 'https://release-v1--patternfly-elements.netlify.app/:splat'
   status = 200
   force = true
+
+[[redirects]]
+  from = '/v2/*'
+  to = 'https://release-v2--patternfly-elements.netlify.app/:splat'
+  status = 200
+  force = true