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
Guide Card 1
Title: NCI Research Areas
Spanish Title: Iniciativas clave y progreso
Button 1: Cancer Biology
Button 2: Cancer Genomics
Button 3: Causes of cancer
Button 4: Detection & Diagnosis
Spanish Button 1: Informe Anual a la Nación
Spanish Button 2: Medicina de precisión
Spanish Button 3: Inmunoterapia
Spanish Button 4: Estudio Lung-MAP
Guide Card 2
Title: Key Initiatives & Progress
Spanish Title: El proceso de investigación del cáncer
Button 1: Intramural Research
Button 2: Extramural Research
Spanish Button 1: Biología del cáncer
Spanish Button 2: Genómica del cáncer
Guide Card 3
Title: NCI's Role in Cancer Research & Infrastructure
Spanish Title: Áreas de investigación
Button 1: Key Initiatives
Button 2: Annual Report to the Nation
Button 3: Research Advances by Cancer Type
Button 4: Stories of Discovery
Button 5: Milestones in Cancer Research
Button 6: NCI's Clinical Trials Program
Spanish Button 1: Detección y diagnóstico
Spanish Button 2: Prevención
Spanish Button 3: Tratamiento del cáncer
Spanish Button 4: Investigación de salud pública y el cáncer
Spanish Button 5: Cánceres en la niñez
Spanish Button 6: Estudios ALCHEMIST
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)
Build Guide Card Row variation of the Guide Card component based on design specs/requirements documented in this ticket
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
Scenarios
Solution
Prerequisites
required dependency for identifying the problem, scope and then solution for this issue
[ ] Short Spike Description - Issue #9999
Tasks