@openeuropa/bcl-theme-joinup 0.1.202408021145

package/templates/bcl-base-templates/listing-page.html.twig

@@ -0,0 +1,74 @@
+{#
+  Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - listing (object) (default: {})
+  - pagination (object) (default: {})
+  - sidebar (object) (default: '')
+#}
+
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+
+{% 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 _listing = listing|default({}) %}
+{% set _pagination = pagination|default({}) %}
+{% set _sidebar = sidebar|default({}) %}
+
+{% set _title_attributes = _title_attributes ?: create_attribute() %}
+
+{% block content_top %}
+{% if filter_button %}
+  {% include '@oe-bcl/bcl-button/button.html.twig' with filter_button only %}
+{% endif %}
+  <div class="row">
+    <div class="col-md-6 col-lg-8 align-self-center">
+      {% if _title is not empty %}
+        {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+          title: _title ~ ' (' ~ listing.items.length ~ ')',
+          title_tag: _title_tag,
+          title_link: _title_link,
+          attributes: _title_attributes.addClass(['mb-0', 'text-capitalize']),
+        } only %}
+      {% endif %}
+    </div>
+    {% if badges is not empty and badges is iterable %}
+      <div class="col-md-12 order-md-2 mt-3">
+      {% for badge in badges %}
+        {% include '@oe-bcl/bcl-badge/badge.html.twig' with badge|merge({
+          attributes: create_attribute().addClass(["mb-2", "me-2"])
+        }) only %}
+      {% endfor %}
+      </div>
+    {% endif %}
+    <div class="col-md-6 col-lg-4 mt-3 mt-md-0">
+      <div class="float-md-end d-md-flex align-items-center mb-4 mb-md-0">
+        {% include '@oe-bcl/bcl-select/select.html.twig' with sort_select|merge({
+          attributes: create_attribute().addClass(['ms-md-2']),
+        }) only %}
+      </div>
+    </div>
+  </div>
+  <hr class="d-none d-md-block mb-4-75"/>
+{% endblock %}
+
+{% block content %}
+  {% if _listing is not empty %}
+    {% include '@oe-bcl/bcl-listing/listing.html.twig' with  _listing only %}
+  {% endif %}
+{% endblock %}
+
+{% block content_bottom %}
+  {% if _pagination is not empty %}
+    <hr class="d-none d-md-block mt-4-5">
+    {% include '@oe-bcl/bcl-pagination/pagination.html.twig' with _pagination only %}
+  {% endif %}
+{% endblock %}
+
+{% block sidebar %}
+  {% include '@oe-bcl/bcl-base-templates/sidebar-search.html.twig' with _sidebar only %}
+{% endblock %}

package/templates/bcl-base-templates/sidebar-search.html.twig

@@ -0,0 +1,20 @@
+{% extends "@oe-bcl/bcl-offcanvas/offcanvas.html.twig" %}
+
+{% set responsiveness = 'lg' %}
+{% if extra_classes_header is empty %}
+  {% set extra_classes_header = 'd-lg-block' %}
+{% else %}
+  {% set extra_classes_header = extra_classes_header ~ ' d-lg-block' %}
+{% endif %}
+
+{% block body %}
+  {% if search_form.attributes is empty %}
+    {% set attributes = search_form.create_attribute() %}
+  {% endif %}
+
+  <div class="offcanvas-body p-lg-0">
+    {% include '@oe-bcl/bcl-form/form.html.twig' with search_form|merge({
+      attributes: search_form.attributes.addClass('w-100')
+    }) only %}
+  </div>
+{% endblock %}

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

@@ -0,0 +1,73 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes: (drupal attrs)
+  - quote (string) (default: '')
+  - attribution (string) (default: '')
+  - cite (string) (default: '')
+  - alignment (string) (default: 'left')
+    - options ['left', 'center', 'end']
+  - 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 _quote = quote|default('') %}
+{% set _attribution = attribution|default('') %}
+{% set _cite = cite|default('') %}
+{% set _alignment = alignment|default('left') %}
+
+{% set _classes = [
+  'text-' ~ _alignment,
+  "bg-lighter",
+  "p-2",
+  "px-2-5",
+  "border-4",
+  "border-secondary"
+] %}
+
+{% if _alignment == "center" %}
+  {% set _classes = _classes|merge(["border-top"]) %}
+{% elseif _alignment == "end" %}
+  {% set _classes = _classes|merge(["border-end"]) %}
+{% else %}
+  {% set _classes = _classes|merge(["border-start"]) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes) %}
+
+{%- 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 -%}
+
+<figure
+  {{ attributes }}
+>
+  <blockquote class="blockquote mb-2">
+    <p>{{- _quote -}}</p>
+  </blockquote>
+{% if _attribution is not empty %}
+  <figcaption class="blockquote-footer m-0">
+    {{- _attribution -}}
+  {% if _cite is not empty %}
+    <cite title="{{ _cite }}">{{- _cite -}}</cite>
+  {% endif %}
+  </figcaption>
+{% endif %}
+</figure>
+
+{% endapply %}

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

