Closed bryanpizzillo closed 2 months ago
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>
Issue description
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
andusa-site-alert--nci-emergency
should just become the default USWDS modifiers.usa-site-alert--info
andusa-site-alert--emergency
.usa-site-alert--nci-slim
should go away and we just useusa-site-alert--slim
When we have expand/collapse we make the user addThe expand/collapse styles should be based on the aria-expanded value set in javascript.usa-alert__nci-content
andusa-alert__nci-header
. We should actually only add this from our Javascript.<h3>
tags out of the html. Make sure that any H level works, as well as<span>
.usa-alert__nci-content
andusa-alert__nci-header
!!!Tasks
Documentation site
[x] Documentation site is missing variants and modifiers table and needs to follow component template structure:
[x] Missing auto init. See https://github.com/NCIOCPL/ncids/issues/1428
[x] Update code snippets with breaking changes from ncids-css
ncids-css
.usa-site-alert--nci-standard
classes everywhere..usa-site-alert--slim
to look like.usa-sute-alert--nci-slim
. Replace this class in every template it is found..usa-site-alert--info
to look like.usa-site-alert--nci-info
. Replace this class in every template it is found..usa-site-alert--emergency
to look like.usa-site-alert--nci-emergency
. Replace this class in every template it is found..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
[aria-expanded=false/true]
css selector. Default should be collapsed to prevent CLS (unless the cookie says otherwise).ncids-twig
ncids-js
ncids-js
documentationStorybook
[x] Use ncids-twig with correct storybook structure.
[x] Turn on NCIDS-js script for site alerts
[x] Clean up storybook:
📁 Site alert
[x] Create ticket for: #1717
[x] Update backstop scenarios. Remove tests for all breakpoints. Only add tests breakpoints used in site-alert.scss.
Example js site
Expand/Collapse Content Examples
Just text
becomes
Just a list
becomes
Multi-things
becomes