Revert "docs: installation tabs code tabs (#1941)"

This reverts commit 46af12a.

docs/_includes/layouts/base.njk

@@ -1,3 +1,12 @@
+---js
+{
+  isPlanned: function(repoStatus, name) {
+    const element = repoStatus.find(element => element.name === name);
+    return element && element.libraries.find(library => library.name === 'RH Elements').status === "Planned";
+  }
+}
+---
+
 {%- set extraPageClasses = bodyClasses or "" -%}
 {%- if title -%}
   {% set extraPageClasses = extraPageClasses + ' page-' + title | slug -%}

docs/_includes/layouts/pages/elements.njk

@@ -0,0 +1,93 @@
+---
+layout: layouts/base.njk
+eleventyComputed:
+  slug: '{{ doc.slug or element.slug }}'
+  title: "{{ doc.pageTitle }} | {{ slug | deslugify }}"
+---
+{%- set inProgress = doc.docsPage.manifest -%}
+{%- set prettyName -%}{{ (doc.alias or doc.slug or element.slug) | deslugify }}{% endset %}
+{%- set planned = isPlanned(repoStatus, prettyName) %}
+{%- set manifest = doc.docsPage.manifest -%}
+{%- set tagName = doc.tagName or element.tagName -%}
+{%- set demos = manifest and manifest.getDemos(doc.docsPage.tagName) -%}
+{%- set demosUrl -%}/elements/{{ slug }}/demos/{%- endset -%}
+
+{% if doc.pageTitle == 'Code' %}
+<link rel="stylesheet" data-helmet href="/styles/pages/code.css">
+{% endif %}
+<link rel="stylesheet" data-helmet href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
+{%- if slug == 'audio-player' %}
+<link rel="stylesheet" data-helmet href="/assets/packages/@rhds/elements/elements/rh-audio-player/rh-audio-player-lightdom.css">
+<noscript data-helmet>
+  <style>
+  rh-audio-player:not([expanded]) rh-transcript:not(:defined) {
+    display: block;
+  }
+  </style>
+</noscript>
+{%- endif %}
+{%- if slug == 'pagination' %}
+<link rel="stylesheet" data-helmet href="/assets/packages/@rhds/elements/elements/rh-pagination/rh-pagination-lightdom.css">
+{%- endif %}
+{%- if slug == 'tile' %}
+<link rel="stylesheet" data-helmet href="/assets/packages/@rhds/elements/elements/rh-tile/rh-tile-lightdom.css">
+{%- endif %}
+<link rel="stylesheet" data-helmet href="/styles/pages/backpage.css">
+<link rel="stylesheet" data-helmet href="/styles/samp.css">
+
+<script type="module" data-helmet>
+  import "/assets/javascript/elements/uxdot-feedback.js";
+  import "/assets/javascript/elements/uxdot-copy-button.js";
+  import '/assets/javascript/elements/uxdot-header.js';
+  import '@rhds/elements/rh-alert/rh-alert.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-footer/rh-footer.js';
+  import '@rhds/elements/rh-subnav/rh-subnav.js';
+  import '@rhds/elements/rh-surface/rh-surface.js';
+  import '@rhds/elements/rh-code-block/rh-code-block.js';
+  import '@rhds/elements/rh-table/rh-table.js';
+  import '@rhds/elements/rh-accordion/rh-accordion.js';
+  import '@rhds/elements/rh-badge/rh-badge.js';
+  import '@rhds/elements/rh-tag/rh-tag.js';
+</script>
+
+{% if not planned %}
+<script type="module" data-helmet>
+  import '@rhds/elements/{{ tagName }}/{{ tagName }}.js';
+</script>
+{% endif %}
+
+{% include 'partials/component/masthead.njk' %}
+{% include 'partials/component/sidenav.njk' %}
+<rh-surface id="main"
+            role="main"
+            color-palette="lightest">
+  <article {% if hasToc and (content | toc).length > 0 %}class="has-toc"{% endif %}>
+    <uxdot-header has-subnav>
+      <h1 id="{{ slug }}" class="page-title">{{ prettyName }}{% if planned %} <rh-tag icon="notification-fill" color="gray">Planned</rh-tag>{% endif %}</h1>
+      <rh-subnav slot="subnav">{% for tab in doc.tabs %}{% if loop.last and demos.length %}
+        <a {{ 'active' if page.url === demosUrl }} href="{{ demosUrl }}">Demos</a>{% endif %}
+        <a {{ 'active' if tab.href == page.url }} href="{{ tab.href }}">
+          {{- tab.pageTitle | capitalize -}}
+        </a>{% endfor %}
+      </rh-subnav>
+    </uxdot-header>
+
+    {% if hasToc and (content | toc).length > 0 %}
+    <div class="aside">
+      <uxdot-toc summary="On this page">
+        {{ content | toc | safe }}
+      </uxdot-toc>
+    </div>
+    {% endif %}
+
+    <div class="container">
+      {{ content | safe }}
+      {% include "partials/component/feedback.html" %}
+      {% include "partials/component/edit-this-page.njk" %}
+    </div>
+
+  </article>
+  {% include "partials/component/back-to-top.njk" %}
+</rh-surface>
+{% include 'partials/component/footer.njk' %}

