[PLAY-1623] Icon Integration Docs: Nav Bar and About Page

playbook-website/app/controllers/pages_controller.rb

@@ -88,6 +88,38 @@ def changelog_figma
 
   def changelog; end
 
+  def icons
+    @data = Playbook::Engine.root.join("../playbook-website/app/views/guides/getting_started/icons.md").read
+    @page_title = "Icon Integration"
+    @show_sidebar = true
+    @link_extension = "https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/icons.md"
+    render layout: "icons"
+  end
+
+  def icons_font_awesome
+    @data = Playbook::Engine.root.join("../playbook-website/app/views/guides/getting_started/icons/font_awesome.md").read
+    @page_title = "Icon Integration"
+    @show_sidebar = true
+    @link_extension = "https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/icons/font_awesome.md"
+    render layout: "icons"
+  end
+
+  def icons_playbook
+    @data = Playbook::Engine.root.join("../playbook-website/app/views/guides/getting_started/icons/playbook.md").read
+    @page_title = "Icon Integration"
+    @show_sidebar = true
+    @link_extension = "https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/icons/playbook.md"
+    render layout: "icons"
+  end
+
+  def icons_custom
+    @data = Playbook::Engine.root.join("../playbook-website/app/views/guides/getting_started/icons/custom.md").read
+    @page_title = "Icon Integration"
+    @show_sidebar = true
+    @link_extension = "https://github.com/powerhome/playbook/blob/master/playbook-website/app/views/guides/getting_started/icons/custom.md"
+    render layout: "icons"
+  end
+
   def kits
     params[:type] ||= "react"
     @type = params[:type]

playbook-website/app/javascript/components/MainSidebar/NavComponents/OtherNavComponent.tsx

