Story: Update List paragraph with NCIDS List without Media style for Mini Landing Pages

As a content editor, I want to be able to add a list without images to my mini landing page, so that I can feature related content in a less visual way.

We are implementing the Title and Description option for List Item Style.

For R3.1, we already updated the existing List paragraph:

Make the Title field optional
Update the List Item Style field to only display the new NCIDS templates - started with Title, Image, and Description
Update the Title, Description, and Image style for List Item Style to use NCIDS styles

Functional Requirements

For each list item, only the title is clickable (just like NCIDS Dynamic List on News & Events)
External link item will display external link icon
Media link items:
- @sarinapadilla insert rules about media type display here
Fallback rules for Override Title
- Override Title > Page Title
Fallback rules for Override List Description
- Override List Description > List Description > Meta Description
Media item display
- Infographic: Infographic Override/Page Title (Infographic)
- Video: Video Override/Page Title (Video)
- File: File Override/Page Title <file type icon> (file size)

Scenarios

Please include a list with the following items:

Internal link
- Override Title and Override List Description set
- No overrides set, where item List Description is set
- No overrides set, where item only has Meta Description
External link
- No Promotional Image set
Media link *Override Title and Override List Description set
- No overrides set, where item List Description is set
- No overrides set, where item only has Meta Description

DoR Tasks

[ ] Create templates for internal, external, and media links
[x] Content Model Drafted
[ ] Content Model Reviewed
- [ ] Developer Review
- [ ] IA Review
[ ] Content Model Approved
- [ ] Developer Approval
- [ ] IA Approval
[x] Acceptance Criteria Drafted
- [x] Analytics Acceptance Criteria Drafted (As applicable)
[x] Scenarios created for YAML
[ ] Acceptance Criteria Reviewed
- [ ] Developer Review
- [ ] IA Review
- [ ] Analytics Review
[ ] Acceptance Criteria Approved
- [ ] Developer Approval
- [ ] IA Approval
- [ ] Analytics Review

DoD Tasks

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

Acceptance Criteria

Scenario: User can see fields for a "List"
  Given user is logged in to the CMS
    And user edits a "Mini Landing Page" content item
    And user has set "Mini Landing Page Style" field to "NCIDS"
  When user opens the "Contents" dropdown 
  Then options will include "Add List" 
  When user adds a "List" to the "Contents" field
  Then user will see the fields for a "List"
    And first field will be "Title"
    And "Title" field will be optional
    And "Title" field will be a text input
    And next field will be "List Item Style"
    And "List Item Style" field will be required
    And "List Item Style" field will be a dropdown
    And "List Item Style" field will include the options "Title, Description, and Image" and "Title and Description"
    And "List Item Style" field will default to "Title, Description, and Image"
    And next field will be "List Items"
    And "List Items" will be a dropdown
    And "List Items" field will include the options "Internal Link", "External Link", and "Media Link"
    And "List Items" field will default to "Internal Link"

Scenario: User can see fields for List Items
  Given the user is logged in to the CMS
    And the user edits a "Mini Landing Page" content item
    And the user has set the "Mini Landing Page Style" field to "NCIDS"
    And the user has added a "List" to the "Contents" field
    And the user has set the "List Item Style" field to "Title and Description"
  When user adds an "Internal Link" to the "List Items" field
  Then the fields for an "Internal Link" display
    And "Link" field will be required
    And "Link" field will be an entity reference to a node
    And next field will be "Override Title"
    And "Override Title" field will be optional
    And "Override Title" field will be a text input
    And next field will be "Override List Description"
    And "Override List Description" field will be optional
    And "Override List Description" field will be a text input
    And next field will be "Promotional Image"
    And "Promotional Image" field will be optional
    And "Promotional Image" field will be a media reference to an image
  When user adds an "External Link" to the "List Items" field
  Then the fields for an "External Link" display
    And "Link" link will be required
    And "Link" field will be a text input
    And next field will be "Title"
    And "Title" field will be required
    And "Title" field will be a text input
    And next field will be "List Description"
    And "List Description" field will be required
    And "List Description" field will be a text input
    And next field will be "Promotional Image"
    And "Promotional Image" field will be optional
    And "Promotional Image" field will be a media reference to an image
  Then the fields for an "Media Link" display
    And "Link" link will be required
    And "Link" field will be an entity reference to a media item
    And next field will be "Override Title"
    And "Override Title" field will be optional
    And "Override Title" field will be a text input
    And next field will be "Override List Description"
    And "Override List Description" field will be optional
    And "Override List Description" field will be a text input
    And next field will be "Promotional Image"
    And "Promotional Image" field will be optional
    And "Promotional Image" field will be a media reference to an image

