From eef27951abeaae101883d610d1b72409bb074a6e Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin@kajabi.com>
Date: Mon, 6 Feb 2023 15:03:06 -0800
Subject: [PATCH 01/23] feat(support): help and feedback drawer content
 additions

---
 docs/app/views/application/_nav.html.erb     |  2 +-
 docs/app/views/application/_scripts.html.erb |  2 +
 docs/app/views/application/_sidebar.html.erb | 12 ++++--
 docs/app/views/pages/_support_modal.html.erb | 45 ++++++++++++++++++++
 docs/app/views/pages/support.html.erb        | 12 +++++-
 5 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 docs/app/views/pages/_support_modal.html.erb

diff --git a/docs/app/views/application/_nav.html.erb b/docs/app/views/application/_nav.html.erb
index 075cdb1757..881d0e41eb 100644
--- a/docs/app/views/application/_nav.html.erb
+++ b/docs/app/views/application/_nav.html.erb
@@ -48,7 +48,7 @@
         name: "stack"
       },
     } %>
-    <!-- COMING SOON 
+    <!-- COMING SOON
     <%= sage_component SageButton, {
       value: "Interactions",
       attributes: {
diff --git a/docs/app/views/application/_scripts.html.erb b/docs/app/views/application/_scripts.html.erb
index 900a87fca3..6d63fd9d7f 100644
--- a/docs/app/views/application/_scripts.html.erb
+++ b/docs/app/views/application/_scripts.html.erb
@@ -22,3 +22,5 @@
     ]);
   });
 </script>
+<script>window.emojicom_widget = { campaign: "LkGzpPulfBOUhuUSKefg" };</script>
+<script src="https://cdn.emojicom.io/embed/widget.js" async></script>
diff --git a/docs/app/views/application/_sidebar.html.erb b/docs/app/views/application/_sidebar.html.erb
index 7a51d03cd1..8c6e92e358 100644
--- a/docs/app/views/application/_sidebar.html.erb
+++ b/docs/app/views/application/_sidebar.html.erb
@@ -123,11 +123,17 @@
       aria_label: "Secondary",
       items: [
         {
-          text: "Get Support",
-          link: pages_support_path,
-          active: current_page?(pages_support_path),
+          text: "Help & Feedback",
+          link: "#support-request",
+          icon: "help-filled",
+          attributes: {
+            "data-js-modaltrigger": "support-request",
+            "data-js-event": "support-request-sidebar"
+          }
         }
       ]
     } %>
   <% end %>
 <% end %>
+
+<%= render "pages/support_modal" %>
diff --git a/docs/app/views/pages/_support_modal.html.erb b/docs/app/views/pages/_support_modal.html.erb
new file mode 100644
index 0000000000..82434fc6cd
--- /dev/null
+++ b/docs/app/views/pages/_support_modal.html.erb
@@ -0,0 +1,45 @@
+<% content_for :sage_docs_modals do %>
+  <%= sage_component SageDrawer, {
+      id: "support-request",
+      show_close: true,
+      size: "33vw",
+      expanded_size: "100vw",
+      disable_background_dismiss: false,
+    } do %>
+    <% content_for :sage_drawer_header do %>
+      <h1>Help & Feedback</h1>
+    <% end %>
+
+    <%= form_tag(pages_search_path, method: :get) do %>
+      <%= sage_component SageInputGroup, {
+        group_id: "panel-component-search",
+        has_button: true,
+        group_buttons: [{
+          icon: "sage-btn--icon-left-search",
+          text: "Search",
+          text_hidden: true,
+          tooltip: false,
+        }],
+        input_type: "search",
+      } do %>
+        <%= sage_component SageFormInput, {
+          id: "search",
+          input_type: "search",
+          label_text: "Search Sage",
+          placeholder: "Search components",
+          value: params[:search] || "",
+        } %>
+      <% end %>
+    <% end %>
+    <div class="docs-panel">
+      <h2>How can we help?</h2>
+      <p>Questions? Head to our <a href="https://slack.com/app_redirect?channel=C01A424HY8Y" target="_blank">#sage-support Slack Channel</a> and join the conversation.</p>
+    </div>
+    <div class="docs-panel">
+      <h2>Share your feedback</h2>
+      <p>We care about improving your experience. Please select an emoji from the choices below to share your feedback.</p>
+      <br>
+      <div id="emojicom-widget-inline"></div>
+    </div>
+  <% end %>
+<% end %>
diff --git a/docs/app/views/pages/support.html.erb b/docs/app/views/pages/support.html.erb
index 8680f8f7b1..52ca8e9a67 100644
--- a/docs/app/views/pages/support.html.erb
+++ b/docs/app/views/pages/support.html.erb
@@ -12,8 +12,18 @@
   <div class="sage-col--lg-6">
   <%= md(%(
 ## We ❤️ Slack
-<p>We believe in being highly collaborative. Head to our <a href="https://slack.com/app_redirect?channel=C01A424HY8Y" target="_blank">Slack Support Channel</a> and join the conversation.</p>
+<p>We believe in being highly collaborative. Head to our <a href="https://slack.com/app_redirect?channel=C01A424HY8Y" target="_blank">#sage-support Slack Channel</a> and join the conversation.</p>
 )) %>
