details.html.twig 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. {#
  2. /**
  3. * @file
  4. * Theme override for a details element.
  5. *
  6. * Available variables
  7. * - attributes: A list of HTML attributes for the details element.
  8. * - errors: (optional) Any errors for this details element, may not be set.
  9. * - title: (optional) The title of the element, may not be set.
  10. * - description: (optional) The description of the element, may not be set.
  11. * - children: (optional) The children of the element, may not be set.
  12. * - value: (optional) The value of the element, may not be set.
  13. * - accordion: whether the details element should look as an accordion.
  14. * - accordion_item: whether the details element is an item of an accordion
  15. * list.
  16. * - disabled: whether the details is disabled.
  17. *
  18. * @see template_preprocess_details()
  19. * @see claro_preprocess_details()
  20. */
  21. #}
  22. {#
  23. Prefix 'details' class to avoid collision with Modernizr.
  24. @todo Remove prefix after https://www.drupal.org/node/2981732 has been solved.
  25. #}
  26. {%
  27. set classes = [
  28. 'claro-details',
  29. accordion ? 'claro-details--accordion',
  30. accordion_item ? 'claro-details--accordion-item',
  31. ]
  32. %}
  33. {%
  34. set content_wrapper_classes = [
  35. 'claro-details__wrapper',
  36. 'details-wrapper',
  37. accordion ? 'claro-details__wrapper--accordion',
  38. accordion_item ? 'claro-details__wrapper--accordion-item',
  39. ]
  40. %}
  41. {%
  42. set inner_wrapper_classes = [
  43. 'claro-details__content',
  44. accordion ? 'claro-details__content--accordion',
  45. accordion_item ? 'claro-details__content--accordion-item',
  46. ]
  47. %}
  48. <details{{ attributes.addClass(classes) }}>
  49. {%- if title -%}
  50. {%
  51. set summary_classes = [
  52. 'claro-details__summary',
  53. required ? 'js-form-required',
  54. required ? 'form-required',
  55. accordion ? 'claro-details__summary--accordion',
  56. accordion_item ? 'claro-details__summary--accordion-item',
  57. ]
  58. %}
  59. <summary{{ summary_attributes.addClass(summary_classes) }}>
  60. {{- title -}}
  61. {%- if required -%}
  62. <span class="required-mark"></span>
  63. {%- endif -%}
  64. </summary>
  65. {%- endif -%}
  66. <div{{ content_attributes.addClass(content_wrapper_classes) }}>
  67. {% if accordion or accordion_item %}
  68. <div{{ create_attribute({class: inner_wrapper_classes}) }}>
  69. {% endif %}
  70. {% if errors %}
  71. <div class="form-item form-item--error-message">
  72. {{ errors }}
  73. </div>
  74. {% endif %}
  75. {%- if description -%}
  76. <div class="claro-details__description{{ disabled ? ' is-disabled' }}">{{ description }}</div>
  77. {%- endif -%}
  78. {%- if children -%}
  79. {{ children }}
  80. {%- endif -%}
  81. {%- if value -%}
  82. {{ value }}
  83. {%- endif -%}
  84. {% if accordion or accordion_item %}
  85. </div>
  86. {% endif %}
  87. </div>
  88. </details>