Create Raw HTML for 2-Summary Box Row of Cancer Types Landing Page

As a user, I want to see some cancer types highlighted, so that I can be directed to that content more quickly.

We will be adding this section to the page using a raw HTML block. This section will be usa-section--light. It will contain the 2-summary box row pattern that has two usa-summary-box components.

Requirements

Each usa-summary-box will span the column that it is in
Spacing between each usa-summary-box will be the standard column spacing
The YAML will exactly match the comps
- Link colors are consistent with links elsewhere
- usa-list unstyled for the list items

DoR Drupal Tasks

[x] Refine user story statement
[x] Create scenarios (in Figma already)
[x] DS development of usa-summary-box

ESTIMATE TBD

Acceptance Criteria

Given user is logged into the CMS
  When user creates a new "Home and Landing" content item
  Then the editing page for a "Home and Landing" content item displays
    And user fills out the following fields
      | fieldLabel                  | value                                                        | field_name                     |
      | Home and Landing Page Style | NCIDS with Title                                             | field_page_style               |
      | Pretty URL                  | ncids-cancer-types-landing-page                              | field_pretty_url               |
      | Page Title                  | Automated Test Cancer Types Landing Page                     | title                          |
      | Browser Title               | Automated Test Cancer Types Landing Page - Browser Title     | field_browser_title            |
      | Card Title                  | Automated Test Cancer Types Landing Page - Card Title        | field_card_title               |
      | Meta Description            | Automated Test Cancer Types Landing Page Meta Description    | field_page_description         |
      | Feature Card Description    | Automated Test Cancer Types Landing Page - Feature Card Desc | field_feature_card_description |
  When user selects "Add Raw HTML Content" from "Contents" dropdown
  Then "NCIDS Raw HTML Content" section appears
    And user fills out the following fields
    And user fills out the following fields
      | fieldLabel       | value              | field_name           |                                                                                                                                                                                                | field_name           |
      | Raw HTML Content | <insert code here> | field_card_raw_html  |
    When user saves the content page
    Then user can see the 2-summary box row section on the page
      And the section displays two summary boxes
      And the first summary box has the heading "Common Cancer Types"
        And the summary box displays two columns of text
        And the first column displays an unordered list of links
          And the first item in the list is "Lung Cancer" and it links to "/types/lung"
          And the next item in the list is  "Melanoma" and it links to "/types/skin"
          And the next item in the list is "Non-Hodgkin Lympoma" and it links to "/types/lymphoma"
          And the next item in the first column list is "Pancreatic Cancer" and it links to "/types/pancreatic"
          And the next item in the list is "Prostate Cancer" and it links to "/types/prostate"
        And the second column idisplays an unordered list of items
          And each item in the list is a link
          And the next item in the list is "Bladder Cancer" and it links to "/types/bladder"
          And the next item in the list is "Breast Cancer" and it links to "/types/breast"
          And the next item in the list is "Colorectal Cancer" and it links to "/types/colorectal"
        And the next item in the list is "Endometrial Cancer" and it links to "/types/uterine"
        And the next item in the list is "Kidney Cancer" and it links to "/types/kidney"
      And the second summary box has the heading "Advanced and Ongoing Diagnosis"
        And the summary box displays one column of text
        And the column displays an unordered list of links
          And the first item in the list is "Advanced Cancer" and it links to "/about-cancer/advanced-cancer"
          And the next item in the list is  "Managing Cancer Care" and it links to "/about-cancer/managing-care"
          And the next item in the list is "Metastatic Cancer" and it links to "/types/metastatic-cancer"
          And the next item in the list is "Recurrent Cancer" and it links to "/types/recurrent-cancer"

Analytics Acceptance Criteria

Scenario: Analytics click event for the summary boxes on the Cancer Types landing page
Given a user is on the Cancer Types landing page cancer.gov
When the user clicks on a link within the summary boxes on the page built using the raw HTML component
Then there should be an NCIDataLayer Other event 
  And the event has the name “LP:RawHTML:LinkClick”
  And the event has the the linkname “LP:RawHTML:LinkClick”
  And this event should have the following data:
    | key                | value                                                                                                                                                                                                                                                                                                         |
    | location           | Body                                                                                                                                                                                                                                                                                                          |
    | pageRows           | This should return the number of rows on the page overall.                                                                                                                                                                                                                                                    |
    | pageRowIndex       | This should return the index of the row number on the page that was clicked.                                                                                                                                                                                                                                  |
    | pageRowCols        | This value should count the number of items in the columns. For summary boxes this should be set to 2.                                                                                                                                                                                                        |
    | pageRowColIndex    | This should pass 1 or 2 depending on which summary box is clicked.                                                                                                                                                                                                                                            |
    | containerItems     | This value should count the number of components within the container. This value for the summary boxes will be 1.                                                                                                                                                                                            |
    | containerItemIndex | This pass where the component falls within the count the number of components within the container. For the summary boxes this will pass 1.                                                                                                                                                                   |
    | componentType      | Defaults to 'Raw HTML'                                                                                                                                                                                                                                                                                        |
    | componentTheme     | Default is `Not Defined'                                                                                                                                                                                                                                                                                      |
    | linkText           | Defaults to the text content of the link clicked. Should match text of the link clicked.                                                                                                                                                                                                                      |
    | componentVariant   | This should pass the value "SummaryBox"                                                                                                                                                                                                                                                                       |
    | title              | This should pass the heading value for each summary box.                                                                                                                                                                                                                                                      |
    | linkType           | This should be added as a data attribute to each link in the raw HTML block and defined as `Internal`, `External`, or `Media` based on the type of link. [In previous requirements meeting had discussed having this be assessed by the code rather than needing to have a manual data attribute on the link] |
    | linkArea           | This should be set to 'Text' for all the links in the summary boxes.                                                                                                                                                                                                                                          |
    | totalLinks         | This value should reflect the total number of links in the summary box. This should be distinct for each summary box (not the total of both summary boxes)                                                                                                                                                    |
    | linkPosition       | This should reflect the position of the link in each summary box counting down from the top of the list. This should be distinct for each summary box so that the first link passes 1.                                                                                                                        |

Adobe Analytics to Verify in Testing:

On a click of a link within the summary boxes, we should see the following values with the following structure/values:

eVar64 - linkType|title|linkText
eVar65 - componentType|componentTheme|componentVariant
eVar66 - pageRows|pageRowIndex|pageRowCols|pageRowColIndex|containerItems|containerItemIndex
eVar67 - linkArea|totalLinks|linkPosition
eVar68 - location
event 27

(Other values will fire, but these are the core ones to this ticket.)

Resources:

Figma

Notes

Some complementary notes if necessary

Solution

Prerequisites

NCIDS #1398

Parent Issue

4198

Technical Notes

More notes, or technical nuances/direction

NCIOCPL / cgov-digital-platform

Create Raw HTML for 2-Summary Box Row of Cancer Types Landing Page #4216