@@ -0,0 +1,62 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - links (link[]) (default: [])
+  - icon_path (string) (default: '')
+  - attributes (drupal attrs)
+#}
+
+{% set _links = links|default([]) %}
+{% set _icon_path = icon_path|default('') %}
+
+{% set _classes = 'breadcrumb' %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.setAttribute('aria-label', 'breadcrumb') %}
+
+{% if _links is not empty %}
+<nav
+  {{ attributes }}
+>
+  <ol
+    class="{{ _classes }}"
+  >
+    {% for _link in _links %}
+      {% set _segment_classes = 'breadcrumb-item d-none d-md-block' %}
+      {% if loop.revindex == 2 %}
+        {% set _segment_classes = 'breadcrumb-item' %}
+      {% endif %}
+      {% set _segment_attrs = '' %}
+      {% if loop.last %}
+        {% set _segment_classes = _segment_classes ~ ' active' %}
+        {% set _segment_attrs = 'aria-current="page"' %}
+      {% endif %}
+      <li
+        class="{{ _segment_classes }}"
+        {{ _segment_attrs|raw }}
+      >
+        {%- if _link.path -%}
+          {% if loop.revindex == 2 %}
+            {% set _link = _link|merge({
+              icon_position: 'before',
+                icon: {
+                  name: "arrow-left",
+                  path: _icon_path,
+                  attributes: create_attribute().addClass(['d-md-none ms-0 me-2']),
+                },
+             }) %}
+          {% endif %}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
+        {% else %}
+          {{- _link.label -}}
+        {%- endif -%}
+      </li>
+    {% endfor %}
+  </ol>
+</nav>
+{% endif %}
+
+{% endapply %}

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

