search

NCIOCPL / ncids

NCI Design System
10 stars 5 forks source link

Build: Page Options #215

Closed blilianyu closed 8 months ago

blilianyu commented 3 years ago

Build Page Options component based on design specs/requirements documented in this ticket

ESTIMATE TBD

Design Definition of Done

When all criteria below are met.

Baseline Discovery (add any additional info or links)

Design

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

Styling:

Anatomy of a component

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.

Invision Mockups:

Here goes a URL to or the name of the mockup(s) in inVision to include hex codes, etc.

Notion Documentation Additional background information for requirements:

*https://www.notion.so/Page-Options-a487250b2be542c4b034b67adddb3fe7

Notes

Some complementary notes if necessary:

When to use this component:

Use the print and/or email icons to include a way for users to print or share an email URL of the content page they are currently on. There are two icons available: print and email.

Usability Guidance

These icons should only be used on desktop and tablet displays. These icons should not be displayed when user is viewing a page on mobile. The print option should default to open the browser's native print preview. The email option should default to "mailto"

Acceptance Criteria for Behaviors

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

Scenario: User wants to share a c.gov page on desktop or tablet
  Given User is on a c.gov page on desktop
  Then the print and email icons show in the top right under the main nav and above the footer on the right
    And onclick of the email icon, the native email client appears
    And in the email client the subject is pre-populated with "Information from the National Cancer Institute Web Site"
    And in the email client the body is pre-populated with "I found this information on www.cancer.gov and I'd like to share it with you: [enter URL]

NCI's Web site, www.cancer.gov, provides accurate, up-to-date, comprehensive cancer information from the U.S. government's principal agency for cancer research. If you have questions or need additional information, we invite you to contact NCI’s LiveHelp instant messaging service at https://livehelp.cancer.gov, or call the NCI's Contact Center 1-800-4-CANCER (1-800-422-6237) (toll-free from the United States)."
Scenario: User wants to print a c.gov page on desktop or tablet
  Given User is on a c.gov page on desktop or tablet
  Then the print and email icons show in the top right under the main nav and above the footer on the right
    And onclick of the print icon, the print dialogue appears
    And the user has the choice to print the page (print style sheet applied)
Scenario: User wants to share or print a c.gov page on mobile
  Given User is on a c.gov page on mobile
  Then no icons appear for sharing or printing options

Solution

Prerequisites

Tasks

anthonycuellar commented 3 years ago

For all content types

olitharp-nci commented 3 years ago

New component - need guidance

russellwyatt commented 2 years ago

Adding an image for our hover states for the page options. It is basically the same treatment as a text link but WITHOUT the underline.

page_options

karlikpj commented 2 years ago

Can we use the token names for this type of thing - (primary/secondary/accent) etc - we dont use hex just the token names. thks!

russellwyatt commented 2 years ago

Yeah, it pre-populates for a plugin I use in Sketch. But I'll update.

VictoriaSunNIH commented 2 years ago

This is on hold for the DS - it is not a component but rather 2 icons on cancer.gov implemented through https://github.com/NCIOCPL/cgov-digital-platform/issues/3256

This should be included in a future template ticket (#385)

meglake commented 2 years ago

The outstanding question for whether we move forward with this ticket is: Do we create a DS component for page options (i.e. print and email icons) and create a page in the DS with documentation/guidance and code?

Leaning toward this not as DS component but documented as part of #385. Confirming with team then will closing out.

Update based on 6/9/22 meeting with design team:

sarinapadilla commented 8 months ago

@laurelthrash , closing this ticket as we have implemented the page options in cgov-digital-platform!