Office page template

[johnnyporkchops]

Summary

Office page template. Mural board of mockups for pages that will need to be built with this template

• Resolves Build office page template #5602

Currently deployed to dev space for testing - Mockups:
https://dev.fec.gov/about/test-office/
https://dev.fec.gov/admin/pages/12755/view_draft/

Required reviewers

One UX , one frontend

Impacted areas of the application

MODIFIED: fec/static/scss/base.scss
MODIFIED: fec/static/scss/components/_contact-items.scss
MODIFIED: fec/home/blocks.py
MODIFIED: fec/home/models.py
MODIFIED: fec/home/templates/blocks/contact-info.html
NEW: fec/static/scss/components/_fec-offices.scss
NEW: fec/home/templates/blocks/simple-document.html
NEW: fec/home/templates/home/office_page.html
NEW: fec/home/migrations/0125_officepage.py

Screenshots

How to test

• remove dev deploy task before merge

• npm run build-sass

• Go to Wagtaill admin

• Test new OfficePage template
  See examples here:
  Mural board of mockups

• Test pages are also created on Dev, such as:

  • https://dev.fec.gov/about/test-office/
  • https://dev.fec.gov/admin/pages/12755/view_draft/

Note: The only subpage_types dict it was added to is AboutLandingPage, but it works as a child of the more generic page types like ResourcePage and CustomPage because they have no dict restricting allowable subpage_types`. If we need it as a child of any of the other other pages with restrictions, we need to add it to their lists.

[codecov-commenter]

Codecov Report

Merging #5636 (cdee228) into develop (81375d8) will increase coverage by 0.01%.
The diff coverage is 90.00%.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

@@             Coverage Diff             @@
##           develop    #5636      +/-   ##
===========================================
+ Coverage    75.11%   75.12%   +0.01%     
===========================================
  Files          125      125              
  Lines         8136     8144       +8     
  Branches       650      650              
===========================================
+ Hits          6111     6118       +7     
- Misses        2025     2026       +1     

Impacted Files	Coverage Δ
fec/home/models.py	88.13% <87.50%> (-0.07%)	⬇️
fec/home/blocks.py	100.00% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[JonellaCulmer]

@johnnyporkchops Everything looks great in dev. Just noted two things:

1. When linking to other pages like we will in the mockup below, will we able to use anchor links to those specific sections? Each office needs to be/have it's own section ID, right?
   

2. For footnotes, there isn't a clear place to enter a footnote at the bottom of the page, so I'm just using the extra information section at the bottom of the office section. Easy enough to do it that way but I was wondering if that was your intention?

[johnnyporkchops]

1. When linking to other pages like we will in the mockup below, will we able to use anchor links to those specific sections? Each office needs to be/have it's own section ID, right?

@JonellaCulmer. Correct. In the template, I'll add a class or id to the H2 (or above the H2) that matchest the office title , replacing spaces with dashes. So it would be something like <a name='office-of-the-commission_secretary'></a>. Then you could anchor link to .../#office-of-the-commission_secretary ,.

2. For footnotes, there isn't a clear place to enter a footnote at the bottom of the page, so I'm just using the extra information section at the bottom of the office section. Easy enough to do it that way but I was wondering if that was your intention?

Yes, thats the idea. Since it works that way, we don't need to create another field specifically for that

[johnnyporkchops]

@JonellaCulmer foe anchoring to an office section, I will add a separate anchor item above the H2-title for the office section instead of on the H2 to handle cases where we leave the H2-title off.
(There is also the anchor option in Rich Text fields which might come in handy in certain situations, although it has limited capability )

[patphongs]

Changes look great and works as expected @johnnyporkchops, just a small edit to put the develop branch back for the deploy hook. Then I will fully approve.

[patphongs]

Please update back to develop branch

[JonellaCulmer]

Everything looks great! Thanks, @johnnyporkchops

[patphongs]

👍 Thanks @johnnyporkchops !