@openeuropa/bcl-theme-joinup 0.1.202408021145

package/templates/bcl-file/file.html.twig

@@ -0,0 +1,164 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - item_title (string) (default: '')
+  - icon (icon Object) (default: {})
+  - icon_inline (boolean) (deafult: true)
+  - text (string) (default: '')
+  - content (string) (default: '')
+  - image (object) (default: {}) - format: {
+    path: '',
+    alt: '',
+  }
+  - badges (badge[]) (default: [])
+  - meta (string) (default: '')
+  - language (string) (default: '')
+  - variant (string) (default: 'default')
+    - options: ['default', 'card']
+  - download (link Object) (default: {})
+  - translation (file translation Object) (default: {}) format: {
+    id: '',
+    label: {}, - link Object
+    items: [
+      {
+        extension: '',
+        language: '',
+        size: '',
+        download: {}, - link Object
+      },
+  }
+  - icon_path (string) (default: '')
+  - attributes (drupal attrs)
+#}
+
+{# Internal properties #}
+
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
+{% set _item_title = item_title|default('') %}
+{% set _icon = icon|default({}) %}
+{% set _icon_inline = icon_inline ?? true %}
+{% set _text = text|default('') %}
+{% set _content = content|default('') %}
+{% set _image = image|default({}) %}
+{% set _badges = badges|default([]) %}
+{% set _meta = meta|default('') %}
+{% set _language = language|default('') %}
+{% set _variant = variant|default('default') %}
+{% set _download = download|default({}) %}
+{% set _translation = translation|default({}) %}
+{% set _icon_path = icon_path|default('') %}
+
+{% set _classes = ['bcl-file'] %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes) %}
+
+{% if _icon is not empty %}
+  {% set _container_classes = _container_classes ~ ' ms-2-5' %}
+  {% set _icon = _icon|merge({
+    attributes: create_attribute().addClass(['mt-1', 'icon--file'])
+  }) %}
+{% endif %}
+
+{% if _title is not empty %}
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes,
+  } only %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['border', 'rounded']) %}
+
+{% set _container_classes = 'd-md-flex flex-grow-1' %}
+
+<div
+  {{ attributes }}
+>
+  {% if _variant == 'card' %}
+    <div class="border-bottom px-3-5 py-3 d-md-flex">
+      <div class="pe-2 pb-2">
+      {% if _icon is not empty %}
+        {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _icon|merge({
+          path: _icon_path,
+        }) only -%}
+      {% endif %}
+      </div>
+      <div>
+        {% if _item_title is not empty %}
+          <p class="fw-medium mb-2 fs-5">{{ _item_title }}</p>
+        {% endif %}
+        {% if _text is not empty %}
+          <p class="mb-3">{{ _text }}</p>
+        {% endif %}
+        {% if _content is not empty %}
+          {{ _content }}
+        {% endif %}
+      </div>
+    </div>
+  {% endif %}
+  <div class="px-3-5 py-3">
+    <div class="d-md-flex">
+      {% if _icon is not empty and _variant == 'default' %}
+        <div class="pe-2 pb-2">
+        {% if _icon is not empty %}
+          {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _icon|merge({
+            path: _icon_path,
+          }) only -%}
+        {% endif %}
+        </div>
+      {% endif %}
+      <div class="{{ _container_classes }}">
+        <div class="flex-grow-1">
+          {% if _item_title is not empty and _variant == 'default' %}
+            <p class="fw-medium m-0 fs-5">{{ _item_title }}</p>
+          {% endif %}
+          {% if _language is not empty or _meta is not empty %}
+          <small class="fw-medium m-0">
+            {%- if _language is not empty -%}
+              {{- _language -}}
+            {%- endif -%}
+            {%- if _meta is not empty -%}
+              <span class="fw-normal">
+                {{- ' ' ~ _meta -}}
+              </span>
+            {%- endif -%}
+          </small>
+          {% endif %}
+        </div>
+        {% set _download = _download|merge({
+          icon_position: "after",
+          icon: {
+            name: "download",
+            size: "fluid",
+            path: _icon_path,
+          },
+          attributes: create_attribute()
+                      .setAttribute('download', true)
+                      .setAttribute('target', '_blank')
+                      .addClass(['standalone', 'align-self-center', 'd-inline-block', 'mt-1', 'mt-md-0', 'flex-shrink-0'])
+        }) %}
+        {% include '@oe-bcl/bcl-link/link.html.twig' with _download only %}
+      </div>
+    </div>
+  </div>
+  {% if _translation is not empty %}
+    {% include '@oe-bcl/bcl-file/file-translations.html.twig' with _translation|merge({
+      icon_path: _icon_path
+    }) only %}
+  {% endif %}
+</div>
+
+{% endapply %}