docs/_includes/layouts/pages/pattern.njk

@@ -1,14 +1,52 @@
 ---
-layout: layouts/pages/has-toc.njk
+layout: layouts/base.njk
 ---
+<link data-helmet
+      rel="stylesheet"
+      href="/styles/pages/backpage.css">
 
 <script data-helmet type="module">
   import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-footer/rh-footer.js';
   import '@rhds/elements/rh-alert/rh-alert.js';
   import '@rhds/elements/rh-subnav/rh-subnav.js';
   import '@rhds/elements/rh-surface/rh-surface.js';
   import '@rhds/elements/rh-code-block/rh-code-block.js';
+  import "/assets/javascript/elements/uxdot-feedback.js";
   import "/assets/javascript/elements/uxdot-pattern.js";
 </script>
+{% if tokenSearch %}
+<script data-helmet
+        type="module"
+        src="/assets/javascript/elements/uxdot-search.js"></script>
+<script data-helmet
+        type="module"
+        src="/assets/javascript/tokens.js"></script>
+{% endif %}
+{% include 'partials/component/masthead.njk' %}
+{% include 'partials/component/sidenav.njk' %}
+{%- if hasToc -%}
+  {%- set tagsForThisPageToc = tocTags or ['h2'] -%}
+  {%- set table = content | toc(tags=tagsForThisPageToc) -%}
+{%- endif -%}
+<rh-surface id="main"
+            role="main"
+            color-palette="lightest">
+  <article {{ "class=has-toc" if table.length > 0 }}>
+  {% include 'partials/component/header.njk' %}
+  {% if table.length > 0 %}
+  <div class="aside">
+    <uxdot-toc summary="On this page">
+      {{ table | safe }}
+    </uxdot-toc>
+  </div>
+  {% endif %}
+  <div class="container">
+    {{ content | safe }}
+    {% include "partials/component/edit-this-page.njk" %}
+  </div>
 
-{{ content | safe }}
+  </article>
+  {% include "partials/component/back-to-top.njk" %}
+</rh-surface>
+{% include 'partials/component/footer.njk' %}

docs/_includes/partials/component/feedback.html

@@ -1,9 +1,5 @@
 {% set related = (doc.tagName if doc.tagName else (title | slug)) | relatedItems %}
 
-<script type="module" data-helmet>
-  import '/assets/javascript/elements/uxdot-feedback.js';
-</script>
-
 <uxdot-feedback>
   {% if related.length %}
     <h2>Related elements or patterns</h2>

docs/_includes/partials/component/footer.njk

@@ -1,8 +1,3 @@
-<script data-helmet type="module">
-  import '@rhds/elements/rh-footer/rh-footer-universal.js';
-  import '@rhds/elements/rh-footer/rh-footer-copyright.js';
-</script>
-
 <rh-footer-universal>
   <h3 slot="links-primary" data-analytics-text="Red Hat legal and privacy links" hidden>Red Hat legal and privacy links</h3>
   <ul slot="links-primary" data-analytics-region="page-footer-bottom-primary">

docs/_includes/partials/component/header.njk

