From d792ac00e9f97005436b0759a670303e1c2e3c55 Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Thu, 16 Oct 2025 17:15:59 -0400
Subject: [PATCH] Add link to Figma Design Kit doc (#1544)

* add Figma to sidebar

* add common styles for step icons

* move sidebar link

* fix missing help button icons

* add signpost `figure` styles

* step icons: it's all relative
---
 .../webawesome/docs/_includes/sidebar.njk     |  6 ++++++
 .../webawesome/docs/_layouts/component.njk    |  4 ++--
 .../webawesome/docs/assets/styles/docs.css    | 21 +++++++++++++++++++
 .../webawesome/docs/assets/styles/utils.css   |  9 ++++++++
 4 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/packages/webawesome/docs/_includes/sidebar.njk b/packages/webawesome/docs/_includes/sidebar.njk
index 2f4f960d0..137010927 100644
--- a/packages/webawesome/docs/_includes/sidebar.njk
+++ b/packages/webawesome/docs/_includes/sidebar.njk
@@ -18,6 +18,12 @@
 <ul>
   <li><a href="https://github.com/shoelace-style/webawesome/discussions" target="_blank">Help &amp; Support</a></li>
   <li><a href="https://github.com/shoelace-style/webawesome/">Source Code</a></li>
+  <li>
+    <span class="wa-split">
+      <a href="/docs/resources/figma">Figma Design Kit</a></li>
+      {{ proBadge() }}
+    </span>
+  </li>
   <li><a href="/docs/resources/community">Community</a></li>
   <li><a href="/docs/resources/accessibility">Accessibility</a></li>
   <li><a href="/docs/resources/browser-support">Browser Support</a></li>
diff --git a/packages/webawesome/docs/_layouts/component.njk b/packages/webawesome/docs/_layouts/component.njk
index 2a0cd4947..038afecc6 100644
--- a/packages/webawesome/docs/_layouts/component.njk
+++ b/packages/webawesome/docs/_layouts/component.njk
@@ -297,11 +297,11 @@
   <div class="component-help">
     <strong>Need a hand?</strong>
     <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome/issues" target="_blank">
-      <wa-icon slot="prefix" name="bug"></wa-icon>
+      <wa-icon slot="start" variant="regular" name="bug"></wa-icon>
       Report a bug
     </wa-button>
     <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome/discussions" target="_blank">
-      <wa-icon slot="prefix" name="message-question"></wa-icon>
+      <wa-icon slot="start" variant="regular" name="message-question"></wa-icon>
       Ask for help
     </wa-button>
   </div>
diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css
index 1c727da5a..3e3a414e7 100644
--- a/packages/webawesome/docs/assets/styles/docs.css
+++ b/packages/webawesome/docs/assets/styles/docs.css
@@ -386,6 +386,27 @@ h1.title {
   }
 }
 
+/* Images & Figures */
+
+figure.signpost {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--wa-space-s);
+
+  img {
+    border: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border);
+  }
+
+  figcaption {
+    color: var(--wa-color-text-quiet);
+    font-size: var(--wa-font-size-xs);
+    line-height: var(--wa-line-height-condensed);
+    text-align: center;
+  }
+}
+
 /* Search list pages */
 wa-page > main:has(> .search-list) {
   max-width: var(--content-width-l);
diff --git a/packages/webawesome/docs/assets/styles/utils.css b/packages/webawesome/docs/assets/styles/utils.css
index b395fed00..59f0e3c38 100644
--- a/packages/webawesome/docs/assets/styles/utils.css
+++ b/packages/webawesome/docs/assets/styles/utils.css
@@ -109,6 +109,15 @@
     line-height: var(--wa-form-control-value-line-height);
     padding-inline: 0.33em;
   }
+
+  /* step icons for ordered instructions */
+  .step-icon {
+    --primary-color: var(--wa-color-neutral-on-normal);
+    --secondary-color: var(--wa-color-neutral-fill-normal);
+    --secondary-opacity: 1;
+    font-size: 2em;
+  }
+
   /* #endregion */
 
   /* #region funsies + cosmetics */