+
+<%= sage_component SageButton, {
+  style: "primary",
+  icon: { name: "help-filled", style: "left" },
+  value: "How can we help?",
+  attributes: {
+    "data-js-modaltrigger": "support-request",
+    "data-js-event": "Open support modal"
+  }
+} %>
   </div>
   <div class="sage-col--lg-6">
   <%= md(%(

From c7fa8e86f45dc621af73d9b1ccf3f14e9404f32f Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin@kajabi.com>
Date: Mon, 6 Feb 2023 15:03:48 -0800
Subject: [PATCH 02/23] feat(search): clean up search form

---
 docs/app/views/pages/search.html.erb | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/docs/app/views/pages/search.html.erb b/docs/app/views/pages/search.html.erb
index 81551c2e82..c8b286e753 100644
--- a/docs/app/views/pages/search.html.erb
+++ b/docs/app/views/pages/search.html.erb
@@ -5,21 +5,25 @@
   <h1>Component Search</h1>
 <% end %>
 <%= form_tag(pages_search_path, method: :get) do %>
-  <%= sage_component SageToolbar, {} do %>
-    <%= sage_component SageToolbarGroup, {} do %>
+    <%= sage_component SageInputGroup, {
+      group_id: "site_search",
+      has_button: true,
+      group_buttons: [{
+        icon: "sage-btn--icon-left-search",
+        text: "Search",
+        text_hidden: true,
+        tooltip: false,
+      }],
+      input_type: "search",
+    } do %>
       <%= sage_component SageFormInput, {
         id: "search",
-        label_text: "Search for a component",
-        placeholder: "Search Sage Components",
+        input_type: "search",
+        label_text: "Search Sage",
+        placeholder: "Search components",
         value: params[:search] || "",
       } %>
-      <%= sage_component SageButton, {
-        value: "Search",
-        style: "primary",
-        attributes: { type: "submit" }
-      } %>
     <% end %>
-  <% end %>
 <% end %>
 <% if @search.present? %>
   <%= sage_component SageCard, { spacer: { top: :xl }} do %>

From 22a0e3d2ef9946009607392ae48e6c4e96bf740d Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin@kajabi.com>
Date: Mon, 6 Feb 2023 17:20:28 -0800
Subject: [PATCH 03/23] feat(sidebar): replace sidebar nav link with button

---
 docs/app/views/application/_sidebar.html.erb | 23 +++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/docs/app/views/application/_sidebar.html.erb b/docs/app/views/application/_sidebar.html.erb
index 8c6e92e358..0c81fb2edd 100644
--- a/docs/app/views/application/_sidebar.html.erb
+++ b/docs/app/views/application/_sidebar.html.erb
@@ -119,19 +119,16 @@
   <% end %>
 
   <%= content_for :sage_sidebar_footer do %>
-    <%= sage_component SageNav, {
-      aria_label: "Secondary",
-      items: [
-        {
-          text: "Help & Feedback",
-          link: "#support-request",
-          icon: "help-filled",
-          attributes: {
-            "data-js-modaltrigger": "support-request",
-            "data-js-event": "support-request-sidebar"
-          }
-        }
-      ]
+    <%= sage_component SageButton, {
+      value: "Help & Feedback",
+      icon: {
+        style: "left",
+        name: "help-filled",
+      },
+      attributes: {
+        "data-js-modaltrigger": "support-request",
+        "data-js-event": "support-request-sidebar"
+      }
     } %>
   <% end %>
 <% end %>

From db51b6d9f6ef46ff01389cce2007519887b564f5 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin@kajabi.com>
Date: Mon, 6 Feb 2023 17:22:10 -0800
Subject: [PATCH 04/23] feat(support): modify footer links and structure

---
 docs/app/views/application/_footer.html.erb | 63 ++++++++++-----------
 1 file changed, 29 insertions(+), 34 deletions(-)

diff --git a/docs/app/views/application/_footer.html.erb b/docs/app/views/application/_footer.html.erb
index d01feffada..a727b82628 100644
--- a/docs/app/views/application/_footer.html.erb
+++ b/docs/app/views/application/_footer.html.erb
@@ -1,44 +1,39 @@
 <% footerContainer ||= false %>
 
-<div class="docs-footer">
+<footer class="docs-footer">
   <% if footerContainer %>
     <div class="sage-container sage-container--xl">
   <% end %>
-
-  <%= sage_component SageButtonGroup, { gap: :md } do %>
-    <%= sage_component SageButton, {
-      value: "Version #{$SAGE_VERSION_GEM}",
-      attributes: {
-        href: $SAGE_RELEASE_URL,
-        target: "_blank",
-        rel: "noopener",
-        title: "Open SageRails gem source"
-      },
-      subtle: true,
-    } %>
-    <%= sage_component SageButton, {
-      value: "SASS Docs",
-      attributes: {
-        href: Rails.application.config.sassdocs_root_url,
-        target: "_blank",
-        rel: "noopener",
-        title: "Open Sassdocs site"
-      },
-      subtle: true,
-    } %>
-    <%= sage_component SageButton, {
-      value: "Storybook",
-      attributes: {
-        href: storybook_url(nil),
-        target: "_blank",
-        rel: "noopener",
-        title: "Open Storybook React components site"
-      },
-      subtle: true,
-    } %>
+  <%= sage_component SageButtonGroup, { gap: :md, align: "space-between" } do %>
+    <%= sage_component SageButtonGroup, { gap: :md } do %>
+      <%= sage_component SageLink, {
+        label: "SassDocs",
+        url: Rails.application.config.sassdocs_root_url,
+        external: true,
+        style: "secondary",
+        remove_underline: true,
+      } %>
+      <%= sage_component SageLink, {
+        label: "Storybook",
+        url: storybook_url(nil),
+        external: true,
+        style: "secondary",
+        remove_underline: true,
+      } %>
+    <% end %>
+    <%= sage_component SageButtonGroup, { gap: :md } do %>
+      <%= sage_component SageLink, {
+        label: "Sage v.#{$SAGE_VERSION_GEM}",
+        url: $SAGE_RELEASE_URL,
+        external: true,
+        style: "secondary",
+        small: true,
+        remove_underline: true,
+      } %>
+    <% end %>
   <% end %>
 
   <% if footerContainer %>
     </div>
   <% end %>
-</div>
+</footer>

From 8d703a08da439f3437053daedbc62320550c71b6 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin@kajabi.com>
Date: Mon, 6 Feb 2023 17:55:45 -0800
Subject: [PATCH 05/23] feat(search): extend rails search, remove invalid attr

---
 docs/app/views/pages/_support_modal.html.erb | 5 ++---
 docs/app/views/pages/search.html.erb         | 3 ++-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/app/views/pages/_support_modal.html.erb b/docs/app/views/pages/_support_modal.html.erb
index 82434fc6cd..6b00ad964d 100644
--- a/docs/app/views/pages/_support_modal.html.erb
+++ b/docs/app/views/pages/_support_modal.html.erb
@@ -12,7 +12,6 @@
 
     <%= form_tag(pages_search_path, method: :get) do %>
       <%= sage_component SageInputGroup, {
-        group_id: "panel-component-search",
         has_button: true,
         group_buttons: [{
           icon: "sage-btn--icon-left-search",
@@ -33,11 +32,11 @@
     <% end %>
     <div class="docs-panel">
       <h2>How can we help?</h2>
-      <p>Questions? Head to our <a href="https://slack.com/app_redirect?channel=C01A424HY8Y" target="_blank">#sage-support Slack Channel</a> and join the conversation.</p>
+      <p>Questions? Suggestions? Head to our <a href="https://slack.com/app_redirect?channel=C01A424HY8Y" target="_blank">#sage-support Slack Channel</a> and join the conversation.</p>
     </div>
     <div class="docs-panel">
       <h2>Share your feedback</h2>
-      <p>We care about improving your experience. Please select an emoji from the choices below to share your feedback.</p>
+      <p>We care about improving your experience! Share your feedback below.</p>
       <br>
       <div id="emojicom-widget-inline"></div>
     </div>
diff --git a/docs/app/views/pages/search.html.erb b/docs/app/views/pages/search.html.erb
index c8b286e753..1a9ec6fff7 100644
--- a/docs/app/views/pages/search.html.erb
+++ b/docs/app/views/pages/search.html.erb
@@ -26,9 +26,10 @@
     <% end %>
 <% end %>
 <% if @search.present? %>
+  <%= @search %>
   <%= sage_component SageCard, { spacer: { top: :xl }} do %>
     <% sorted_sage_components.each do |component| %>
-      <% if component[:title].include? @search %>
+      <% if component[:title].include? @search or component[:description].include? @search %>
         <%= sage_component SageChoice, {
             attributes: {
               href: pages_component_path(component[:title])

From 232cb7953a46fcb1e08830896849f5429fcd7044 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin@kajabi.com>
Date: Mon, 6 Feb 2023 18:10:25 -0800
Subject: [PATCH 06/23] feat(search): formatting fixes

---
 docs/app/views/pages/search.html.erb | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/docs/app/views/pages/search.html.erb b/docs/app/views/pages/search.html.erb
index 1a9ec6fff7..e269c58fda 100644
--- a/docs/app/views/pages/search.html.erb
+++ b/docs/app/views/pages/search.html.erb
@@ -26,19 +26,17 @@
     <% end %>
 <% end %>
 <% if @search.present? %>
-  <%= @search %>
   <%= sage_component SageCard, { spacer: { top: :xl }} do %>
     <% sorted_sage_components.each do |component| %>
       <% if component[:title].include? @search or component[:description].include? @search %>
         <%= sage_component SageChoice, {
-            attributes: {
-              href: pages_component_path(component[:title])
-            },
-            subtext: component[:description],
-            text: component[:title].titleize,
-            type: "arrow",
-          }
-        %>
+          attributes: {
+            href: pages_component_path(component[:title])
+          },
+          subtext: component[:description],
+          text: component[:title].titleize,
+          type: "arrow",
+        } %>
       <% end %>
     <% end %>
   <% end %>

From 30e24dd69e168255697ec7b54f5529786b7d54b5 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin@kajabi.com>
Date: Wed, 8 Feb 2023 17:59:39 -0800
Subject: [PATCH 07/23] feat(support): relocate feedback to footer

---
 docs/app/views/application/_footer.html.erb  | 9 +++++++++
 docs/app/views/pages/_support_modal.html.erb | 1 -
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/docs/app/views/application/_footer.html.erb b/docs/app/views/application/_footer.html.erb
index a727b82628..accd13d705 100644
--- a/docs/app/views/application/_footer.html.erb
+++ b/docs/app/views/application/_footer.html.erb
@@ -6,6 +6,15 @@
   <% end %>
   <%= sage_component SageButtonGroup, { gap: :md, align: "space-between" } do %>
     <%= sage_component SageButtonGroup, { gap: :md } do %>
+      <%= sage_component SagePopover, {
+        custom_content_class: "feedback-popover-panel",
+        icon: "feedback",
+        trigger_icon_only: false,
+        trigger_value: "Was this page helpful?",
+        popover_position: "top",
+      } do %>
+        <div id="emojicom-widget-inline"></div>
+      <% end %>
       <%= sage_component SageLink, {
         label: "SassDocs",
         url: Rails.application.config.sassdocs_root_url,
diff --git a/docs/app/views/pages/_support_modal.html.erb b/docs/app/views/pages/_support_modal.html.erb
index 6b00ad964d..9b0c9498d8 100644
--- a/docs/app/views/pages/_support_modal.html.erb
+++ b/docs/app/views/pages/_support_modal.html.erb
@@ -38,7 +38,6 @@
       <h2>Share your feedback</h2>
       <p>We care about improving your experience! Share your feedback below.</p>
       <br>
-      <div id="emojicom-widget-inline"></div>
     </div>
   <% end %>
 <% end %>

From 4a0c9cf63a9b46750a8611f83ecd6309323cfcf1 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin@kajabi.com>
Date: Wed, 8 Feb 2023 18:00:56 -0800
Subject: [PATCH 08/23] feat(support): sample storybook links

---
 .../sage-react/lib/GettingStarted.story.mdx     |  5 +++++
 packages/sage-react/lib/HelpFeedback.story.mdx  | 17 +++++++++++++++++
 packages/sage-react/lib/Introduction.story.mdx  |  6 +++---
 3 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 packages/sage-react/lib/GettingStarted.story.mdx
 create mode 100644 packages/sage-react/lib/HelpFeedback.story.mdx

diff --git a/packages/sage-react/lib/GettingStarted.story.mdx b/packages/sage-react/lib/GettingStarted.story.mdx
new file mode 100644
index 0000000000..911a3d2ca8
--- /dev/null
+++ b/packages/sage-react/lib/GettingStarted.story.mdx
@@ -0,0 +1,5 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title=" 01 Getting Started" />
+
+# Getting Started
diff --git a/packages/sage-react/lib/HelpFeedback.story.mdx b/packages/sage-react/lib/HelpFeedback.story.mdx
new file mode 100644
index 0000000000..326a1bfd2f
--- /dev/null
+++ b/packages/sage-react/lib/HelpFeedback.story.mdx
@@ -0,0 +1,17 @@
+import { Meta } from "@storybook/addon-docs";
+import { Link } from './Link';
+import { Panel } from './Panel';
+
+<Meta title=" 02 Help & Feedback" />
+
+# Help & Feedback
+
+<Panel className="docs-panel">
+  <Panel.Header title="How can we help?" />
+  Questions? Suggestions? Head to our [#sage-support Slack Channel](#) and join the conversation.
+
+  <Panel.Divider />
+
+  <Panel.Header title="Share your Feedback" />
+  We care about your experience! Let us know how we can improve by sharing your feedback below.
+</Panel>
diff --git a/packages/sage-react/lib/Introduction.story.mdx b/packages/sage-react/lib/Introduction.story.mdx
index 1944bef74d..4e20348700 100644
--- a/packages/sage-react/lib/Introduction.story.mdx
+++ b/packages/sage-react/lib/Introduction.story.mdx
@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/addon-docs";
 
-<Meta title="Introduction" />
+<Meta title="--- Welcome to Sage! ---" />
 
-# Sage React Storybook
+# Sage Design System
+The Sage Design System is our single source of truth, providing everything you need to build great products for our customers. It is the culmination of designers and developers working together to give teams the ability to ship high-quality products faster.
 
-Content coming soon!
\ No newline at end of file

From de72dfacb218c3969c1e9b41cb0cf0ff63f44aad Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin.chang@kajabi.com>
Date: Wed, 1 Mar 2023 11:49:50 -0800
Subject: [PATCH 09/23] docs(support): revised layout

---
 docs/app/views/pages/_support_modal.html.erb | 60 +++++++++++---------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/docs/app/views/pages/_support_modal.html.erb b/docs/app/views/pages/_support_modal.html.erb
index 9b0c9498d8..fc8633655d 100644
--- a/docs/app/views/pages/_support_modal.html.erb
+++ b/docs/app/views/pages/_support_modal.html.erb
@@ -2,7 +2,7 @@
   <%= sage_component SageDrawer, {
       id: "support-request",
       show_close: true,
-      size: "33vw",
+      size: "30vw",
       expanded_size: "100vw",
       disable_background_dismiss: false,
     } do %>
@@ -11,33 +11,39 @@
     <% end %>
 
     <%= form_tag(pages_search_path, method: :get) do %>
-      <%= sage_component SageInputGroup, {
-        has_button: true,
-        group_buttons: [{
-          icon: "sage-btn--icon-left-search",
-          text: "Search",
-          text_hidden: true,
-          tooltip: false,
-        }],
-        input_type: "search",
-      } do %>
-        <%= sage_component SageFormInput, {
-          id: "search",
-          input_type: "search",
-          label_text: "Search Sage",
-          placeholder: "Search components",
-          value: params[:search] || "",
-        } %>
+      <%= sage_component SageToolbar, {} do %>
+        <%= sage_component SageToolbarGroup, {} do %>
+          <%= sage_component SageFormInput, {
+            id: "search",
+            input_type: "search",
+            label_text: "Search Sage",
+            placeholder: "Search Sage components",
+            value: params[:search] || "",
+          } %>
+          <%= sage_component SageButton, {
+            value: "Sign up",
+            style: "primary",
+          } %>
+        <% end %>
+      <% end %>
+    <% end %>
+    <%= sage_component SagePanel, {} do %>
+      <%= sage_component SagePanelHeader, {
+        title: "How can we help?",
+        title_tag: "h2"
+      } %>
+      <%= sage_component SagePanelBlock, { type_block: true } do %>
+        <p>Questions? Head to our <a href="https://slack.com/app_redirect?channel=C01A424HY8Y" target="_blank">#sage-support Slack Channel</a> and join the conversation.</p>
+      <% end %>
+    <% end %>
+    <%= sage_component SagePanel, {} do %>
+      <%= sage_component SagePanelHeader, {
+        title: "Share your feedback",
+        title_tag: "h2",
+      } %>
+      <%= sage_component SagePanelBlock, { type_block: true } do %>
+        <p>Spot a bug or have a suggestion? We care about improving your experience! <a href="https://forms.gle/Y4TGCimUGectGFHq9?utm_source=feedback_form&utm_medium=rails_docs" target="_blank">Share your feedback with us</a>.</p>
       <% end %>
     <% end %>
-    <div class="docs-panel">
-      <h2>How can we help?</h2>
-      <p>Questions? Suggestions? Head to our <a href="https://slack.com/app_redirect?channel=C01A424HY8Y" target="_blank">#sage-support Slack Channel</a> and join the conversation.</p>
-    </div>
-    <div class="docs-panel">
-      <h2>Share your feedback</h2>
-      <p>We care about improving your experience! Share your feedback below.</p>
-      <br>
-    </div>
   <% end %>
 <% end %>

From 741c7f994a63418484600dbbfa3e473b9f43e767 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin.chang@kajabi.com>
Date: Wed, 1 Mar 2023 15:17:24 -0800
Subject: [PATCH 10/23] docs(support): revised storybook layout, text
 adjustments

---
 docs/app/views/pages/_support_modal.html.erb   | 2 +-
 packages/sage-react/lib/HelpFeedback.story.mdx | 4 ++--
 packages/sage-react/lib/Introduction.story.mdx | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/app/views/pages/_support_modal.html.erb b/docs/app/views/pages/_support_modal.html.erb
index fc8633655d..1f372138c1 100644
--- a/docs/app/views/pages/_support_modal.html.erb
+++ b/docs/app/views/pages/_support_modal.html.erb
@@ -42,7 +42,7 @@
         title_tag: "h2",
       } %>
       <%= sage_component SagePanelBlock, { type_block: true } do %>
-        <p>Spot a bug or have a suggestion? We care about improving your experience! <a href="https://forms.gle/Y4TGCimUGectGFHq9?utm_source=feedback_form&utm_medium=rails_docs" target="_blank">Share your feedback with us</a>.</p>
+        <p>Spot a bug or have a suggestion? We care about improving your experience! <a href="https://forms.gle/Y4TGCimUGectGFHq9?utm_source=feedback_form&utm_medium=rails_docs" target="_blank">Let us know how we can improve</a>.</p>
       <% end %>
     <% end %>
   <% end %>
diff --git a/packages/sage-react/lib/HelpFeedback.story.mdx b/packages/sage-react/lib/HelpFeedback.story.mdx
index 326a1bfd2f..35d592cc94 100644
--- a/packages/sage-react/lib/HelpFeedback.story.mdx
+++ b/packages/sage-react/lib/HelpFeedback.story.mdx
@@ -8,10 +8,10 @@ import { Panel } from './Panel';
 
 <Panel className="docs-panel">
   <Panel.Header title="How can we help?" />
-  Questions? Suggestions? Head to our [#sage-support Slack Channel](#) and join the conversation.
+  <p>Questions? Suggestions? Head to our <a href="https://slack.com/app_redirect?channel=C01A424HY8Y" target="_blank">#sage-support Slack Channel</a> and join the conversation.</p>
 
   <Panel.Divider />
 
   <Panel.Header title="Share your Feedback" />
-  We care about your experience! Let us know how we can improve by sharing your feedback below.
+  <p>Spot a bug or have a suggestion? We care about improving your experience! <a href="https://forms.gle/Y4TGCimUGectGFHq9?utm_source=feedback_form&utm_medium=storybook" target="_blank">Let us know how we can improve</a>.</p>
 </Panel>
diff --git a/packages/sage-react/lib/Introduction.story.mdx b/packages/sage-react/lib/Introduction.story.mdx
index 4e20348700..114040391c 100644
--- a/packages/sage-react/lib/Introduction.story.mdx
+++ b/packages/sage-react/lib/Introduction.story.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs";
 
-<Meta title="--- Welcome to Sage! ---" />
+<Meta title="-- Welcome to Sage!" />
 
 # Sage Design System
 The Sage Design System is our single source of truth, providing everything you need to build great products for our customers. It is the culmination of designers and developers working together to give teams the ability to ship high-quality products faster.

From 2c020ca8d8d66c4937da64a118a3a14ac842e675 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin.chang@kajabi.com>
Date: Wed, 1 Mar 2023 16:23:30 -0800
Subject: [PATCH 11/23] docs(feedback): add spacing to form

---
 docs/app/views/pages/_support_modal.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/views/pages/_support_modal.html.erb b/docs/app/views/pages/_support_modal.html.erb
index 1f372138c1..a49d10dd48 100644
--- a/docs/app/views/pages/_support_modal.html.erb
+++ b/docs/app/views/pages/_support_modal.html.erb
@@ -11,7 +11,7 @@
     <% end %>
 
     <%= form_tag(pages_search_path, method: :get) do %>
-      <%= sage_component SageToolbar, {} do %>
+      <%= sage_component SageToolbar, { spacer: { top: :xs } } do %>
         <%= sage_component SageToolbarGroup, {} do %>
           <%= sage_component SageFormInput, {
             id: "search",

From d17d49bf8d30eb48717ec35f9ac1a55be347a215 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin.chang@kajabi.com>
Date: Wed, 1 Mar 2023 17:43:48 -0800
Subject: [PATCH 12/23] refactor(search): add partial

---
 .../views/pages/_component_search.html.erb    | 25 +++++++++++++++++++
 docs/app/views/pages/_support_modal.html.erb  | 19 ++------------
 docs/app/views/pages/search.html.erb          | 22 +---------------
 3 files changed, 28 insertions(+), 38 deletions(-)
 create mode 100644 docs/app/views/pages/_component_search.html.erb

diff --git a/docs/app/views/pages/_component_search.html.erb b/docs/app/views/pages/_component_search.html.erb
new file mode 100644
index 0000000000..a89cd1b06d
--- /dev/null
+++ b/docs/app/views/pages/_component_search.html.erb
@@ -0,0 +1,25 @@
+<%
+  search_btn_style = search_btn_style || "secondary"
+  search_form_spacing = search_form_spacing || "xs"
+%>
+<%= form_tag(pages_search_path, method: :get) do %>
+  <%= sage_component SageToolbar, { spacer: { top: search_form_spacing } } do %>
+    <%= sage_component SageToolbarGroup, {} do %>
+      <%= sage_component SageFormInput, {
+        id: "search",
+        input_type: "search",
+        label_text: "Search Sage",
+        placeholder: "Search Sage components",
+        value: params[:search] || "",
+      } %>
+      <%= sage_component SageButton, {
+        value: "Search",
+        style: search_btn_style,
+        icon: {
+          style: "only",
+          name: "search"
+        }
+      } %>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/docs/app/views/pages/_support_modal.html.erb b/docs/app/views/pages/_support_modal.html.erb
index a49d10dd48..540ba598b7 100644
--- a/docs/app/views/pages/_support_modal.html.erb
+++ b/docs/app/views/pages/_support_modal.html.erb
@@ -10,23 +10,8 @@
       <h1>Help & Feedback</h1>
     <% end %>
 
-    <%= form_tag(pages_search_path, method: :get) do %>
-      <%= sage_component SageToolbar, { spacer: { top: :xs } } do %>
-        <%= sage_component SageToolbarGroup, {} do %>
-          <%= sage_component SageFormInput, {
-            id: "search",
-            input_type: "search",
-            label_text: "Search Sage",
-            placeholder: "Search Sage components",
-            value: params[:search] || "",
-          } %>
-          <%= sage_component SageButton, {
-            value: "Sign up",
-            style: "primary",
-          } %>
-        <% end %>
-      <% end %>
-    <% end %>
+    <%= render "component_search", search_btn_style: "primary" %>
+
     <%= sage_component SagePanel, {} do %>
       <%= sage_component SagePanelHeader, {
         title: "How can we help?",
diff --git a/docs/app/views/pages/search.html.erb b/docs/app/views/pages/search.html.erb
index e269c58fda..32bf680ba9 100644
--- a/docs/app/views/pages/search.html.erb
+++ b/docs/app/views/pages/search.html.erb
@@ -4,27 +4,7 @@
 <%= content_for :heading do %>
   <h1>Component Search</h1>
 <% end %>
-<%= form_tag(pages_search_path, method: :get) do %>
-    <%= sage_component SageInputGroup, {
-      group_id: "site_search",
-      has_button: true,
-      group_buttons: [{
-        icon: "sage-btn--icon-left-search",
-        text: "Search",
-        text_hidden: true,
-        tooltip: false,
-      }],
-      input_type: "search",
-    } do %>
-      <%= sage_component SageFormInput, {
-        id: "search",
-        input_type: "search",
-        label_text: "Search Sage",
-        placeholder: "Search components",
-        value: params[:search] || "",
-      } %>
-    <% end %>
-<% end %>
+<%= render "component_search", search_btn_style: "primary", search_form_spacing: "xl" %>
 <% if @search.present? %>
   <%= sage_component SageCard, { spacer: { top: :xl }} do %>
     <% sorted_sage_components.each do |component| %>

From fedc6c9b28ae7762f9a499be46503bc70d43a7d5 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin.chang@kajabi.com>
Date: Mon, 10 Apr 2023 16:19:40 -0700
Subject: [PATCH 13/23] docs(feedback): replace emojicom

---
 docs/app/views/application/_footer.html.erb  | 20 +++++++++++---------
 docs/app/views/application/_scripts.html.erb |  2 --
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/app/views/application/_footer.html.erb b/docs/app/views/application/_footer.html.erb
index accd13d705..0bfa3eb322 100644
--- a/docs/app/views/application/_footer.html.erb
+++ b/docs/app/views/application/_footer.html.erb
@@ -6,15 +6,17 @@
   <% end %>
   <%= sage_component SageButtonGroup, { gap: :md, align: "space-between" } do %>
     <%= sage_component SageButtonGroup, { gap: :md } do %>
-      <%= sage_component SagePopover, {
-        custom_content_class: "feedback-popover-panel",
-        icon: "feedback",
-        trigger_icon_only: false,
-        trigger_value: "Was this page helpful?",
-        popover_position: "top",
-      } do %>
-        <div id="emojicom-widget-inline"></div>
-      <% end %>
+      <%= sage_component SageButton, {
+        value: "Was this page helpful?",
+        icon: {
+          style: "left",
+          name: "feedback",
+        },
+        attributes: {
+          "data-js-modaltrigger": "support-request",
+          "data-js-event": "support-request-sidebar"
+        }
+      } %>
       <%= sage_component SageLink, {
         label: "SassDocs",
         url: Rails.application.config.sassdocs_root_url,
diff --git a/docs/app/views/application/_scripts.html.erb b/docs/app/views/application/_scripts.html.erb
index 6d63fd9d7f..900a87fca3 100644
--- a/docs/app/views/application/_scripts.html.erb
+++ b/docs/app/views/application/_scripts.html.erb
@@ -22,5 +22,3 @@
     ]);
   });
 </script>
-<script>window.emojicom_widget = { campaign: "LkGzpPulfBOUhuUSKefg" };</script>
-<script src="https://cdn.emojicom.io/embed/widget.js" async></script>

From 9ca65224505df1f694df7a875e2a79ba8d0aa7c8 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin.chang@kajabi.com>
Date: Mon, 10 Apr 2023 17:23:35 -0700
Subject: [PATCH 14/23] docs(feedback): updated drawer components

---
 docs/app/views/pages/_support_modal.html.erb | 47 +++++++++++++++++---
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/docs/app/views/pages/_support_modal.html.erb b/docs/app/views/pages/_support_modal.html.erb
index 540ba598b7..fb618c4af2 100644
--- a/docs/app/views/pages/_support_modal.html.erb
+++ b/docs/app/views/pages/_support_modal.html.erb
@@ -16,18 +16,55 @@
       <%= sage_component SagePanelHeader, {
         title: "How can we help?",
         title_tag: "h2"
-      } %>
+      } do %>
+        <%= sage_component SageLink, {
+          url: "https://slack.com/app_redirect?channel=C01A424HY8Y",
+          label: "#sage-support",
+          external: true,
+          icon: { name: "launch", style: "right" },
+          remove_underline: true,
+          small: true,
+          style: "secondary"
+        } %>
+      <% end %>
       <%= sage_component SagePanelBlock, { type_block: true } do %>
-        <p>Questions? Head to our <a href="https://slack.com/app_redirect?channel=C01A424HY8Y" target="_blank">#sage-support Slack Channel</a> and join the conversation.</p>
+        <p>
+          Questions? Head to our
+          <%= sage_component SageLink, {
+            url: "https://slack.com/app_redirect?channel=C01A424HY8Y",
+            label: "#sage-support Slack Channel",
+            external: true,
+            style: "secondary"
+          } %>
+          and join the conversation.</p>
       <% end %>
     <% end %>
     <%= sage_component SagePanel, {} do %>
       <%= sage_component SagePanelHeader, {
-        title: "Share your feedback",
+        title: "Tell us how we're doing",
         title_tag: "h2",
-      } %>
+      } do %>
+        <%= sage_component SageLink, {
+          url: "https://forms.gle/Y4TGCimUGectGFHq9?utm_source=feedback_form&utm_medium=rails_docs",
+          label: "Share your feedback",
+          external: true,
+          icon: { name: "launch", style: "right" },
+          remove_underline: true,
+          small: true,
+          style: "secondary"
+        } %>
+      <% end %>
       <%= sage_component SagePanelBlock, { type_block: true } do %>
-        <p>Spot a bug or have a suggestion? We care about improving your experience! <a href="https://forms.gle/Y4TGCimUGectGFHq9?utm_source=feedback_form&utm_medium=rails_docs" target="_blank">Let us know how we can improve</a>.</p>
+        <p>
+          Spotted a bug or have an idea or suggestion?
+          <%= sage_component SageLink, {
+            url: "https://forms.gle/Y4TGCimUGectGFHq9?utm_source=feedback_form&utm_medium=rails_docs",
+            label: "Let us know with this form.",
+            external: true,
+            style: "secondary"
+          } %>
+           We care about improving your experience!
+        </p>
       <% end %>
     <% end %>
   <% end %>

From 8aa9cfe5b4c062905349075265cafbdd2106b928 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin.chang@kajabi.com>
Date: Mon, 10 Apr 2023 17:24:11 -0700
Subject: [PATCH 15/23] fix(docs search): add form button type

---
 docs/app/views/pages/_component_search.html.erb | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/app/views/pages/_component_search.html.erb b/docs/app/views/pages/_component_search.html.erb
index a89cd1b06d..a1f42b2e73 100644
--- a/docs/app/views/pages/_component_search.html.erb
+++ b/docs/app/views/pages/_component_search.html.erb
@@ -18,6 +18,9 @@
         icon: {
           style: "only",
           name: "search"
+        },
+        attributes: {
+          type: "submit"
         }
       } %>
     <% end %>

From 00d2141a3815f8e4a5c10ca2e02de01174c88953 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin.chang@kajabi.com>
Date: Mon, 10 Apr 2023 17:41:44 -0700
Subject: [PATCH 16/23] docs(support): revised language in storybook

---
 packages/sage-react/lib/HelpFeedback.story.mdx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/sage-react/lib/HelpFeedback.story.mdx b/packages/sage-react/lib/HelpFeedback.story.mdx
index 35d592cc94..a236747dd5 100644
--- a/packages/sage-react/lib/HelpFeedback.story.mdx
+++ b/packages/sage-react/lib/HelpFeedback.story.mdx
@@ -8,10 +8,20 @@ import { Panel } from './Panel';
 
 <Panel className="docs-panel">
   <Panel.Header title="How can we help?" />
-  <p>Questions? Suggestions? Head to our <a href="https://slack.com/app_redirect?channel=C01A424HY8Y" target="_blank">#sage-support Slack Channel</a> and join the conversation.</p>
+  <Panel.Block sageType={true}>
+    <p>
+      Questions? Head to our <a href="https://slack.com/app_redirect?channel=C01A424HY8Y" target="_blank">#sage-support Slack Channel</a> and join the conversation.
+    </p>
+  </Panel.Block>
 
   <Panel.Divider />
 
   <Panel.Header title="Share your Feedback" />
-  <p>Spot a bug or have a suggestion? We care about improving your experience! <a href="https://forms.gle/Y4TGCimUGectGFHq9?utm_source=feedback_form&utm_medium=storybook" target="_blank">Let us know how we can improve</a>.</p>
+  <Panel.Block sageType={true}>
+    <p>
+      Spotted a bug or have an idea or suggestion?
+      <a href="https://forms.gle/Y4TGCimUGectGFHq9?utm_source=feedback_form&utm_medium=storybook" target="_blank">Let us know with this form.</a>
+      We care about improving your experience!
+    </p>
+  </Panel.Block>
 </Panel>

From 01252b922b6b2b911b9b4bae202bb7f837d10578 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin.chang@kajabi.com>
Date: Tue, 11 Apr 2023 15:07:06 -0700
Subject: [PATCH 17/23] docs(support): rearrange support content

---
 packages/sage-react/lib/GettingStarted.story.mdx |  5 -----
 packages/sage-react/lib/HelpFeedback.story.mdx   |  6 ++----
 packages/sage-react/lib/Introduction.story.mdx   | 16 ++++++++++++++--
 3 files changed, 16 insertions(+), 11 deletions(-)
 delete mode 100644 packages/sage-react/lib/GettingStarted.story.mdx

diff --git a/packages/sage-react/lib/GettingStarted.story.mdx b/packages/sage-react/lib/GettingStarted.story.mdx
deleted file mode 100644
index 911a3d2ca8..0000000000
--- a/packages/sage-react/lib/GettingStarted.story.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-
-<Meta title=" 01 Getting Started" />
-
-# Getting Started
diff --git a/packages/sage-react/lib/HelpFeedback.story.mdx b/packages/sage-react/lib/HelpFeedback.story.mdx
index a236747dd5..685ab63d04 100644
--- a/packages/sage-react/lib/HelpFeedback.story.mdx
+++ b/packages/sage-react/lib/HelpFeedback.story.mdx
@@ -2,7 +2,7 @@ import { Meta } from "@storybook/addon-docs";
 import { Link } from './Link';
 import { Panel } from './Panel';
 
-<Meta title=" 02 Help & Feedback" />
+<Meta title="Help & Feedback" />
 
 # Help & Feedback
 
@@ -19,9 +19,7 @@ import { Panel } from './Panel';
   <Panel.Header title="Share your Feedback" />
   <Panel.Block sageType={true}>
     <p>
-      Spotted a bug or have an idea or suggestion?
-      <a href="https://forms.gle/Y4TGCimUGectGFHq9?utm_source=feedback_form&utm_medium=storybook" target="_blank">Let us know with this form.</a>
-      We care about improving your experience!
+      Spotted a bug or have an idea or suggestion? <a href="https://forms.gle/Y4TGCimUGectGFHq9?utm_source=feedback_form&utm_medium=storybook" target="_blank">Let us know.</a> We care about improving your experience!
     </p>
   </Panel.Block>
 </Panel>
diff --git a/packages/sage-react/lib/Introduction.story.mdx b/packages/sage-react/lib/Introduction.story.mdx
index 114040391c..0910d48321 100644
--- a/packages/sage-react/lib/Introduction.story.mdx
+++ b/packages/sage-react/lib/Introduction.story.mdx
@@ -2,6 +2,18 @@ import { Meta } from "@storybook/addon-docs";
 
 <Meta title="-- Welcome to Sage!" />
 
-# Sage Design System
-The Sage Design System is our single source of truth, providing everything you need to build great products for our customers. It is the culmination of designers and developers working together to give teams the ability to ship high-quality products faster.
+# Building with Sage
+Our design system is the ultimate source of truth, offering a comprehensive and well-structured set of guidelines, components, and resources that empower designers and developers to create exceptional experiences for all Kajabi entrepreneurs. By adhering to our system, we can ensure a consistent, unified, and high-quality user experience across all touchpoints within the Kajabi platform.
 
+## Foundations
+Our design system is built upon a foundation of three core visual elements: Typography, Color, and Icons. These fundamental components work harmoniously to create a consistent and cohesive visual language throughout our designs.
+
+## Components
+Components are the backbone of our design system, acting as the building blocks for crafting seamless and cohesive user interfaces. Our components are available as Rails and React components, maximizing usability and ensuring compatibility with different development environments.
+
+Our extensive documentation provides code examples, property options, and best practices for each component, making it easy for designers and developers to understand and implement them effectively. This thorough documentation empowers teams to create consistent", high-quality experiences while reducing the learning curve and boosting productivity.
+
+## Contributing
+We firmly believe in fostering an inclusive and collaborative environment where everyone feels empowered to participate in the evolution of our design system. The success and longevity of the system depend on the collective efforts and insights of our diverse team, as well as the users who interact with it daily.
+
+We continuously refine and expand our design system to meet evolving needs and expectations by encouraging open communication, feedback, and contributions from all stakeholders. This collaborative approach helps identify potential improvements and new ideas while promoting a shared sense of ownership and investment in the system's success.

From db3c583d3e7ff4517d5b5ecfb3fea8e42cc1533e Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin.chang@kajabi.com>
Date: Thu, 8 Jun 2023 14:03:47 -0700
Subject: [PATCH 18/23] docs(sidebar): deprecation status in sidebar

---
 docs/app/helpers/components_helper.rb                |  1 +
 docs/app/views/application/_sidebar.html.erb         | 11 ++++++++++-
 .../lib/sage-frontend/stylesheets/docs/_sidebar.scss | 12 ++++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/docs/app/helpers/components_helper.rb b/docs/app/helpers/components_helper.rb
index 159a05e336..2a0f1cb9be 100644
--- a/docs/app/helpers/components_helper.rb
+++ b/docs/app/helpers/components_helper.rb
@@ -163,6 +163,7 @@ def sage_components
         responsive: "todo",
         a11y: "done",
         figma_embed: "",
+        deprecated: true
       },
       {
         title: "chart_legend",
diff --git a/docs/app/views/application/_sidebar.html.erb b/docs/app/views/application/_sidebar.html.erb
index 0c81fb2edd..4232164902 100644
--- a/docs/app/views/application/_sidebar.html.erb
+++ b/docs/app/views/application/_sidebar.html.erb
@@ -108,12 +108,21 @@
           text: component[:title].titleize,
           link: pages_component_path(component[:title]),
           active: current_page?(pages_component_path(component[:title])),
+          icon: component[:deprecated] ? "warning" : nil,
+          attributes: {
+            "data-deprecated": component[:deprecated] ? "true" : nil
+          }
         }
       end
     %>
     <%= sage_component SageNav, {
       items: [
-        { link: pages_component_path(sorted_sage_components[0][:title]), text: "COMPONENTS", items: component_list }
+        {
+          link: pages_component_path(sorted_sage_components[0][:title]),
+          text: "COMPONENTS",
+          items: component_list,
+          icon: "product"
+        }
       ]
     } %>
   <% end %>
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss b/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss
index d8bfbfbbda..9b5add99c8 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_sidebar.scss
@@ -18,6 +18,18 @@
   }
 }
 
+[data-deprecated=true] {
+  .sage-sidebar .sage-nav__list & {
+    color: sage-color(charcoal, 200);
+  }
+}
+
+.sage-nav__label {
+  .sage-sidebar [data-deprecated=true] & {
+    color: inherit;
+  }
+}
+
 // Side Navigation Footer Top Border
 // Visual division between the scrolling content and the footer
 .sage-sidebar__footer {

From 4019dd5c42a65e6099406035a5eff141ccf4a511 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin.chang@kajabi.com>
Date: Thu, 8 Jun 2023 14:29:10 -0700
Subject: [PATCH 19/23] docs(sidebar): page category icons

---
 docs/app/views/application/_sidebar.html.erb | 88 +++++++++++---------
 1 file changed, 48 insertions(+), 40 deletions(-)

diff --git a/docs/app/views/application/_sidebar.html.erb b/docs/app/views/application/_sidebar.html.erb
index 4232164902..df0731f836 100644
--- a/docs/app/views/application/_sidebar.html.erb
+++ b/docs/app/views/application/_sidebar.html.erb
@@ -2,30 +2,33 @@
   <% if current_page_foundations? %>
     <%= sage_component SageNav, {
       items: [
-        { link: pages_foundation_path(:design_principles), text: "FOUNDATIONS", items: [
-          {
-            text: "Design Principles",
-            link: pages_foundation_path(:design_principles),
-            active: current_page?(pages_foundation_path(:design_principles)),
-          },
-          {
-            text: "Colors",
-            link: pages_foundation_path(:color),
-            active: current_page?(pages_foundation_path(:color)),
-          },
-          {
-            text: "Typography",
-            link: pages_foundation_path(:typography),
-            active: current_page?(pages_foundation_path(:typography)),
-          },
-          {
-            text: "Icons",
-            link: pages_foundation_path(:icon),
-            active: current_page?(pages_foundation_path(:icon)),
-          }]
-        }
-      ]
-    } %>
+        {
+          link: pages_foundation_path(:design_principles),
+          text: "FOUNDATIONS",
+          icon: "customize",
+          items: [
+            {
+              text: "Design Principles",
+              link: pages_foundation_path(:design_principles),
+              active: current_page?(pages_foundation_path(:design_principles)),
+            },
+            {
+              text: "Colors",
+              link: pages_foundation_path(:color),
+              active: current_page?(pages_foundation_path(:color)),
+            },
+            {
+              text: "Typography",
+              link: pages_foundation_path(:typography),
+              active: current_page?(pages_foundation_path(:typography)),
+            },
+            {
+              text: "Icons",
+              link: pages_foundation_path(:icon),
+              active: current_page?(pages_foundation_path(:icon)),
+            }]
+          }
+    ] } %>
   <% end %>
   <% if current_page_interactions? %>
     <%= sage_component SageNav, {
@@ -43,22 +46,26 @@
   <% if current_page_helpers? %>
     <%= sage_component SageNav, {
       items: [
-        { link: pages_helpers_path(:spacing), text: "HELPERS", items: [
-          {
-            text: "Spacing",
-            link: pages_helpers_path(:spacing),
-            active: current_page?(pages_helpers_path(:spacing)),
-          },
-          {
-            text: "Truncation",
-            link: pages_helpers_path(:truncation),
-            active: current_page?(pages_patterns_path(:truncation)),
-          },
-          {
-            text: "Reveal",
-            link: pages_helpers_path(:reveal),
-            active: current_page?(pages_patterns_path(:reveal)),
-          }
+        {
+          link: pages_helpers_path(:spacing),
+          text: "HELPERS",
+          icon: "code",
+          items: [
+            {
+              text: "Spacing",
+              link: pages_helpers_path(:spacing),
+              active: current_page?(pages_helpers_path(:spacing)),
+            },
+            {
+              text: "Truncation",
+              link: pages_helpers_path(:truncation),
+              active: current_page?(pages_patterns_path(:truncation)),
+            },
+            {
+              text: "Reveal",
+              link: pages_helpers_path(:reveal),
+              active: current_page?(pages_patterns_path(:reveal)),
+            }
         ] },
       ]
     } %>
@@ -96,6 +103,7 @@
       items: [{
         link: pages_layout_path(sage_layouts_sorted[0][:title]),
         text: "LAYOUT TOOLS",
+        icon: "stack",
         items: layout_list
       }]
     } %>

From 3c218a3d9c4bc80910c77bc9c0650cd25649edca Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin.chang@kajabi.com>
Date: Thu, 8 Jun 2023 14:40:49 -0700
Subject: [PATCH 20/23] docs(support): update layouts for modal display

---
 docs/app/views/layouts/full_page.html.erb | 6 ++++++
 docs/app/views/layouts/home.html.erb      | 7 +++++++
 2 files changed, 13 insertions(+)

diff --git a/docs/app/views/layouts/full_page.html.erb b/docs/app/views/layouts/full_page.html.erb
index 118ae2dfcb..da5bdef5f8 100644
--- a/docs/app/views/layouts/full_page.html.erb
+++ b/docs/app/views/layouts/full_page.html.erb
@@ -28,7 +28,13 @@
           <%= render "application/footer" %>
         <% end %>
       <% end %>
+      <%= render "pages/support_modal" %>
       <%= sage_component(SageOverlay, {}) %>
+      <% if content_for? :sage_docs_modals %>
+        <div id="sage-docs-modals">
+          <%= content_for :sage_docs_modals %>
+        </div>
+      <% end %>
     <% end %>
     <%= render "scripts" %>
   <% end %>
diff --git a/docs/app/views/layouts/home.html.erb b/docs/app/views/layouts/home.html.erb
index a9c88d3224..d5ddedf22f 100644
--- a/docs/app/views/layouts/home.html.erb
+++ b/docs/app/views/layouts/home.html.erb
@@ -11,7 +11,14 @@
       link_id: "main-content"
     -%>
     <%= yield %>
+    <%= render "pages/support_modal" %>
     <%= render "application/footer", footerContainer: true %>
+    <%= sage_component(SageOverlay, {}) %>
+    <% if content_for? :sage_docs_modals %>
+      <div id="sage-docs-modals">
+        <%= content_for :sage_docs_modals %>
+      </div>
+    <% end %>
     <%= render "scripts" %>
   </body>
 </html>

From ff69b99ce6ea5e76d8fd3c3beeb4bd4e0292fbe0 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin.chang@kajabi.com>
Date: Thu, 8 Jun 2023 21:15:46 -0700
Subject: [PATCH 21/23] docs(nav): display active page, correct nav icons

---
 docs/app/helpers/nav_helper.rb                |  6 +++
 docs/app/views/application/_nav.html.erb      | 37 +++++++++----------
 docs/app/views/layouts/application.html.erb   |  2 +-
 .../sage-frontend/stylesheets/docs/_nav.scss  | 19 +++++++++-
 4 files changed, 42 insertions(+), 22 deletions(-)
 create mode 100644 docs/app/helpers/nav_helper.rb

diff --git a/docs/app/helpers/nav_helper.rb b/docs/app/helpers/nav_helper.rb
new file mode 100644
index 0000000000..6380b70789
--- /dev/null
+++ b/docs/app/helpers/nav_helper.rb
@@ -0,0 +1,6 @@
+module NavHelper
+  def page_active(page_action, page_controller = "pages")
+    return if current_page?(controller: 'pages', action: 'index')
+    current_page?(controller: page_controller, action: page_action)
+  end
+end
diff --git a/docs/app/views/application/_nav.html.erb b/docs/app/views/application/_nav.html.erb
index 881d0e41eb..939e40df7d 100644
--- a/docs/app/views/application/_nav.html.erb
+++ b/docs/app/views/application/_nav.html.erb
@@ -4,74 +4,71 @@
       value: "Home",
       attributes: {
         href: "/",
-        title: "Home"
+        title: "Home",
+        "data-nav-active": page_active('index') ? "true" : nil
       },
       subtle: true,
       icon: {
         style: "left",
         name: "home"
       },
+      css_classes: "docs-nav__item"
     } %>
     <%= sage_component SageButton, {
       value: "Foundations",
       attributes: {
         href: pages_foundation_path(:design_principles),
-        title: "Foundations"
+        title: "Foundations",
+        "data-nav-active": page_active('foundation') ? "true" : nil
       },
       subtle: true,
       icon: {
         style: "left",
-        name: "form"
+        name: "customize"
       },
+      css_classes: "docs-nav__item"
     } %>
     <%= sage_component SageButton, {
       value: "Components",
       attributes: {
         href: pages_component_path(sorted_sage_components.first[:title]),
-        title: "Components"
+        title: "Components",
+        "data-nav-active": page_active('component') ? "true" : nil
       },
       subtle: true,
       icon: {
         style: "left",
-        name: "folder"
+        name: "product"
       },
+      css_classes: "docs-nav__item"
     } %>
     <%= sage_component SageButton, {
       value: "Layout Tools",
       attributes: {
         href: pages_layout_path(sage_layouts_sorted.first[:title]),
-        title: "Layout Tools"
+        title: "Layout Tools",
+        "data-nav-active": page_active('layout') ? "true" : nil
       },
       subtle: true,
       icon: {
         style: "left",
         name: "stack"
       },
+      css_classes: "docs-nav__item"
     } %>
-    <!-- COMING SOON
-    <%= sage_component SageButton, {
-      value: "Interactions",
-      attributes: {
-        href: pages_interactions_path(:container),
-        title: "JS Interactions"
-      },
-      subtle: true,
-      icon: {
-        style: "left",
-        name: "select"
-      },
-    } %>-->
     <%= sage_component SageButton, {
       value: "Helpers",
       attributes: {
         href: pages_helpers_path(:spacing),
-        title: "Style Helpers"
+        title: "Style Helpers",
+        "data-nav-active": page_active('helpers') ? "true" : nil
       },
       subtle: true,
       icon: {
         style: "left",
         name: "code"
       },
+      css_classes: "docs-nav__item"
     } %>
   <% end %>
 </div>
diff --git a/docs/app/views/layouts/application.html.erb b/docs/app/views/layouts/application.html.erb
index dce1162801..e940252535 100644
--- a/docs/app/views/layouts/application.html.erb
+++ b/docs/app/views/layouts/application.html.erb
@@ -10,7 +10,7 @@
     <%= render "application/content_skip_link",
       link_id: "main-content"
     -%>
-    <%= sage_component(SageHeader, {}) do %>
+    <%= sage_component(SageHeader, {css_classes: "sage-docs-header"}) do %>
       <%= render "application/assistant" %>
     <% end %>
     <%= sage_component(SageStage, {}) do %>
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_nav.scss b/docs/lib/sage-frontend/stylesheets/docs/_nav.scss
index 5104a83d39..a1d82caa7c 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_nav.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_nav.scss
@@ -4,8 +4,11 @@
   For Sage documentation use
 ================================================== */
 
-.docs-nav {
+.sage-docs-header {
+  position: relative;
+}
 
+.docs-nav {
   .sage-btn::before {
     @media screen and (min-width: sage-breakpoint(md-min)) {
       display: none;
@@ -24,6 +27,20 @@
   }
 }
 
+.docs-nav__item > span::before {
+  display: block;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  height: rem(3px);
+  background-color: sage-color(sage, 200);
+}
+
+[data-nav-active=true] > span::before {
+  content: "";
+}
+
 // displays "skip to content" link when focused
 .skip-link:focus,
 .skip-link:focus-within {

From 6a07c9ae4158f994b40415779c6279f2fb0ac9c2 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin.chang@kajabi.com>
Date: Thu, 8 Jun 2023 21:37:53 -0700
Subject: [PATCH 22/23] fix(nav): search page nav route

---
 docs/app/helpers/nav_helper.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/app/helpers/nav_helper.rb b/docs/app/helpers/nav_helper.rb
index 6380b70789..aeafcd9548 100644
--- a/docs/app/helpers/nav_helper.rb
+++ b/docs/app/helpers/nav_helper.rb
@@ -1,6 +1,6 @@
 module NavHelper
   def page_active(page_action, page_controller = "pages")
-    return if current_page?(controller: 'pages', action: 'index')
+    return if current_page?(controller: 'pages', action: 'index') || current_page?(controller: 'pages', action: 'search')
     current_page?(controller: page_controller, action: page_action)
   end
 end

From ececedf92416f9ebce13e813731b6a1a44f217b2 Mon Sep 17 00:00:00 2001
From: Kevin Chang <kevin.chang@kajabi.com>
Date: Thu, 8 Jun 2023 21:38:36 -0700
Subject: [PATCH 23/23] fix(footer): link and icon adjustments

---
 docs/app/views/application/_footer.html.erb | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/app/views/application/_footer.html.erb b/docs/app/views/application/_footer.html.erb
index 0bfa3eb322..8baf4acdb0 100644
--- a/docs/app/views/application/_footer.html.erb
+++ b/docs/app/views/application/_footer.html.erb
@@ -8,6 +8,8 @@
     <%= sage_component SageButtonGroup, { gap: :md } do %>
       <%= sage_component SageButton, {
         value: "Was this page helpful?",
+        subtle: true,
+        style: "primary",
         icon: {
           style: "left",
           name: "feedback",
@@ -23,6 +25,10 @@
         external: true,
         style: "secondary",
         remove_underline: true,
+        icon: {
+          name: "launch",
+          style: "right"
+        },
       } %>
       <%= sage_component SageLink, {
         label: "Storybook",
@@ -30,6 +36,10 @@
         external: true,
         style: "secondary",
         remove_underline: true,
+        icon: {
+          name: "launch",
+          style: "right"
+        },
       } %>
     <% end %>
     <%= sage_component SageButtonGroup, { gap: :md } do %>