Story: Create Production Prototype of Imageless Card for MLP

[andyvanavery31]

As a content editor, I want to be able to add a featured item or items on a Mini Landing Page without a distracting or expendable image, so that site visitors can identify important information without skipping it due to perceived ad-blindness.

Requirements

Functional Requirements

• Cards can be added in a row, where up to three (3) cards can be placed in a row
  • If one card is placed in the row, it shall span the width of the container
  • If two cards are placed in the row, they shall each take up 50% of the width of the container
  • If three cards are placed in the row, they shall each take up 33% of the width of the container
• There is no limit to the number of cards added
• If more than three (3) cards are placed in a row, the next cards are shall be placed in a subsequent row
• If a subsequent row has fewer cards than the row above it, the cards in the subsequent row will match the spacing rules (100% width, 50/50 width, or 33/33/33 width) of the row above it. In the case of 50/50 or 33/33/33, an empty spot will intentionally be left if the subsequent row is not filled.
• The imageless card shall use the NCIDS Card component without the media being placed inside the component

Measurement Plan

• Equal or increased click through rate of the component compared to what it was
  • If passes, the component will be added to the Digital Platform
  • If fails, the component will be reworked or cut from the scope
• Equal or increased click through rate of the component following the imageless card
  • If passes, follow the rules from the above criteria
  • If fails and the former criteria passes, the component will gain new governance
  • If both criteria fail, the component will be reworked or cut from the scope
• Test a few different configurations (# of cards in a row/number of rows of imageless cards)

Analytics Requirements

• location: 'Body'
• pageType: 'cgvMiniLanding'
• pageTemplate: 'ncids_default'
• componentType: 'Raw HTML'
• pageRows: The total number of rows on the page overall (one paragraph of imageless cards counts as one row, regardless of how many rows of imageless cards are placed on the page)
• pageRowIndex: The index of the selected row from the link click
• pageRowCols: The number of columns in the row from the link click
• pageRowColIndex: The index of the selected column within the selected row from the link click
• containerItems: The number of imageless cards in the paragraph
• containerItemIndex: The index of the imageless card clicked in the paragraph. Counting will start at index 1 in the upper left corner, and count sequentially from left to right through each row before proceeding to the next row
• componentTheme: Default is 'Not Defined'
• componentVariant: Default is 'Imageless Card'
• linkText: Default is the title of the Imageless Card clicked
• title: This value is the title of the Imageless Card
• linkType: This will be set based on the type of link (internal, external, or multimedia)
• linkArea: This will pass 'Card' based on the imageless card clicked
• totalLinks: Default is 1
• linkPosition: Default is 1

DoR Tasks

• [x] Acceptance Criteria Drafted
  • [x] Analytics Acceptance Criteria Drafted
• [x] Scenarios created for YAML
• [ ] Acceptance Criteria Reviewed
  • [ ] Developer Review
  • [x] IA Review
  • [ ] Analytics Review
• [ ] Acceptance Criteria Approved
  • [ ] Developer Approval
  • [x] IA Approval
  • [ ] Analytics Approval

DoD Tasks

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

Technical Notes

Scenarios/Figma

• Use the Figma here for the individual storybook stories
• For the storybook, please make the structure be:
  • 📁 Default
  • Default (one imageless card)
  • 2 Card Group (two imageless cards split 50/50)
  • 3 Card Group (three imageless cards split 33/33/33)
  • 📁 Test Cases
  • 5 Cards in 2 Card Group (five imageless cards in 3 rows, where the last row only has 1 card)
  • 5 Cards in 3 Card Group (five imageless cards in 2 rows, where the last row only has 2 cards)

Acceptance Criteria

Front-End Experience

Scenario: A user views the imageless card(s)
  Given the imageless card(s) are created on a storybook or other test platform
    And they are organized using the scenarios defined above
  When a user views the imageless card(s)
  Then they will exactly match the comp
  When a user hovers their mouse over an imageless card
  Then it will display the hover state
  When a user clicks on an imageless card
  Then they will be redirected to the link of that card
  When the breakpoint is smaller than tablet large (less than 880px)
  Then the cards will stack vertically

Analytics

Scenario: Analytics click event for the Prototype Imageless Cards on Mini Landing Pages (Specific pages to be added later)
  Given a user is on the specific Mini Landing Page
  When the user clicks on one of the Imageless Feature Cards within the Raw HTML component
  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 |
    | 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 in the row where the link click occurred |
    | pageRowColIndex | This will return the index of the imageless card that was clicked by column in the row clicked |
    | containerItems | This will return the number of imageless cards in the paragraph of imageless cards |
    | containerItemIndex | This will return the value of the imageless card clicked in the total number of imageless cards in the paragraph. Counting will start at index 1 in the upper left corner, and count sequentially from left to right through each row before proceeding to the next row |
    | componentType | Defaults to 'Raw HTML' |
    | componentTheme | Default is 'Not Defined' |
    | linkText | Defaults to the title of the imageless card clicked
    | componentVariant | This will pass the value 'ImagelessCard' |
    | title | This will pass the title of the imageless card clicked |
    | linkType | This will be added as a data attribute to each card in the Raw HTML block and defined as 'Internal', 'External', or 'Multimedia' based on the type of link in the code |
    | linkArea | This will be set to 'Card" for all the imageless cards |
    | totalLinks | Default is 1 |
    | linkPosition | Default is 1 |

Notes

---

Solution

Prerequisites

[adrianacastaneda]

Scenarios and ACs look good to me, thank you! @andyvanavery31 @sarinapadilla

[welshja]

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