search

NCIOCPL / cgov-digital-platform

The Cancer.gov Digital Communications Platform
GNU General Public License v2.0
11 stars 33 forks source link

Story: Create Imageless Card Group Paragraph for MLP #4464

Closed andyvanavery31 closed 4 weeks ago

andyvanavery31 commented 1 month ago

As a content editor, I want to be able to add a component to Mini Landing Pages that features content in a way that does not require an image and to save vertical space so that visitors to the page can find relevant information and other components are not pushed further down the page.

Requirements

Front-End Functional Requirements

Drupal Group Functional Requirements

Drupal Single Imageless Card Functional Requirements

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

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

Specifications

DoR Tasks

DoD Tasks

Technical Notes

Content Model

Scenarios/Figma

Acceptance Criteria

CMS User Experience

Scenario: The NCIDS Imageless Card Group paragraph can be added to the 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 Imageless Card Group"
  When the user selects "Add NCIDS Imageless Card Group"
  Then the fields for an "NCIDS Imageless Card Group" paragraph appear
    And the first field is the "Heading" field
    And that field is required
    And it is a text entry field
    And the tooltip says, "Displays above the group of cards. Used to concisely describe the featured content."
    And the next field is the "Heading Visibility" field
    And that field is required
    And the field is a dropdown
    And the dropdown has the following options, "Visible" (default), and "Screen Reader Only"
    And the next field is the "Card Layout Display" field
    And that field is required
    And the field is a dropdown
    And the tooltip says, "Sets the number of cards to display in a row, in either a 1, 2, or 3-card layout per row."
    And the dropdown has the following options, "1 Column", "2 Column", "3 Column" (default)
    And the next field is the "Imageless Cards" field
    And that field is required
    And it allows the selection of the following types: "NCIDS Imageless Card Internal" (default), "NCIDS Imageless Card External", and "NCIDS Imageless Card Multimedia"
    And one "NCIDS Imageless Card Internal" will automatically be added to the NCIDS Imageless Card Group
    And at the bottom of the NCIDS Imageless Card Group paragraph there is a dropdown that allows the content editor to add other Imageless Cards to the group
    And there is no limit on the number of Imageless Cards that can be added to the NCIDS Imageless Card Group
  When the NCIDS Imageless Card Internal paragraph is added to the NCIDS Imageless Card Group
  Then the fields for an NCIDS Imageless Card Internal paragraph appear
    And the first field is the "Featured Item" field
    And that field is required
    And it is an entity reference field using the Content Browser allowing Node types
    And the next field is the Override Card Title field
    And that field is optional
    And it is a text entry field
    And the tooltip says, "Used to override the page's card title. Leave blank if no need to override."
    And the next field is the Override Card Description field
    And that field is optional
    And it is a text entry field
    And the tooltip says, "Used to override the page's card description. Leave blank if no need to override."
  When the "NCIDS Imageless Card External" paragraph is added to the NCIDS Imageless Card Group
  Then the fields for an NCIDS Imageless Card External paragraph appear
    And the first field is the "Featured Item Url" field
    And that field is required
    And it is a text entry field
    And the tooltip says, "Enter the full URL starting with https://"
    And the next field is the "Card Title" field
    And that field is required
    And it is a text entry field
    And the tooltip says, "Add card title for page."
    And the next field is the "Card Description" field
    And that field is optional
    And it is a text entry field
    And the tooltip says, "Add description of content."
  When the "NCIDS Imageless Card Multimedia" paragraph is added to the NCIDS Imageless Card Group
  Then the fields for an NCIDS Imageless Card Multimedia paragraph appear
    And the first field is the "Featured Media" field
    And that field is required
    And it is an entity reference field using the content browser with the allowed types cgov_infographic and cgov_file
    And the next field is the Override Card Title field
    And that field is optional
    And it is a text entry field
    And the tooltip says, "Used to override the page's card title. Leave blank if no need to override."
    And the next field is the Override Card Description field
    And that field is optional
    And it is a text entry field
    And the tooltip says, "Used to override the page's card description. Leave blank if no need to override."

Front-End Experience

Scenario: A user views the NCIDS Imageless Card Group on a Mini Landing Page
  Given the NCIDS Imageless Card Group is created on a Mini Landing Page
    And the Mini Landing Page is using the NCIDS style
  When a user views the NCIDS Imageless Card Group
  Then they will exactly match the comp
  When a user hovers their mouse over an NCIDS Imageless Card
  Then the Title of the NCIDS Imageless Card will display the changed color for the hover state
  When a user clicks on an NCIDS Imageless Card
  Then they will be redirected to the link for that card
  When the breakpoint is smaller than tablet large (less than 880px)
  Then the cards will stack vertically

Analytics

Scenario: Analytics events for the NCIDS Imageless Card Group on Mini Landing Pages using the NCIDS style
bryanpizzillo commented 1 month ago

@dev-rana-publicis please make sure that the Internal & External imageless cards do not use the default display mode when drawing them in the group. This is so that we can possibly use a single imageless card in the 2 column in the future. (This is basically what we had to do for the Feature Cards if you remember)

welshja commented 1 month ago

Updating analytics reqs for componentvariant that did not make it onto the ticket before.

componentVariant: This should be set based on the layout selected by the user. This should be set to 1 Card Row, 2 Card Row or 3 Card Row.

bryanpizzillo commented 1 month ago

@andyvanavery31 I changed the third feature card to be "Cancer Types" instead of "News & Events", because of the ordering of the YAML. @dev-rana-publicis changed the filename of "News & Events" to correct allow the test page to reference it, but the change broke the "News & Events" page's featured news row.