@openeuropa/bcl-theme-default 0.11.0 → 0.15.0

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

@@ -0,0 +1,205 @@
+{% spaceless %}
+
+{#
+  Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h4')
+  - item_title (string) (default: '')
+  - icon (icon Object) (default: {})
+  - text (string) (default: '')
+  - content (string) (default: '')
+  - image (object) (default: {}) - format: {
+    path:"",
+    alt: "",
+  }
+  - badges (array of badges Object) (default: [])
+  - meta (string) (default: '')
+  - language (string) (default: '')
+  - variant (string) (default: 'default')
+    - options: ['default', 'card']
+  - download (link Object) (default: {})
+  - translation (object) (default: {}) format: {
+    id: "",
+    label: {}, - link Object
+    items: [
+      {
+        extension: "",
+        language: "",
+        size: "",
+        download: {}, - link Object
+      },
+  }
+  - icon_path (string) (default: '')
+#}
+
+{# Internal properties #}
+
+{% set _icon = icon|default({}) %}
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h4') %}
+{% set _item_title = item_title|default('') %}
+{% 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 _container_classes = 'w-100 d-md-flex' %}
+{% if _icon is not empty %}
+  {% set _container_classes = _container_classes ~ ' ms-2-5' %}
+  {% set _icon = _icon|merge({
+    attributes: create_attribute().addClass(['mt-1', 'text-secondary'])
+  }) %}
+{% endif %}
+
+{% if _title is not empty %}
+  {% set _title_classes = 'fw-bold mb-4' %}
+  <{{ _title_tag }} class="{{ _title_classes }}">
+    {{- _title -}}
+  </{{ _title_tag }}>
+{% endif %}
+
+{% if _variant == 'card' %}
+  {% set attributes = attributes.addClass(['border', 'rounded-bottom']) %}
+  {% set _image = _image|merge({
+    position: "top",
+    classes: "mb-3"
+  }) %}
+  {% include '@oe-bcl/bcl-card/card.html.twig' with {
+    horizontal: true,
+    horizontal_grid: {
+      left_col_classes: "col-12 col-md-4 order-md-2",
+      right_col_classes: "col-12 col-md-8",
+    },
+    badges: _badges,
+    title: {
+      content: _item_title,
+    },
+    text: {
+      content: _text,
+      classes: "mb-2",
+    },
+    content: _content,
+    image: _image,
+    extra_classes_body: "p-0",
+    attributes: create_attribute().addClass(['rounded-0', 'rounded-top', 'p-4', 'border-bottom-0'])
+  } only %}
+{% else %}
+  {% set attributes = attributes.addClass(['border', 'rounded']) %}
+{% endif %}
+
+<div
+  {{ attributes }}
+>
+  <div class="px-3-5 py-3">
+    <div class="d-flex">
+      {% if _icon is not empty %}
+        {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _icon|merge({
+          path: _icon_path,
+        }) only -%}
+      {% endif %}
+      <div class="{{ _container_classes }}">
+        <div class="flex-grow-1">
+          {% if _item_title is not empty and _variant == 'default' %}
+            <p class="fw-bold m-0">{{ _item_title }}</p>
+          {% endif %}
+          {% if _language is not empty or _meta is not empty %}
+          <small class="fw-bold 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', _download.url)
+                      .addClass(['text-underline-hover', 'align-self-center', 'd-inline-block', 'mt-1', 'mt-md-0'])
+        }) %}
+        {% include '@oe-bcl/bcl-link/link.html.twig' with _download only %}
+      </div>
+    </div>
+  </div>
+  {% if _translation is not empty %}
+  <div class="bg-lighter py-3 px-4 border-top">
+    {% set _id = _translation.id|default('language-dropdown' ~ random(1000)) %}
+    <div class="text-end text-md-center">
+      {% include '@oe-bcl/bcl-link/link.html.twig' with _translation.label|merge({
+        path: '#' ~ _id,
+        attributes: create_attribute()
+                    .addClass(['text-underline-hover'])
+                    .setAttribute('aria-controls', _id)
+                    .setAttribute('data-bs-toggle', 'collapse')
+                    .setAttribute('aria-expanded', 'false')
+                    .setAttribute('role', 'button'),
+      }) only %}
+    </div>
+    {% if _translation.items is not empty and _translation.items is iterable %}
+    <div class="collapse" id="{{ _id }}">
+      {% for _item in _translation.items %}
+        {% set _item_classes = loop.last ? 'pt-3' : 'py-3 border-bottom' %}
+        <div class="{{ _item_classes }}">
+        {% if _item.type == 'content' %}
+          {{ _item.content }}
+        {% else %}
+          <div class="row">
+            <div class="col-12 col-md-9">
+              {% if _item.title is not empty %}
+                <p class="fw-bold m-0">{{ _item.title }}</p>
+              {% endif %}
+              {% if _item.title is not empty %}
+                <p class="m-0">{{ _item.description }}</p>
+              {% endif %}
+              {% if _item.language is not empty or _item.meta is not empty %}
+              <small class="fw-bold m-0">
+                {%- if _item.language is not empty -%}
+                  {{- _item.language -}}
+                {%- endif -%}
+                {%- if _item.meta is not empty -%}
+                  <span class="fw-normal">
+                    {{- ' ' ~ _item.meta -}}
+                  </span>
+                {%- endif -%}
+              </small>
+              {% endif %}
+            </div>
+            <div class="col-12 col-md-3 align-self-end text-md-end">
+            {% include '@oe-bcl/bcl-link/link.html.twig' with _item.download|merge({
+              icon_position: "after",
+              icon: {
+                name: "download",
+                size: "fluid",
+                path: _icon_path,
+              },
+              attributes: create_attribute()
+                          .setAttribute("download", _item.download.url)
+                          .addClass(['d-block', 'text-underline-hover', 'mt-1'])
+            }) only %}
+            </div>
+          </div>
+        {% endif %}
+        </div>
+      {% endfor %}
+    </div>
+    {% endif %}
+  </div>
+  {% endif %}
+</div>
+
+{% endspaceless %}

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

