@openeuropa/bcl-theme-joinup 0.1.202408021145

package/templates/bcl-language-list/language-list-grid.html.twig

@@ -0,0 +1,68 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+  - items (array) (default: []) format: [
+    {
+      lang (string)
+      label (string)
+      path (string)
+      active (boolean)
+    }
+  ]
+  - category (string) (default: '')
+  - icon_path (string) (default: '')
+#}
+
+{% set _items = items|default([]) %}
+{% set _category = category|default('') %}
+{% set _icon_path = icon_path|default('') %}
+
+{% set _columns = [] %}
+{% set _columns = _columns|merge([_items|slice(0, (items|length / 2)|round(0, 'ceil'))]) %}
+{% set _columns = _columns|merge([_items|slice((items|length / 2)|round(0, 'ceil'), items|length)]) %}
+
+<div class="pb-2">
+  {% if _category is not empty %}
+  <h5 class="mb-4">{{ _category }}</h5>
+  {% endif %}
+  {% if _columns is not empty and _columns is iterable %}
+  <div class="row">
+    {% for _column in _columns %}
+      <div class="col-12 col-md">
+      {% for _item in _column %}
+        {% if _item.attributes is empty %}
+          {% set _item = _item|merge({
+            attributes: create_attribute()
+          }) %}
+        {% endif %}
+        {% set _item = _item|merge({
+          attributes: _item.attributes.addClass(['w-100', 'mb-2-5', 'btn', 'w-100'])
+        }) %}
+        {% if _item.active %}
+          {% set _item = _item|merge({
+            icon: {
+              name: "check2",
+              path: _icon_path,
+            },
+            attributes: _item.attributes.addClass(['selected', 'justify-content-between'])
+          }) %}
+        {% else %}
+          {% set _item = _item|merge({
+            attributes: _item.attributes.addClass('justify-content-start')
+          }) %}
+        {% endif %}
+        {% if _item.lang is not empty %}
+          {% set _item = _item|merge({
+            attributes: _item.attributes.setAttribute('lang', _item.lang).setAttribute('hreflang', _item.lang)
+          }) %}
+        {% endif %}
+        {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
+      {% endfor %}
+      </div>
+    {% endfor %}
+  </div>
+  {% endif %}
+</div>
+
+{% endapply %}

package/templates/bcl-language-list/language-list-modal.html.twig

@@ -0,0 +1,58 @@
+{% extends "@oe-bcl/bcl-modal/modal.html.twig" %}
+
+{% if _title is not empty %}
+  {% set header = true %}
+{% endif %}
+
+{% if _variant == 'neutral' %}
+  {% set size = "xl" %}
+  {% set fullscreen_responsive = "md" %}
+{% else %}
+  {% set size = "fullscreen" %}
+{% endif %}
+
+{% set overlay = false %}
+{% set inside_container = true %}
+
+{% set attributes = attributes.addClass(['bcl-language-list-modal', 'bcl-language-list-modal--' ~ _variant]) %}
+
+{% block header %}
+  {% if size == 'fullscreen' %}
+  <div class="container">
+    {% if variant == 'eu' or variant == 'ec' %}
+    <div class="border-bottom mx-n3 px-3 px-md-0 pt-md-4-5">
+      <div class="py-3-5 px-3 px-sm-0 px-md-3">
+    {% endif %}
+    <div class="d-flex justify-content-between align-items-center">
+  {% endif %}
+  <div class="d-flex align-items-center">
+    {% set _title_classes = 'mb-0' %}
+    {% if _icon_path is not empty %}
+      {% set _title_classes = _title_classes ~ ' ms-2' %}
+      {% include '@oe-bcl/bcl-icon/icon.html.twig' with {
+        name: 'globe2',
+        path: _icon_path
+      } only %}
+    {% endif %}
+    <h5 class="{{ _title_classes }}">{{ _title }}</h5>
+  </div>
+  <button type="button" class="btn-close" data-bs-dismiss="modal"
+    {% if _close_label is not empty %}
+      aria-label="{{ _close_label }}"
+    {% endif %}
+  ></button>
+  {% if size == 'fullscreen' %}
+    </div>
+    {% if variant == 'eu' or variant == 'ec' %}
+      </div>
+    </div>
+    {% endif %}
+  </div>
+  {% endif %}
+{% endblock %}
+
+{% block body %}
+  {% include '@oe-bcl/bcl-language-list/language-list.html.twig' with {
+    attributes: create_attribute()
+  } %}
+{% endblock %}

package/templates/bcl-language-list/language-list.html.twig

@@ -0,0 +1,111 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - overlay (boolean) (default: false)
+  - inside_container (boolean) (default: false)
+  - variant (string) (default: 'neutral')
+  - title (string) (default: '')
+  - logo (object) (default: {}) format: {
+      path (string),
+      alt (string),
+      class (string),
+    }
+  - icon_path (string) (default: '')
+  - eu_category (string) (default: '');
+  - non_eu_category (string) (default: '')
+  - items (array) (default: [])
+    - "lang" (string) (default: '')
+    - "label" (string) (default: '')
+    - "path" (string) (default: '')
+    - "active (boolean) (default: false)
+  - non_eu_items (array) (default: [])
+    - "lang" (string) (default: '')
+    - "label" (string) (default: '')
+    - "path" (string) (default: '')
+    - "active (boolean) (default: false)
+  - close_label (string) (default: '')
+#}
+
+{% set _overlay = overlay ?? false %}
+{% set _inside_container = inside_container ?? false %}
+{% set _variant = variant|default('neutral') %}
+{% set _title = title|default('') %}
+{% set _logo = logo|default({}) %}
+{% set _icon_path = icon_path|default('') %}
+{% set _eu_category = eu_category|default('') %}
+{% set _non_eu_category = non_eu_category|default('') %}
+{% set _items = items|default([]) %}
+{% set _non_eu_items = non_eu_items|default([]) %}
+{% set _close_label = close_label|default('') %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% if _overlay %}
+  {% include '@oe-bcl/bcl-language-list/language-list-modal.html.twig' %}
+{% else %}
+  {% set attributes = attributes.addClass(['bcl-language-list', 'bcl-language-list--' ~ _variant]) %}
+
+  {% if not _inside_container %}
+    {% set attributes = attributes.addClass(['pt-5']) %}
+  {% endif %}
+
+  <div
+    {{ attributes }}
+  >
+    {% if _logo is not empty %}
+    <div class="container">
+      {% if _title is empty %}
+      <div class="text-center">
+      {% endif %}
+      <div class="d-inline-flex align-items-center">
+        <img
+          {% if _logo.path is not empty %}
+          src="{{ _logo.path }}"
+          {% endif %}
+          {% if _logo.alt is not empty %}
+          alt="{{ _logo.alt }}"
+          {% endif %}
+          {% if _logo.class is not empty %}
+          class="{{ _logo.class }}"
+          {% endif %}
+        />
+        {% if _title is not empty %}
+        <h5 class="h5 ms-4">{{ _title }}</h5>
+        {% endif %}
+      </div>
+      {% if _title is empty %}
+      </div>
+      {% endif %}
+    </div>
+    {% endif %}
+
+    {% if _items is not empty or _non_eu_items is not empty %}
+    <div class="main pt-4">
+      {% if not (_variant == 'neutral' and _inside_container) %}
+      <div class="container">
+      {% endif %}
+      {% if _items is not empty and _items is iterable %}
+        {% include '@oe-bcl/bcl-language-list/language-list-grid.html.twig' with {
+            items: _items,
+            icon_path: _icon_path,
+            category: eu_category,
+        } only %}
+      {% endif %}
+      {% if _non_eu_items is not empty and _non_eu_items is iterable %}
+        {% include '@oe-bcl/bcl-language-list/language-list-grid.html.twig' with {
+            items: _non_eu_items,
+            icon_path: _icon_path,
+            category: non_eu_category,
+        } only %}
+      {% endif %}
+      {% if not (_variant == 'neutral' and _inside_container) %}
+      </div>
+      {% endif %}
+    </div>
+    {% endif %}
+  </div>
+{% endif %}
+
+{% endapply %}

package/templates/bcl-language-switcher/language-switcher.html.twig

@@ -0,0 +1,50 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - id (string) (default: collapse-random(1000), optional)
+  - message (alert object) (default: {})
+  - expandable (button object) (default: {})
+  - languages (link[]) (default: [])
+#}
+
+{% set _id = id|default('collapse-' ~ random(1000)) %}
+{% set _message = message|default({}) %}
+{% set _expandable = expandable|default({}) %}
+{% set _languages = languages|default([]) %}
+
+{% set _expandable_attributes = _expandable.attributes ?: create_attribute() %}
+
+{% set _expandable_attributes = _expandable_attributes
+                                .setAttribute('data-bs-toggle', 'collapse')
+                                .setAttribute('autocomplete', 'off')
+                                .setAttribute('aria-expanded', 'false')
+                                .setAttribute('aria-controls', _id)
+                                .setAttribute('data-bs-target', '#' ~ _id)
+%}
+
+{% include '@oe-bcl/bcl-alert/alert.html.twig' with _message only %}
+
+{% include '@oe-bcl/bcl-button/button.html.twig' with _expandable|merge({
+  attributes: _expandable_attributes
+}) only %}
+
+<div class="collapse mt-3" id="{{ _id }}">
+  <div
+    class="d-grid"
+    style="grid-auto-flow: row;  grid-template-columns: repeat(auto-fit, minmax(4rem, 8rem))"
+  >
+    {% for language in languages %}
+      {% include '@oe-bcl/bcl-link/link.html.twig' with language|merge({
+        attributes: create_attribute().addClass(
+          [ "btn",
+            "btn-link",
+            "d-block",
+            "ps-0",
+            "text-start"
+          ])
+      }) only %}
+    {% endfor %}
+  </div>
+</div>
+
+{% endapply %}

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

@@ -0,0 +1,89 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - label (string) (default: '')
+  - path (string) (default: '#')
+  - variant (string) (default: '')
+    - options ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
+  - id (string) (default: '')
+  - disabled (boolean) (default: false)
+  - standalone (boolean) (default: false)
+  - icon (icon object) (default: {})
+  - icon_position (string) (default: after)
+    - options ['after', 'before']
+  - remove_icon_spacers (boolean) (default: false)
+  - attributes (drupal attrs)
+#}
+
+{% set _label = label|default('') %}
+{% set _path = path|default('#') %}
+{% set _variant = variant|default('') %}
+{% set _id = id|default('') %}
+{% set _disabled = disabled ?? false %}
+{% set _standalone = standalone ?? false %}
+{% set _icon = icon|default({}) %}
+{% set _icon_position = icon_position|default('after') %}
+{% set _remove_icon_spacers = remove_icon_spacers ?? false %}
+
+{% set _classes = [] %}
+
+{% if _icon is not empty %}
+  {% if _label is not empty and not _remove_icon_spacers %}
+    {% 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-2-5')
+        })
+      %}
+    {% else %}
+      {% set _icon = _icon|merge({
+          attributes: _icon.attributes.addClass('ms-2-5')
+        })
+      %}
+    {% endif %}
+  {% endif %}
+  {%- set _icon_markup -%}
+    {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _icon only -%}
+  {%- endset -%}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% if _disabled %}
+  {% set _classes = _classes|merge(['disabled']) %}
+  {% set attributes = attributes.setAttribute('aria-disabled', 'true').setAttribute('tabindex', '-1') %}
+{% endif %}
+{% if _variant is not empty %}
+  {% set _classes = _classes|merge(['link-' ~ _variant]) %}
+{% endif %}
+{% if _id is not empty %}
+  {% set attributes = attributes.setAttribute('id', _id) %}
+{% endif %}
+{% if _standalone %}
+  {% set _classes = _classes|merge(['standalone']) %}
+{% endif %}
+{% if _classes is not empty %}
+  {% set attributes = attributes.addClass(_classes) %}
+{% endif %}
+{% set attributes = attributes.setAttribute('href', _path) %}
+
+<a
+  {{ attributes }}
+>
+  {%- if _icon_position == 'before' and _icon_markup is defined -%}
+    {{ _icon_markup }}
+  {%- endif -%}
+  {{- _label -}}
+  {%- if _icon_position == 'after' and _icon_markup is defined -%}
+    {{ _icon_markup }}
+  {%- endif -%}
+</a>
+
+{% endapply %}

