uswds_alert
The USWDS Alert module allows Drupal site builders to easily add alert components that match the U.S. Web Design System (USWDS) to their Drupal site.
This module extends the Sitewide Alert module by adding seven Alert Styles that correspond with the USWDS components Alert and Site Alert. It also adds new optional fields to the Sitewide Alert entity and adds new content blocks to control the placement of different alerts.
This is not a functional module yet. It is under active development practicing Contrib First.
Table of contents
Features
Alert Styles
This module adds seven different Alert Styles for the Sitewide Alert entity. Each Alert Style corresponds to a USWDS component variant.
-
USWDS Site Alert component
- Informational site alert
- Emergency site alert
-
USWDS Alert component
- Emergency status alert
- Error status alert
- Informational status alert
- Success status alert
- Warning status alert
These styles can be selected from the Alert Style dropdown menu.
Alert Style Variants
This module adds three new optional fields to the the Sitewide Alert entity. These fields allow users to customize their alert to match any variant of the USWDS Alert and Site Alert components.
-
Alert heading (
field_heading)- Adds a heading above the alert message
- Leave blank to use the alert with no header variant
-
Display alert icon (
field_show_icon)- Checked by default
- Uncheck to use the alert with no icon variant
-
Display as slim alert (
field_show_as_slim)- Unchecked by default
- Check to use the slim alert variant
Alert Sorting Options
This module adds an Alert Weight field (field_weight) to the the Sitewide Alert entity. The Alert Weight field allows for customizing the order alerts are stacked. This only applies to situations where multiple alerts are present in the same location.
- USWDS guidance strongly discourages stacking multiple alerts
- Alerts with lower weights appear higher than those with higher weights within their Block.
- If no weight is set (or if two alerts have the same weight), alerts will be stacked in the order specified in the Display Order field of the Sitewide Alert module configuration menu
Alert Blocks
This module comes with three content blocks that can be used to control where different types of Sitewide Alerts will display. These Blocks use Single Directory Components and can be overridden if copied and pasted into the theme.
- USWDS Site Alert block
- This block displays Sitewide Alerts with either of the following Alert Styles:
- USWDS site alert - Informational
- USWDS site alert - Emergency
- USWDS Alert block
- This block displays Sitewide Alerts with any of the following Alert Styles:
- USWDS alert - Emergency
- USWDS alert - Error
- USWDS alert - Informational
- USWDS alert - Success
- USWDS alert - Warning
- Non-USWDS Alert block
- This block display any Sitewide Alerts that don't have one of the seven USWDS Alert Styles
- This serves as the replacement for the Block provided by the Sitewide Alert module.
Endpoint for decoupled display
The content in the blocks is update via javascript dynamically so that alerts can update even without a page refresh. This also exposes the data for use in a decoupled site. The data can be found in JSON format at '/sitewide_alert/load/uswds' and '/jsonapi/sitewide_alert/uswds'.
Requirements
This module requires the following modules:
Installation
Install as you would normally install a contributed Drupal module. For further information, see Installing Drupal Modules.
- Notes about field_heading if potential conflicts?
Configuration
- As noted this adds some Blocks, Field instances and configuration so be sure to perform configuration export after enabling this module.
- Basic instructions to place the USWDS blocks into the page layout [to be added]
- Notes on coupled vs decoupled [to be added]