Story: Create NCIDS 2 Column Layout for MLPs

sarinapadilla commented 4 months ago

As a content editor, I want to be able to add a component to Mini Landing Pages that features related content in a single section so that visitors to the page can feature and find relevant information and other components are not pushed further down the page.

Requirements

Functional Requirements

50/50 and 66/33 split
Left and right contents
- For R3.2, allowed paragraphs in left content are:
- Raw HTML Content
- NCIDS Content Block
- NCIDS Summary Box
- For R3.2, allowed paragraphs in right content are:
- Raw HTML Content
- NCIDS Content Block
- NCIDS Summary Box
- NCIDS Internal/External/Multimedia Feature Card
For feature card, use the same fallback rules for feature card title, description, and image

Analytics Requirements The analytics for the components added inside of the 2 column layout should function as defined at the individual component level.

The pageRowCols and pageRowColIndex values should function as previous defined for two column on the home and landing pages:

pageRowCols - This value should be set to the new of columns within the column layout. (For 2 column, this value will be 2)
pageRowColIndex - This value should be set based on which column the component click is in (1 for the left column, 2 for the right column)

A new data variable should be created to be collected as part of the information about the rows on the page to help us understand the variants people could use for 2 column. This value should be defined as follows:

pageRowVariant - For the two column layout component, this value should be captured as TwoColumn50:50 or TwoColumn66:33. (If this needs to be added at a higher level where it exists as part of the landing page helper info, it can be set to "Not Defined" for all other components at this point in time.)
pageRowVariant should start to be passed as part of the EDDL call on all home and landing page components as well as mini landing pages. In Adobe Launch, we will only configure the pageRowVariant to be sent to Adobe Analytics on click events on MLPs. [We will want to check home/landing pages to confirm this is being passed in EDDL, but not being included in the Adobe Analytics click event.]

DoR Tasks