@@ -67,7 +67,7 @@
                   {% if item.type == 'links' %}
                     {% for link in item.links %}
                       {% include '@oe-bcl/bcl-link/link.html.twig' with link|merge({
-                        attributes: create_attribute().addClass(['d-block', 'text-decoration-none', 'mb-1'])
+                        attributes: create_attribute().addClass(['d-block', 'text-underline-hover', 'mb-1'])
                       }) only %}
                     {% endfor %}
                   {% endif %}

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

@@ -0,0 +1,101 @@
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+
+{% block banner %}
+<div class="container">
+  {% if banner is not empty %}
+  <div class="mt-4 mt-md-5">
+    {% if banner.image is not empty %}
+      <img
+        src="{{ banner.image.path }}"
+        {% if banner.image.alt is not empty %}
+        alt="{{ banner.image.alt }}"
+        {% endif %}
+        {% if banner.image.class is not empty %}
+        class="{{ banner.image.class }}"
+        {% endif %}
+      />
+    {% endif %}
+    {% if banner.title is not empty %}
+      <div class="p-md-3-5 pt-3 bg-lighter d-md-flex n-mx-container">
+        <h2 class="mb-0 d-inline-block fw-bold">{{ banner.title }}</h2>
+        {% 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>
+    {% endif %}
+  </div>
+  {% endif %}
+  {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with navigation only %}
+  {% if banner_description is not empty and contact is not empty %}
+  {% include '@oe-bcl/bcl-link/link.html.twig' with banner_description.collapse_trigger only %}
+  <div class="collapse d-md-block" id="banner-description">
+    <div class="row mt-md-4 mb-md-5 pb-md-5">
+      <div class="col-md-8">
+        <div class="ps-md-3">
+          {% if banner_description.metas is not empty and banner_description.metas is iterable %}
+          <div class="d-block">
+            {% for _meta in banner_description.metas %}
+            <p class="mb-0 me-4 d-inline-block text-muted">
+              {% include '@oe-bcl/bcl-icon/icon.html.twig' with _meta.icon only %}
+              {{- _meta.label -}}
+            </p>
+            {% endfor %}
+          </div>
+          {% endif %}
+          {{ banner_description.content }}
+        </div>
+      </div>
+      <div class="col-md-4">
+        <h4 class="mb-3 pb-2">{{ contact.title }}</h4>
+        {% if contact.profiles is not empty and contact.profiles is iterable %}
+          {% for _profile in contact.profiles %}
+            {% include '@oe-bcl/bcl-user/user-view-compact.html.twig' with _profile only %}
+          {% endfor %}
+        {% endif %}
+        {% if contact.more_link is not empty %}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with contact.more_link only %}
+        {% endif %}
+      </div>
+    </div>
+  </div>
+  {% endif %}
+</div>
+{% endblock %}
+
+{% block content %}
+  {% if recent is not empty and members is not empty %}
+  <div class="row mt-3">
+    <div class="col-md-8">
+      <h4 class="mb-4 pb-2">{{ recent.title }}</h4>
+      {% include '@oe-bcl/bcl-recent-activities/recent-activities.html.twig' with recent.block_data only %}
+    </div>
+    <div class="col-md-4">
+      <h4 class="mt-4 mt-md-0 mb-4 pb-2">{{ members.title}}</h4>
+      {% if members.profiles is not empty and members.profiles is iterable %}
+        {% for _profile in members.profiles %}
+          {% include '@oe-bcl/bcl-user/user-view-compact.html.twig' with _profile only %}
+        {% endfor %}
+      {% endif %}
+      {% if members.more_link is not empty %}
+        {% include '@oe-bcl/bcl-link/link.html.twig' with members.more_link only %}
+      {% endif %}
+    </div>
+  </div>
+  {% endif %}
+  {% if contributions is not empty %}
+    <h4 class="my-4 pt-3 pb-2">{{ contributions.title}}</h4>
+    {% if contributions.listing is not empty %}
+      {% include '@oe-bcl/bcl-listing/listing.html.twig' with contributions.listing only %}
+    {% endif %}
+  {% endif %}
+{% endblock %}

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

