bootstrap_italia-8.x-0.x-dev/components/components-2/callout/callout.html.twig

{#
/**
 * @file
 * Template for Callout component.
 * Docs: https://italia.github.io/bootstrap-italia/docs/componenti/callout/
 * Latest revision: v2.8.8
 *
 * Parameters:
 * - callout_variant (string) (default: 'default')
 *   - options ["success", "warning", "danger", "important", "note", "default"]
 * - display (boolean) (default: 'standard')
 *   - options ["standard","highlight", "more"]
 * - icon_name (string) (default: '')
 * - title (string) (default: '')
 * - assistive_text (string) (default: '')
 * - callout_classes (array) (default: '')
 * - callout_attributes (obj attribute) (default: '')
 *   - Object with extra attributes
 * - text (string) (default: '')
 *
 * - content (block) (default: empty)
 *   - block with complex content
 *
 * Examples:
   {% include '@bi-bcl/callout/callout.html.twig' with {
      callout_variant: 'success',
      title: 'success',
      text: 'Lorem ipsum',
   } %}
 *
  {% embed '@bi-bcl/callout/callout.html.twig' with {
      title: 'More note',
      display: more,
  } %}
    {% block content %}
      Your complex content
    {% endblock %}
  {% endembed %}
 */
#}
{% apply spaceless %}
  {# Set defaults #}
  {% set _callout_variant = callout_variant|default('default') %}
  {% set _display = display|default('standard') %}
  {% set _icon_name = icon_name|default('') %}
  {% set _title = title|default('') %}
  {% set _assistive_text = assistive_text|default('') %}
  {% set _callout_classes = callout_classes|default('') %}
  {% set _callout_attributes = callout_attributes|default('') %}
  {% set _text = text|default('') %}

  {# Set options #}
  {% if _display == 'more' %}
    {% set _callout_variant = 'note' %}
  {% endif %}

  {% set _classes = [
    'callout',
    _display is not empty and _display != 'standard' ? 'callout-' ~ _display,
    _display == 'more' ? 'note',
    _callout_variant != 'default' ? _callout_variant,
  ] %}

  {% if _callout_classes is not empty %}
    {% set _classes = _classes|merge(callout_classes) %}
  {% endif %}

  {% if _callout_attributes is empty %}
    {% set callout_attributes = create_attribute() %}
  {% endif %}
  {% set callout_attributes = callout_attributes.addClass(_classes) %}

  {% set icons = {
    success:   'it-check-circle',
    warning:   'it-help-circle',
    danger:    'it-close-circle',
    important: 'it-info-circle',
    note:      'it-info-circle',
    default:   'it-info-circle',
  } %}

  {% if _icon_name is empty %}
    {% if _display == 'more' %}
      {% set _icon_name = 'it-zoom-in' %}
    {% else %}
      {% set _icon_name = icons[_callout_variant] %}
    {% endif %}
  {% endif %}

  {% set default_assistive_text = {
    success:   'Success'|t,
    warning:   'Warning'|t,
    danger:    'Danger'|t,
    important: 'Important'|t,
    note:      'Note'|t,
    default:   'Info'|t,
  } %}
  {% if _assistive_text is empty %}
    {% set _assistive_text = default_assistive_text[_callout_variant] %}
  {% endif %}

  {% set icon_attributes = create_attribute() %}
  {% set icon_attributes = icon_attributes.setAttribute('aria-hidden', true) %}

  {# Component #}
  <div {{ callout_attributes }}>

    {% if _display == 'standard' %}
      <div class="callout-inner">
    {% endif %}

    <div class="callout-title">
      {% include '@bi-bcl/icon/icon.html.twig' with {
        name: _icon_name,
        icon_attributes: icon_attributes
      } %}
      <span class="visually-hidden">{{ _assistive_text }}</span>

      {% if _title is not empty %}
        <span class="text">
          {{- _title -}}
        </span>
      {% endif %}
    </div>

    {% block content %}
      {% if _text is not empty %}
        <p>{{ _text }}</p>
      {% endif %}
    {% endblock %}

    {% if _display == 'standard' %}
      </div>
    {% endif %}

  </div>
{% endapply %}