BUX Component Development Platform

Alert: Warning 

<div role="region" aria-labelledby="label-type-warning-477319996 status-message-477319996">
    <div class="bux-alert bux-alert--warning" role="status" aria-live="polite">
        <div class="bux-alert__icon" aria-hidden="true"></div>
        <div class="visually-hidden" id=label-type-warning-477319996>Warning.</div>
        <div class="bux-alert__message">
            <h2 class="bux-alert__message-title" id="status-message-477319996">This is a warning message.</h2>
            <div class="bux-alert__message-text">This is additional text about this message.</div>
        </div>
    </div>

</div>
 
{% set live_type = '' %}

{% if live %}
    {% if alert_role == 'status' %}
        {% set live_type = 'role="status" aria-live="polite"' %}
    {% elseif alert_role == 'alert' %}
        {% set live_type = 'role="alert" aria-live="assertive"' %}
    {% else %}
        {% set live_type = 'aria-live="polite"' %}
    {% endif %}
{% endif %}

{% set random_seed = random() %}

{% set alert_id = "label-type-" ~ alert_type ~ "-" ~ random_seed %}
{% set alert_label = alert_role ~ "-message-" ~ random_seed %}

{% if live %} 
<div role="region" aria-labelledby="{{ alert_id }} {{ alert_label }}">
{% endif %}
<div class="bux-alert bux-alert--{{ alert_type }}" {{ live_type }}>
	<div class="bux-alert__icon" aria-hidden="true"></div>
	<div class="visually-hidden" id={{ alert_id }}>{{ alert_type_string }}</div>
	<div class="bux-alert__message">
		<h{{ alert_heading_level | default(2) }} class="bux-alert__message-title" id="{{ alert_label }}">{{ alert_title }}</h{{ alert_heading_level | default(2) }}>
		{% if alert_text %}
			<div class="bux-alert__message-text">{{ alert_text }}</div>
		{% endif %}
		{% if dismissible %}
			<button class="bux-alert__dismiss"><span class="visually-hidden">Dismiss this alert</span></button>
		{% endif %}
	</div>
</div>
{% if live %} 
</div>
{% endif %}
 
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
alert_type: warning
alert_type_string: Warning.
alert_role: status
alert_title: This is a warning message.
alert_text: This is additional text about this message.
live: true
  • Content: 
    @mixin alert($bg-color, $icon-color, $text-color: $black, $icon-code: "\f106") {
  position: relative;
  background-color: $bg-color;
  color: $text-color;
  display: flex;
  padding: $sp-8 $sp-16;

  .bux-alert__icon {
    line-height: 1;
    margin-right: $sp-12;

    &:after {
      content: $icon-code;
      font-family: $icon;
      font-size: $ts-md;
      color: $icon-color;
    }
  }

  .bux-alert__message-title {
    color: $text-color;
    font-size: $ts-18;
    font-family: $sans;
    font-weight: 700;
    margin-bottom: $sp-4;
    line-height: 1.5rem;
  }

  .bux-alert__message-text {
    font-family: $sans;
    font-size: $ts-base;
    line-height: 1.375;
    font-weight: 400;
  }

  .bux-alert__dismiss {
    @include button-reset();
    position: absolute;
    height: 44px;
    width: 44px;
    top: 0;
    right: 0;

    &:after {
      content: "\f105";
      font-family: $icon;
      font-size: $ts-base;
      color: $text-color;
    }

    &:focus {
      outline: 2px solid $focus;
    }
  }
}

.bux-alert {
  &.bux-alert--info {
    @include alert($info-light, $info-dark, $icon-code: "\f104");
    a {
      @include link-base("light");
    }
  }
  &.bux-alert--success {
    @include alert($success-light, $success-dark, $icon-code: "\f102");
    a {
      @include link-base("light");
    }
  }
  &.bux-alert--warning {
    @include alert($warning-light, $warning-dark, $icon-code: "\f108");
    a {
      @include link-base("light");
    }
  }
  &.bux-alert--error {
    @include alert($error, $white, $white, $icon-code: "\f106");
    a {
      @include link-base("scarlet");
    }
  }
}
  • URL: /components/raw/alert/_alert.scss
  • Filesystem Path: src/components/alert/_alert.scss
  • Size: 1.6 KB
  • Content: 
    const dismissButtons = document.querySelectorAll("button.bux-alert__dismiss");

if (dismissButtons) {
	dismissButtons.forEach((item) => {
		item.addEventListener("click", dismissAlert);
	});
}

function dismissAlert(event) {
	let alert = event.target.closest(`.bux-alert`);
	alert.remove();
}
  • URL: /components/raw/alert/alert.js
  • Filesystem Path: src/components/alert/alert.js
  • Size: 293 Bytes

Alert types: information, success, warning, and danger. The examples show different implementations for static alerts and dynamic alerts. Static alerts are for static pages. They do not have role or aria-live attributes. Dynamic messages are for pages that display alerts dynamically in between page loads. They must use one of the attribute pairs of “role=” and “aria-live=” as shown. See the Alert documentation page for usage.