docs(tabs): link to tab pattern (#1592)

* docs(tabs): link to tab pattern

* docs: review

* docs(tab): link-to-tab

* docs(tab): link-to-tab

---------

Co-authored-by: Steven Spriggs <[email protected]>

docs/patterns/tabs/index.md

@@ -0,0 +1,53 @@
+---
+title: Tabs
+layout: layouts/pages/basic.njk
+closeScriptTag: </script>
+tags:
+  - pattern
+---
+
+<script type="module">
+  import '@rhds/elements/rh-tabs/rh-tabs.js';
+  import '@rhds/elements/rh-code-block/rh-code-block.js';
+  import '@rhds/elements/rh-button/rh-button.js';
+  import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
+</script>
+
+{% set linkToTabPattern %}{% include './patterns/link-to-tab.html' %}{% endset %}
+
+## Link to tab
+
+<rh-alert state="warning">Use this pattern sparingly. If your tabs serve only as 
+  page navigation, use the [Subnav](/elements/subnavigation) element 
+  instead.</rh-alert>
+
+Use to activate a particular tab when the page's URL hash refers to an element
+within the tab panel, or to the tab itself.
+
+<rh-code-block actions="copy">
+  <span slot="action-label-copy">Copy to Clipboard</span>
+  <span slot="action-label-copy" hidden data-code-block-state="active">Copied!</span>
+  <span slot="action-label-wrap">Toggle word wrap</span>
+  <span slot="action-label-wrap" hidden data-code-block-state="active">Toggle overflow</span>
+<script type="text/html">{{ linkToTabPattern
+  | safe
+  | replace(closeScriptTag, '</' + closeScriptTag + '<script' + ' type="text/html">' + 'script>')
+ }}</script>
+</rh-code-block>
+
+<nav id="simulate-nav" aria-labelledby="simulate-nav-heading">
+  <h3 id="simulate-nav-heading">Navigate to tab</h3>
+  <ul>
+    <li><a href="#north">North tab</a></li>
+    <li><a href="#south">South tab</a></li>
+    <li><a href="#east">East tab</a></li>
+    <li><a href="#west">West tab</a></li>
+    <li><a href="#best">Content inside the West tab</a></li>
+  </ul>
+</nav>
+
+{% include './patterns/link-to-tab.html' %}
+
+[element]: /elements/tabs
+[css-props]: /elements/tabs/code/#css-custom-properties
+

docs/patterns/tabs/patterns/link-to-tab.html

@@ -0,0 +1,36 @@
+<rh-tabs>
+  <rh-tab slot="tab" id="north">North</rh-tab>
+  <rh-tab-panel>The North</rh-tab-panel>
+  <rh-tab slot="tab" id="south">South</rh-tab>
+  <rh-tab-panel>The South</rh-tab-panel>
+  <rh-tab slot="tab" id="east">East</rh-tab>
+  <rh-tab-panel>The East</rh-tab-panel>
+  <rh-tab slot="tab" id="west">West</rh-tab>
+  <rh-tab-panel>
+    The West end is the <a id="best"><em>best</em></a> end.
+  </rh-tab-panel>
+</rh-tabs>
+
+<script type="module">
+  import '@rhds/elements/rh-tabs/rh-tabs.js';
+  import { RhTab } from '@rhds/elements/rh-tabs/rh-tab.js';
+  function activateTabByHash() {
+    const { hash } = location;
+    if (!hash) { return; }
+    const hashTarget = document.querySelector(hash);
+    const tabs = hashTarget.closest('rh-tabs');
+    if (!tabs) { return; }
+    if (hashTarget instanceof RhTab) {
+      tabs.select(hashTarget);
+    } else {
+      const panel = hashTarget?.closest('rh-tab-panel');
+      const panelIndex = Array.from(tabs.querySelectorAll('rh-tab-panel')).indexOf(panel);
+      if (panelIndex >= 0) {
+        tabs.select(panelIndex);
+      }
+    }
+  }
+  addEventListener('hashchange', activateTabByHash);
+  activateTabByHash();
+</script>
+

docs/styles/pages/backpage.css

@@ -51,6 +51,10 @@
     font-size: 1rem;  /* Not a RHDS token */
   }
 
+  :where(article .container rh-code-block) {
+    max-width: 56rem;
+  }
+
   aside {
     grid-area: aside;
     padding-inline: var(--rh-space-lg, 16px);

eleventy.config.cjs

@@ -41,6 +41,7 @@ module.exports = function(eleventyConfig) {
     });
   }
 
+  eleventyConfig.addWatchTarget('docs/patterns/**/*.(html|md)');
   eleventyConfig.addWatchTarget('docs/styles/');
 
   eleventyConfig.addGlobalData('isLocal', isLocal);