@@ -1,38 +1,25 @@
-{%- set headingId = (heading if heading else title) | lower | slug -%}
-{%- set headingContent = heading or title -%}
-{%- set manifest = doc and doc.docsPage and doc.docsPage.manifest -%}
-{%- if subnav.collection -%}
-  {% set tabs = collections[subnav.collection] | sort(attribute="data.subnav.order") %}
-{%- endif -%}
-{%- if manifest -%}
-  {% set tabs = doc.tabs %}
-  {% set demos = manifest.getDemos(doc.docsPage.tagName) %}
-  {% set planned = repoStatus | isPlanned(prettyName) %}
-  {% set prettyName -%}{{ (doc.alias or doc.slug or element.slug) | deslugify }}{% endset %}
-  {% set headingContent -%}
-    {{ prettyName }}
-    {% if planned %}
-    <rh-tag icon="notification-fill" color="gray">Planned</rh-tag>
-    {% endif %}
-  {% endset %}
-{%- endif -%}
-
 <script type="module" data-helmet>
   import '/assets/javascript/elements/uxdot-header.js';
+  import '/assets/javascript/elements/uxdot-search.js';
 </script>
 
 <uxdot-header {% if subnav.collection %}has-subnav{% endif %} {% if tokenSearch %}has-search {% endif %}>
-  <h1 id="{{ headingId }}" class="page-title">{{ headingContent }}</h1>
-  {% if tokenSearch %}{% include 'partials/component/token-search.html' %}{% endif %}
-  {% if tabs %}
-  <rh-subnav slot="subnav" accessible-label="{{ heading }}">
-  {% for tab in tabs %}
-    {%- set href = tab.url or tab.href -%}
-    {%- set pageUrl = (doc and doc.permalink | replace('index.html', '')) or page.url -%}
-    {%- set title = tab.data.title or tab.pageTitle -%}
-    {%- set active = href == pageUrl -%}
-    <a data-page-url="{{ page.url }}" href="{{ href }}" {{ 'active' if active }}>{{ title | capitalize }}</a>
-  {%- endfor -%}
-  </rh-subnav>
+  <h1 id="{{ (heading if heading else title) | lower | slug }}" class="page-title">{{ heading if heading else title }}</h1>
+
+  {% if tokenSearch %}
+    <form slot="search" id="search-tokens" action="/tokens/search">
+      <uxdot-search id="search-input"
+        name="search"
+        aria-label="Search for tokens"
+        placeholder="Enter a token name"></uxdot-search>
+    </form>
+  {% endif %}
+
+  {% if subnav.collection %}
+    <rh-subnav slot="subnav" accessible-label="{{heading}}">{% for tab in collections[subnav.collection] | sort(attribute="data.subnav.order") %}
+      <a {{ 'active' if tab.url == page.url }} href="{{ tab.url }}">
+        {{ tab.data.title }}
+      </a>{% endfor %}
+    </rh-subnav>
   {% endif %}
 </uxdot-header>

docs/_includes/partials/component/sidenav.njk

@@ -22,7 +22,7 @@
         {%- set href = '/elements/' + slug + '/' -%}
         {%- set active = href === page.url -%}
         {%- set name = (fst.alias) or (slug | deslugify) %}
-        {%- set planned = repoStatus | isPlanned(name) %}
+        {%- set planned = isPlanned(repoStatus, name) %}
         {% if not (tagName in comingSoonItems) %}
         <uxdot-sidenav-dropdown-menu-item href="{{ href }}" {{ 'active' if active }}>
           {{- fst.alias or (slug | deslugify) -}}

docs/_includes/partials/javascript/global.html

@@ -17,11 +17,17 @@
 
   {# only load components that need hydrated (aka interactivity) #}
   <script type="module">
+    import '@rhds/elements/rh-footer/rh-footer-universal.js';
     import '/assets/javascript/elements/uxdot-copy-permalink.js';
     import '/assets/javascript/elements/uxdot-sidenav.js';
     import '/assets/javascript/elements/uxdot-example.js';
   </script>
 
+  {%- if hasToc %}
+  <link rel="stylesheet" href="/assets/javascript/elements/uxdot-toc-lightdom.css">
+  <script type="module" src="/assets/javascript/elements/uxdot-toc.js"></script>
+  {%- endif %}
+
   <script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"></script>
 
 

docs/_plugins/markdown-it.cjs

@@ -54,7 +54,6 @@ function rhdsCodeBlock(md) {
       return html`
         <rh-code-block full-height
                        dedent
-                       actions="wrap copy"
                        highlighting="prerendered"
                        ${slf.renderAttrs(redactedToken)}>${rendered}</rh-code-block>`.trim();
     } else {