Story: Create Summary Box Paragraph for MLP

As a content editor, I want to be able to add a Summary Box paragraph to a Mini Landing Page, so that I can feature prose or additional calls-to-action with grouped information in a way that intentionally breaks up content on a page to improve the content hierarchy and give the site visitors the ability to scan information.

Requirements

Functional Requirements

The component shall have an option for content editors to add title text
The component shall allow for the content editor to add text, with text formatting, links, and ordered and unordered lists
The body text of the component shall not allow the content editor to add a heading
The component shall utilize the measure standard for text as used on Mini Landing Pages

Specifications

The summary box component will use <aside> for accessibility purposes
The summary box paragraph will have an optional Heading field with a WYSIWYG that allows only Bold and Italics
The summary box heading will be at the h2 level in the page hierarchy
The summary box heading will be stylistically an h3 (token size MD / 20px / Line-height 2)
The summary box paragraph will have a required Body field a WYSIWYG that allows inline styles (bold, italics, strikethrough, superscript, subscript), remove format, ordered and unordered list, link, link removal
Measure shall be applied to the text in the Summary Box
When the Summary Box is the only item in the row, it will take up N columns left aligned, where the Summary Box is close to the width of the measure by visual review

Analytics Requirements On click of a link within a summary box, an EDDL event shall be raised with the linkName and event name of: MLP:SummaryBox:LinkClick.

This click event shall send the following information as data elements to EDDL:

Information about the page that was clicked:

location: This value shall be set to 'Body'
pageType: This value shall be set to match the content type of the page. In this case: 'cgvMiniLanding'
pageTemplate: This value should be set to match the template of the page. In this case: 'ncids_default'

Location within the page of the component clicked:

pageRows: This value shall be set to match the total number of rows on the page overall
pageRowIndex: This value shall be set to the index of the row from the component clicked is placed within the page.
pageRowCols: This value shall be set to the number of columns within the row of the clicked component. (Will be set to 0 if no column component is present.)
pageRowColIndex: This value shall be set to the index of the selected column within the selected row from the link click. (Will be set to 0 if no column component is present.)
containerItems: This value shall be set to the number of items within a container or row.
containerItemIndex: This value shall be set to the position of the clicked item within the container or row.
(For examples of how these values might be set see: https://app.mural.co/t/publicissapient7269/m/publicissapient7269/1721221635530/6d43c52f53d2171d5bc1fd66707d5c4496a4a867?sender=u68cf40f39616fa5333f84484)

Information about the component clicked:

componentType: This is the name of the component and should be set to 'Summary Box'
componentTheme: As this component does not currently have theming options, this value should be set to 'Not Defined'
componentVariant: As this component does not currently have variation options, this value should be set to 'Not Defined'
linkText: This value shall be set to the text content of the link clicked. This value should be truncated after 50 characters.
title: This value is the heading of the Summary Box. If no Summary Box is set, this value will pass 'Not Defined'. This value should be truncated after 50 characters.
linkType: This should be set based on the type of link. The values will be:
- External - This is for external links outside of the host web site. Conditions that match this:
  - If the url start with http:// or https:// AND the hostname does not match the current hostname in the browser. (e.g., the href is https://www.cancer.gov/foo and the visitor is on the web page https://dceg.cancer.gov/bar)
- Media - This is for managed links in the WYSIWYG to media entities (e.g., files and infographics). Conditions that match this:
  - The <a> element has the data-entity-type="media" attribute.
- Internal - This is for managed and unmanaged links within the same host. Conditions that match this:
  - If the url starts with http:// or https:// AND the hostname match the current hostname in the browser. (e.g., the href is https://www.cancer.gov/foo and the visitor is on the web page https://www.cancer.gov/bar)
  - The URL does not specify a protocol (i.e. it does not start with something: and it does not match the criteria of Media.
- Email - This is for mailto: links within the content. Conditions that match this:
  - If the URL starts with mailto:.
- Other - This is for any URLs that have a protocol that we do not know, e.g., tel: or javascript:. Conditions that match this:
  - If none of the other above conditions were met.
linkArea: This will pass 'Text' based on the link clicked
totalLinks: This will count the total number of links inside the Summary Box
linkPosition: This will count the position of the link in the Summary Box as a data attribute

DoR Tasks

[x] Content Model Drafted
[x] Content Model Reviewed
- [x] Developer Review
- [x] IA Review
[x] Content Model Approved
- [x] Developer Approval
- [x] IA Approval
[x] Acceptance Criteria Drafted
- [x] Analytics Acceptance Criteria Drafted (As applicable)
[x] Scenarios created for YAML
[x] Acceptance Criteria Reviewed
- [x] Developer Review
- [x] IA Review
- [x] Analytics Review
[x] Acceptance Criteria Approved
- [x] Developer Approval
- [x] IA Approval
- [x] Analytics Approval

DoD Tasks

[ ] Governance Drafted
[ ] PR Review (see PR for review and comments)
[ ] Client Review with Demo

Technical Notes

Content Model

Paragraph Types Update
New NCIDS Summary Box Paragraph

Scenarios/Figma

On the example page with the title, "The RAS Initiative", and the url /test/key-initiatives/ras, please add make the example page match the comp found here
On a new example page, make the title, "Test Page for Summary Box.", and use a url of /test/ncids-mini-landing-summary-box, please add the following 2 Summary Boxes after the Page Title:

Summary Box 1 Heading: This is an example of a very long heading using the optional heading field in the Content Management System that will wrap with the measure if implemented correctly

<p><strong>More than 30 percent</strong> of all human cancers - <em>including 95 percent of pancreatic cancers and 45 percent of colorectal cancers</em> - are driven by <sup>mutations of the RAS</sup> family of genes. <sub>NCI established the RAS initiative in 2013 to explore</sub> innovative approaches for attacking the <s>proteins encoded by mutant forms of RAS genes</s> and to <strong><em>ultimately create effective, new therapies for RAS-related cancers.</em></strong></p>

Internal Link Testing
<!-- Make this a managed link in the WYSIWYG -->
<p>See <a href="/about-cancer">About Cancer</a> managed internal link.</p>
<p>See <a href="/about-cancer">About Cancer</a> internal link.</p>

Media Link Testing
<!-- Make this a managed link to the following cgov_file in the WYSIWYG -->
<p>See <a href="/research/progress/discovery/test-file-url">Test File Download</a> managed media link.</p>

External Link Testing
<p>See <a href="https://www.google.com/">Google</a> for external link.</p>

List Testing

<ul>
  <li>This is</li>
  <li>an unordered</li>
  <li>list of stuff</li>
</ul>
<ol>
  <li>This is</li>
  <li>>an ordered</li>
  <li>list of stuff</li>
</ul>

Summary Box 2 No Heading

This is a summary box has no heading!!
Email Link Testing
<p><a href="mailto:jenny@example.org">Email Jenny</a></p>
Other link testing
            <p><a href="tel:1-555-867-5309">Call Jenny</a></p>

Acceptance Criteria

CMS User Experience

Scenario: NCIDS Summary Box paragraph can be added to Mini Landing Page content type
  Given the user is logged into the CMS as an editor
    And the user is editing a "Mini Landing Page" content item
    And the Mini Landing Page is using the NCIDS style
  When the user expands the dropdown to add a paragraph to Contents
  Then the dropdown displays "Add NCIDS Summary Box"
  When the user selects "Add NCIDS Summary Box"
  Then the fields for an "NCIDS Summary Box" paragraph appear
    And the first field is the "Heading" field
    And the field is optional
    And it is a WYSIWYG that allows bold and italics
    And the next field is the "Body" field
    And the field is required
    And it is a WYSIWYG
    And theWYSIWYG will have inline styles (bold, italics, strikethrough, superscript, subscript), remove format, ordered and unordered list, link, link removal)
    And the WYSIWYG will NOT have headings, `<cite>` `<blockquote cite>`, pull quotes, `<dl><dt><dd>`, or `<drupal-entity data-entity-type data-entity-uuid data-entity-embed-display data-entity-embed-display-settings data-align data-caption ddata-embed-button>`
    And measure will be applied to the text in the Summary Box
  When a content editor adds anything that is not allowed in the WYSIWYG
  Then the added content that is not allowed will not be rendered
  When the content editor has added a link
    And the content editor uses the Remove Link function
  Then the link will be removed
  When the content editor has added formatting to text (e.g., bold, italics, strikethrough, superscript, or subscript)
    And the content editor uses the remove format function
  Then the formatting will be removed from the text

Front-End User Experience

Scenario: A site visitor goes to a Mini Landing Page that uses the NCIDS style and has an NCIDS Summary Box on it
  Given the Mini Landing Page uses the NCIDS style
    And the Mini Landing Page has an NCIDS Summary Box on it
    And the NCIDS Summary Box has the text from the Scenarios section above
  When the visitor views the Mini Landing Page with the NCIDS style and the NCIDS Summary Box
  Then the visitor will see the NCIDS Summary Box on the page
    And it will exactly match the comps
    And the heading in the Summary Box will be an h2 in the page hierarchy
    And the heading in the Summary Box will appear with the token size MD (font size 20px/Line-Height-2)
  When the user clicks on a link in the NCIDS Summary Box
  Then they will be redirected to the linked page
  When the content editor did not add a heading to the Summary Box Paragraph
  Then no heading will appear in the Summary Box

Analytics Requirements Summary Box MLP – Internal link click event - managed

Scenario: Summary Box MLP – Internal link click event - managed
  Given user is navigating to "/test/ncids-mini-landing-summary-box"
    And browser waits
When user clicks on the “About Cancer” link in the sentence “See About Cancer managed internal link.” in the summary box in the first position.
        Then page click request is sent
        And browser waits
        And the following parameters should be captured
    And the Mini Landing Page has an NCIDS Summary Box
  When the user clicks on a link in the NCIDS Summary Box
            | parameter | value                                                          |
            | prop4     | D=pev1                                                         |
            | prop8     | english                                                        |
            | prop57    | D=v64                                                          |
            | prop58    | D=v65                                                          |
            | prop59    | D=v66                                                          |
            | prop60    | D=c67                                                          |
            | prop67    | D=pageName                                                     |
            | prop68    | D=v68                                                          |
            | evar2     | D=c8                                                           |
            | evar61    | cgvMiniLanding\|ncids_default                                  |
            | evar64    | Internal\|This is an example of a very long heading using th
\|About Cancer\                                 |
            | evar65    | Summary Box\|Not Defined\| Not Defined                      |
            | evar66    | 2\|1\|0\|0\|1\|1                                               |
            | evar67    | Text\|4\|1                                                    |
            | evar68    | Body                                                           |
            | pageName  | {CANONICAL_HOST}/test/ncids-mini-landing-summary-box |
            | pageURL   | {PROTOCOL}://{CANONICAL_HOST}/test/ncids-mini-landing-summary-box |
            | event112  |                                                                |
            | pev2      | MLP:SummaryBox:LinkClick                                      |
            | linkType  | lnk_o                                                          |

Summary Box MLP – Internal link click event - unmanaged

Scenario: Summary Box MLP – Internal link click event - unmanaged
  Given user is navigating to "/test/ncids-mini-landing-summary-box"
    And browser waits
When user clicks on the “About Cancer” link in the sentence “See About Cancer internal link.” in the summary box in the first position.
        Then page click request is sent
        And browser waits
        And the following parameters should be captured
    And the Mini Landing Page has an NCIDS Summary Box
  When the user clicks on a link in the NCIDS Summary Box
            | parameter | value                                                          |
            | prop4     | D=pev1                                                         |
            | prop8     | english                                                        |
            | prop57    | D=v64                                                          |
            | prop58    | D=v65                                                          |
            | prop59    | D=v66                                                          |
            | prop60    | D=c67                                                          |
            | prop67    | D=pageName                                                     |
            | prop68    | D=v68                                                          |
            | evar2     | D=c8                                                           |
            | evar61    | cgvMiniLanding\|ncids_default                                  |
            | evar64    | Internal\|This is an example of a very long heading using th
\|About Cancer\                                 |
            | evar65    | Summary Box\|Not Defined\| Not Defined                      |
            | evar66    | 2\|1\|0\|0\|1\|1                                               |
            | evar67    | Text\|4\|2                                                    |
            | evar68    | Body                                                           |
            | pageName  | {CANONICAL_HOST}/test/ncids-mini-landing-summary-box |
            | pageURL   | {PROTOCOL}://{CANONICAL_HOST}/test/ncids-mini-landing-summary-box |
            | event112  |                                                                |
            | pev2      | MLP:SummaryBox:LinkClick                                      |
            | linkType  | lnk_o                                                          |

Summary Box MLP – External link click event

Scenario: Summary Box MLP – External link click event
  Given user is navigating to "/test/ncids-mini-landing-summary-box"
    And browser waits
When user clicks on the “Google” link in the sentence “See Google for external link.” in the summary box in the first position.
        Then page click request is sent
        And browser waits
        And the following parameters should be captured
    And the Mini Landing Page has an NCIDS Summary Box
  When the user clicks on a link in the NCIDS Summary Box
            | parameter | value                                                          |
            | prop4     | D=pev1                                                         |
            | prop8     | english                                                        |
            | prop57    | D=v64                                                          |
            | prop58    | D=v65                                                          |
            | prop59    | D=v66                                                          |
            | prop60    | D=c67                                                          |
            | prop67    | D=pageName                                                     |
            | prop68    | D=v68                                                          |
            | evar2     | D=c8                                                           |
            | evar61    | cgvMiniLanding\|ncids_default                                  |
            | evar64    | External\|This is an example of a very long heading using th
\|Google\                                 |
            | evar65    | Summary Box\|Not Defined\| Not Defined                      |
            | evar66    | 2\|1\|0\|0\|1\|1                                               |
            | evar67    | Text\|4\|4                                                    |
            | evar68    | Body                                                           |
            | pageName  | {CANONICAL_HOST}/test/ncids-mini-landing-summary-box |
            | pageURL   | {PROTOCOL}://{CANONICAL_HOST}/test/ncids-mini-landing-summary-box |
            | event112  |                                                                |
            | pev2      | MLP:SummaryBox:LinkClick                                      |
            | linkType  | lnk_o                                                          |

Summary Box MLP – Media link click event

Scenario: Summary Box MLP – Media link click event
  Given user is navigating to "/test/ncids-mini-landing-summary-box"
    And browser waits
When user clicks on the “Test File Download” link in the sentence “See Test File Download managed media link” in the summary box in the first position..
        Then page click request is sent
        And browser waits
        And the following parameters should be captured
    And the Mini Landing Page has an NCIDS Summary Box
  When the user clicks on a link in the NCIDS Summary Box
            | parameter | value                                                          |
            | prop4     | D=pev1                                                         |
            | prop8     | english                                                        |
            | prop57    | D=v64                                                          |
            | prop58    | D=v65                                                          |
            | prop59    | D=v66                                                          |
            | prop60    | D=c67                                                          |
            | prop67    | D=pageName                                                     |
            | prop68    | D=v68                                                          |
            | evar2     | D=c8                                                           |
            | evar61    | cgvMiniLanding\|ncids_default                                  |
            | evar64    | Media\|This is an example of a very long heading using th
\|Test File Download\                                 |
            | evar65    | Summary Box\|Not Defined\| Not Defined                      |
            | evar66    | 2\|1\|0\|0\|1\|1                                               |
            | evar67    | Text\|4\|3                                                   |
            | evar68    | Body                                                           |
            | pageName  | {CANONICAL_HOST}/test/ncids-mini-landing-summary-box |
            | pageURL   | {PROTOCOL}://{CANONICAL_HOST}/test/ncids-mini-landing-summary-box |
            | event112  |                                                                |
            | pev2      | MLP:SummaryBox:LinkClick                                      |
            | linkType  | lnk_o                                                          |

Summary Box MLP – No Heading Email link click event

Scenario: Summary Box MLP – No Heading Email link click event
  Given user is navigating to "/test/ncids-mini-landing-summary-box"
    And browser waits
When user clicks on the “Email Jenny” link in the sentence “Email Jenny” in the summary box in the second position with no heading.
        Then page click request is sent
        And browser waits
        And the following parameters should be captured
    And the Mini Landing Page has an NCIDS Summary Box
  When the user clicks on a link in the NCIDS Summary Box
            | parameter | value                                                          |
            | prop4     | D=pev1                                                         |
            | prop8     | english                                                        |
            | prop57    | D=v64                                                          |
            | prop58    | D=v65                                                          |
            | prop59    | D=v66                                                          |
            | prop60    | D=c67                                                          |
            | prop67    | D=pageName                                                     |
            | prop68    | D=v68                                                          |
            | evar2     | D=c8                                                           |
            | evar61    | cgvMiniLanding\|ncids_default                                  |
            | evar64    | Email\|Not Defined\|EmailJenny\                                 |
            | evar65    | Summary Box\|Not Defined\| Not Defined                      |
            | evar66    | 2\|2\|0\|0\|1\|1                                               |
            | evar67    | Text\|2\|1                                                   |
            | evar68    | Body                                                           |
            | pageName  | {CANONICAL_HOST}/test/ncids-mini-landing-summary-box |
            | pageURL   | {PROTOCOL}://{CANONICAL_HOST}/test/ncids-mini-landing-summary-box |
            | event112  |                                                                |
            | pev2      | MLP:SummaryBox:LinkClick                                      |
            | linkType  | lnk_o                                                          |

Summary Box MLP – No Heading Other link click event

Scenario: Summary Box MLP – No Heading Other link click event
  Given user is navigating to "/test/ncids-mini-landing-summary-box"
    And browser waits
When user clicks on the “Call Jenny” link in the sentence “Call Jenny” in the summary box in the second position with no heading.
        Then page click request is sent
        And browser waits
        And the following parameters should be captured
    And the Mini Landing Page has an NCIDS Summary Box
  When the user clicks on a link in the NCIDS Summary Box
            | parameter | value                                                          |
            | prop4     | D=pev1                                                         |
            | prop8     | english                                                        |
            | prop57    | D=v64                                                          |
            | prop58    | D=v65                                                          |
            | prop59    | D=v66                                                          |
            | prop60    | D=c67                                                          |
            | prop67    | D=pageName                                                     |
            | prop68    | D=v68                                                          |
            | evar2     | D=c8                                                           |
            | evar61    | cgvMiniLanding\|ncids_default                                  |
            | evar64    | Other\|Not Defined\|Call Jenny\                                 |
            | evar65    | Summary Box\|Not Defined\| Not Defined                      |
            | evar66    | 2\|2\|0\|0\|1\|1                                               |
            | evar67    | Text\|2\|2                                                   |
            | evar68    | Body                                                           |
            | pageName  | {CANONICAL_HOST}/test/ncids-mini-landing-summary-box |
            | pageURL   | {PROTOCOL}://{CANONICAL_HOST}/test/ncids-mini-landing-summary-box |
            | event112  |                                                                |
            | pev2      | MLP:SummaryBox:LinkClick                                      |
            | linkType  | lnk_o                                                          |

Figma Comps Component Library List Summary Box on all breakpoints

NCIOCPL / cgov-digital-platform