WT-334 - Build CMS Components For Advertising Pages - Part 1

[dchukhin]

If this changeset needs to go into the FXC codebase, please add the WMO and FXC label.

This pull request includes the work from on #16810, which should be reviewed first

One-line summary

This pull request makes the advertising index/landing page editable through Wagtail.

Significant changes and points to review

This pull request turns the advertising page into a Wagtail-managed AdvertisingIndexPage page with the following components, defined in bedrock/mozorg/blocks/advertising.py:

• advertising_hero_block
• section_header_block
• figure_with_statistic_block
• feature_list_block

Also, a new snippet (ContactBannerSnippet) is available, and added to the AdvertisingIndexPage.

Issue / Bugzilla link

WT-334

Testing

To test locally, go to Wagtail and create an "Advertising index page" page in the page tree. Try to make the content identical to http://localhost:8000/en-US/advertising/.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 79.88%. Comparing base (ecc8f26) to head (47077ae).

Additional details and impacted files

@@                      Coverage Diff                      @@
##           wt-303-ads-solutions-page   #16813      +/-   ##
=============================================================
+ Coverage                      79.66%   79.88%   +0.22%     
=============================================================
  Files                            159      160       +1     
  Lines                           8545     8640      +95     
=============================================================
+ Hits                            6807     6902      +95     
  Misses                          1738     1738              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[kkellydesign]

• Image alt text on "Figure with Statistic" shoudn't be a CMS field. That field should be populated by the media app "description" field.
  

• Same with section heading

• Notification banner at the bottom needs a link field, as there was a recent change request that the arrow button on the right should be a link.

• the "links" in all of these components should follow the pattern of "choose a page or enter a link." I believe Mariana has recently been working on this pattern in the Springfield repo, so she might have some patterns you can swipe.

• Section Heading needs a checkbox that says "Add top divider" that is disabled by default, but adds has-border-top to mozads-half-grid when enabled (or a wrapper div in the same place, that does the same thing if there is no image applied.) See the "Why Mozilla" section in /advertising/ for expected behavior.

• The tests below say that there's a merge conflict that needs to be resolved, but I just merged main in successfully, so I'm not sure what's going on there.

Otherwise, this looks great! I'm really happy with the patterns here. I'm making a couple of minor FE changes, but this is good.

[kkellydesign]

#16813 (comment)

[maureenlholland]

Conflict likely related to quick stop-gap we merged this morning to fix an issue with button contrast in prod: #16829 (it might not like that there was an update to a file deleted here)