@@ -0,0 +1,113 @@
+{% apply spaceless %}
+
+{# 
+  Parameters:
+  - label (string) (default: '')
+  - variant (string) (default: 'primary')
+  - size (string) (default: 'md')
+    - options ['sm', 'md', 'lg']
+  - type (string) (default: 'button')
+  - outline (boolean) (default: false)
+  - disabled (boolean) (default: false)
+  - text_nowrap (boolean) (default: false)
+  - assistive_text (string) (default: '')
+  - id (string) (default: '')
+  - icon (icon object) (default: {})
+  - icon_position (string) (default: after)
+    - options ['after', 'before']
+  - icon_spacing (string) (default: '')
+    - options ['sm', 'md', 'lg']
+  - spinner (spinner object) (default: {})
+  - show_spinner (boolean) (default: false)
+  - clean_class (boolean) (default: false)
+  - attributes (drupal attrs)
+#}
+
+{% set _label = label|default('') %}
+{% set _variant = variant|default('primary') %}
+{% set _size = size|default('md') %}
+{% set _type = type|default('button') %}
+{% set _outline = outline ?? false %}
+{% set _disabled = disabled ?? false %}
+{% set _text_nowrap = text_nowrap ?? false %}
+{% set _assistive_text = assistive_text|default('') %}
+{% set _id = id|default('') %}
+{% set _icon = icon|default({}) %}
+{% set _icon_position = icon_position|default('after') %}
+{% set _icon_spacing = icon_spacing|default('') %}
+{% set _spinner = spinner|default({}) %}
+{% set _show_spinner = show_spinner ?? false %}
+{% set _clean_class = clean_class ?? false %}
+
+{% set _classes = [] %}
+{% if _clean_class == false %}
+  {% set _classes = _classes|merge(['btn', 'btn-' ~ (_outline ? 'outline-' : '') ~ _variant|e('html_attr')]) %}
+  {% set _classes = _classes|merge(['btn-' ~ _size|e('html_attr')]) %}
+{% endif %}
+{% if _text_nowrap %}
+  {% set _classes = _classes|merge(['text-nowrap']) %}
+{% endif %}
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+{% if _disabled %}
+  {% set attributes = attributes.setAttribute('disabled', true).setAttribute('aria-disabled', 'true') %}
+{% endif %}
+{% if _id is not empty %}
+  {% set attributes = attributes.setAttribute('id', _id) %}
+{% endif %}
+{% if _classes is not empty %}
+  {% set attributes = attributes.addClass(_classes) %}
+{% endif %}
+{% if _icon_spacing is not empty %}
+  {% set _icon_spacing = _icon_spacing ~ '-' %}
+{% endif %}
+{% set attributes = attributes.setAttribute('type', _type) %}
+{% if _icon is not empty %}
+    {% set _icon = _icon|merge({
+        size: "fluid",
+      })
+    %}
+  {% if _label is not empty %}
+    {% if _icon.attributes is empty %}
+      {% set _icon = _icon|merge({
+          attributes: create_attribute()
+        })
+      %}
+    {% endif %}
+    {% if _icon_position == 'before' %}
+      {% set _icon = _icon|merge({
+          attributes: _icon.attributes.addClass('me-' ~ _icon_spacing ~ '2-5')
+        })
+      %}
+    {% else %}
+      {% set _icon = _icon|merge({
+          attributes: _icon.attributes.addClass('ms-' ~ _icon_spacing ~ '2-5')
+        })
+      %}
+    {% endif %}
+  {% endif %}
+  {%- set _icon_markup -%}
+    {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _icon only -%}
+  {%- endset -%}
+{% endif %}
+
+<button
+  {{ attributes }}
+>
+{%- if _show_spinner -%}
+  {% include '@oe-bcl/bcl-spinner/spinner.html.twig' with _spinner only %}
+{%- endif -%}
+{%- if _assistive_text is not empty -%}
+  <span class="visually-hidden">{{- _assistive_text -}}</span>
+{% endif %}
+{%- if _icon_position == 'before' and _icon_markup is defined -%}
+  {{ _icon_markup|raw }}
+{%- endif -%}
+  {{- _label -}}
+{%- if _icon_position == 'after' and _icon_markup is defined -%}
+  {{ _icon_markup|raw }}
+{%- endif -%}
+</button>
+
+{% endapply %}

package/templates/bcl-button-group/button-group.html.twig

@@ -0,0 +1,67 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - vertical (boolean) (default: false)
+  - size (string) (default: 'md')
+    - options ['sm', 'md', 'lg']
+  - aria_label (string) (default: '')
+  - toolbar (boolean) (default: false)
+  - toolbar_aria_label (string) (default: '')
+  - items (button[] or input[] - if input key is present) (default: [])
+  - attributes (drupal attrs)
+#}
+
+{% set _vertical = vertical ?? false %}
+{% set _size = size|default('md') %}
+{% set _aria_label = aria_label|default('') %}
+{% set _toolbar = toolbar ?? false %}
+{% set _toolbar_aria_label = toolbar_aria_label|default('') %}
+{% set _items = items|default([]) %}
+
+{% set _classes = ['btn-group'] %}
+
+{% if _vertical %}
+  {% set _classes = ['btn-group-vertical'] %}
+{% endif %}
+
+{% set _classes = _classes|merge(['btn-group-' ~ _size]) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% if _aria_label is not empty %}
+  {% set attributes = attributes.setAttribute('aria-label', _aria_label) %}
+{% endif %}
+
+{% set attributes = attributes.setAttribute('role', 'group').addClass(_classes) %}
+
+{% if _toolbar %}
+  <div class="btn-toolbar" role="toolbar"
+  {% if _toolbar_aria_label is not empty %}
+    aria-label="{{ _toolbar_aria_label }}"
+  {% endif %}
+  >
+{% endif %}
+{% if _items is not empty %}
+  {% for _items_group in _items %}
+    <div
+      {{ attributes }}
+    >
+    {% if _items_group is not empty and _items_group is iterable %}
+      {% for _item in _items_group %}
+        {% if _item.input is defined %}
+          {% include '@oe-bcl/bcl-form-input/form-input.html.twig' with _item only %}
+        {% else %}
+          {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
+        {% endif %}
+      {% endfor %}
+    {% endif %}
+    </div>
+  {% endfor %}
+{% endif %}
+{% if _toolbar %}
+  </div>
+{% endif %}
+
+{% endapply %}

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

@@ -0,0 +1,275 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h1')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - subtitle (object) (default: {})
+    format: {
+      content: '',
+      tag: '',
+      classes: ''
+    }
+  - text (object) (default: {})
+    format: {
+      content: '',
+      tag: '',
+      classes: ''
+    }
+  - content (string) (default: '')
+  - image (object) (default: {})
+    format: {
+      path (string),
+      alt (string),
+      position (string)
+    }
+  - date (date block object) (default: {})
+  - variant (string) (default: '')
+  - horizontal (boolean) (default: false)
+  - horizontal_grid (object) (default: {})
+    format: {
+      left_col_classes (default: 'bcl-card-start-col')
+      right_col_classes (default: 'col')
+      gutter (default: '') - options: ['small', 'large']
+    }
+  - border_variant (string) (default: '')
+  - text_color (string) (default: '')
+    options: ['dark', 'white']
+  - card_header (string) (default: '')
+  - card_footer (string) (default: '')
+  - extra_classes_body (string) (default: '')
+  - extra_classes_header (string) (default: '')
+  - extra_classes_footer (string) (default: '')
+  - badges (badge[]) (default: [])
+  - links (array of link object) (default: [])
+  - attributes (drupal attrs)
+
+  Blocks
+    - card_date
+    - card_badges
+    - card_links
+#}
+
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h1') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
+{% set _subtitle = subtitle|default({}) %}
+{% set _text = text|default({}) %}
+{% set _content = content|default('') %}
+{% set _image = image|default({}) %}
+{% set _date = date|default({}) %}
+{% set _variant = variant|default('') %}
+{% set _horizontal = horizontal ?? false %}
+{% set _horizontal_grid = horizontal_grid|default({
+  left_col_classes: 'bcl-card-start-col',
+  right_col_classes: 'col',
+  left_col_size: '',
+}) %}
+{% set _border_variant = border_variant|default('') %}
+{% set _text_color = text_color|default('') %}
+{% set _card_header = card_header|default('') %}
+{% set _card_footer = card_footer|default('') %}
+{% set _extra_classes_body = extra_classes_body|default('') %}
+{% set _extra_classes_header = extra_classes_header|default('') %}
+{% set _extra_classes_footer = extra_classes_footer|default('') %}
+{% set _badges = badges|default([]) %}
+{% set _links = links|default([]) %}
+
+{% set _classes = ['card'] %}
+{% if _text_color is not empty %}
+  {% set _classes = _classes|merge(['text-' ~ _text_color]) %}
+{% endif %}
+{% if _variant is not empty %}
+  {% set _classes = _classes|merge(['text-bg-' ~ _variant]) %}
+{% endif %}
+{% if _border_variant is not empty %}
+  {% set _classes = _classes|merge(['border-' ~ _border_variant]) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set _body_classes = 'card-body' %}
+{% if _extra_classes_body is not empty %}
+  {% set _body_classes = _body_classes ~ ' ' ~ _extra_classes_body %}
+{% endif %}
+
+{% set _header_classes = 'card-header' %}
+{% if _extra_classes_header is not empty %}
+  {% set _header_classes = _header_classes ~ ' ' ~ _extra_classes_header %}
+{% endif %}
+
+{% set _footer_classes = 'card-footer' %}
+{% if _extra_classes_footer is not empty %}
+  {% set _footer_classes = _footer_classes ~ ' ' ~ _extra_classes_footer %}
+{% endif %}
+
+{% set _row_classes = 'row' %}
+{% if _horizontal_grid.gutter is not empty %}
+  {% set _row_classes = _row_classes ~ ' g-' ~ _horizontal_grid.gutter %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes) %}
+
+<article
+  {{ attributes }}
+>
+{% if _card_header is not empty %}
+  <div class='{{ _header_classes }}'>
+    {{- _card_header -}}
+  </div>
+{% endif %}
+{% if _horizontal %}
+  <div class='{{ _row_classes }}'>
+{% endif %}
+{% if _image is not empty and _image.position != 'bottom' %}
+  {% set _img_class = 'card-img-top' %}
+  {% if _image.position == 'background' %}
+    {% set _img_class = 'card-img' %}
+  {% endif %}
+  {% if _image.rounded is not empty %}
+    {% set _img_class = _img_class ~ ' rounded-' ~ _image.rounded %}
+  {% elseif _horizontal %}
+    {% if attributes.hasClass('border-0') %}
+      {% set _img_class = _img_class ~ ' rounded-1' %}
+    {% else %}
+      {% set _img_class = _img_class ~ ' rounded-0 rounded-start' %}
+    {% endif %}
+  {% elseif _card_header is not empty %}
+    {% set _img_class = _img_class ~ ' rounded-0' %}
+  {% endif %}
+  {% if _image.classes is not empty %}
+    {% set _img_class = _img_class ~ " " ~ _image.classes %}
+  {% endif %}
+{% endif %}
+{% if _horizontal and (_image is not empty or _date is not empty)  %}
+  <div class='{{ _horizontal_grid.left_col_classes  }}'>
+{% endif %}
+  {% if _date is not empty %}
+    {% block card_date %}
+      {% include '@oe-bcl/bcl-date-block/date-block.html.twig' with _date only %}
+    {% endblock %}
+  {% elseif _image is not empty and _image.position != "bottom" %}
+    <img
+      src="{{ _image.path }}"
+      alt="{{ _image.alt }}"
+      class="{{ _img_class }}"
+    >
+  {% endif %}
+{% if _horizontal and (_image is not empty or _date is not empty) %}
+  </div>
+{% endif %}
+{% if _image.position == 'background' %}
+  <div class="card-img-overlay">
+{% endif %}
+{% if _horizontal %}
+<div class='{{ _horizontal_grid.right_col_classes }}'>
+{% endif %}
+  <div class='{{ _body_classes }}'>
+  {% if _title is not empty %}
+    {% if _title_attributes.class is empty %}
+      {% set _title_attributes = _title_attributes.addClass('fs-4') %}
+    {% endif %}
+    {% set _title_attributes = _title_attributes.addClass('card-title') %}
+    {% 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 _subtitle is not empty -%}
+    {% set _subtitle_tag = _subtitle.tag ?? 'h6' %}
+    <{{ _subtitle_tag }}
+      class='card-subtitle{{ _subtitle.classes ? ' ' ~ _subtitle.classes }}'
+    >
+      {{- _subtitle.content -}}
+    </{{ _subtitle_tag }}>
+  {%- endif -%}
+  {%- if _text is not empty -%}
+    {% set _text_tag = _text.tag ?? 'p' %}
+    <{{ _text_tag }}
+      class='card-text{{ _text.classes ? ' ' ~ _text.classes }}'
+    >
+      {{- _text.content -}}
+    </{{ _text_tag }}>
+  {%- endif -%}
+  {%- if _content is not empty -%}
+    {{- _content -}}
+  {%- endif -%}
+  {% block card_badges %}
+    {%- if _badges is not empty and _badges is iterable -%}
+      <div class="mt-2-5">
+      {% for _badge in _badges %}
+        {% if _badge.attributes is empty %}
+          {% set _badge = _badge|merge({
+            attributes: create_attribute()
+          }) %}
+        {% endif %}
+        {% set _badge = _badge|merge({
+            attributes: _badge.attributes.addClass('mb-2')
+          })
+        %}
+        {% if not loop.last %}
+          {% set _badge = _badge|merge({
+              attributes: _badge.attributes.addClass('me-2')
+            })
+          %}
+        {% endif %}
+        {% include '@oe-bcl/bcl-badge/badge.html.twig' with _badge only %}
+        
+      {% endfor %}
+      </div>
+    {%- endif -%}
+  {% endblock %}
+  {% block card_links %}
+    {%- if _links is not empty and _links is iterable -%}
+      <div class="mt-2-5 mb-2">
+      {% for _link in _links %}
+        <div class="mb-3 mb-md-0 d-block d-md-inline-block me-md-4-5">
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
+        </div>
+      {% endfor %}
+      </div>
+    {%- endif -%}
+  {% endblock %}
+  </div>
+{% if _horizontal %}
+</div>
+{% endif %}
+{% if _image is not empty %}
+  {% if _image.position == 'background' %}
+  </div>
+  {% endif %}
+  {% set _img_class = "card-img-bottom" %}
+  {% if _image.classes is not empty %}
+    {% set _img_class = _img_class ~ " " ~ _image.classes %}
+  {% endif %}
+  {% if _image.position == 'bottom' %}
+    {% if _horizontal %}
+    <div class="col-4">
+    {% endif %}
+    <img
+      src="{{ _image.path }}"
+      alt="{{ _image.alt }}"
+      class="{{ _img_class }}"
+    >
+    {% if _horizontal %}
+    </div>
+    {% endif %}
+  {% endif %}
+{% endif %}
+{% if _horizontal %}
+  </div>
+{% endif %}
+{% if _card_footer is not empty %}
+  <div class="{{ _footer_classes }}">
+    {{- _card_footer -}}
+  </div>
+{% endif %}
+</article>
+
+{% endapply %}