Scenario: User can add a List with Title and Description style to a Mini Landing Page
Given user is logged into the CMS
  When user creates a new "Mini Landing Page" content item
  Then the editing page for a "Mini Landing Page" content item displays
    And user fills out the following fields
      | fieldLabel                | value                                                       | field_name                     |
      | Mini Landing Page Style   | NCIDS                                                       | field_mlp_page_style           |
      | Pretty URL                | mini-landing-page                                           | field_pretty_url               |
      | Page Title                | Automated Test NCIDS List without Media                     | title                          |
      | Browser Title             | Automated Test NCIDS List without Media - Browser Title     | field_browser_title            |
      | Card Title                | Automated Test NCIDS List without Media - Card Title        | field_card_title               |
      | Meta Description          | Automated Test NCIDS List without Media - Meta Description  | field_page_description         |
      | Feature Card Description  | Automated Test NCIDS List without Media - Feature Card Desc | field_feature_card_description |
  When user selects "Add List" from "Contents" dropdown
  Then "List" section appears
    And user fills out the following fields
      | fieldLabel      | value                    | field_name              |
      | Title           | NCIDS List without Media | field_container_heading |
      | List Item Style | Title and Description    | field_list_item_style   |
  When user selects "Add Internal Link" from "List Items" dropdown
  Then "Internal Link" section appears
    And user clicks on "Link" link in the "Internal Link" area
    And user clicks on "Select content" button item
    And user selects "Article to test Related Resources" item from the list
    And user clicks on "Select content" button to select item
    And "Article to test Related Resources" had been selected
    And user fills out the following fields
      | fieldLabel                | value                                                            | field_name                 |
      | Override Title            | Override Internal List Item Title NCIDS List without Media       | field_override_title       |
      | Override List Description | Override Internal List Item Description NCIDS List without Media | field_override_description |
  When user selects "Add External Link" from "List Items" dropdown
  Then "External Link" section appears
    And user fills out the following fields
      | field             | value                     | field_name                  |
      | Link              | https://www.google.com    | field_featured_url          |
      | Title             | Google Link External Link | field_override_title        |
      | List Description  | Description External Link | field_override_description  |
    And user clicks on "Promotional Image" link in the "External Link" area
    And user clicks on "Select Image" button item
    And user selects "<Image Name>" item from the list
    And user clicks on "Select image" button to select item
    And "<Image Name>" had been selected
  When user selects "Add Media Link" from "List Items" dropdown
  Then "Media Link" section appears
    And user clicks on "Link" link in the "Internal Link" area
    And user clicks on "Select content" button item
    And user selects "NCI at a Glance Infographic" item from the list
    And user clicks on "Select content" button to select item
    And "NCI at a Glance Infographic" had been selected
    And user fills out the following fields
      | fieldLabel                 | value                                                         | field_name                 |
      | Override Title             | Override Media List Item Title NCIDS List without Media       | field_override_title       |
      | Override List Description  | Override Media List Item Description NCIDS List without Media | field_override_description |
  When user saves the content page
    And user views the Mini Landing Page
  Then user can see "List" on the page
    And list displays the heading "NCIDS List without Media"
    And user can see "Internal Link" item in the list
    And list item does not display an image
    And list item displays the title "Override Internal List Item Title NCIDS List without Media"
    And list item displays the description "Override Internal List Item Description NCIDS List without Media"
    And user can see "External Link" list item in the list
    And list item does not display an image
    And list item displays the title "Google Link External Link"
    And list item displays the description "Description External Link"
    And user can see "Media Link" item in the list
    And list item does not display an image
    And list item displays the title "Override Media List Item Title NCIDS List without Media (Infographic)"
    And list item displays the description "Override Media List Item Description NCIDS List without Media"

Scenario: Analytics events for the NCIDS Content Block on Mini Landing Pages using the NCIDS style
  Given a user is on a Mini Landing Page
    And the Mini Landing Page uses the NCIDS style
    And the Mini Landing Page has an NCIDS Content Block
  When the user clicks on a link in the NCIDS Content Block
  Then there will be an NCIDataLayer Other event
    And the event has the name "MLP:Collection:LinkClick"
    And the event has the linkname "MLP:Collection:LinkClick"
    And this event will have the following data
      | key                | value                                                                                                                                                                                                                    |
      | location           | body                                                                                                                                                                                                                     |
      | pageType     | This will return the value of the page type and should match the dcterms.type meta data tag on the page. |
      | pageTemplate      | This will return the value of the page template and should match the cgdp.template meta data tag on the page.   |
      | pageRows           | This will return the number of rows on the page overall                                                                                                                                                                  |
      | pageRowIndex       | This will return the index of the row number on the page that was clicked                                                                                                                                                |
      | pageRowCols        | Default is the number of columns of components in the container. For collections on MLPs, this will be 1                                                                                                                 |
      | pageRowColIndex    | Default is the index of the component by columns in the container that was clicked. For collections on MLPs, this will be 1                                                                                              |
      | containerItems     | Default is number of components in the container that was clicked. For collections on MLPs, this will be 1                                                                                                               |
      | containerItemIndex | Default is the index of the component in the container that was clicked. For collections on MLPs, this will be 1                                                                                                         |
      | componentType      | Default to 'Collection'                                                                                                                                                                                                  |
      | componentTheme     | Default to 'Not Defined'                                                                                                                                                                                                 |
      | linkText           | Default to the text content of the link clicked. This will match the text of the link clicked                                                                                                                            |
      | componentVariant   | Pass as a data attribute. Set to 'CGDPMiniLandingCollection'                                                                                                                                                             |
      | title              | This will be added as a data attribute and the value will reflect the nearest heading above the link within the content block. If there is no nearest heading above the link within the collection, set to 'Not Defined' |
      | linkType           | This will be added as a data attribute to each link in the collection and defined as 'Internal', 'External', or 'Media' based on the type of link in the code                                                            |
      | linkArea           | This will be set to 'Title' for all links in the collection                                                                                                                                                              |
      | totalLinks         | This should pass the total number of collection items shown in the collections component. (Ex: if the component shows 4 items in the list, then pass this value as 4.)                                                   |
      | linkPosition       | This should pass the index of the link clicked in the collections component evaluated by counting the items top to bottom. (Ex: If the third item in the list is clicked, pass 3.)                                       |

NCIOCPL / cgov-digital-platform

Story: Update List paragraph with NCIDS List without Media style for Mini Landing Pages #4390

As a content editor, I want to be able to add a list without images to my mini landing page, so that I can feature related content in a less visual way.

Functional Requirements

Scenarios

DoR Tasks

DoD Tasks

Acceptance Criteria

Resources:

Notes

Solution

Prerequisites

4356

4360

Technical Notes