[PLAY-1608] Dependency Display: Add flex section for summary display …

…[2 of 2] (#3875) **What does this PR do?** A clear and concise description with your runway ticket url. [PLAY-1608](https://runway.powerhrg.com/backlog_items/PLAY-1608) **Screenshots:** Screenshots to visualize your addition/change #### Checklist: - [X] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [X] **DEPLOY** I have added the `milano` label to show I'm ready for a review.
powerhome · Nov 19, 2024 · 251118d · 251118d
1 parent ae1fa9e
commit 251118d
Show file tree

Hide file tree

Showing 4 changed files with 430 additions and 19 deletions.
diff --git a/playbook-website/app/controllers/pages_controller.rb b/playbook-website/app/controllers/pages_controller.rb
@@ -324,7 +324,13 @@ def all_kits
     group_components = []
     aggregate_kits.each do |kit|
       group_components.push(kit["components"].map do |component|
-        { name: component["name"], status: component["status"] }
+        {
+          name: component["name"],
+          status: component["status"],
+          icons_used: component["icons_used"],
+          react_rendered: component["react_rendered"],
+          enhanced_element_used: component["enhanced_element_used"],
+        }
       end)
     end
     group_components.flatten
@@ -360,6 +366,9 @@ def set_kit
     if matching_kit
       @kit = matching_kit[:name]
       @kit_status = matching_kit[:status]
+      @icons_used = matching_kit[:icons_used]
+      @react_rendered = matching_kit[:react_rendered]
+      @enhanced_element_used = matching_kit[:enhanced_element_used]
     else
       redirect_to root_path, flash: { error: "That kit does not exist" }
     end

diff --git a/playbook-website/app/views/pages/kit_show.html.erb b/playbook-website/app/views/pages/kit_show.html.erb
@@ -4,28 +4,92 @@
       <%= react_component("DarkModeToggle", initMode: cookies[:dark_mode] )%>
     </div>
   <% end %>
-  <%= pb_rails("title", props: { text: pb_kit_title(@kit), tag: "h1", size: 1, margin_top: "xl" }) %>
+    <%= pb_rails("flex", props: { justify: "between", align_items: "start" }) do %>
+    <%= pb_rails("flex/flex_item", props: { flex: "9"}) do %>
+      <%= pb_rails("flex", props: { orientation: "column"}) do %>
+        <%= pb_rails("title", props: { text: pb_kit_title(@kit), tag: "h1", size: 1, margin_top: "xl" }) %>
+        <% if @kit_status === "beta" %>
+          <%= pb_rails("card", props: {highlight: {position: "side", color:"primary", shadow:"deep"}, margin_y: "md", padding: "sm"}) do %>
+            <%= pb_rails("flex", props:{ align: "center" }) do %>
+              <%= pb_rails("body", props:{color: "light"}) do %>
+              <%= pb_rails("icon", props: { icon: "info-circle", fixed_width: true, padding_right:"xs" }) %>
+              <% end %>
+              <%= pb_rails("flex/flex_item") do %>
+                <%= pb_rails("title", props: { text: "Beta Kit", tag: "h4", size: 4 , padding_bottom:"xxs"}) %>
+                <%= pb_rails("body", props: {
+                  text: "This kit is currently under development. Some features may not work as expected, and breaking changes may still occur; use with caution.",
+                  color: "light"
+                }) %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <div class="markdown kit-show-description <%= cookies[:dark_mode] == "true" ? 'dark' : '' %>">
+          <%= render_markdown(pb_doc_kit_description(@kit)) %>
+        </div>
+      <% end %>
+    <% end %>
+    <%= pb_rails("flex/flex_item", props: { flex: "3" }) do %>
+      <%= pb_rails("flex", props: { orientation: "column", align: "stretch", margin_top: "xl" }) do %>
+        <% if @icons_used || @react_rendered || @enhanced_element_used %>
+          <%= pb_rails("caption", props: { size: 'sm', margin: "xxs" }) do %>
+            Summary
+          <% end %>
+        <% end %>
 
-  <% if @kit_status === "beta" %> 
-    <%= pb_rails("card", props: {highlight: {position: "side", color:"primary", shadow:"deep"}, margin_y: "md", padding: "sm"}) do %>
-      <%= pb_rails("flex", props:{ align: "center" }) do %>
-        <%= pb_rails("body", props:{color: "light"}) do %>
-        <%= pb_rails("icon", props: { icon: "info-circle", fixed_width: true, padding_right:"xs" }) %>
+        <% if @icons_used %>
+          <%= pb_rails("flex", props: { inline: true, align: "center", hover: { shadow: "deep" } }) do %>
+            <%= pb_rails("flex/flex_item", props: { flex: "1" }) do %>
+              <%= pb_rails("icon", props: { icon: "icons" }) %>
+            <% end %>
+            <%= pb_rails("flex/flex_item", props: { align_items: "start", flex: "8" }) do %>
+              <a href="/kits/icon/">
+                <%= pb_rails("detail", props: { text: "Uses Icons", size: 'xs', margin: "xxs" }) %>
+              </a>
+            <% end %>
+            <%= pb_rails("flex/flex_item", props: { flex: "1" }) do %>
+              <%= pb_rails("icon", props: { icon: "chevron-right", size: "xs" }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+        <% if @react_rendered %>
+          <%= pb_rails("flex", props: { inline: true, align: "center", hover: { shadow: "deep" } }) do %>
+            <%= pb_rails("flex/flex_item", props: { flex: "1" }) do %>
+              <svg xmlns="http://www.w3.org/2000/svg"  width="auto" height="auto" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" viewBox="0 0 50 50">
+                <path d="M 34.554688 3.984375 C 33.775003 3.9581582 32.958884 4.0940926 32.140625 4.359375 C 30.504109 4.889941 28.789203 5.9238848 27.029297 7.3554688 C 26.339589 7.9165071 25.643623 8.5578288 24.945312 9.2382812 C 24.262398 8.5751039 23.580733 7.9509974 22.90625 7.4023438 C 21.147758 5.9719089 19.4375 4.9375672 17.804688 4.4082031 C 16.171878 3.8788386 14.547223 3.8624356 13.212891 4.6328125 C 11.878558 5.4031893 11.080619 6.8173558 10.722656 8.4960938 C 10.364693 10.174832 10.404125 12.173992 10.763672 14.412109 C 10.888559 15.189511 11.066671 16.005078 11.269531 16.835938 C 10.507095 17.067004 9.7666767 17.309955 9.0800781 17.578125 C 7.0079817 18.387438 5.2934468 19.355663 4.0449219 20.507812 C 2.7963969 21.659962 1.9902344 23.058304 1.9902344 24.59375 C 1.9902344 26.129196 2.7963969 27.525585 4.0449219 28.677734 C 5.2934468 29.829884 7.0079817 30.800062 9.0800781 31.609375 C 9.8142516 31.896126 10.609118 32.154326 11.429688 32.398438 C 11.134531 33.501278 10.895394 34.571467 10.732422 35.585938 C 10.372587 37.825853 10.334588 39.825265 10.693359 41.507812 C 11.052134 43.19036 11.850478 44.612534 13.191406 45.386719 C 14.532336 46.160905 16.164264 46.141894 17.800781 45.611328 C 19.437297 45.080762 21.15025 44.048772 22.910156 42.617188 C 23.593512 42.061316 24.284757 41.427206 24.976562 40.753906 C 25.671996 41.431263 26.366006 42.068338 27.052734 42.626953 C 28.811227 44.057387 30.523438 45.089776 32.15625 45.619141 C 33.789061 46.148505 35.413715 46.164908 36.748047 45.394531 C 38.082379 44.624154 38.878366 43.209988 39.236328 41.53125 C 39.59429 39.852512 39.554857 37.855304 39.195312 35.617188 C 39.031899 34.599965 38.792614 33.526227 38.496094 32.419922 C 39.343769 32.169866 40.163744 31.904721 40.919922 31.609375 C 42.992018 30.800062 44.706553 29.829884 45.955078 28.677734 C 47.203603 27.525585 48.009766 26.129196 48.009766 24.59375 C 48.009766 23.058304 47.203603 21.659963 45.955078 20.507812 C 44.706553 19.355663 42.992018 18.387438 40.919922 17.578125 C 40.22347 17.306107 39.471688 17.059992 38.697266 16.826172 C 38.901775 15.990221 39.083345 15.168805 39.208984 14.386719 C 39.568819 12.146804 39.606825 10.145439 39.248047 8.4628906 C 38.889279 6.7803434 38.088976 5.3601244 36.748047 4.5859375 C 36.077582 4.1988452 35.334372 4.0105918 34.554688 3.984375 z M 34.462891 6.0195312 C 34.952154 6.03291 35.369535 6.1493386 35.726562 6.3554688 C 36.440618 6.7677287 36.968419 7.5700924 37.25 8.890625 C 37.531581 10.211156 37.521848 11.99533 37.189453 14.064453 C 37.075647 14.772878 36.910402 15.52369 36.722656 16.292969 C 34.677151 15.800695 32.435744 15.435401 30.046875 15.220703 C 28.847638 13.559329 27.615404 12.045781 26.373047 10.703125 C 27.030182 10.061662 27.683063 9.4617259 28.320312 8.9433594 C 29.946026 7.6209332 31.485126 6.7210962 32.769531 6.3046875 C 33.411734 6.0964824 33.973627 6.0061525 34.462891 6.0195312 z M 15.486328 6.0253906 C 15.978419 6.0116533 16.541491 6.1017415 17.185547 6.3105469 C 18.473657 6.7281576 20.015452 7.6275969 21.642578 8.9511719 C 22.267037 9.4591336 22.905298 10.047651 23.548828 10.673828 C 22.297283 12.027473 21.054862 13.55414 19.847656 15.230469 C 17.468889 15.449074 15.236606 15.81635 13.201172 16.310547 C 13.014826 15.545537 12.849558 14.798586 12.736328 14.09375 C 12.403642 12.02283 12.39534 10.238404 12.677734 8.9140625 C 12.960128 7.5897208 13.492238 6.7813032 14.212891 6.3652344 C 14.573216 6.1572002 14.994237 6.0391279 15.486328 6.0253906 z M 24.976562 12.142578 C 25.791172 13.029071 26.605956 13.99916 27.414062 15.042969 C 26.620033 15.009861 25.816288 14.990234 25 14.990234 C 24.167457 14.990234 23.34841 15.010498 22.539062 15.044922 C 23.347352 14.000306 24.16175 13.029737 24.976562 12.142578 z M 25 17.009766 C 26.359894 17.009766 27.685348 17.065647 28.974609 17.160156 C 29.86173 18.434311 30.728648 19.786055 31.554688 21.216797 C 32.280504 22.473948 32.937328 23.729163 33.535156 24.96875 C 32.931017 26.224782 32.263184 27.496972 31.527344 28.771484 C 30.879609 29.893393 30.20319 30.958949 29.515625 31.986328 C 28.059313 32.10805 26.550303 32.175781 25 32.175781 C 23.412375 32.175781 21.869462 32.104031 20.380859 31.976562 C 19.704742 30.963955 19.039735 29.91454 18.402344 28.810547 C 17.668186 27.538949 17.003577 26.269079 16.400391 25.015625 C 17.006106 23.755092 17.673701 22.47818 18.412109 21.199219 C 19.233818 19.775977 20.098207 18.432055 20.980469 17.164062 C 22.283609 17.067424 23.62445 17.009766 25 17.009766 z M 31.548828 17.410156 C 33.197299 17.615841 34.745083 17.901405 36.185547 18.244141 C 35.758129 19.645287 35.231654 21.108808 34.59375 22.619141 C 34.179567 21.820719 33.750599 21.019585 33.287109 20.216797 C 32.725422 19.243926 32.140408 18.316416 31.548828 17.410156 z M 18.34375 17.425781 C 17.764654 18.315097 17.194836 19.224578 16.644531 20.177734 C 16.175094 20.990823 15.737221 21.802736 15.318359 22.611328 C 14.68596 21.110075 14.162654 19.654877 13.738281 18.261719 C 15.168002 17.918363 16.706766 17.633813 18.34375 17.425781 z M 38.164062 18.775391 C 38.872944 18.989877 39.557566 19.21371 40.185547 19.458984 C 42.0957 20.205046 43.60665 21.088493 44.585938 21.992188 C 45.565224 22.895882 45.990234 23.757696 45.990234 24.59375 C 45.990234 25.429804 45.565225 26.291619 44.585938 27.195312 C 43.60665 28.099007 42.0957 28.982454 40.185547 29.728516 C 39.487698 30.001079 38.72096 30.248243 37.923828 30.482422 C 37.355199 28.723643 36.629408 26.888772 35.765625 25.015625 C 36.758785 22.865083 37.561088 20.768289 38.164062 18.775391 z M 11.802734 18.785156 C 12.398803 20.758169 13.190811 22.834118 14.169922 24.962891 C 13.30047 26.846955 12.571087 28.692254 12 30.460938 C 11.23096 30.232919 10.490212 29.992451 9.8144531 29.728516 C 7.9042995 28.982454 6.39335 28.099007 5.4140625 27.195312 C 4.434775 26.291618 4.0097656 25.429804 4.0097656 24.59375 C 4.0097656 23.757696 4.434775 22.895882 5.4140625 21.992188 C 6.39335 21.088493 7.9042995 20.205046 9.8144531 19.458984 C 10.432774 19.217483 11.105915 18.996837 11.802734 18.785156 z M 25 20 C 22.250421 20 20 22.250421 20 25 C 20 27.749579 22.250421 30 25 30 C 27.749579 30 30 27.749579 30 25 C 30 22.250421 27.749579 20 25 20 z M 15.341797 27.365234 C 15.762496 28.177853 16.200028 28.993283 16.671875 29.810547 C 17.041048 30.449973 17.418073 31.072393 17.800781 31.683594 C 16.457817 31.497372 15.181231 31.261605 13.982422 30.982422 C 14.363652 29.81481 14.819744 28.602796 15.341797 27.365234 z M 34.619141 27.365234 C 35.143284 28.605725 35.599609 29.819681 35.982422 30.990234 C 34.779808 31.269089 33.499292 31.504052 32.152344 31.689453 C 32.540071 31.070779 32.922982 30.44057 33.296875 29.792969 C 33.765252 28.981717 34.201083 28.171917 34.619141 27.365234 z M 13.40625 32.923828 C 15.216074 33.352568 17.177716 33.681912 19.257812 33.896484 C 20.64638 35.904859 22.092967 37.709497 23.548828 39.287109 C 22.897813 39.921859 22.252566 40.517583 21.621094 41.03125 C 19.99538 42.353677 18.454326 43.251559 17.169922 43.667969 C 15.885516 44.084378 14.926946 44.029446 14.212891 43.617188 C 13.498835 43.204927 12.972987 42.402563 12.691406 41.082031 C 12.409825 39.761499 12.417606 37.979279 12.75 35.910156 C 12.900793 34.971492 13.12615 33.966374 13.40625 32.923828 z M 36.560547 32.931641 C 36.842987 33.980548 37.069013 34.98935 37.220703 35.933594 C 37.553389 38.004513 37.56169 39.788939 37.279297 41.113281 C 36.996903 42.437623 36.468699 43.247993 35.748047 43.664062 C 35.027395 44.080132 34.059594 44.13441 32.771484 43.716797 C 31.483374 43.299186 29.941578 42.399747 28.314453 41.076172 C 27.678439 40.558811 27.028726 39.958258 26.373047 39.318359 C 27.838664 37.73459 29.295467 35.920758 30.693359 33.900391 C 32.778701 33.687251 34.745791 33.359875 36.560547 32.931641 z M 21.867188 34.101562 C 22.893951 34.157518 23.934244 34.195312 25 34.195312 C 26.030504 34.195312 27.037063 34.159787 28.03125 34.107422 C 27.014961 35.478593 25.979034 36.725149 24.947266 37.847656 C 23.916125 36.722751 22.882144 35.473968 21.867188 34.101562 z" clip-rule="evenodd" fill-rule="evenodd"></path>
+              </svg>
+            <% end %>
+            <%= pb_rails("flex/flex_item", props: { align_items: "start", flex: "8" }) do %>
+              <a href="/guides/getting_started/rails_&_react_setup">
+                <%= pb_rails("detail", props: { text: "React Rendered", size: 'xs', margin: "xxs" }) %>
+              </a>
+            <% end %>
+            <%= pb_rails("flex/flex_item", props: { flex: "1" }) do %>
+              <%= pb_rails("icon", props: { icon: "chevron-right", size: "xs" }) %>
+            <% end %>
+          <% end %>
         <% end %>
-        <%= pb_rails("flex/flex_item") do %>
-          <%= pb_rails("title", props: { text: "Beta Kit", tag: "h4", size: 4 , padding_bottom:"xxs"}) %>
-          <%= pb_rails("body", props: {
-            text: "This kit is currently under development. Some features may not work as expected, and breaking changes may still occur; use with caution.",
-            color: "light"
-          }) %>
+        <% if @enhanced_element_used %>
+          <%= pb_rails("flex", props: { inline: true, align: "center", hover: { shadow: "deep" } }) do %>
+            <%= pb_rails("flex/flex_item", props: { flex: "1" }) do %>
+              <svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" fill="currentColor" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" viewBox="0 0 52 52">
+                <path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z"></path>
+              </svg>
+            <% end %>
+            <%= pb_rails("flex/flex_item", props: { align_items: "start", flex: "8" }) do %>
+              <a href="/guides/getting_started/rails_&_react_setup#Javascript-Enabled-Rails-Kits">
+                <%= pb_rails("detail", props: { text: "Javascript Enhanced", size: 'xs', margin: "xxs" }) %>
+              </a>
+            <% end %>
+            <%= pb_rails("flex/flex_item", props: { flex: "1" }) do %>
+              <%= pb_rails("icon", props: { icon: "chevron-right", size: "xs" }) %>
+            <% end %>
+          <% end %>
         <% end %>
       <% end %>
     <% end %>
   <% end %>
-
-  <div class="markdown kit-show-description <%= cookies[:dark_mode] == "true" ? 'dark' : '' %>">
-    <%= render_markdown(pb_doc_kit_description(@kit)) %>
-  </div>
 </div>
 <div class="kit-show-wrapper">
   <div class="pb--kit-type-nav">
@@ -132,4 +196,4 @@
         %>
       </div>
     <% end %>
-</div>
+</div>