From 90fdb93ae1467a5db46af51ed58456af4707b5a8 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 29 Apr 2024 10:14:11 -0400
Subject: [PATCH] fix missing react tab and copy/code styles

---
 docs/_utils/code-examples.js         | 20 ++++++++++----------
 docs/assets/styles/code-examples.css | 10 +++++++++-
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/docs/_utils/code-examples.js b/docs/_utils/code-examples.js
index 82090839a..d576360af 100644
--- a/docs/_utils/code-examples.js
+++ b/docs/_utils/code-examples.js
@@ -23,7 +23,7 @@ export function codeExamplesPlugin(options = {}) {
       container.querySelectorAll('code.example').forEach(code => {
         const pre = code.closest('pre');
         const adjacentPre = pre.nextElementSibling?.localName === 'pre' ? pre.nextElementSibling : null;
-        const adjacentCode = adjacentPre?.querySelector('code.react') ? adjacentPre.querySelector('code') : null;
+        const adjacentPreForReact = adjacentPre?.querySelector('code.react') ? adjacentPre.querySelector('code') : null;
         const hasButtons = !code.classList.contains('no-buttons');
         const isOpen = code.classList.contains('open') || !hasButtons;
         const noEdit = code.classList.contains('no-edit');
@@ -43,15 +43,15 @@ export function codeExamplesPlugin(options = {}) {
             <div class="code-example-source" id="${id}">
               <wa-tab-group>
                 <wa-tab slot="nav" panel="html">HTML</wa-tab>
-                <wa-tab slot="nav" panel="react">React</wa-tab>
-
-                <wa-tab-panel name="html">
-                  ${pre.outerHTML}
-                </wa-tab-panel>
-
-                <wa-tab-panel name="react">
-                  ${adjacentCode ? adjacentPre.outerHTML : ''}
-                </wa-tab-panel>
+                <wa-tab-panel name="html">${pre.outerHTML}</wa-tab-panel>
+                ${
+                  adjacentPreForReact
+                    ? `
+                      <wa-tab slot="nav" panel="react">React</wa-tab>
+                      <wa-tab-panel name="react">${adjacentPre.outerHTML}</wa-tab-panel>
+                    `
+                    : ''
+                }
               </wa-tab-group>
             </div>
             ${
diff --git a/docs/assets/styles/code-examples.css b/docs/assets/styles/code-examples.css
index bee752cfb..74678cace 100644
--- a/docs/assets/styles/code-examples.css
+++ b/docs/assets/styles/code-examples.css
@@ -31,11 +31,19 @@
 }
 
 .code-example-source pre {
+  position: relative;
+  background-color: var(--wa-color-neutral-fill-subtle);
   border-radius: 0;
+  padding: 0;
   margin: 0;
+  white-space: normal;
 
   code {
-    background: transparent;
+    display: block;
+    background-color: transparent;
+    padding: var(--wa-space-m);
+    white-space: pre;
+    overflow-x: auto;
   }
 }