@@ -0,0 +1,25 @@
+{% extends "@oe-bcl/bcl-base-templates/listing-page.html.twig" %}
+
+{% block banner %}
+  <div class="container mt-4 mt-md-5">
+    <div class="p-md-3-5 pt-3 bg-lighter d-md-flex n-mx-container">
+      <h2 class="mb-0 d-inline-block fw-bold">{{ banner.title }}</h2>
+      {% 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>
+{% endblock %}

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

@@ -43,8 +43,8 @@
   {% endif %}
 
   <!-- project name -->
-  {% if _project_logo is not empty or _site_name is not empty %}
   <div class="{{ _project_classes  }}">
+    {% if _project_logo is not empty or _site_name is not empty %}
     <div class="container">
     {% if _project_logo is not empty %}
       <img
@@ -60,11 +60,11 @@
       />
     {% endif %}
     {% if _site_name is not empty %}
-      <p>{{ _site_name }}</p>
+      {{ _site_name }}
     {% endif %}
     </div>
+    {% endif %}
   </div>
-  {% endif %}
 
   <!-- navbar -->
   {% if _navbar is not empty %}

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

@@ -0,0 +1,42 @@
+{% spaceless %}
+
+{#
+Parameters:
+  - "title": (string) (default: '')
+  - "full_layout": (boolean) (default: false)
+  - "links": (array of link objects) (default: [])
+  - "content": (string) (default: '')
+#}
+
+{# Internal properties #}
+{% set _title = title|default('') %}
+{% set _links = links|default([]) %}
+{% set _content = content|default('') %}
+{% set _id = id|default('bcl-inpage-navigation-' ~ random(5)) %}
+{% set _full_layout = full_layout|default(false) %}
+{% set attributes = attributes.addClass('position-sticky').setAttribute('id', _id) %}
+
+{# Print the result #}
+{% if _full_layout %}
+<div class="row">
+  <div class="col-md-3 d-none d-md-block">
+{% endif %}
+    <nav {{ attributes }}>
+      {% if _title is defined and _title is not empty %}
+        <h5>{{ _title }}</h5>
+      {% endif %}
+      {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with {
+        'pills': true,
+        'vertical': true,
+        'items': _links,
+      } only %}
+    </nav>
+{% if _full_layout %}
+  </div>
+  <div class="col-md-9">
+    {{ _content }}
+  </div>
+</div>
+{% endif %}
+
+{% endspaceless %}

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 fw-bold">{{ 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 fw-bold">{{ 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-link/link.html.twig

@@ -8,6 +8,7 @@
   - id (string) (default: '')
   - disabled (boolean) (default: false)
   - remove_icon_spacers (boolean) (default: false)
+  - standalone (boolean) (default: false)
   - icon (icon object) (default: {}): predefined structure for Icon component
   - icon_position (string) (default: after)
     - options ["after", "before"]
@@ -18,6 +19,7 @@
 {% set _variant = variant|default('') %}
 {% set _id = id|default('') %}
 {% set _disabled = disabled|default(false) %}
+{% set _standalone = standalone|default(false) %}
 {% set _icon = icon|default({}) %}
 {% set _icon_position = icon_position|default('after') %}
 {% set _remove_icon_spacers = remove_icon_spacers|default(false) %}
@@ -62,6 +64,9 @@
 {% if _id is not empty %}
   {% set attributes = attributes.setAttribute('id', _id) %}
 {% endif %}
+{% if _standalone %}
+  {% set _classes = _classes|merge(['text-underline-hover']) %}
+{% endif %}
 {% if _classes is not empty %}
   {% set attributes = attributes.addClass(_classes) %}
 {% endif %}

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

@@ -6,12 +6,14 @@
   - variant: (string) (default: "vertical")
     - options ["vertical", "horizontal"]
   - title: (string) (default: "")
+  - title_tag: (string) (default: "h5")
   - links (array of link objects) (default: [])
 #}
 
 {% set _background = background|default("gray") %}
 {% set _variant = variant|default("vertical") %}
 {% set _title = title|default("") %}
+{% set _title_tag = title_tag|default("h5") %}
 {% set _links = links|default([])%}
 
 {% if attributes is empty %}
@@ -26,7 +28,8 @@
   {{ attributes }}
 >
   {% if _title is not empty %}
-    <h5 class="fw-bold pb-3 mb-3 border-bottom">{{ _title }}</h5>
+    {% set _title_classes = 'fw-bold pb-3 mb-3 border-bottom' %}
+    <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
   {% endif %}
   {% if _links is not empty and _links is iterable %}
     <ul class="ps-0 mb-0">