[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
[x] 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

Paragraph Types update
NCIDS 2 Column Layout

Scenarios/Figma

On the example page "Cancer Treatment" (/about-cancer/treatment), make it look like the 2 column layout on this comp at all breakpoints
- This example includes a content block that has multiple paragraphs of text
On a new example page titled "Test Page for 2 Column Layout" (/test/ncids-mini-landing-2-column-layout), include:
- The 2 column layout components from this comp (minus flag cards)
- First component: 50/50, left content is Raw HTML Content, right content is a Summary Box
- Second component: 66/33, left content is Raw HTML Content, right content is a Summary Box
- Third component: 50/50, left content is a Content Block, right content is an NCIDS Feature Card Internal
- Fourth component: 66/33, left content is Content Block, right content is an NCIDS Feature Card External
- Additional components:
  - Switch the contents of the first component to be 50/50, Summary Box on the left, Raw HTML Content on the right
  - Switch the contents of the third component to be 50/50, Summary Box on the left, Content Block on the right

Acceptance Criteria

CMS User Experience

Scenario: User can see fields for an NCIDS 2 Column Layout paragraph 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
    And the 2 Column Layout Display field is required
    And it allows the selection of the following types: 50/50, 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 third 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, and Raw HTML Content

Drupal Functionality:

Scenario: User can add an NCIDS 2 Column Layout with NCIDS Content Block and NCIDS Summary Box 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 Summary Box" from "Right Content" dropdown
  Then "NCIDS Summary Box" section appears
    And user fills out the following fields
      | fieldLabel          | value                                                                                                 | field_name                |
      | Heading             | Summary Box Heading                                                                                   | field_summary_box_heading |
      | Body (HTML Content) | Lorem ipsum odor amet, consectetuer adipiscing elit. Elit arcu nascetur enim ultricies dapibus fusce. | field_html_content        |
    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 summary box in the right column

Scenario: User can add an NCIDS 2 Column Layout with Raw HTML Content and NCIDS Feature Card 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 Feature Card Internal" from "Right Content" dropdown
  Then "NCIDS Feature Card Internal" section appears
    And user clicks on "Featured Item" link in the "NCIDS Feature Card Internal" 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 Card Title       | Override Card Title NCIDS Feature Card Internal       | field_override_card_title       |
      | Override Card Description | Override Card Description NCIDS Feature Card Internal | field_override_card_description |
    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 Feature Card Internal 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 Analytics events for the Summary Box within an NCIDS 2 Column Layout on Mini Landing Pages using the NCIDS style

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 layout
  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 layout in the row where the click was made                                                                              |
    | pageRowColIndex    | This will return the index of the component in the container that was clicked                                                                                                       |
    | pageRowVariant     | This value should be captured as TwoColumn50:50 or TwoColumn66:33                                                                                                                 |
    | 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 events for the Feature Card within an NCIDS 2 Column Layout on Mini Landing Pages using the NCIDS style

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                                                         |
     | pageRowVariant     | This value should be captured as TwoColumn50:50 or TwoColumn66:33                                                                                                                 |
   | 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 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 return image, description, or title depending on the area clicked (should mimic existing feature card functionality)                                                                                          |
    | totalLinks         | Default will return 1                                                                                                    |
    | linkPosition       | Default will return 1                                                                                                    |

Analytics events for the Feature Card within an NCIDS 2 Column Layout on Mini Landing Pages using the NCIDS style

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 layout
  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 layout                                                                                                                      |
    | pageRowColIndex    | Default is the index of the component by columns in the container that was clicked                                                                                                |
    | pageRowVariant     | This value should be captured as TwoColumn50:50 or TwoColumn66:33                                                                                                                 |
    | 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 layout
  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 layout                                                                                                                      |
    | pageRowColIndex    | Default is the index of the component by columns in the container that was clicked                                                                                                |
    | pageRowVariant     | This value should be captured as TwoColumn50:50 or TwoColumn66:33                                                                                                                 |
    | 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

adrianacastaneda commented 3 months ago

@sarinapadilla few notes below, thank you!

Just to be a bit more specific can we make the tooltip for the 2-column container display the below?
- "Sets the display for two columns, in either a 50/50 or 66/33 split (content on the left takes up 2/3 of your page and content on the right takes up 1/3)."
I see that if a user adds a 2-column container the left and right containers are required in the ACs but this is not the case in the content model. Let's tweak that! It should be required.
In the ACs, the left content field has the ability to select a feature card, which we decided it would not, so let's remove that.

Just to clarify, when selecting between the different components for the left and right side, will this be a dropdown?

monika-jaeger commented 3 months ago

Edited the two Figma links to show real and placeholder content on all breakpoints.

bryanpizzillo commented 2 months ago

@sarinapadilla and @monika-jaeger and @blilianyu -- There is a requirement that I do not see implemented in the Figma for Mini Landing Pages:

Items within the section will have equal heights (i.e. summary box or feature card will expand to the full height of the container if a content block has text that extends lower than the content of the summary box)

So is Figma correct, or is this requirement correct? The requirement will not be straight-forward to implement. Especially when it comes to things like imageless cards or images.

blilianyu commented 2 months ago

@bryanpizzillo, @sarinapadilla will update the requirements to match Figma. I've also updated the Figma links.

cc: @monika-jaeger

bryanpizzillo commented 2 months ago

@sarinapadilla - there is a small content model issue... The 2 column container on the News & Events page NCIDS 2 Column Container and this new one will be labelled NCIDS 2-Column Container, which is the addition of a -. The machine name is fine, but I worry that devs working in the backend will get confused between the two. Any thoughts on differing one of the labels of the two?

adrianacastaneda commented 2 months ago

Great point @bryanpizzillo. Lindsay and I are comfortable with using "NCIDS 2 Column Layout" instead

cc: @sarinapadilla

welshja commented 1 month ago

Updated analytics requirements based on convo with @dev-rana-publicis about the pageRowVariant value. The decision was made to add this globally to the helper that sets page row/column/container values on pages, so it will be present in the EDDL calls. In Adobe Launch, we will update all MLP click event rules to include this new value. For the most part it will pass as "Not Defined" (except in 2 column layout).

@kate-mashkina for awareness. Please let me know if you want to chat a bit about this.

NCIOCPL / cgov-digital-platform