Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PLAY-1608] Dependency Display: Add flex section for summary display [2 of 2] #3875

Merged
merged 9 commits into from
Nov 19, 2024
Merged

[PLAY-1608] Dependency Display: Add flex section for summary display [2 of 2] #3875

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
70a3556
Updating menu yml with each kits dependencies. Also updating kit gene…
skduncan Oct 24, 2024
b9a5066
Setup for displaying summary
skduncan Nov 1, 2024
dac3709
Replacing icons with appropriate svgs
skduncan Nov 1, 2024
364ea28
Adjusting align for flex items in header
skduncan Nov 6, 2024
f9f9883
Merge branch 'master' of github.com:powerhome/playbook into PLAY-1608…
skduncan Nov 7, 2024
9b8db2d
Adding requested changes
skduncan Nov 11, 2024
4c534a1
Minor adjustments to sizing and space
skduncan Nov 11, 2024
26d1a17
Merge branch 'master' of github.com:powerhome/playbook into PLAY-1608…
skduncan Nov 14, 2024
dee2a68
Adding dependencies on skeleton_loading
skduncan Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion playbook-website/app/controllers/pages_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
98 changes: 81 additions & 17 deletions playbook-website/app/views/pages/kit_show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -132,4 +196,4 @@
%>
</div>
<% end %>
</div>
</div>
Loading