[PLAY-843] Kit mashup page for handoffs

playbook-website/app/controllers/pages_controller.rb

@@ -67,6 +67,18 @@ def kit_show_swift
     render "pages/kit_show"
   end
 
+  def kit_collection_show_rails
+    handle_kit_collection("rails")
+  end
+
+  def kit_collection_show_react
+    handle_kit_collection("react")
+  end
+
+  def kit_collection_show
+    handle_kit_collection(params[:type])
+  end
+
   def kit_playground_rails
     @kit = "avatar"
     @examples = pb_doc_kit_examples(@kit, "rails")
@@ -206,4 +218,14 @@ def read_kit_file(*args)
     path = ::Playbook.kit_path(@kit, "docs", *args)
     path.exist? ? path.read : ""
   end
+
+  def handle_kit_collection(type)
+    @kits = params[:names].split("%26")
+    @kits_array = @kits.first.split("&")
+    params[:name] ||= @kits_array[0]
+    @selected_kit = params[:name]
+    @type = type
+
+    render template: "pages/kit_collection", layout: "layouts/fullscreen"
+  end
 end

playbook-website/app/javascript/site_styles/_kits_show.scss

@@ -25,3 +25,7 @@
     max-width: fit-content;
   }
 }
+
+.multi-kits-container {
+  width: 100%;
+}

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

@@ -0,0 +1,16 @@
+<%= pb_rails("flex", props: {orientation: "column", margin: "xl"}) do %>
+  <%= pb_rails("nav", props: { margin_bottom: "md", orientation: "horizontal" }) do %>
+    <%= pb_rails("flex", props: {wrap: true}) do %>
+      <% @kits_array.each do |kit| %>
+        <%= pb_rails("nav/item", props: { id: "nav-item-#{kit}", text: kit.titleize, link: kit_collection_show_path(names: params[:names], name: kit, type: @type), active: kit == @selected_kit}) %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <div class="multi-kits-container">
+    <% if @type == "rails" %>
+      <%= pb_kit(kit: @selected_kit, dark_mode: dark_mode?) %>
+    <% elsif @type == "react" %>
+      <%= pb_kit(kit: @selected_kit, type: "react", dark_mode: dark_mode?) %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -93,7 +93,7 @@
                 <% end %>
               <% end %>
             </a>
-          <% end %>f
+          <% end %>
         <% end %>
       <% end %>
     <% end %>
@@ -109,5 +109,4 @@
         %>
       </div>
     <% end %>
-
 </div>

playbook-website/config/routes.rb

@@ -16,6 +16,9 @@
   get "kit_category/:name",         to: "pages#kit_category_show_rails",  as: "kit_category_show"
   get "kit_category/:name/rails",   to: "pages#kit_category_show_rails",  as: "kit_category_show_rails"
   get "kit_category/:name/react",   to: "pages#kit_category_show_react",  as: "kit_category_show_reacts"
+  get "kit_collection/*names/:name/rails",    to: "pages#kit_collection_show_rails",                        as: "kit_collection_show_rails"
+  get "kit_collection/*names/:name/react",    to: "pages#kit_collection_show_react",                        as: "kit_collection_show_react"
+  get "kit_collection/*names/(/:name)(/:type)",  to: "pages#kit_collection_show_rails", defaults: { type: "rails" }, as: "kit_collection_show"
 
   # Experiments
   get "kits/:name/sandpack",        to: "pages#kit_show_new",         as: "kit_show_new"