Update List paragraph with NCIDS List styles for Mini Landing Pages

sarinapadilla commented 5 months ago

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

Optional Title
List Item Style
- Title and Description
- Title, Description, and Image
List Items
- Internal Link
- Featured Item
- Override Title
- Override List Description
- Override Promotional Image
- External Link
- Needs to include external link icon
- Media Link
- Override Title
- Override List Description
- Override Promotional Image

Functional Requirements

Updates to list title, list item titles, and spacing:
- List Title: nci-heading-h2, xl, 24px
- List Item Title: nci-heading-h3, md, 20px
- Update spacing on Collection items to remove the extra spacing at the top of the collection, and the top of the first collection item.
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:
- Only the title is clickable (not the media type, file type, or file size)
- Infographic title: Infographic Override/Page Title (Infographic)
- Video title: Video Override/Page Title (Video)
- File title: File Override/Page Title <file type> (file size)
- Specifically for PDFs: File Override/Page Title <pdf icon> (file size)
Fallback rules for Override Title
- Override Title > Page Title
Fallback rules for Override List Description
- Override List Description > List Description > Meta Description
Fallback rules for Promotional Image

Scenarios

Title and Description

Artificial Intelligence (AI) in Cancer Research comp
A test page with a list including the following items:
- Internal link
- Override Title and Override List Description are set
- No overrides set, where item List Description is set
- No overrides set, where item only has Meta Description set
- External link
- No Promotional Image set
- Media link *Override Title and Override List Description are set
- No overrides set, where item List Description is set
- No overrides set, where item only has Meta Description

Title, Description, and Image

The RAS Initiative comp
A test page with a list including the following items:
- Internal link
- Override Title, Override List Description, and Promotional Image set
- No overrides set, where item List Description is set
- No overrides set, where item only has Meta Description
- No overrides set, where item has Promotional Image
- No overrides set, where item does not have Promotional Image, but has Lead Image
- No overrides set, where item does not have Promotional or Lead Image
- External link
- No Promotional Image set
- Media link *Override Title, Override List Description, and Promotional Image set
- No overrides set, where item List Description is set
- No overrides set, where item only has Meta Description
- No overrides set, where item has Promotional Image
- No overrides set, where item does not have Promotional Image

DoR Tasks

[x] Investigate keeping existing cgov_list:
- Changes Title to optional
- Changes options for List Item Style to Title and Description and Title, Description, and Image if Mini Landing Page Style is set to NCIDS
- We will draw using usa-collection with media
- We'd like to be able to reuse what we have rather than having to implement a new paragraph (update this ticket if that's what we decide)
[ ] Create templates for internal, external, and media links
[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 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 and Description" and "Title, Description, and Image"
    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: User can add a List with Title, Description, and Image 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 with Media                     | title                          |
      | Browser Title             | Automated Test NCIDS List with Media - Browser Title     | field_browser_title            |
      | Card Title                | Automated Test NCIDS List with Media - Card Title        | field_card_title               |
      | Meta Description          | Automated Test NCIDS List with Media - Meta Description  | field_page_description         |
      | Feature Card Description  | Automated Test NCIDS List with 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 with Media         | field_container_heading |
      | List Item Style | Title, Description, and Image | 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 with Media       | field_override_title       |
      | Override List Description  | Override Internal List Item Description NCIDS List with 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        |
      | 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 with Media       | field_override_title       |
      | Override List Description  | Override Media List Item Description NCIDS List with 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 with Media"
    And user can see "Internal Link" item in the list
    And list item displays an image
    And list item displays the title "Override Internal List Item Title NCIDS List with Media"
    And list item displays the description "Override Internal List Item Description NCIDS List with Media"
    And user can see "External Link" list item in the list
    And list item displays 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 displays an image
    And list item displays the title "Override Media List Item Title NCIDS List with Media (Infographic)"
    And list item displays the description "Override Media List Item Description NCIDS List with Media"

Scenario: Analytics events for List 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 a List
  When the user clicks on a link in the List
  Then there will be an NCIDataLayer Other event
    And the event has the name "MLP:List:LinkClick"
    And the event has the linkname "MLP:List: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 'List'                                                                                                                                                                            |
      | 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   | This will be set to 'Title and Description' or 'Title, Description, and Image'                                                                                                               |
      | title              | This will pass a 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 pass a value for 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.)           |

Resources:

Notes

Solution

Prerequisites

4356

Technical Notes

bryanpizzillo commented 5 months ago

We need to take an action item to inventory those list items on mini-landing pages, where the the override thumbnail image has been set. This will be replaced with the NCIDS Promo 4x3 Override Image, which is probably not set on all those images.

adrianacastaneda commented 5 months ago

A few notes from my chat @bryanpizzillo:

[x] @adrianacastaneda to request report from Min outlining pages that currently have infographics on list components
- Once we have an accurate number of pages with list items that are video or infographics, discuss with team whether we should proceed without allowing this type of media to display on lists for the new MLP template (@lburack something that might alter the number of pages that are ready to map for 3.1 so we should keep this in mind!)
- If we decide to keep these media items in lists component, the way that icons and file size shows up needs to be aligned on
- We need to do this step ^ regards for files
[x] Determine fallback rules— this include overrides for attributes like page title and description, and fallback rules for images crops
[ ] Align with designers on external icon showing up after page title on list components and well as for feature cards... (This really applies more for feature cards but just noting it here)

cc: @andyvanavery31 @sarinapadilla @welshja @bennettcc

welshja commented 4 months ago

Added new analytics values for pageTemplate and pageType to the requirements. These values were added in https://github.com/NCIOCPL/cgov-digital-platform/issues/4386

laurelthrash commented 4 months ago

Necessary information/review provided from UX side. Closing this ticket on the UX board for now.

sarinapadilla commented 3 months ago

Consolidated this ticket with #4390, so this now includes both with and without media list styles.

NCIOCPL / cgov-digital-platform