Create Slim Hero paragraph for Mini Landing Pages

[sarinapadilla]

As a content editor, I want to be able to add a Slim Hero paragraph, so that I can add a visually appealing image to the top of the page.

This paragraph will have an image field to upload an image directly, and a field to set alt text (this comes with an image upload). Image size requirements is 1988 x 460 px.

DoR Tasks

• [x] @lburack to work with designers to come to a solution on the impact of using usa-measure with this component.
• [x] Designers to update comps to match outcome from usa-measure impact
• [ ] Content Model Drafted @sarinapadilla
• [ ] Content Model Reviewed
  • [ ] Developer Review
  • [ ] IA Review
• [ ] Content Model Approved
  • [ ] Developer Approval
  • [ ] IA Approval
• [ ] Acceptance Criteria Drafted
• [ ] Scenarios created for YAML
• [ ] Acceptance Criteria Reviewed
  • [ ] Developer Review
  • [ ] IA Review
• [ ] Acceptance Criteria Approved
  • [ ] Developer Approval
  • [ ] IA Approval

DoD Tasks

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

Acceptance Criteria

Scenario: NCIDS Title paragraph can be added to Mini Landing Page content type
  Given the user is logged in as an editor 
    And the user is editing a "Mini Landing Page" content item
  When the user expands the dropdown to add a paragraph to Contents
  Then the dropdown displays "Add NCIDS Slim Hero"
  When the user selects "Add NCIDS Slim Hero"
  Then the fields for a "NCIDS Slim Hero" paragraph appear
  And the "Image" field appears
  And the field is required
  And it is an image upload
  And the image field has the Alt Text property editable

Resources:

• Figma - 3.1 Priority MLP Comps
• Figma - Component Library List (3.1)
• R3 Design Scope

Notes

Some complementary notes if necessary:

• Here goes a quote from an email

• Here goes whatever useful information can exist…

---

Solution

Prerequisites

• required dependency for identifying the problem, scope and then solution for this issue
• [ ] Short Spike Description - Issue #9999

Tasks

• [ ] Create content model
  • [ ] Update with tooltips
• [ ] Short Task Description - Issue #9999

Technical Notes

• More notes, or technical nuances/direction

[laurelthrash]

Comps updated and links provided in Description of this ticket. Marking as complete from Design board for the time being and tagging @andyvanavery31 @sarinapadilla for next steps. Cc: @lburack @monika-jaeger @blilianyu

[dev-rana-publicis]

Approach

• [ ] Create Drupal paragraph for the slim hero
  • Label: NCIDS Slim Hero
  • Machine name: ncids_slim_hero
  • Description: Needs DOR
  • [ ] Create fields
    • Need to confirm with product if this is going to be a cgov_image or uploaded from local computer
  • [ ] Add to allowed components for MLP
• [ ] Create Drupal template for Slim Hero
  • paragraph--ncids-slim-hero.html.twig
• [ ] Create entrypoint for slim hero
  • cgdp-slim-hero
• [ ] Create CSS for cgdp-slim-hero
• [ ] Create Example mini-landing YAML (with Slim Hero + Title + Raw HTML)