Build: Glossified Text - Githubissues

Build Glossified Text component based on design specs/requirements documented in this ticket

ESTIMATE TBD

Predecessors:

Design Definition of Done

When all criteria below are met.

Baseline Discovery (add any additional info or links)

[ ] Heuristics/Best Practices
[ ] Analytics *Related links:
[ ] Accessibility *Related links:

Design

[ ] Design component. Link to design ticket:
[ ] Conduct Design QA *Meet with design team to do visual QA for colors, fonts, spacing (padding/margin), etc.
[ ] Get component approved by client

USWDS Component Equivalent

Is this a USWDS component? If so - are there variants? If we are creating something new, provide links to what it is based off of in resources section

Related USWDS Links: Here goes a URL to an existing web page

Variants Information

Is there a USWDS variant? If we are using it - include the names of the variants, and links to USWDS. If we are creating something new, provide links to what it is based off of in resources section

Variant on tooltip: https://designsystem.digital.gov/components/tooltip/
Variant on large modal: https://designsystem.digital.gov/components/modal/

Styling:

Anatomy of a component

[ ] Use correct spacing (8px grid) size, emphasis, alignment

Usage

When to use component and when to use variant(s) Ex: Use primary button over secondary

Style Guide Dos and Donts Ex: Don't have 1 button in CTA strip

Behaviors

Summary of state changes and behaviors. AC's are more detailed.

Notes

Some complementary notes if necessary:

Design ticket: https://github.com/NCIOCPL/ncids/issues/245
Dotted underline on inactive, solid underline on hover and a tooltip popup with truncated definition (char limit - 100?) and a link to modal "See full definition".
Modal popup onclick of either the link in the tooltip or the term on the page
Onclick of speaker icon in modal, play audio pronunciation
Onclick of "x" icon, close modal

InVision:

Mockups: (hover on "immune system" term) https://publicis.invisionapp.com/share/QV11KIJ53XEA#/458803491_Immunotherapy_To_Treat_Cancer_-_Desktop
Tool tip: https://publicis.invisionapp.com/share/QV11KIJ53XEA#/458803390_Immunotherapy_To_Treat_Cancer_-_Desktop_Dictionary_Tooltip
Modal: https://publicis.invisionapp.com/share/QV11KIJ53XEA#/457141692_Immunotherapy_To_Treat_Cancer_-_Desktop_Open_Modal Web Page: https://www.cancer.gov/about-cancer/treatment/types/immunotherapy

Acceptance Criteria for Behaviors

If a component changes between breakpoints, or things show/hide, that gets captured here

Scenario: [title]
  Given [context]
    And [some more context]
  When  [event]
  Then  [outcome]
    And [another outcome]

Solution

Prerequisites

required dependency for identifying the problem, scope and then solution for this issue
[ ] Short Spike Description - Issue #9999

Tasks

[ ] Update Documentation Site (docs)
- [ ] Create or update [INSERT DOCUMENTATION PAGE OR SECTION ON PAGE HERE] that includes:
- Developer Documentation
  - What SASS partial to import
  - (HTML Tab) What is the HTML?
  - (HTML Tab) (for vanilla js) What is the js library to import?
  - (React Tab) What is the react library to import?
  - (React Tab) What is the react markup?
- IA Provided Guidance Documentation
  - Includes when/how the component should be used
- [ ] If the component is a global component like the footer, then it needs to be added to the documentation site as well as a real usage.
[ ] Update NCIDS-CSS
- Insert list here of partials to be created (There should be a sass partial available for all variants that are being created in this ticket)
[ ] Update NCIDS-JS
- Insert requirements/list of components for JS
[ ] Update NCIDS-React
- [ ] Insert requirements/list of components for react
- (it can also be a separate ticket, should be linked here)

NCIOCPL / ncids

Build: Glossified Text #248