YALB-1697: Bug: Margin for spotlights

[joetower]

YALB-1697: Bug: Margin for spotlights

Description of work

• Adds JS to scan the page for consecutive instances of text-with-image or content-spotlight-portrait
• If there are two consecutive instances, the first will have margin applied to the top and the second will have margin applied to the bottom.
• If there are several consecutive instances, the first will have top margin and the last will have bottom margin.
• If a spotlight uses a default / no color theme option, it will have top and bottom margin, even if it is the only spotlight instance
• Spotlights, by default, do not have margins. Instead, we introduce margins if specific attributes are present.
• Margins are introduced if:
  • the spotlight does not use a theme color (is set to default)
  • the spotlight is the only spotlight on the page
  • there are consecutive spotlights on the page, the first has top margin, the last has bottom margin

Testing Link(s)

• Navigate to the Component Story

Functional Review Steps

• Visit example page here: https://deploy-preview-332--dev-component-library-twig.netlify.app/?path=/story/page-examples-standard-pages--basic-spotlights
• Test on the Drupal multidev here: https://pr-563-yalesites-platform.pantheonsite.io/spotlights
• Confirm that the first and last spotlight in each group (two or more spotlights) have margins applied
• If first, there is top margin (data-spotlights-position="first")
• If last, there is bottom margin ( data-spotlights-position="last" except if last component on the page and not using a component theme)

yalb-spotlight-margins-drupal.mp4

• Note that if either Content Spotlights, landscape or portrait, are using a theme and they are the last component before the footer, there is no bottom margin.
• Note that if you add a Content Spotlight set to Theme: Default - No Theme, there is space between the component and the footer.
• With one spotlight : https://pr-563-yalesites-platform.pantheonsite.io/one-spotlight-only
• Note: if a spotlight is the one and only spotlight on the page, then it should have top and bottom margin (data-spotlights-position="first-and-last")

yalb-spotlight-margins-drupal-single.mp4

[netlify]

✅ Deploy Preview for dev-component-library-twig ready!

Name	Link
🔨 Latest commit	34f1b76
🔍 Latest deploy log	https://app.netlify.com/sites/dev-component-library-twig/deploys/65dc07f7405852000801e700
😎 Deploy Preview	https://deploy-preview-332--dev-component-library-twig.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[dblanken-yale]

Works great! Nice work! I was going to suggest maybe combining the if statements at the end so that it doesn't overwrite itself in the event it is first and last, but then again that means there's only one spotlight and that's a trivial performance gain. LOL

I really like the idea of creating the data attributes for this! So easy to understand in the markup.

[sskalisky-4k]

This looks great, @joetower!

[miketullo95]

this is great!

[codechefmarc]

Whoops, reviewed on Atomic as well, I think that's correct. Anyways, approved! Nice work!

[github-actions]

🎉 This PR is included in version 1.39.1 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