From 73f6eeacbd75da6bd46b250bcbd90df5851bafc9 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 22 May 2025 13:40:35 -0400
Subject: [PATCH] Add help buttons to component pages (#984)

* add help buttons to component pages; fixes #140

* justify start
---
 docs/_layouts/component.njk | 14 ++++++++++++++
 docs/assets/styles/docs.css | 15 +++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/docs/_layouts/component.njk b/docs/_layouts/component.njk
index 70da11fc6..8291943f7 100644
--- a/docs/_layouts/component.njk
+++ b/docs/_layouts/component.njk
@@ -281,4 +281,18 @@
       #}
     </wa-tab-panel>
   </wa-tab-group>
+
+  <wa-divider></wa-divider>
+
+  <div class="component-help">
+    <strong>Need a hand?</strong>
+    <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome-alpha/issues" target="_blank">
+      <wa-icon slot="prefix" name="bug"></wa-icon>
+      Report a bug
+    </wa-button>
+    <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome-alpha/discussions" target="_blank">
+      <wa-icon slot="prefix" name="message-question"></wa-icon>
+      Ask for help
+    </wa-button>
+  </div>
 {% endblock %}
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 2695da882..da58cd0f6 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -741,6 +741,21 @@ wa-scroller:has(.component-table) {
   }
 }
 
+.component-help {
+  display: flex;
+  width: 100%;
+  gap: var(--wa-space-m);
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: start;
+  margin-block-start: var(--wa-space-xl);
+
+  strong {
+    font-size: var(--wa-font-size-s);
+    font-weight: var(--wa-font-weight-semibold);
+  }
+}
+
 /** desktop */
 @media screen and not (max-width: 768px) {
   /* Navigation sidebar */