@@ -76,6 +76,10 @@ export const OtherNavItems = ({
   }
 
   const activeForItems = (link, i) => {
+    if (currentURL.startsWith("/guides/getting_started/icons") && link.name === "Icon Integration") {
+      return true;
+    }
+
     const key = name === "UI Samples" ? `${link}-${i}` : `${link.link}-${i}`
     return isActive[key]
       ? true

playbook-website/app/views/guides/getting_started/icons.md

@@ -0,0 +1,17 @@
+---
+title: Icon Integration
+description: Icons are small graphical elements that represent actions, objects, or concepts in a user interface. They are a crucial part of a UI's visual language and help users understand and interact with the interface efficiently. Here's a detailed overview of what icons entail with Playbook.
+icon: eye
+---
+
+Icons are small graphical elements that represent actions, objects, or concepts in a user interface. They are a crucial part of a UI's visual language and help users understand and interact with the interface efficiently. Here's a detailed overview of what icons entail with Playbook:
+
+**1. Navigation:** Icons are often used in navigation elements such as menus, toolbars, and tabs to indicate different sections or features of an application.
+**2. Actions:** They can represent actions that users can take, such as "delete," "edit," "save," or "share."
+**3. Status Indicators:** Icons can indicate the status of an item or process, such as loading, errors, warnings, or success states.
+**4. Content Representation:** Icons can represent different types of content, such as documents, images, videos, or files.
+**5. Feedback:** Icons can provide feedback to users, such as confirmation of an action, alert messages, or progress indicators.
+
+Playbook allows integration with [Font Awesome icons](/guides/getting_started/icons/font_awesome/) as well as [custom icons](/kits/icon/rails#icon-custom). 
+
+![icons](https://github.com/user-attachments/assets/bb10a281-f11a-4b3c-b797-d046f8044e86)

playbook-website/app/views/guides/getting_started/font_awesome.md → playbook-website/app/views/guides/getting_started/icons/font_awesome.md

@@ -1,9 +1,3 @@
----
-title: Font Awesome Setup
-description: Playbook seamlessly integrates with Font Awesome, a leading icon library known for its extensive collection of high-quality, scalable icons. This integration not only enhances the visual appeal of websites and applications but also improves overall usability.
-icon: font-awesome
----
-
 Playbook seamlessly integrates with [Font Awesome](https://fontawesome.com/), a leading icon library known for its extensive collection of high-quality, scalable icons. This integration not only enhances the visual appeal of websites and applications but also improves overall usability. 
 
 Some Font Awesome benefits:

playbook-website/app/views/layouts/icons.html.erb

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <%= render 'layouts/head'%>
+  </head>
+  <body class="<%= @body_class %> <%= controller_name %> <%= action_name%>">
+  <%= render 'layouts/mobile_nav'%>
+    <%= render 'layouts/mobile_hamburger'%>
+    <%= pb_rails("layout", props: {classname: "pb--page--content #{'no-sidebar' if !@show_sidebar}"}) do %>
+      <%= render 'layouts/mobile_hamburger' %>
+      <%= pb_rails("layout/sidebar", props: { classname: "pb--page--sideNav"}) do %>
+        <% render partial: "layouts/sidebar"%>
+      <% end %>
+      <%= pb_rails("layout/body") do %>
+        <div class="pb--page--content--main">
+          <%= pb_rails("background", props: {
+              background_color: "dark",
+              image_url: vite_asset_path("images/getting-started.svg"),
+              background_repeat: "no-repeat",
+              background_size: "contain",
+              background_position: "center"
+            }) do %>
+              <div style="height:250px"></div>
+          <% end %>
+          <%= pb_rails("flex", props:{orientation: "column", align:"center"}) do %>
+              <%= pb_rails("flex/flex_item", props: { classname: "minw0 w100" }) do %>
+                <%= pb_rails("background", props: { display: "flex", justify_content: "center", classname: "markdown w100", background_color: "white", padding_x: "sm", padding_y: "md" }) do %>
+                  <%= pb_rails("background", props: { width: 'lg' , background_color: "white" }) do %>
+                    <div class="markdown_title"><%= @page_title %></div>
+                    <%= pb_rails("nav", props: { orientation: "horizontal", variant: "bold" }) do %>
+                      <%= pb_rails("nav/item", props: { text: "About", link: "/guides/getting_started/icons/", active: action_name == "icons"}) %>
+                      <%= pb_rails("nav/item", props: { text: "Font Awesome", link: "/guides/getting_started/icons/font_awesome", active: action_name == "icons_font_awesome" }) %>
+                      <%= pb_rails("nav/item", props: { text: "Playbook Icons", link: "/guides/getting_started/icons/playbook", active: action_name == "icons_playbook" }) %>
+                      <%= pb_rails("nav/item", props: { text: "Custom", link: "/guides/getting_started/icons/custom", active: action_name == "icons_custom" }) %>
+                    <% end %>
+                    <%= pb_rails("section_separator", props: { flex_grow: 1 }) %>
+                    <%= yield %>
+                    <%= pb_rails("section_separator", props: { margin_y: "xl" }) %>
+                    <%= link_to @link_extension do %>
+                      <%= pb_rails("caption", props: {
+                        text: "Edit this page",
+                        color: "link",
+                        size: "xs"
+                      }) %>
+                    <% end %>
+                  <% end %>
+                <% end %>
+              <% end %>
+              <%= pb_rails("flex/flex_item", props:{classname: "w100"}) do %>
+                <%= render 'layouts/footer'%>
+              <% end %>
+          <% end %>
+
+        </div>
+      <% end %>
+    <% end %>
+  </body>
+
+  <%= vite_javascript_tag(*@application_js) %>
+
+  <%= yield :pb_js %>
+  <%= render 'layouts/ga'%>
+</html>

playbook-website/app/views/pages/icons.html.erb

@@ -0,0 +1,3 @@
+<div class="changelog-container">
+    <%= render_markdown(@data) %>
+</div>

playbook-website/app/views/pages/icons_custom.html.erb

@@ -0,0 +1,3 @@
+<div class="changelog-container">
+    <%= render_markdown(@data) %>
+</div>

playbook-website/app/views/pages/icons_font_awesome.html.erb

@@ -0,0 +1,3 @@
+<div class="changelog-container">
+    <%= render_markdown(@data) %>
+</div>

playbook-website/app/views/pages/icons_playbook.html.erb

@@ -0,0 +1,3 @@
+<div class="changelog-container">
+    <%= render_markdown(@data) %>
+</div>

playbook-website/config/initializers/global_variables.rb

@@ -70,7 +70,7 @@
 }
 
 # Move these pages to the end of the Getting Started page
-page_names = ["HTML&_CSS", "figma_setup", "how_to_theme", "dependencies", "font_awesome"]
+page_names = ["HTML&_CSS", "figma_setup", "how_to_theme", "dependencies", "icons"]
 
 move_pages = navigation[:getting_started][:pages].select { |page| page_names.include?(page[:page_id]) }
 navigation[:getting_started][:pages].reject! { |page| page_names.include?(page[:page_id]) }

playbook-website/config/routes.rb

@@ -40,6 +40,12 @@
   get "kit_playground_rails",       to: "pages#kit_playground_rails", as: "kit_playground_rails"
   post "rails_pg_render",           to: "pages#rails_pg_render",      as: "rails_pg_render"
 
+  # Icon Docs
+  get "guides/getting_started/icons/font_awesome", to: "pages#icons_font_awesome"
+  get "guides/getting_started/icons/playbook",     to: "pages#icons_playbook"
+  get "guides/getting_started/icons/custom",       to: "pages#icons_custom"
+  get "guides/getting_started/icons",              to: "pages#icons"
+
   # Docs
   get "guides/:parent",         to: "guides#md_doc", as: "guides_parent"
   get "guides/:parent/:page",   to: "guides#md_doc", as: "guides_parent_page"