@openeuropa/bcl-theme-default 0.1.3 → 0.1.202408021145

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

@@ -0,0 +1,27 @@
+{% extends "@oe-bcl/bcl-base-templates/listing-page.html.twig" %}
+
+{% block banner %}
+<div class="container mt-4 mt-md-5">
+  <div class="col-xxl-11">
+    <div class="p-md-3-5 pt-3 bg-lighter d-md-flex n-mx-container">
+      <h1 class="mb-0 d-inline-block">{{ banner.main_title }}</h1>
+      {% if banner.actions is not empty and banner.actions is iterable %}
+      <div class="d-grid d-md-block ms-auto">
+        {% for _action in banner.actions %}
+          {% if _action.type == "link" %}
+            {% include '@oe-bcl/bcl-link/link.html.twig' with _action only %}
+          {% elseif _action.type == "button" %}
+            {% include '@oe-bcl/bcl-button/button.html.twig' with _action only %}
+          {% elseif _action.type == "dropdown" %}
+            {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _action only %}
+          {% endif %}
+        {% endfor %}
+      </div>
+      {% endif %}
+    </div>
+  {% if navigation is not empty %}
+    {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with navigation only %}
+  {% endif %}
+  </div>
+</div>
+{% endblock %}

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

@@ -1,78 +1,114 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
-  - logo
-    - src
-    - width
-    - height
-  - navbar
-  - login
-    - link
-      - label
-      - href
-      - target
-    - modal
-  - language
-    - link
-      - label
-      - href
-      - target
-    - modal
+  - variant (string) (default: 'neutral')
+    - options: ['ec', 'eu', 'neutral']
+  - navbar (Navbar object) (default: {})
+  - project_logo (object) (default: {})
+    format: {
+        path: '',
+        alt: '',
+        classes: ''
+      }
+  - site_name (string) (default: '')
+  - project_link (string) (default: '')
+  - head (Navbar object) (default: {})
+  - breadcrumbs (Breadcrumbs object) (default: {})
+  - language_modal (object) (default: {})
+  - light (boolean) (default: false)
+  - modals (modal[]) (default: [])
+  - attributes (drupal attrs)
 #}
 
-{% set _logo = {
-  src: logo.src|default(''),
-  width: logo.width|default(100),
-  height: navbar.height|default(60)
-} %}
+{% set _variant = variant|default('neutral') %}
 {% set _navbar = navbar|default({}) %}
-{% set _login = {
-  link: {
-    label: login.link.label|default(''),
-    href: login.link.href|default('#'),
-    target: login.link.target|default(login.modal.id|default('')),
-  },
-  modal: login.modal|default({}),
-} %}
-{% set _language = {
-  link: {
-    label: language.link.label|default(''),
-    href: language.link.href|default('#'),
-    target: language.link.target|default(language.modal.id|default('')),
-  },
-  modal: language.modal|default({}),
-} %}
+{% set _project_logo = project_logo|default({}) %}
+{% set _site_name = site_name|default('') %}
+{% set _project_link = project_link|default('') %}
+{% set _head = head|default({}) %}
+{% set _breadcrumbs = breadcrumbs|default({}) %}
+{% set _language_modal = language_modal|default({}) %}
+{% set _light = light ?? false %}
+{% set _modals = modals|default([]) %}
 
