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

{#
/**
 * @file
 * Template for button component.
 * Docs: https://italia.github.io/bootstrap-italia/docs/componenti/bottoni/
 * Latest revision: v2.8.7
 *
 * Parameters:
 * - label (string) (default: '')
 * - tag (string) (default: 'button')
 *   - options ["button", "a", "span"]
 * - url (string) (default: '')
 *   - Url is ammissible only in "a" tag
 * - url_target (string) (default: '')
 *   - options ["_blank", "_self", "_parent", "_top"]
 * - id (string) (default: '')
 *   - Optional id
 * - type (string) (default: 'button')
 *   - options ["button", "submit", "reset"]
 * - outline (boolean) (default: false)
 *   - Enable outline
 * - variant (string) (default: '')
 *   - options ["primary", "secondary", "success", "danger", "warning", "white", "dark" ]
 * - size (string) (default: '')
 *   - options ["xs", "sm", "lg"]
 * - disabled (boolean) (default: false)
 *   - Enable disabled feature
 * - assistive_text (string) (default: '')
 * - button_classes (array) (default: '')
 * - button_attributes (obj attribute) (default: '')
 *   - Object with extra attributes
 * - label_classes (array) (default: '')
 *
 * - before (block) (default: empty)
 *   - block positioned before label
 * - after (block) (default: empty)
 *   - block positioned after label
 *
 * Examples:
   {% include '@bi-bcl/button/button.html.twig' with {
      label: 'Submit',
      variant: 'primary',
      tag: 'a',
   } %}
 *
   {% embed '@bi-bcl/button/button.html.twig' with {
      label: color,
      variant: color,
      button_classes: ['m-3', 'btn-icon'],
   } %}
    {% block after %}
      {% include '@bi-bcl/icon/icon.html.twig' with {
        name: 'it-star-full',
        color: 'white',
        icon_classes: ['ms-1'],
      } %}
    {% endblock %}
   {% endembed %}
 *
  {% embed '@bi-bcl/button/button.html.twig' with {
      label: color,
      variant: color,
      button_classes: ['m-1', 'btn-icon'],
  } %}
    {% block before %}
      <span class="rounded-icon">
        {% include '@bi-bcl/icon/icon.html.twig' with {
          name: 'it-user',
          size: 'sm',
          color: 'primary',
          icon_classes: ['mr-1'],
        } %}
      </span>&nbsp;
    {% endblock %}
  {% endembed %}
 */
#}
{% apply spaceless %}
  {# Set defaults #}
  {% set _label = label|default('') %}
  {% set _tag = tag|default('button') %}
  {% set _url = _tag == 'a' and url is defined and url is not empty ? url : '' %}
  {% set _url_target = url_target|default('') %}
  {% set _id = id|default('') %}
  {% set _type = type|default('button') %}
  {% set _outline = outline ?? false %}
  {% set _variant = variant|default('') %}
  {% set _size = size|default('') %}
  {% set _disabled = disabled ?? false %}
  {% set _assistive_text = assistive_text|default('') %}
  {% set _button_classes = button_classes|default('') %}
  {% set _button_attributes = button_attributes|default('') %}
  {% set _label_classes = label_classes|default('') %}

  {# Set options #}
  {% set _classes = [
    'btn',
    _outline and _variant is not empty ? 'btn-outline-' ~ _variant,
    not _outline and _variant is not empty ? 'btn-' ~ _variant,
    _size is not empty ? 'btn-' ~ _size,
  ] %}

  {% if _button_classes is not empty %}
    {% set _classes = _classes|merge(button_classes) %}
  {% endif %}

  {% if _button_attributes is empty %}
    {% set button_attributes = create_attribute() %}
  {% endif %}
  {% set button_attributes = button_attributes.addClass(_classes) %}

  {% if _id is not empty %}
    {% set button_attributes = button_attributes.setAttribute('id', _id) %}
  {% endif %}

  {# Settings tag a #}
  {% if _tag == 'a' or _tag == 'span' %}
    {% set button_attributes = button_attributes.setAttribute('role', 'button') %}
    {% if _disabled %}
      {% set button_attributes = button_attributes
        .addClass('disabled')
        .setAttibute('tabindex', '-1')
      %}
    {% endif %}
  {% endif %}

  {% if _tag == 'a' and _assistive_text is empty %}
    {% set _assistive_text = _label %}
  {% endif %}

  {% if _tag == 'a' %}
    {% set button_attributes = button_attributes.setAttribute('title', _assistive_text) %}
  {% endif %}

  {# href attribute only in 'a' tag #}
  {% if _tag == 'a' and _url is not empty %}
    {% set button_attributes = button_attributes.setAttribute('href', _url) %}
  {% endif %}

  {% if _tag == 'a' and _url_target is not empty %}
    {% set button_attributes = button_attributes.setAttribute('target', _url_target) %}
  {% endif %}

  {# Settings type attribute for button or input #}
  {% if _tag == 'button' or _tag == 'input' %}
    {% set button_attributes = button_attributes.setAttribute('type', _type) %}
  {% endif %}

  {# Settings for button disabled #}
  {% if _tag == 'button' and _disabled %}
    {% set button_attributes = button_attributes
      .setAttribute('aria-disabled', true)
      .setAttribute('disabled', true)
    %}
  {% endif %}

  {# Add aria-label text #}
  {% if _tag == 'a' or _tag == 'button' or tag == 'span' %}
    {% if _assistive_text is not empty %}
      {% set button_attributes = button_attributes.setAttribute('aria-label', _assistive_text) %}
    {% endif %}
  {% endif %}

  {# Setting label classes #}
  {% set label_attributes = create_attribute() %}
  {% if _label_classes is not empty %}
    {% set label_attributes = label_attributes.addClass(_label_classes) %}
  {% endif %}

  {# Component #}
  {% if _tag == 'a' or _tag == 'button' or tag == 'span' %}
    <{{- _tag -}}
      {{ button_attributes }}
    >

    {% block before %}{% endblock %}

    {% if _label is not empty %}
      <span{{ label_attributes }}>{{- _label -}}</span>
    {% endif %}

    {%- if _assistive_text is not empty and _label is empty
      and (not button_attributes['aria-label'] is defined or button_attributes['aria-label'] is empty) -%}
        <span class="visually-hidden">{{- _assistive_text -}}</span>
    {%- endif -%}

    {% block after %}{% endblock %}

    </{{- _tag -}}>
  {% endif %}{# End tag a, button or span. #}

  {% if _tag == 'input' %}
    {% set button_attributes = button_attributes.setAttribute('value', _label) %}
    <input{{ button_attributes }}>
    {%- if _assistive_text is not empty -%}
      <span class="visually-hidden">{{- _assistive_text -}}</span>
    {%- endif -%}
  {% endif %}
{% endapply %}