Story: Add Image and Video to Content Allowed in MLP NCIDS 2 Column Layout

[sarinapadilla]

As a content editor, I want to be able to add a video or image to the 2-column layout on Mini Landing Pages, so that visitors to the page can view and find relevant information and other components are not pushed further down the page.

Requirements

Functional Requirements

• See Story: Create NCIDS 2 Column Layout for MLPs #4400 for the functional requirements of the 2-Column Layout built for R3.2
• Add cgov_image and cgov_video to only appear on the right column
• The image and video will appear with their captions below the media type
• Max image size requirements:
  • 1x1: 1216px x 1216px
  • 4x3: 1216px x 912px
  • 16x9: 1216px x 684px

Analytics Specifications
As images will not be clickable, the requirement below are specific to a click on the video component that can be added into the 2-column layout.

On click of the video player to start the video, an EDDL event shall be raised with the linkName and event of: MLP:InlineVideo: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 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.
• pageRowVariant - If a component is not in the two column container, this should pass as Not Defined. If a component is in the two column container, this value should be captured as TwoColumn50:50 or TwoColumn66:33.
• containerItems: This value shall be set to the number of items within a container or row. As only 1 item is allowed per side in the two column container, this value will be set to 1.
• containerItemIndex: This value shall be set to the position of the clicked item within the container or row. As the video player will be an item in the two column container, this will be set to 1.
• 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 “Inline Video”
• componentTheme: As this component does not currently have theme options, this value should be set to 'Not Defined'
• componentVariant: This value represents the component design options available for a component type. For Video, this should be "Standard YouTube Video".
• linkText: This value will be set as “Play”.
• title: This value should be the heading of the Wide Guide Card. If no heading is set for the Wide Guide Card, this value will pass 'Not Defined'. This value should be truncated after 50 characters.
• linkType: This should be set to “Video Player”
• linkArea: This value will be set as “Play”.
• totalLinks: This should pass the total number of links shown in the component. For Inline Video, this should be 1.
• linkPosition: This should pass the total number of links shown in the component. For Inline Video, this should be 1.

DoR Tasks

• Content Model Drafted
• Content Model Reviewed
  • Developer Review
  • IA Review
• Content Model Approved
  • Developer Approval
  • IA Approval
• Acceptance Criteria Drafted
  • Analytics Acceptance Criteria Drafted
• Scenarios created for YAML
• Acceptance Criteria Reviewed
  • Developer Review
  • IA Review
  • Analytics Review
• Acceptance Criteria Approved
  • Developer Approval
  • IA Approval
  • Analytics Approval

DoD Tasks

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

Technical Notes

Content Model

• NCIDS 2-Column Layout

Scenarios/Figma

• On the example page that shows real content, make it look like this 2 column layout for video at each breakpoint. Please use the test url /test/dceg-research.
• One the second example page with fake content, make it look like this 2 column layout for images at each breakpoint. Please use the test url /test/ncids-mini-landing-2-column-layout-image-video.
  • For the 50/50 split, please use Raw HTML Content for the left content text.
  • For the 66/33 split, please use a Content Block for the left content text.

Acceptance Criteria

CMS User Experience

Scenario: User can see Image and Video as options on 2 Column Layout on 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 2 Column Layout"
  When the user selects "Add NCIDS 2 Column Layout"
  Then the fields for an "NCIDS 2 Column Layout" paragraph appear
    And the first field is the 2 Column Layout Display field is required
    And it allows the selection of the following types: 50/50 and 66/33
    And the second field is the Left Content Field
    And the Left Content Field is required
    And it allows the selection of the following types: NCIDS Content Block, NCIDS Summary Box, and Raw HTML Content
    And the next field is the Right Content Field
    And the Right Content Field is required
    And it allows the selection of the following types: NCIDS Content Block, NCIDS Feature Card Internal, NCIDS Feature Card External, NCIDS Feature Card Multimedia, NCIDS Summary Box, Raw HTML Content, NCIDS Image, and NCIDS Video

Drupal Functionality:

Scenario: User can add an NCIDS 2 Column Layout with NCIDS Content Block and NCIDS Image to the Mini Landing Page content type
  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                     |
      | Page Style                  | NCIDS                                                                                     | field_mlp_page_style           |
      | Pretty URL                  | mini-landing-page                                                                         | field_pretty_url               |
      | Page Title                  | Automated Test NCIDS 2 Column Layout Content Block and Summary Box                     | title                          |
      | Browser Title               | Automated Test NCIDS 2 Column Layout Content Block and Summary Box Browser Title       | field_browser_title            |
      | Card Title                  | Automated Test NCIDS 2 Column Layout Content Block and Summary Box  Card Title         | field_card_title               |
      | Meta Description            | Automated Test NCIDS 2 Column Layout Content Block and Summary Box Meta Description    | field_page_description         |
      | Feature Card Description.   | Automated Test NCIDS 2 Column Layout Content Block and Summary Box Feature Card Desc   | field_feature_card_description |
  When user selects "Add 2 Column Layout" from "Contents" dropdown
  Then "NCIDS 2 Column Layout" section appears
    And user fills out the following fields
      | fieldLabel              | value | field_name                      |
      | 2 Column Layout Display | 50/50 | field_two_column_layout_display |
  When user selects "Add NCIDS Content Block" from "Left Content" dropdown
  Then "NCIDS Content Block" section appears
    And user fills out the following fields
      | fieldLabel          | value                                                                                                 | field_name         |
      | Body (HTML Content) | Lorem ipsum odor amet, consectetuer adipiscing elit. Elit arcu nascetur enim ultricies dapibus fusce. | field_html_content |
  When user selects "Add NCIDS Image" from "Right Content" dropdown
  Then "NCIDS Image" paragraph appears
    And user fills out the following fields
      | fieldLabel         | value | field_name                      |
      | Image Aspect Ratio | 1:1   | field_two_column_layout_display |
    And user clicks on the "Promotional Image" dropdown in the "NCIDS Image" area
    And the user clicks on the "Select Image" button in the "Promotional Image" area
    And the user selects an image from the available list
    When user saves the content page
    Then user can see NCIDS 2 Column Layout on the page
      And 2 Column Layout displays the content block contents in the left column
      And the 2 Column Layout displays the image with 1:1 aspect ratio and its caption in the right column

Scenario: User can add an NCIDS 2 Column Layout with Raw HTML Content and NCIDS Video to the Mini Landing Page content type
  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                     |
      | Page Style                  | NCIDS                                                                                               | field_mlp_page_style           |
      | Pretty URL                  | mini-landing-page                                                                                   | field_pretty_url               |
      | Page Title                  | Automated Test NCIDS 2 Column Layout Raw HTML Content and NCIDS Feature Card                     | title                          |
      | Browser Title               | Automated Test NCIDS 2 Column Layout Raw HTML Content and NCIDS Feature Card Browser Title       | field_browser_title            |
      | Card Title                  | Automated Test NCIDS 2 Column Layout Raw HTML Content and NCIDS Feature Card  Card Title         | field_card_title               |
      | Meta Description            | Automated Test NCIDS 2 Column Layout Raw HTML Content and NCIDS Feature Card Meta Description    | field_page_description         |
      | Feature Card Description.   | Automated Test NCIDS 2 Column Layout Raw HTML Content and NCIDS Feature Card Feature Card Desc   | field_feature_card_description |
  When user selects "Add 2 Column Layout" from "Contents" dropdown
  Then "NCIDS 2 Column Layout" section appears
    And user fills out the following fields
      | fieldLabel              | value | field_name                      |
      | 2 Column Layout Display | 66/33 | field_two_column_layout_display |
  When user selects "Add Raw HTML Content" from "Left Content" dropdown
  Then "Raw HTML Content" section appears
    And user fills out the following fields
      | fieldLabel       | value                                                                                                 | field_name         |
      | Raw HTML Content | Lorem ipsum odor amet, consectetuer adipiscing elit. Elit arcu nascetur enim ultricies dapibus fusce. | field_html_content |
  When user selects "Add NCIDS Video" from "Right Content" dropdown
  Then "NCIDS Video" section appears
    And user clicks on "Promotional Video" dropdown in the "NCIDS Video" area
    And user clicks on "Select Video" button item in the "Promotional Video" area
    And user selects a video item from the list
    When user saves the content page
    Then user can see NCIDS 2 Column Layout on the page
      And 2 Column Layout displays the Raw HTML Content contents in the left column
      And the 2 Column Layout displays the NCIDS Video with its caption in the right column

Front-End Experience

Scenario: A user views an NCIDS 2 Column Layout on a Mini Landing Page
  Given the Mini Landing Page is using the NCIDS style
    And the NCIDS 2 Column Layout is added to a Mini Landing Page
    And the NCIDS 2 Column Layout has the scenarios added per the Scenarios section above
  When the visitor views the Mini Landing Page with the NCIDS style and the NCIDS 2 Column Layout
  Then the visitor will see the NCIDS 2 Column Layout on the page
    And it will exactly match the comps

Analytics