-<header>
-  <!-- header -->
-  <div class="container">
-    <div class="oe-header">
-      <a class="navbar-brand" href="#">
-        <img src={{ _logo.src }} width={{ _logo.width }} height={{ _logo.height }} />
+{% set _site_name_classes = 'bcl-header__site-name' %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bcl-header', 'bcl-header--' ~ _variant]) %}
+
+{% if site_name_classes is not empty %}
+  {% set _site_name_classes = _site_name_classes ~ ' ' ~ site_name_classes %}
+{% endif %}
+
+{% set _project_classes = 'bcl-header__project' %}
+{% if _light is not empty %}
+  {% set _project_classes = _project_classes ~ ' light' %}
+{% endif %}
+
+<header
+  {{ attributes }}
+>
+  <!-- navbar_settings -->
+  {% if _head is not empty %}
+    {% include '@oe-bcl/bcl-navbar/navbar.html.twig' with _head only %}
+  {% endif %}
+
+  <!-- project name -->
+  {% if _project_logo is not empty or _site_name is not empty %}
+  <div class="{{ _project_classes  }}">
+    <div class="container">
+    {% if _project_link is not empty %}
+      <a
+        href="{{ _project_link }}"
+      >
+    {% endif %}
+      {% if _project_logo is not empty %}
+        <img
+        {% if _project_logo.path is not empty %}
+          src="{{ _project_logo.path }}"
+        {% endif %}
+        {% if _project_logo.alt is not empty %}
+          alt="{{ _project_logo.alt }}"
+        {% endif %}
+        {% if _project_logo.classes is not empty %}
+          class="{{ _project_logo.classes }}"
+        {% endif %}
+        />
+      {% endif %}
+      {% if _site_name is not empty %}
+        <span class="{{ _site_name_classes }}">
+        {{- _site_name -}}
+        </span>
+      {% endif %}
+    {% if _project_link is not empty %}
       </a>
-      <ul class="nav">
-        <li class="nav-item">
-          <a class="nav-link" href={{ _login.link.label }} role="button" data-bs-toggle="modal" data-bs-target="#{{ _login.link.target }}">
-            {{ _login.link.label }}
-          </a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href={{ _language.link.label }} role="button" data-bs-toggle="modal" data-bs-target="#{{ _language.link.target }}">
-            {{ _language.link.label }}
-          </a>
-        </li>
-      </ul>
+    {% endif %}
     </div>
   </div>
+  {% endif %}
 
   <!-- navbar -->
-  {% include '@oe-bcl/navbar/navbar.html.twig' with _navbar only %}
+  {% if _navbar is not empty %}
+    {% include '@oe-bcl/bcl-navbar/navbar.html.twig' with _navbar only %}
+  {% endif %}
+
+  <!-- breadcrumbs -->
+  {% if _breadcrumbs is not empty %}
+    <div class="container">
+      {% include '@oe-bcl/bcl-breadcrumb/breadcrumb.html.twig' with _breadcrumbs only %}
+    </div>
+  {% endif %}
 </header>
 
-<!-- Modal - Login -->
-{% include '@oe-bcl/modal/modal.html.twig' with _login.modal only %}
+{% for modal in _modals %}
+  {% include '@oe-bcl/bcl-modal/modal.html.twig' with modal only %}
+{% endfor %}
 
-<!-- Modal - Language -->
-{% include '@oe-bcl/modal/modal.html.twig' with _language.modal only %}
+{% if _language_modal is not empty %}
+  {% include '@oe-bcl/bcl-language-list/language-list.html.twig' with _language_modal only %}
+{% endif %}
 
-{% endspaceless %}
+{% endapply %}

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

@@ -0,0 +1,40 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - attributes (drupal attrs)
+#}
+
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{%  endif %}
+
+{% if attributes.class is empty %}
+  {% set attributes = attributes.addClass(['mb-4']) %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bcl-heading']) %}
+
+{% if _title_link is not empty and _title is not empty and _title_link.label is empty %}
+  {% set _title_link = _title_link|merge({ label: _title }) %}
+{% endif %}
+
+{% if _title is not empty or _title_link is not empty %}
+<{{ _title_tag }} 
+  {{- attributes -}}
+>
+{%- if _title_link is not empty -%}
+  {% include '@oe-bcl/bcl-link/link.html.twig' with _title_link|merge({ standalone: true }) only %}
+{%- else -%}
+  {{- _title -}}
+{%- endif %}
+</{{ _title_tag }}>
+{% endif -%}
+
+{% endapply %}

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

@@ -1,30 +1,36 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
   - name (string) (default: '')
   - path (string) (default: '')
   - size (string) (default: 's')
-    - options ["2xs", "xs", "s", "m", "l", "xl", "2xl", "fluid"]
+    - options ['2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', 'fluid']
   - transformation (string) (default: '')
-    - options ["rotate-90", "rotate-180", "rotate-270", "flip-horizontal", "flip-vertical"]
+    - options ['rotate-90', 'rotate-180', 'rotate-270', 'flip-horizontal', 'flip-vertical']
+  - attributes (drupal attrs)
 #}
 
 {% set _name = name|default('') %}
 {% set _path = path|default('') %}
 {% set _size = size|default('s') %}
 {% set _transformation = transformation|default('') %}
+
 {% set _classes = ['bi', 'icon--' ~ _size] %}
 
 {% if _transformation is not empty %}
   {% set _classes = _classes|merge(['icon--' ~ _transformation]) %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set attributes = attributes.addClass(_classes) %}
 
 <svg
-  {{ attributes }}  
+  {{ attributes }}
 >
   <use xlink:href="{{ _path ~ "#" ~ _name }}"/>
 </svg>
 
-{% endspaceless %}
+{% endapply %}

package/templates/bcl-inpage-navigation/inpage-navigation.html.twig

@@ -0,0 +1,42 @@
+{% apply spaceless %}
+
+{#
+Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - links: (link[]) (default: [])
+  - id (string) (default: bcl-inpage-navigation-random(10))
+  - 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 _links = links|default([]) %}
+{% set _id = id|default('bcl-inpage-navigation-' ~ random(10)) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(['bcl-inpage-navigation', 'position-sticky']).setAttribute('id', _id) %}
+{% set title_attributes = _title_attributes.addClass('mb-0') %}
+
+<nav {{ attributes }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes.addClass('mb-0'),
+  } only %}
+  {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with {
+    'pills': true,
+    'vertical': true,
+    'items': _links,
+  } only %}
+</nav>
+
+{% endapply %}

package/templates/bcl-landing-page/landing-page.html.twig

@@ -0,0 +1,59 @@
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+
+{% block banner %}
+  {% if banner is defined %}
+    {% include '@oe-bcl/bcl-banner/banner.html.twig' with banner only %}
+  {% endif %}
+{% endblock %}
+
+{% block content %}
+
+<div class="container">
+  {% if featured_section is defined %}
+    <div class="my-4">
+      <h2 class="mb-4">{{ featured_section.title }}</h2>
+      <div class="row">
+        <div class="col-12 col-md-6">
+          {{ featured_section.content }}
+        </div>
+        <div class="col-12 col-md-6">
+          {% include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with featured_section.featured_media only %}
+        </div>
+      </div>
+    </div>
+  {% endif %}
+
+  {% if listing_section is defined %}
+    <div class="my-4">
+      {% include '@oe-bcl/bcl-listing/listing.html.twig' with listing_section only %}
+    </div>
+  {% endif %}
+
+  {% if inpage_banner is defined %}
+    <div class="my-4">
+      {% include '@oe-bcl/bcl-banner/banner.html.twig' with inpage_banner only %}
+    </div>
+  {% endif %}
+
+  {% if activity_featured is defined %}
+    <div class="my-4">
+      <h2 class="mb-4">{{ activity_featured.title }}</h2>
+      <div class="row">
+        <div class="col-12 col-md-6">
+          {{ activity_featured.content }}
+        </div>
+        <div class="col-12 col-md-6">
+          {% include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with activity_featured.featured_media only %}
+        </div>
+      </div>
+    </div>
+  {% endif %}
+
+  {% if activity_listing is defined %}
+    <div class="my-4">
+      {% include '@oe-bcl/bcl-listing/listing.html.twig' with activity_listing only %}
+    </div>
+  {% endif %}
+</div>
+
+{% endblock %}

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 %}