Make NCIDS usa-site-alert to be USWDS html

[bryanpizzillo]

Issue description

ESTIMATE TBD

Site Alert came before we were patching. We should update site alert to match USWDS HTML.

The main changes:

• usa-site-alert--nci-standard should go away, but we have to keep some of the styling that we did for handling the expand/collapse. This is basically the "default" variant, so we should not need a special class.
• usa-site-alert--nci-info and usa-site-alert--nci-emergency should just become the default USWDS modifiers. usa-site-alert--info and usa-site-alert--emergency.
• usa-site-alert--nci-slim should go away and we just use usa-site-alert--slim
• We do wacky stuff for the contents of the alert:
  • When we have expand/collapse we make the user add usa-alert__nci-content and usa-alert__nci-header. We should actually only add this from our Javascript. The expand/collapse styles should be based on the aria-expanded value set in javascript.
  • USWDS allows the header to basically be a combination of lists and text blocks. We should follow their markup.
    • When we are going to make it collapsible, it is only then do we take the header and other contents of the body and wrap it with the usa-alert__nci-content. (See Expand/Collapse Content Examples below)
    • On destroying the ncids component the DOM should be reset to the original HTML
• Strip the <h3> tags out of the html. Make sure that any H level works, as well as <span>.
• When there is no expand/collapse it should look like it does today with no JS firing. (But this should not be based on the styling of usa-alert__nci-content and usa-alert__nci-header!!!

Tasks

Documentation site

• [x] Documentation site is missing variants and modifiers table and needs to follow component template structure:

  variations:
   intro: |
     Choose from the following types of site alert components based on your page’s content design or organizational 
  needs.
  
     | Variant | Description |
     | ------- | ----------- |
     | Default | xxx |
     | Slim | xxx |
  
  modifications:
   intro: |
     Based on your page’s content design or organizational needs, you might need to modify the site alert further. The 
  following modifiers are available.
  
     | Modifier | Description |
     | -------- | ----------- |
     | Theme modifier | Info or emergency. Required, do not use any variant without a modifier. |
  

• [x] Missing auto init. See https://github.com/NCIOCPL/ncids/issues/1428

• [x] Update code snippets with breaking changes from ncids-css

ncids-css

• [x] Patch site alert so that the default variant keeps the expand/collapse css. This should remove .usa-site-alert--nci-standard classes everywhere.
• [x] ⚠️ Breaking change: Patch .usa-site-alert--slim to look like .usa-sute-alert--nci-slim. Replace this class in every template it is found.
• [x] ⚠️ Breaking change: Patch .usa-site-alert--info to look like .usa-site-alert--nci-info. Replace this class in every template it is found.
• [x] ⚠️ Breaking change: Patch .usa-site-alert--emergency to look like .usa-site-alert--nci-emergency. Replace this class in every template it is found.
• [x] ⚠️ Breaking change: Remove .usa-alert__nci-list In template examples, replace with appropriate utility classes. We need to create a .usa-list modifier .usa-list--nci-two-column
• [x] Collapse/expand style should be on the [aria-expanded=false/true] css selector. Default should be collapsed to prevent CLS (unless the cookie says otherwise).
• [x] Remove NCIDS's site alert directory. We will now point to uswds.

[!WARNING]
All breaking changes above should be backwards compatible for now. Deprecate the old classes with a note they will be removed in 3.0. That means the patch should contain the "bad" classes extending the good classes.

ncids-twig

• [x] Make a singular twig template for usa-site-alert that handles default and slim. See comments below.

ncids-js

• [x] Update any tests with breaking changes from ncids-css

ncids-js documentation

• [x] Create documentation for the site alert.

Storybook

• [x] Use ncids-twig with correct storybook structure.

• [x] Turn on NCIDS-js script for site alerts

• [x] Clean up storybook:

• 📁 Site alert

  • 📁 Default
  • Default
  • Dismissible
  • 📁 Modifiers
  • 📁 Emergency
    • Emergency default
    • Emergency slim
    • Dismissible emergency default
    • Dismissible emergency slim
  • 📁 Info
    • Info default
    • Info slim
    • Dismissible info default
    • Dismissible info slim
  • 📁 Variants
  • 📁 Slim
    • Slim
    • Slim Dismissible
  • 📁 Test cases
  • Emergency default with two column list
  • Info default with two column list

• [x] Create ticket for: #1717

  • Site alert
    • Default
    • Info
    • Emergency
    • Emergency list
    • Emergency no header
    • Emergency no icon
    • Emergency slim

• [x] Update backstop scenarios. Remove tests for all breakpoints. Only add tests breakpoints used in site-alert.scss.

Example js site

• [x] Update example site HTML with breaking changes from ncids-css

Expand/Collapse Content Examples

Just text

<div class="usa-alert__body">
  <span class="usa-alert__heading">Emergency alert message</span>
  <p class="usa-alert__text">
    Additional context and followup information including
    <a class="usa-link" href="javascript:void(0);">a link</a>.
  </p>
</div>

becomes

<div class="usa-alert__body">
  <div class="usa-alert__nci-header">
    <span class="usa-alert__heading">Emergency alert message</span>
  </div>
  <div class="usa-alert__nci-content">
    <p class="usa-alert__text">
      Additional context and followup information including
      <a class="usa-link" href="javascript:void(0);">a link</a>.
    </p>
  </div>
</div>

Just a list

<div class="usa-alert__body">
    <span class="usa-alert__heading">Emergency alert message</span>
    <ul class="usa-list">
      <li>
        The primary emergency message and
        <a class="usa-link" href="javascript:void(0);">a link</a> for
        supporting context.
      </li>
      <li>
        Another message,
        <a class="usa-link" href="javascript:void(0);">and another link</a>.
      </li>
      <li>A final emergency message.</li>
    </ul>
</div>

becomes

<div class="usa-alert__body">
  <div class="usa-alert__nci-header">
    <span class="usa-alert__heading">Emergency alert message</span>
  </div>
  <div class="usa-alert__nci-content">  
    <ul class="usa-list">
      <li>
        The primary emergency message and
        <a class="usa-link" href="javascript:void(0);">a link</a> for
        supporting context.
      </li>
      <li>
        Another message,
        <a class="usa-link" href="javascript:void(0);">and another link</a>.
      </li>
      <li>A final emergency message.</li>
    </ul>
  </div>
</div>

Multi-things

<div class="usa-alert__body">
  <span class="usa-alert__heading">Emergency alert message</span>
  <p class="usa-alert__text">
    Additional context and followup information including
    <a class="usa-link" href="javascript:void(0);">a link</a>.
  </p>
  <ul class="usa-list">
    <li>
      The primary emergency message and
      <a class="usa-link" href="javascript:void(0);">a link</a> for
      supporting context.
    </li>
    <li>
      Another message,
      <a class="usa-link" href="javascript:void(0);">and another link</a>.
    </li>
    <li>A final emergency message.</li>
  </ul>
  <p class="usa-alert__text">
    Additional context and followup information including
    <a class="usa-link" href="javascript:void(0);">a link</a>.
  </p>
</div>

becomes

<div class="usa-alert__body">
  <div class="usa-alert__nci-header">
    <span class="usa-alert__heading">Emergency alert message</span>
  </div>
  <div class="usa-alert__nci-content">
    <p class="usa-alert__text">
      Additional context and followup information including
      <a class="usa-link" href="javascript:void(0);">a link</a>.
    </p>
    <ul class="usa-list">
      <li>
        The primary emergency message and
        <a class="usa-link" href="javascript:void(0);">a link</a> for
        supporting context.
      </li>
      <li>
        Another message,
        <a class="usa-link" href="javascript:void(0);">and another link</a>.
      </li>
      <li>A final emergency message.</li>
    </ul>
    <p class="usa-alert__text">
      Additional context and followup information including
      <a class="usa-link" href="javascript:void(0);">a link</a>.
    </p>
  </div>
</div>

[olitharp-nci]

slim

{
        "aria_label": "Slim site alert info example",
        "variant": "slim",
        "modifier": "info",
        "content": "<strong>Short alert message.</strong> Additional context and followup information including <a class=\"usa-link\" href=\"javascript:void(0);\">a link</a>."
}

default for a list

{
    "heading": "COVID-19 resources.",
    "aria_label": "Standard site alert example Code",
    "variant": "default",
    "modifier": "info",
    "content": [
        {
            "type": "text",
            "contents": "My text here (to go in a <p class=usa-site-alert__text>"
        },
        {
            "type": "list",
            "contents": [
                {
                    "type": "link",
                    "data": {
                        "href": "#",
                        "text": "What people with cancer should know"
                    },
                    "type": "text",
                    "data": "This is some text for the template"
                }
            ]
        }
    ]
}

twig template

{% macro defaultContent(content) %}
    <div class="usa-alert__nci-content">
        <ul class="usa-alert__nci-list">
            <li>
                <a class="usa-link" href="#!">
                    What people with cancer should know
                </a>
            </li>
            <li>
                <a class="usa-link" href="#!">
                    Get the latest public health information from CDC
                </a>
            </li>
            <li>
                <a class="usa-link" href="#!"> Guidance for cancer researchers </a>
            </li>
            <li>
                <a class="usa-link" href="#!">
                    Get the latest research information from NIH
                </a>
            </li>
        </ul>
    </div>
{% endmacro %}

{% macro slimContent(content) %}
    <div class="usa-alert__text">
        {{ content }}
    </div>
{% endmacro %}

{# Setup the class list. TwigJS does not have html_classes. #}
{% set classList = "usa-site-alert" %}

{% if variant == "slim" }
    {% set classList = classList + "usa-site-alert--nci-slim" %}
{% else %}
    {% set classList = classList + "usa-site-alert--nci-standard" %}
{% endif %}

{# The modifier should be 'info' or 'emergency' #}
{% if modifier }
    {% set classList = classList + "usa-site-alert--nci-" + modifier %}
{% endif %}

<section
  aria-label="{{aria_label}}"
  class="usa-site-alert usa-site-alert--nci-standard usa-site-alert--nci-info"
>
  <div class="usa-alert">
    <div class="usa-alert__body">
            {% if variant == "default" and heading %}
                <div class="usa-alert__nci-header">
                    <h3 class="usa-alert__heading">{{ heading }}</h3>
                </div>
            {% endif %}
            {% if variant == "default" %}
                {{ _self.defaultContent(content) }}
            {% elseif variant == "slim" %}
                {{ _self.slimContent(content) }}
            {% else %}
                <strong>UNKNOWN VARIANT</strong>
            {% endif %}

    </div>
  </div>
</section>