Create Mini Landing Page Template

[sarinapadilla]

As a user, I want to have NCIDS components available for my mini landing page, so that I can feature content.

The Mini Landing Page content type needs to be updated to allow for the new NCIDS page template style. The Mini Landing Page Style dropdown field will have two options: Standard/Default/something and NCIDS. (wordsmith these later)

Additionally, we are updating usa-section on MLPs:

1. First component on an MLP page should get:
   • Top Padding: None
   • Bottom Padding:
     • 2 rem on desktop
     • 1.5 rem on mobile
2. All other components in the MLP page should get:
   • Top and Bottom Padding:
     • 2 rem on desktop
     • 1.5 rem on mobile
3. The last component on the MLP page should get:
   • Top Padding:
     • 2 rem on desktop
     • 1.5 rem on mobile
   • Bottom Padding:
     • 4 rem on desktop
     • 3 rem on mobile
4. Within two column, the first component will get no top padding, then follow spacing convention for the rest of the components on the page

DoR Tasks

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

DoD Tasks

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

Acceptance Criteria

Scenario: Mini Landing Page Style field displays on Mini Landing Page content type
  Given the user is logged in as an editor 
    And the user adds new content 
    And selects Mini Landing Page as the content type 
  Then the edit screen for a new Mini Landing Page content item displays
    And the Mini Landing Page Style field appears
    And the field displays under the Language field and above the Site Section field
    And the field is a dropdown
    And under the dropdown the tooltip text appears that reads "Select a template for the page"
    And the dropdown defaults to "Standard" 
    And the dropdown has the option "NCIDS"
    And the field is required 

Test Content

Create the following pages to help test that the template is working as expected:

English: https://www-dev-ac.cancer.gov/test/ncids-mini-landing/template Spanish: https://www-dev-ac.cancer.gov/espanol/test-es/ncids-mini-landing-es/template

• Add new content, select Mini Landing Page as the content type
• On the Mini Landing Page Style field, select NCIDS as the page style.
• Add a rawHTML component to the page and add "hello world" - or some generic text inside a usa-prose tag (or something else?) to demonstrate that the template is working and pulling in NCIDS styling.

Resources:

• Feature: JIRA Ticket #
• Mockups: Here goes a URL to or the name of the mockup(s) in inVision
• Web Page: Here goes a URL to an existing web page

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
• [ ] Allow rawHTML component in the landing_contents (it should already be allowed).
  • *rawHTML component template needs to be updated to not produce extra markup when it is inside of the NCIDS mini landing page template

Technical Notes

• More notes, or technical nuances/direction

[dev-rana-publicis]

Approach

• [x] Create a new field for the Mini Landing Page
  • Field name: field_mlp_page_style (waiting for content model to be updated to reflect this)
• [x] Update page suggestions to use mini-landing page style field
  • Updates ncids_trans.theme to include field_mlp_page_style page suggestions to MLP
• [x] Create Drupal NCIDS node template for NCIDS mini-landing
  • node--cgov-mini-landing--ncids--full.html.twig
• [x] Create Drupal NCIDS page template for mini-landing
  • page--cgov-mini-landing--ncids.html.twig
• [x] Create Front-end Entrypoint (should probably be based on home landing + analytics)
  • Inside of .../ncids_trans/front-end/src/entrypoints/ create a new entrypoint ncids-mini-lanidng.scss & ncids-mini-landing.ts
• [x] Update RawHTML to work like landing page HTML
  • Copy out the RawHTML utility classes from ncids-home-landing.scss to ncids-mini-landing.scss
  • Import RawHTML to ncids-mini-landing.ts
• [x] Update usa-section spacing to be less
  • Check this ticket for usa-section changes that are required
• [ ] Create Example mini-landing YAML (with Raw HTML)