Implement Jinja logic for building the sliding navigation from navigation.yaml

petesfrench commented 2 months ago

Done

Creates a func in Python, build_navigation, that takes and 'id' and 'title' and returns the relevant section on the navigation. It works by parsing the navigation.yaml and applying it to a jinja template.
Creates the Jinja template and logic needed to build the sliding(mobile) navigation
Minor changes to the formatting of the navigation.yaml so it is easier to understand and process

QA

It is a little annoying to QA as the JS that this relies on has not yet been implemented, but do the best you can from the directions below

Open the demo and use the inspection tool to find the navigation drop-downs. An easy way to do this is to use crtl+f and search role="menuitem", you should see li elements with names like 'product', 'solutions', etc. Within these you will find a <div class="p-navigation__dropdown-content-mobile">, this is where the navigation generated from this work can be found.
Check that the nesting and links that exist in the navigation.yaml are present in the HTML markup
Check the design matches that of the sliding nav in the vanilla note there are some minor difference that will be introduced in this pr

Issue / Card

Fixes https://warthogs.atlassian.net/browse/WD-13241

webteam-app commented 2 months ago

demos.haus

bartaz commented 2 months ago

From description it seems that the scope of this PR is parsing yaml and passing data to jinja template, but there is a lot of JS files changed in this PR. Are these changes relevant?

petesfrench commented 2 months ago

From description it seems that the scope of this PR is parsing yaml and passing data to jinja template, but there is a lot of JS files changed in this PR. Are these changes relevant?

@bartaz I left a note in the description: 'Note this branches of this pr, for clarity it might help to wait for that to be merged before reviewing'

codecov[bot] commented 2 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Please upload report for BASE (canonical-navigation@1d45cbb). Learn more about missing BASE report.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## canonical-navigation #1305 +/- ## ======================================================= Coverage ? 71.83% ======================================================= Files ? 14 Lines ? 1097 Branches ? 0 ======================================================= Hits ? 788 Misses ? 309 Partials ? 0 ``` | [Flag](https://app.codecov.io/gh/canonical/canonical.com/pull/1305/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=canonical) | Coverage Δ | | |---|---|---| | [python](https://app.codecov.io/gh/canonical/canonical.com/pull/1305/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=canonical) | `71.83% <100.00%> (?)` | | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=canonical#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

petesfrench commented 2 months ago

@britneywwc Could we pair on this work before we review pls? I need your opinion on some things

petesfrench commented 2 months ago

Thanks for the review :^) 'section_footer' is not used in the mobile view, only desktop view, so can be ignored. The missing section was caused by the typo you flagged. Can you take another look please @britneywwc ?

canonical / canonical.com