package/templates/bcl-footer/footer.html.twig

@@ -0,0 +1,90 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - variant (string) (default: 'neutral')
+    - options: ['eu', 'ec', 'neutral']
+  - rows (object[]) (default: []) - format: 
+  [
+    {
+      extra_classes: ""
+      cols: [
+        {
+          classes: "",
+          items: [
+            {
+              type: "links" or "content" or "image",
+              -- for type "links" --
+                links: (link[]),
+
+              -- for type "image" --
+                path: "",
+                alt: "",
+                classes: ""
+
+              -- for type "content" --
+                content: "",
+            },
+          ]
+        }
+      ]
+    }
+  ]
+  - attributes (drupal attrs)
+#}
+
+{% set _variant = variant|default('neutral') %}
+{% set _rows = rows|default([]) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bcl-footer', 'bcl-footer--' ~ _variant]) %}
+
+<footer
+  {{ attributes }}
+>
+  <div class="container">
+    {% if rows is not empty and rows is iterable %}
+      {% for row in _rows %}
+        <div class="{{ row.extra_classes ? row.extra_classes ~ ' row' : 'row' }}">
+          {% for col in row.cols %}
+            <div class="{{ col.classes }}">
+              {% if col.items is not empty and col.items is iterable %}
+                {% for item in col.items %}
+                  {% if item.type == 'image' %}
+                    <img
+                      {% if item.path is not empty %}
+                        src="{{ item.path }}"
+                      {% endif %}
+                      {% if item.alt is not empty %}
+                        alt="{{ item.alt }}"
+                      {% endif %}
+                      {% if item.classes is not empty %}
+                        class="{{ item.classes }}"
+                      {% endif %}
+                    >
+                  {% endif %}
+                  {% if item.type == 'content' %}
+                    {{ item.content }}
+                  {% endif %}
+                  {% if item.type == 'links' %}
+                    {% for link in item.links %}
+                      <div class="mb-1">
+                      {% include '@oe-bcl/bcl-link/link.html.twig' with link|merge({
+                        attributes: create_attribute().addClass(['standalone'])
+                      }) only %}
+                      </div>
+                    {% endfor %}
+                  {% endif %}
+                {% endfor %}
+              {% endif %}
+            </div>
+          {% endfor %}
+        </div>
+      {% endfor %}
+    {% endif %}
+  </div>
+</footer>
+
+{% endapply %}

package/templates/bcl-form/form.html.twig

@@ -0,0 +1,150 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - helper_text (string) (default: '')
+  - antispam (string) (default: '')
+  - items (object[ object[] ]) (default: []) format: [
+   [
+    {
+      ...object of type form-Input
+      wrapper_classes: (string) (default: '') OR
+      type: fieldset (must be the first element of the array, it will group all
+      the inputs in the array in a fieldset element)
+      classes: (string) (default: ''),
+      legend: (string) (default: ''),
+      fieldset_classes: (string) (default: ''),
+      legend_classes: (string) (default: ''),
+   },
+  ],
+  - submit (object) (default: {}) button or button[]
+  - attributes (drupal attrs)
+#}
+
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
+{% set _helper_text = helper_text|default('') %}
+{% set _antispam = antispam|default('') %}
+{% set _items = items|default([]) %}
+{% set _submit = submit|default({}) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% if _title is not empty %}
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes,
+  } only %}
+{% endif %}
+
+{% if _helper_text is not empty %}
+  <p>{{ _helper_text }}</p>
+{% endif %}
+
+<form
+  {{ attributes }}
+>
+{% if _items is not empty and _items is iterable %}
+{% for _item_group in _items %}
+  {% set _group_classes = '' %}
+  {% set _legend_classes = '' %}
+  {% set _fieldset_classes = '' %}
+  {% if _item_group is not empty and _item_group is iterable %}
+  {% if _item_group[0].classes is defined and _item_group[0].classes is not empty %}
+    {% set _group_classes = _item_group[0].classes %}
+  {% endif %}
+  {# fieldset #}
+  {% if _item_group[0].type == 'fieldset' %}
+  {% if _item_group[0].fieldset_classes is defined and _item_group[0].fieldset_classes is not empty %}
+    {% set _fieldset_classes = _item_group[0].fieldset_classes %}
+  {% endif %}
+  <fieldset
+  {% if _fieldset_classes is not empty %}
+    class="{{ _fieldset_classes }}"
+  {% endif %}
+  {% if _item_group[0].disabled %}
+    disabled
+  {% endif %}
+  >
+  {% if _item_group[0].legend is defined and _item_group[0].legend is not empty %}
+    {% if _item_group[0].legend_classes is defined and _item_group[0].legend_classes is not empty %}
+      {% set _legend_classes = _item_group[0].legend_classes %}
+    {% endif %}
+    <legend
+    {% if _legend_classes is not empty %}
+      class="{{ _legend_classes }}"
+    {% endif %}
+    >
+      {{- _item_group[0].legend -}}
+    </legend>
+  {% endif %}
+  {% endif %}
+  {% if _group_classes is not empty %}
+    <div class="{{ _group_classes }}">
+  {% endif %}
+  {% for _item in _item_group %}
+    {% if _item.type != 'fieldset' %}
+      {# grouping input fields wrapper #}
+      {% if _item.wrapper_classes is defined and _item.wrapper_classes is not empty %}
+      <div class="{{ _item.wrapper_classes }}">
+      {% endif %}
+      {# textarea #}
+      {% if _item.type == 'textarea' %}
+        {% include '@oe-bcl/bcl-textarea/textarea.html.twig' with _item only %}
+      {# select #}
+      {% elseif _item.type == 'select' %}
+        {% include '@oe-bcl/bcl-select/select.html.twig' with _item only %}
+      {% else %}
+      {# any other input type #}
+        {% include '@oe-bcl/bcl-form-input/form-input.html.twig' with _item only %}
+      {% endif %}
+      {% if _item.wrapper_classes is defined and _item.wrapper_classes is not empty %}
+      </div>
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+  {% if _group_classes is not empty %}
+    </div>
+  {% endif %}
+  {% if _item_group[0].type == 'fieldset' %}
+  </fieldset>
+  {% endif %}
+  {% endif %}
+{% endfor %}
+{% endif %}
+{% if _antispam is not empty %}
+  <div class="mt-4 mb-2">
+    <div class="text-bg-light">
+      {{ _antispam }}
+    </div>
+  </div>
+{% endif %}
+{# submit #}
+{% if _submit is not empty %}
+  {% if _submit.items is empty %}
+    {% set _submit = _submit|merge({
+      items: [_submit]
+    }) %}
+  {% endif %}
+  {% if _submit.wrapper is defined and _submit.wrapper is not empty %}
+  <div class="{{ _submit.wrapper }}">
+  {% endif %}
+  {% for _item in _submit.items %}
+    {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
+  {% endfor %}
+  {% if _submit.wrapper is defined and _submit.wrapper is not empty %}
+  </div>
+  {% endif %}
+{% endif %}
+</form>
+
+{% endapply %}

package/templates/bcl-form-input/form-input.html.twig

@@ -0,0 +1,183 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+  - id (string) (default: '')
+  - input_type (string) (default: 'text')
+  - label (string) (default: '')
+  - required (boolean) (default: false)
+  - checked (boolean) (default: false)
+  - hidden_label (boolean) (default: false)
+  - disabled (boolean) (default: false)
+  - readonly (boolean) (default: false)
+  - invalid (boolean) (default: false)
+  - valid (boolean) (default: false)
+  - invalid_feedback (string) (default: '')
+  - valid_feedback (string) (default: '')
+  - floating (boolean) (default: false)
+  - helper_text (string) (default: '')
+  - helper_text_id (string) (default: '')
+  - placeholder (string) (default: '')
+  - horizontal (boolean) (default: false)
+  - horizontal_class (string) (default: col-sm-10)
+  - horizontal_label_class (string) (default: col-sm-2)
+  - switch (boolean) (default: false)
+  - toggle (boolean) (default: false)
+  - toggle_variant (string) (default: 'primary')
+  - remove_wrapper (boolean) (default: false)
+  - attributes (drupal attrs)
+#}
+
+{% set _id = id|default('') %}
+{% set _input_type = input_type|default('text') %}
+{% set _label = label|default('') %}
+{% set _required = required ?? false %}
+{% set _checked = checked ?? false %}
+{% set _hidden_label = hidden_label ?? false %}
+{% set _disabled = disabled ?? false %}
+{% set _readonly = readonly ?? false %}
+{% set _invalid = invalid ?? false %}
+{% set _valid = valid ?? false %}
+{% set _invalid_feedback = invalid_feedback|default('') %}
+{% set _valid_feedback = valid_feedback|default('') %}
+{% set _floating = floating ?? false %}
+{% set _helper_text = helper_text|default('') %}
+{% set _helper_text_id = helper_text_id|default('') %}
+{% set _placeholder = placeholder|default('') %}
+{% set _horizontal = horizontal ?? false %}
+{% set _horizontal_class = horizontal_class|default('col-sm-10') %}
+{% set _horizontal_label_class = horizontal_label_class|default('col-sm-2') %}
+{% set _switch = switch ?? false %}
+{% set _toggle = toggle ?? false %}
+{% set _toggle_variant = toggle_variant|default('primary') %}
+{% set _remove_wrapper = remove_wrapper ?? false %}
+
+{% set _label_block = false %}
+{% set _label_class = 'form-label' %}
+{% set _classes = ['form-control'] %}
+
+{% if input_type == 'range' %}
+  {% set _classes = ['form-range'] %}
+{% endif %}
+{% if _input_type == 'checkbox' or _input_type == 'radio' %}
+  {% set _classes = ['form-check-input'] %}
+  {% set _label_class = 'form-check-label' %}
+{% endif %}
+{% if _invalid is not empty %}
+  {% set _classes = _classes|merge(['is-invalid']) %}
+{% endif %}
+{% if _valid is not empty %}
+  {% set _classes = _classes|merge(['is-valid']) %}
+{% endif %}
+{% if _horizontal %}
+  {% set _label_class = 'col-form-label ' ~ _horizontal_label_class %}
+{% endif %}
+{% if _hidden_label %}
+  {% set _label_class = _label_class ~ ' visually-hidden' %}
+{% endif %}
+{% if _toggle %}
+  {% set _label_class = _label_class ~ ' btn btn-' ~ _toggle_variant %}
+  {% set _classes = _classes|merge(['btn-check']) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes).setAttribute('type', _input_type) %}
+
+{% if _id %}
+  {% set attributes = attributes.setAttribute('id', _id) %}
+{% endif %}
+
+{% if _required %}
+  {% set attributes = attributes.setAttribute('required', true) %}
+{% endif %}
+
+{% if _disabled %}
+  {% set attributes = attributes.setAttribute('disabled', true) %}
+{% endif %}
+
+{% if _readonly %}
+  {% set attributes = attributes.setAttribute('readonly', true) %}
+{% endif %}
+
+{% if _checked %}
+  {% set attributes = attributes.setAttribute('checked', true) %}
+{% endif %}
+
+{% if _placeholder is not empty %}
+  {% set attributes = attributes.setAttribute('placeholder', _placeholder) %}
+{% endif %}
+
+{% if _helper_text_id is not empty %}
+  {% set attributes = attributes.setAttribute('aria-describedby', _helper_text_id) %}
+{% endif %}
+
+{% if _label is not empty %}
+  {% set _label_block %}
+    <label
+    {% if _id %}
+      for="{{ _id }}"
+    {% endif %}
+      class="{{ _label_class }}"
+    >
+      {{- label -}}
+    </label>
+  {% endset %}
+{% endif %}
+
+{% if (_floating or _horizontal or _input_type == 'checkbox' or _input_type == 'radio') and
+  not _toggle and
+  not _remove_wrapper
+%}
+  {% set _wrapper_class = _floating ? 'form-floating' : '' %}
+{% if (_input_type == 'checkbox' or _input_type == 'radio') %}
+  {% set _wrapper_class = 'form-check' %}
+  {% if _switch %}
+    {% set _wrapper_class = _wrapper_class ~ ' form-switch' %}
+  {% endif %}
+{% endif %}
+{% if _wrapper_class is not empty %}
+<div class="{{ _wrapper_class }}">
+{% endif %}
+{% endif %}
+{% if _label_block and _floating == false and _input_type != 'checkbox' and _input_type != 'radio' %}
+  {{ _label_block|raw }}
+{% endif %}
+{% if _horizontal and floating == false %}
+  <div class="{{ _horizontal_class }}">
+{% endif %}
+    <input
+      {{ attributes }}
+    >
+{% if _horizontal and floating == false %}
+  </div>
+{% endif %}
+{% if _label_block and (_floating or _input_type == 'checkbox' or _input_type == 'radio')  %}
+  {{ _label_block|raw }}
+{% endif %}
+{% if _invalid_feedback is not empty %}
+  <div class="invalid-feedback">
+    {{- _invalid_feedback -}}
+  </div>
+{% endif %}
+{% if _valid_feedback is not empty %}
+  <div class="valid-feedback">
+    {{- _valid_feedback -}}
+  </div>
+{% endif %}
+{% if _helper_text is not empty %}
+  <div
+    class="form-text"
+  {%- if _helper_text_id is not empty -%}
+    id="{{ _helper_text_id }}"
+  {%- endif -%}>
+    {{- _helper_text -}}
+  </div>
+{% endif %}
+{% if _wrapper_class is not empty %}
+</div>
+{% endif %}
+
+{% endapply %}

package/templates/bcl-gallery/gallery-item.html.twig

@@ -0,0 +1,64 @@
+{% apply spaceless %}
+
+{#
+Parameters:
+  - item (object) (default: {})
+    format: {
+      thumbnail (string) img path
+      media: (string) <img> tag
+      caption (string)
+      caption_title (string)
+      is_playable (boolean)
+    }
+  - carousel_id (string) (default: '')
+  - modal_id (string) (default: '')
+  - carousel_anchor (string) (default: '')
+  - icon_path (string) (default: '')
+  - attributes (drupal attrs)
+#}
+
+{% set _item = item|default({}) %}
+{% set _carousel_id = carousel_id|default('') %}
+{% set _modal_id = modal_id|default('') %}
+{% set _icon_path = icon_path|default('') %}
+{% set _carousel_anchor = carousel_anchor|default('') %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bcl-gallery__item', 'd-block', 'w-100', 'img-fluid'])
+                              .setAttribute('data-bs-target', '#' ~ _carousel_id)
+                              .setAttribute('data-bs-slide-to', _carousel_anchor)
+%}
+
+<a 
+  {{ attributes }}
+>
+  <div class="bcl-gallery__item-overlay" data-bs-target="#{{ _modal_id }}" data-bs-toggle="modal">
+  {% if _item.is_playable %}
+    <span class="bcl-gallery__item-play-icon">
+    {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+      name: 'play-fill',
+      size: 's',
+      path: _icon_path,
+    } only %}
+    </span>
+  {% endif %}
+  {% if _item.caption is not empty or item.caption_title is not empty %}
+    <div class="bcl-gallery__item-caption">
+    {% if _item.caption_title is not empty %}
+      <div class="fs-5">{{ _item.caption_title }}</div>
+    {% endif %}
+    {% if _item.caption is not empty %}
+      <div class="bcl-gallery__item-description">
+        {{ _item.caption }}
+      </div>
+    {% endif %}
+    </div>
+  {% endif %}
+  </div>
+  {{ _item.thumbnail }}
+</a>
+
+{% endapply %}