Design Epic: Blog Post

[anthonycuellar]

Sprint Series (3 week sprints)

Feature/Main User Story: Article Page

Child tickets:

• Breadcrumbs: https://github.com/NCIOCPL/ncids/issues/22
• Intro Text: https://github.com/NCIOCPL/ncids/issues/93
• Public Use and Syndication Text: https://github.com/NCIOCPL/ncids/issues/100
• Date Display: https://github.com/NCIOCPL/ncids/issues/49

Description of Design request:

List of sub-tasks:

Add links to related tickets below

• [x] Fraken Blog Post Mock
• [x] Fraken Blog Post Wireframe
• [x] USWDS Blog Post Wireframe
• [x] Edge Case Blog Post Wireframes
• [ ] Future Blog Post Wireframe
• [ ] Prototyping (if applicable)
• [ ] Color Comps

Design specs / InVision:

Design specs indicated in the InVision links below. Please view in the inspect mode along with the comments panel

1. InVision link
2. InVision link
3. InVision link

Assets:

• Feature: JIRA Ticket #
• Mockups: Here goes a URL to or the name of the mockup(s) in inVision
• Web Page: Here goes a URL to an existing web page

Design Research & Inspiration:

Mural: https://app.mural.co/t/publicissapient7269/m/publicissapient7269/1619466551549/8e21797763eeeab1a0ac5049afba2540feff886f

Notion: https://www.notion.so/Blog-Post-280acddd57694d90a299701fa3cd4326

Components (as the designs are finalized, please check the box and enter a dev ticket):

Using USWDS Out of the Box

• [x] Site Alert (e.g. covid banner)
• [x] Banner (e.g. this is a us government site)
• [x] List in body of page (if used for OTP, Related Resources)

Needs Variant

• [x] Header (we are changing the style)
  • [x] Logo
  • [x] Search font and colors
    • [ ] Text Box (not a variant)
    • [ ] Standard Button (not a variant)
  • [x] Primary Nav
• [x] Secondary Nav
• [x] Introductory Text
• [ ] Callout Box (summary)
• [x] Inline Feature Card (without button)
• [ ] Clickbait Feature Card
• [x] Footer
• [ ] Glossification
• [x] Older/Newer Post Navigation

Custom Design (but using building blocks as much as possible from USWDS)

• [x] Language toggle
• [x] Mobile Bread Crumbs
• [x] Page Options
• [x] Public Use and Syndication
• [x] References & Citations
• [ ] Archives for Blogs (year or year + month)
• [ ] Categories/Blog Topics
• [ ] Featured Posts
• [ ] Disqus Comments

WYSIWYG Embedded Items

• [x] Images
• [x] Caption
• [ ] Credit
• [ ] Pull Quotes (not really embedded - current manual code)
• [ ] Call out box (not really embedded - current manual code)
• [ ] Image Carousel
• [ ] Video Carousel
• [ ] External Link Feature Cards
• [x] Infographics
• [x] Videos
• [ ] Tables
  • [ ] Sortable Tables
  • [ ] Enlarged Tables
  • [ ] Regular Tables
  • [ ] Enlarged sortable table
  • [ ] Responsive Tables
• [ ] Citation Tooltips within Content (Footnote Linking) USWDS

[VictoriaSunNIH]

When all components have been designed and each component has been built in the design system, we will then need to create a ticket in digital platform that references this one in terms of all of the allowed components for the blog template for display.

[meglake]

Closing out since child tickets are complete.