[PLAY-1532] Improve Dependency Display on PB Website

[skduncan]

What does this PR do? A clear and concise description with your runway ticket url.
https://runway.powerhrg.com/backlog_items/PLAY-1532

As a Playbook dev, I want to improve the way we are displaying kit dependencies on the Playbook website, so that there is no confusion when implementing our kits into Nitro.

Design will be based off of this handoff.

This PR is meant to be used as an example of how to implement these changes within Playbook and should NOT be merged.

Screenshots: Screenshots to visualize your addition/change

Problem

We want to improve the way we are display the dependencies of our kits on the Playbook website. The design of this dependency display will be based off of this handoff.

Solution

• Updating "playbook-website/config/menu.yml” to include three new columns to track information regarding a kits dependency. This would allow us to easily pull the dependencies information of each kit to utilize in the summary display.
  • icons_used
  • react_rendered
  • enhanced_element_used
  • "playbook-website/config/menu.yml”

  // How kits are currently setup in yml
  - name: dialog
    platforms: *1
    description:
    status: stable
    // Proposed additions to yml for dependency display
    icons_used: true
    react_rendered: true
    enhanced_element_used: true

• Updating "playbook-website/app/views/pages/kit_show.html.erb” to include a flex section for the summary display in the header portion of each kit page. We would use updated information from “menu.yml” proposed above to set a series of if conditions to track which dependencies should be displayed.

• To make these changes more managable, we can shift the header view into its own partial (ie. "_kit_show_header.html.erb”).

• In the case that no dependencies are used, we can set the summary flex to not be shown.

Alternative

• An alternative solution to the above would be setting up “kit_show.html.erb” to display header partials that would be pulled from each kits directory in “playbook/pb_kits/“.
  • This change would not require anything to be updated in “menu.yml”, as we can manually set which dependencies to show in the individual partials.
  • While this should work as a solution, it is not recommended as it would add over 100 files in Playbook (currently proposed solution would only update two existing files and potentially create one new file).

Resources

• Playbook Kits Dependecy Spreadsheet
• Designer Handoff

[nidaqg]

Closing PR as a POC, can be reopened when we revisit this work. Great work @skduncan !