search

NCIOCPL / ncids

NCI Design System
10 stars 5 forks source link

Build: Guide Card - C. Guide Card Row #711

Closed blilianyu closed 3 months ago

blilianyu commented 1 year ago

Build Guide Card Row variation of the Guide Card component based on design specs/requirements documented in this ticket

ESTIMATE TBD

Styling:

Anatomy of a component

Behaviors

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

InVision:

Acceptance Criteria for Behaviors

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

As a user, I would like to see the guide card row, so that I can quickly scan the groups of call-to-actions.

Scenario: User views a page with a Guide Card Row on Widescreen or Desktop
Given a user is viewing the Cancer.gov home page 
  And the browser width is 1400px or less  
Then the guide card row will appear
  And the optional guide card row title will appear as 2XL
  And the 3 cards will appear
  And the title of the card will appear as 2XL
  And then the buttons will appear with the secondary button outline style and be top aligned
  And clicking on the buttons will take the user to the corresponding page

Scenario: User views a page with a Guide Card Row on Tablet Large or Tablet
Given a user is viewing the Cancer.gov home page 
  And the browser width is 880px or less  
Then the optional guide card row title will appear as 2XL
Then the cards will stack
  And the title of the card will appear as 2XL
  And then the buttons will appear with the secondary button outline style and be top aligned
  And clicking on the buttons will take the user to the corresponding page
  And the height of the card will be fluid

Scenario: User views a page with a Guide Card Row on Mobile Large
Given a user is viewing the Cancer.gov home page 
  And the browser width is 480px or less  
Then the optional guide card row title will appear as 2XL
Then the cards will stack
  And the title of the card will appear as XL
  And then the buttons will appear with the secondary button outline style and be top aligned
  And clicking on the buttons will take the user to the corresponding page
  And the height of the card will be fluid

Scenario: User views a page with a Guide Card Row on Mobile
Given a user is viewing the Cancer.gov home page 
  And the browser width is 320px or less  
Then the cards will stack
  And the title of the card will appear as XL
  And then the buttons will appear with the secondary button outline style and be top aligned
  And clicking on the buttons will take the user to the corresponding page
  And the height of the card will be fluid
  And the background shadow will not appear

Scenarios

Solution

Prerequisites

Tasks

blilianyu commented 1 year ago

Guide Card Row

When to use Guide Card Row variation

When to consider something else

Additional considerations

andyvanavery31 commented 3 months ago

Closed by #774