Scenario: Analytics events for the Summary Box within an NCIDS 2 Column Layout 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 2 Column Layout with an NCIDS Summary Box in the container
  When the user clicks on a link in the NCIDS Summary Box
  Then there will be an NCIDataLayer Other event
    And the event has the name "MLP:SummaryBox:LinkClick"
    And the event has the linkname "MLP:SummaryBox:LinkClick"
    And the 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 | This will return the number of columns of components in the container in the row where the click was made |
    | pageRowColIndex | This will return the index of the component in the container that was clicked |
    | containerItems | This will return the number of components in the container that was clicked |
    | containerItemIndex | This will return the index of the component in the container that was clicked |
    | componentType | Default to 'Summary Box' |
    | 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 | Default to 'Not Defined' |
    | title | This will be nearest heading in the summary box above the link. If there are no headings in the Summary box, set to 'Not Defined' |
    | linkType | This will be added as a data attribute to each link in the Summary Box and defined as 'Internal', 'External', or 'Media', 'Email', or 'Other' based on the type of link in the code |
    | linkArea | This will be set to 'Text' for all links in the Summary Box |
    | totalLinks | This value will reflect the total number of links in the Summary Box |
    | linkPosition | This will be a value equal to the position of the link in the Summary Box counting sequentially in reading order from the beginning of the Summary Box |

Analytics

Scenario: Analytics events for the Feature Card within an NCIDS 2 Column Layout 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 2 Column Layout with an NCIDS Feature Card in the container
  When the user clicks on a feature card
  Then there will be an NCIDataLayer Other event
    And the event has the name "MLP:FeatureCard:LinkClick"
    And the event has the linkname "MLP:FeatureCard:LinkClick"
    And the event has 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 total number of rows on the page overall |
    | pageRowIndex | This will return the index of the row number on the page of the click |
    | pageRowCols | This will return the total number of columns in the row of the click |
    | pageRowColIndex | This will return the index of the column in the row of the click |
    | containerItems | This will return the number of feature cards in the feature card row or the container holding the feature card |
    | containerItemIndex | This will return the index of the feature card clicked in the feature card row or the container holding the feature card |
    | componentType | Feature Card |
    | componentTheme | This will default to 'Light' |
    | componentVariant | This will return 'Default' |
    | linkText | This returns the displayed feature card title |
    | title | This returns the displayed feature card title |
    | linkType | This will return the value 'Card' |
    | linkArea | This will return 'Not Defined' |
    | totalLinks | Default will return 1 |
    | linkPosition | Default will return 1 |

Analytics Requirements

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 a 2 Column Layout with an NCIDS Content Block in the container
  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:ContentBlock:LinkClick"
    And the event has the linkname "MLP:ContentBlock:LinkClick"
    And this event will have the following data
    | key | value |
    | location | body |
    | 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 |
    | pageRowColIndex | Default is the index of the component by columns in the container that was clicked |
    | containerItems | Default is number of components in the container that was clicked |
    | containerItemIndex | Default is the index of the component in the container that was clicked |
    | componentType | Default to 'Content Block' |
    | 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 | Default is 'Not Defined' |
    | title | This value will reflect the nearest heading above the link within the content block. If there is no nearest heading above the link within the content block, set to 'Not Defined' |
    | linkType | This will be defined as 'Internal', 'External', 'Media', 'Email', or 'Other' based on the type of link in the code as specified in the Analytics Requirements section above |
    | linkArea | This will be set to 'Text' for all links in the Content Block |
    | totalLinks | This value will reflect the total number of links in the Content Block |
    | linkPosition | This will be a value equal to the position of the link in the Content Block counting sequentially in reading order from the beginning of the Content Block |

Scenario: Analytics events for the Raw HTML 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 a 2 Column Layout with an NCIDS Content Block in the container
  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:RawHTML:LinkClick"
    And the event has the linkname "MLP:RawHTML:LinkClick"
    And this event will have the following data
    | key | value |
    | location | body |
    | 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 |
    | pageRowColIndex | Default is the index of the component by columns in the container that was clicked |
    | containerItems | Default is number of components in the container that was clicked |
    | containerItemIndex | Default is the index of the component in the container that was clicked |
    | componentType | Default to 'Content Block' |
    | 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 | Default is 'Not Defined' |
    | title | This value will reflect the nearest heading above the link within the content block. If there is no nearest heading above the link within the content block, set to 'Not Defined' |
    | linkType | This will be defined as 'Internal', 'External', 'Media', 'Email', or 'Other' based on the type of link in the code as specified in the Analytics Requirements section above |
    | linkArea | This will be set to 'Text' for all links in the Content Block |
    | totalLinks | This value will reflect the total number of links in the Content Block |
    | linkPosition | This will be a value equal to the position of the link in the Content Block counting sequentially in reading order from the beginning of the Content Block |

Notes

---

Solution

Prerequisites