package/templates/bcl-links-block/links-block.html.twig

@@ -0,0 +1,76 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - background: (string) (default: 'gray')
+    - options ['gray', 'transparent']
+  - variant: (string) (default: 'vertical')
+    - options ['vertical', 'horizontal']
+  - links (link[]) (default: [])
+  - 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 _background = background|default('gray') %}
+{% set _variant = variant|default('vertical') %}
+{% set _links = links|default([])%}
+
+{% set _classes = ['bcl-links-block'] %}
+
+{% set _title_classes = ['pb-3', 'mb-3', 'border-bottom'] %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% if _background == 'gray' %}
+  {% set attributes = attributes.addClass(['bg-light', 'px-4', 'py-3', 'rounded-2']) %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes) %}
+
+<div
+  {{ attributes }}
+>
+  {% 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.addClass(_title_classes),
+    } only %}
+  {% endif %}
+  {% if _links is not empty and _links is iterable %}
+    <ul class="ps-0 mb-0">
+      {% for _link in _links %}
+        {% if _link.attributes is empty %}
+          {% set _link = _link|merge({
+            attributes: create_attribute()
+          }) %}
+        {% endif %}
+        {% set _link = _link|merge({
+          clean_class: true,
+          attributes: _link.attributes.addClass(['pb-3', 'd-inline-block', 'standalone'])
+        }) %}
+        {% set _list_item_classes = 'list-unstyled' %}
+        {% if _variant == 'horizontal' %}
+          {% set _list_item_classes = _list_item_classes ~ ' d-inline' %}
+        {% endif %}
+        {% if loop.last == false %}
+          {% set _list_item_classes = _list_item_classes ~ ' me-4-5' %}
+        {% endif %}
+        <li class="{{ _list_item_classes }}">
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
+        </li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+</div>
+
+{% endapply %}

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

