(#5025) Blog Post Mock HTML

[karlikpj]

Closes 5070
Closes 5025

Pull Request Details

Add description

Closes #

Author PR Checklist

Items that the author of the PR is responsible for checking before submitted the PR.

General:

• I have reviewed the acceptance criteria defined in the ticket and ensured the work has been completed.
• The commit message passes all quality commit message standards.
• Unit tests have been updated or created to reflect any javascript changes.
• Storybook scenarios have been updated or created to reflect any html/css/js changes.

Accessibility:

• WCAG 2.1 Level AA requirements have been met.

Development:

• Any new or updated javascript code has 100% unit test coverage.
• New or updated breakpoints have regression images.
• Breaking changes have been thoroughly documented in the PR.

Product Reviewer PR Checklist

Items the product team is responsible for reviewing.

General:

• There are no unexpected or unapproved regression image changes.

• Functionality of interactive elements meet the acceptance criteria.
• The product is visually and functionally the same across the different browsers.

Accessibility:

• AxeDev Tools: there are no new or outstanding accessibility issues introduced in this PR.
• Lighthouse: scores have not noticeably decreased during this PR.
• Wave: there are no new errors or contrast errors introduced in this PR.

Design Reviewer PR Checklist

Items the design team is responsible for reviewing. 


General:

• New or updated features introduced in this PR are developed mobile-first.
• Breakpoint changes and regression images match those breakpoints.
• This PR has been tested in all supported browsers at all breakpoints.

Developer Reviewer PR Checklist

Items the development team is responsible for reviewing.

General:

• New code passes code quality standards set by industry standards.
• The expected Storybook stories have been added or updated for the new or updated feature.
• The expected unit tests have been added or updated for the new or updated feature.

Accessibility:

• VoiceOver: Described content matches with what was expected.
• Keyboard navigation: new or updated features and content are navigable via the keyboard.

[github-actions]

Viewing Information

• The documentation site
• NCIDS JS Documentation
• The storybook site
• The example site

[bryanpizzillo]

Ok, a few things to get you started.

On over all note - the whole blog post is not a BEM element. So all the sub components (Categories, archives, etc) should be their own BEM elements. I noted about the blog post items below, but remember Categories and archives ARE ALSO FOR SERIES. So they should be something like cgdp-blog-archive and cgdp-blog-categories and definitely NOT cgdp-blog-post__categories.

This is good example for @andyvanavery31 why I had said we should mock both the blog post and series. So you should really add series to this as the templates are shared.

[bryanpizzillo]

Instead of going through the HTML with what to keep and what to kill here is what the content should be like... I followed the work that was done for all the other inner pages.

<article>
  <h1 class="nci-heading-h1">{title}</h1>
  {{ NEW - Subscribe and Byline/date }}
  <div class="cgdp-inner-content-area">
	{{ field_image_article }}
	{{ field_intro_text }}
    <div class="cgdpl>
       <div class="contentzone">
          <div id="cgvBody">
            {{body}}
          </div>
       </div>
    </div>
  </div>
  <footer class="cgdp-article-footer">
		{{ field_citation }}
		{{ field_related_resources }}
      {{ NEW - PAGER HERE }}
		{{ public_use }}
	</footer> 
</article>

Also, nothing should be cgdp-blog-post. We are not going that crazy... The 2 styles we follow for custom bits are:

1. Fields can be cgdp-field-<field_name> e.g., cgdp-field-intro-text. This is used when a field is on its own.
2. Make a new BEM block like the Press Release Title Block. In this case the Page Title had a subtitle, and the dates appeared at the top, and the there is a weird contact us box.
   • You probably should take this approach for the subscribe/byline/date. The title should be able to stay in the template as I have it above -- PR title got junk above it, thus could not hang out on its own. So maybe, IDK, cgdp-blog-post-info as you BEM element to hold the subscribe link and byline/date.

Templates -

• field_intro_text
• field_image_article
• field_related_resources
• field_citation

[bryanpizzillo]

I am iffy on <main> being here or in the main template. It should probably go into the thing you are using for the 2 columns, wrapping the left column where this is placed.

[bryanpizzillo]

See my notes in blog-content that apply to the footer area. But:

• The footer class is cgdp-article-footer
• public use already exists and you should follow its classes
• I also noted on the ticket that the comp is missing citations and related resources.
• The pager should be something like cgdp-blog-post-pager (it is its own BEM element) (Also do you need the clearfix as this will be outside of .cgdpl??)

[bryanpizzillo]

So this is the old stuff. It needs to be the new image. I am going to assume the cgdp-image HTML you have below is correct, but this needs to be wrapped with the HTML in the field_image_article template I linked above. (TL;DR; <div class="cgdp-field-image-article"> should replace the <div data-entity-embed... you have above.