[SPIKE][DSS-29] ongoing feedback display

docs/app/helpers/components_helper.rb

@@ -163,6 +163,7 @@ def sage_components
         responsive: "todo",
         a11y: "done",
         figma_embed: "",
+        deprecated: true
       },
       {
         title: "chart_legend",

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: 'pages', action: 'search')
+    current_page?(controller: page_controller, action: page_action)
+  end
+end

docs/app/views/application/_footer.html.erb

@@ -1,44 +1,60 @@
 <% 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 SageButton, {
+        value: "Was this page helpful?",
+        subtle: true,
+        style: "primary",
+        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,
+        external: true,
+        style: "secondary",
+        remove_underline: true,
+        icon: {
+          name: "launch",
+          style: "right"
+        },
+      } %>
+      <%= sage_component SageLink, {
+        label: "Storybook",
+        url: storybook_url(nil),
+        external: true,
+        style: "secondary",
+        remove_underline: true,
+        icon: {
+          name: "launch",
+          style: "right"
+        },
+      } %>
+    <% 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>

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>

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
       }]
     } %>
@@ -108,26 +116,38 @@
           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 %>
 
   <%= content_for :sage_sidebar_footer do %>
-    <%= sage_component SageNav, {
-      aria_label: "Secondary",
-      items: [
-        {
-          text: "Get Support",
-          link: pages_support_path,
-          active: current_page?(pages_support_path),
-        }
-      ]
+    <%= 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 %>
+
+<%= render "pages/support_modal" %>

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 %>

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 %>

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>