Design Epic: Article Page

[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 Article Mock
• [x] Fraken Article Wireframe
• [x] USWDS Article Wireframe
• [x] Edge Case Article Wireframes
• [x] Future Article Wireframe
• [ ] OTP Prototyping
• [ ] 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

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)
• [x] Footer
• [ ] Glossification

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

• [x] Language toggle
• [x] Mobile Bread Crumbs - we will not have these.
• [x] Page Options
• [ ] OTP (if floaty and sticky)
• [x] Public Use and Syndication
• [x] References & Citations

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
• [x] Citation Tooltips within Content (Footnote Linking)

Design Research & Inspiration:

Mural: https://app.mural.co/t/publicissapient7269/m/publicissapient7269/1613764635058/fe62055ca614f0dbd6fc405f622ef410a9b9119e

Notion: https://www.notion.so/Article-b6f7e391c8584ee7931d52d4ba7703c0

[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 article template for display.

[meglake]

Closing out since child tickets are complete