@@ -0,0 +1,120 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - flush (boolean) (default: false)
+  - horizontal (string) (default: '')
+    - options ['none', 'horizontal', 'horizontal-sm', 'horizontal-md', 'horizontal-lg', 'horizontal-xl', 'horizontal-xxl']
+  - id (string) (default: '')
+  - type (string) (default: 'unordered')
+    - options ['unordered', 'ordered', 'actionable']
+  - items (badge or link or button [])
+      format: [
+      {
+        - html (string)
+        - variant (string)
+        ...badge
+      }
+      {
+        ...Link
+        - button (boolean) (default: false)
+      },
+      {
+        ...Button
+        - button (boolean) (default: false)
+      },
+      ...
+    ]
+  - attributes (drupal attrs)
+#}
+
+{% set _flush = flush ?? false %}
+{% set _horizontal = horizontal|default('') %}
+{% set _id = id|default('') %}
+{% set _type = type|default('unordered') %}
+{% set _items = items|default([]) %}
+
+{% set _classes = ['list-group'] %}
+
+{% if _flush %}
+  {% set _classes = _classes|merge(['list-group-flush']) %}
+{% endif %}
+{% if _type == 'ordered' %}
+  {% set _classes = _classes|merge(['list-group-numbered']) %}
+{% endif %}
+{% if _horizontal is not empty %}
+  {% set _classes = _classes|merge(['list-group-' ~ _horizontal]) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% if _id is not empty %}
+  {% set attributes = attributes.setAttribute('id', _id) %}
+{% endif %}
+{% set attributes = attributes.addClass(_classes) %}
+
+{% if _type == 'unordered' %}
+  <ul
+    {{ attributes }}
+  >
+{% endif %}
+{% if _type == 'ordered' %}
+  <ol
+    {{ attributes }}
+  >
+{% endif %}
+{% if _type == 'actionable' %}
+  <div
+    {{ attributes }}
+  >
+{% endif %}
+{% if _items is not empty and _items is iterable %}
+  {% for _item in _items %}
+    {% if _type == 'unordered' or _type == 'ordered' %}
+      {% set _item_class = 'list-group-item' %}
+      {% if _item.variant is not empty %}
+        {% set _item_class = _item_class ~ ' list-group-item-' ~ _item.variant %}
+      {% endif %}
+      {% if _item.extra_classes is not empty %}
+        {% set _item_class = _item_class ~ ' ' ~ _item.extra_classes %}
+      {% endif %}
+      <li class="{{ _item_class }}">
+      {%- if _item.input is defined -%}
+          {% include '@oe-bcl/bcl-form-input/form-input.html.twig' with _item only %}
+      {%- else -%}
+          {{- _item.html -}}
+          {%- if _item.badge is not empty -%}
+            {% include '@oe-bcl/bcl-badge/badge.html.twig' with _item.badge only %}
+          {%- endif -%}
+      {%- endif -%}
+      </li>
+    {% else %}
+      {% if _item.attributes is empty %}
+        {% set _item = _item|merge({
+          attributes: create_attribute()
+        }) %}
+      {% endif %}
+      {% set _item = _item|merge({
+        clean_class: true,
+        attributes: _item.attributes.addClass(['list-group-item', 'list-group-item-action'])
+      }) %}
+      {% if _item.button is defined %}
+        {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
+      {% else %}
+        {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+{% if _type == 'unordered' %}
+</ul>
+{% endif %}
+{% if _type == 'ordered' %}
+</ol>
+{% endif %}
+{% if _type == 'actionable' %}
+</div>
+{% endif %}
+
+{% endapply %}