NFR: Alert for content editors on incorrect block usage (2)

[cogniSyb]

We should display an alert on environments when the content editor adds a v2 block on the page that is not a v2-redesign page. This will allow incorrect use of a component to be spotted more quickly and reduce errors and questions in the future.

We should display an alert on environments when the content editor adds section modifier on the page that is not allowed on a v2-redesign page. This will allow incorrect use of section modifiers to be spotted more quickly and reduce errors and questions in the future. This is #622

This issue is related (part two of) to https://github.com/hlxsites/vg-volvotrucks-us/issues/539

Requirements

• Check whether AEM Sidekick is open, execute the script
• Loop over items with attribute data-block-name for blocks
• Loop over items with class section and their other classes for section modifiers
• If the user is on a redesign page
  • Check whether a non-redesign block is present on a page (a block that doesn’t start with v2-)
  • If the block is on the allowlist, we ignore it
  • Check whether a non-redesign section modifier is used
• If the user is on a regular page
  • Check whether a v2 block is present on a page (a block that starts with v2-)
  • If the block is on the allowlist, we ignore it
  • Check whether a redesign section modifier is used
• Explain what the problem is and which block is used that is 'in violation'
• The modal can be closed with a button

Allowed blocks

On both redesign pages and non-redesign pages, the following blocks are allowed:

• Embed
• Footer
• Fragment
• Header
• Iframe
• Modal

Section modifiers for redesign

• 'header-with-mark'
• 'recalls-padding'
• 'section--background-with-dots'
• 'section--black-background'
• 'section--gray-background'
• 'section--light-gray-background'
• 'section--no-gap'
• 'section--no-vertical-padding'
• 'section--with-background'

Section modifiers for regular pages

These might have adverse effects on redesign pages/

• 'background', 'background-top', 'bg-paper', 'bg-white-paper', 'dark-background'
• 'center'
• 'flex-center'
• 'font-l', 'font-m', 'font-s', 'font-xl', 'font-xxl', 'font-xs', 'font-xxs', 'helvetica-55', 'helvetica-65', 'helvetica-75', 'helvetica-56', 'helvetica-66', 'helvetica-76'
• 'gap'
• 'highlight'
• 'line-separator'
• 'magazine-listing-content'
• 'no-first-line'
• 'padding-0', 'padding-16', 'padding-32'
• 'section-width'
• 'text-white'
• 'text-black'
• 'responsive-title', 'title-line', 'title-margin-bottom-0', 'title-white'
• 'wrapper-margin-top-0'

[AsmitKMishra]

Testing complete. Feature works for redesign page. There is a notification explaining if incorrect blocks or section modifiers are used. Legacy blocks mentioned in the issue as exceptions do not create the notification. Similarly for regular page, presence of v2 blocks creates the notifications. Section modifiers from above list work as expected. Screenshots are attached for reference.