forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
103 lines
3.1 KiB
Twig
103 lines
3.1 KiB
Twig
{#
|
|
/**
|
|
* @file
|
|
* Theme override for a details element.
|
|
*
|
|
* Available variables
|
|
* - attributes: A list of HTML attributes for the details element.
|
|
* - errors: (optional) Any errors for this details element, may not be set.
|
|
* - title: (optional) The title of the element, may not be set.
|
|
* - description: (optional) The description of the element, may not be set.
|
|
* - children: (optional) The children of the element, may not be set.
|
|
* - value: (optional) The value of the element, may not be set.
|
|
* - accordion: whether the details element should look as an accordion.
|
|
* - accordion_item: whether the details element is an item of an accordion
|
|
* list.
|
|
* - disabled: whether the details is disabled.
|
|
*
|
|
* @see template_preprocess_details()
|
|
* @see claro_preprocess_details()
|
|
*/
|
|
#}
|
|
{#
|
|
Prefix 'details' class to avoid collision with Modernizr.
|
|
|
|
@todo Remove prefix after https://www.drupal.org/node/2981732 has been solved.
|
|
#}
|
|
{% set show_description_toggle = description_toggle and description %}
|
|
{%
|
|
set classes = [
|
|
'claro-details',
|
|
accordion ? 'claro-details--accordion',
|
|
accordion_item ? 'claro-details--accordion-item',
|
|
show_description_toggle ? 'help-icon__description-container',
|
|
]
|
|
%}
|
|
{%
|
|
set content_wrapper_classes = [
|
|
'claro-details__wrapper',
|
|
'details-wrapper',
|
|
accordion ? 'claro-details__wrapper--accordion',
|
|
accordion_item ? 'claro-details__wrapper--accordion-item',
|
|
]
|
|
%}
|
|
{%
|
|
set inner_wrapper_classes = [
|
|
'claro-details__content',
|
|
accordion ? 'claro-details__content--accordion',
|
|
accordion_item ? 'claro-details__content--accordion-item',
|
|
]
|
|
%}
|
|
{%
|
|
set description_classes = [
|
|
'claro-details__description',
|
|
disabled ? 'is-disabled',
|
|
description_display == 'invisible' ? 'visually-hidden',
|
|
]
|
|
%}
|
|
<details{{ attributes.addClass(classes) }}>
|
|
{%- if title -%}
|
|
{%
|
|
set summary_classes = [
|
|
'claro-details__summary',
|
|
required ? 'js-form-required',
|
|
required ? 'form-required',
|
|
accordion ? 'claro-details__summary--accordion',
|
|
accordion_item ? 'claro-details__summary--accordion-item',
|
|
]
|
|
%}
|
|
<summary{{ summary_attributes.addClass(summary_classes) }}>
|
|
{{- title -}}
|
|
<span class="required-mark"></span>
|
|
{% if show_description_toggle %}
|
|
{{ attach_library('gin/gin_description_toggle') }}
|
|
<button class="help-icon__description-toggle"></button>
|
|
{% endif %}
|
|
</summary>
|
|
{%- endif -%}
|
|
<div{{ content_attributes.addClass(content_wrapper_classes) }}>
|
|
{% if accordion or accordion_item %}
|
|
<div{{ create_attribute({class: inner_wrapper_classes}) }}>
|
|
{% endif %}
|
|
|
|
{% if errors %}
|
|
<div class="form-item form-item--error-message">
|
|
{{ errors }}
|
|
</div>
|
|
{% endif %}
|
|
{%- if description -%}
|
|
<div{{ create_attribute().addClass(description_classes) }}>{{ description }}</div>
|
|
{%- endif -%}
|
|
{%- if children -%}
|
|
{{ children }}
|
|
{%- endif -%}
|
|
{%- if value -%}
|
|
{{ value }}
|
|
{%- endif -%}
|
|
|
|
{% if accordion or accordion_item %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</details>
|