@openeuropa/bcl-theme-default 0.20.0 → 0.23.0

package/templates/bcl-project-status/project-status.html.twig

@@ -1,9 +1,6 @@
 {% spaceless %}
 
 {# Parameters:
-  - title_id (string) (default: "")
-  - title (string) (default: "")
-  - title_tag (string) (default: "h3")
   - status (string) (default: 'planned')
   - start_date (string) (default: '')
   - start_label (string) (default: '')
@@ -12,16 +9,9 @@
   - label (string) (default: '')
   - badge (string) (default: ''),
   - progress (string) (default: '')
-  - corporate_contribution (string) (default: '') // value every 5 percent
-  - chart_legend (object) (default: {})
-
-    Blocks - chart
 #}
 
-{% set _title_id = title_id|default('') %}
-{% set _title = title|default('') %}
 {% set _label = label|default('') %}
-{% set _title_tag = title_tag|default('h3') %}
 {% set _status = status|default('planned') %}
 {% set _charts = charts|default('') %}
 {% set _badge = badge|default('') %}
@@ -30,8 +20,17 @@
 {% set _start_label = start_label|default('') %}
 {% set _end_label = end_label|default('') %}
 {% set _progress = progress|default('') %}
-{% set _corporate_contribution = corporate_contribution|default('') %}
-{% set _chart_legend = chart_legend|default({}) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass([
+  'bcl-project-status',
+  'border-bottom',
+  'pb-4',
+  'mb-4'
+]) %}
 
 {% set _bgs = {
     ongoing: 'info',
@@ -40,17 +39,7 @@
   } %}
 {% set _bg = _bgs[_status]|default('secondary') %}
 
-
-<{{ _title_tag }}
-  class="fw-bold mb-4"
-  {% if title_id is not empty %}
-    id="{{ title_id }}"
-  {% endif %}
->
-  {{- title -}}
-</{{ _title_tag }}>
-
-<div class="border-bottom pb-4 mb-4">
+<div {{ attributes }}>
   <div class="row">
     <div class="col-12 col-md-3">
     {% if _label is not empty %}
@@ -103,26 +92,7 @@
     </div>
   </div>
 </div>
-{% if _corporate_contribution is not empty and _chart_legend is not empty %}
-<div class="border-bottom pb-4 mb-4">
-  {% block chart %}
-  <div class="row">
-    <div class="col-5 col-md-3">
-      <div class="circular-progress" data-percentage="{{ _corporate_contribution }}">
-        <span class="circular-progress-left">
-          <span class="circular-progress-bar"></span>
-        </span>
-        <span class="circular-progress-right">
-          <span class="circular-progress-bar"></span>
-        </span>
-      </div>
-    </div>
-    <div class="col-7 col-md-9 align-self-center">
-      {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with _chart_legend only %}
-    </div>
-  </div>
-  {% endblock %} 
-</div>
-{% endif %} 
+
+
 
 {% endspaceless %}

package/templates/bcl-recent-activities/recent-activities.html.twig

@@ -40,19 +40,21 @@
     {% endif %}
     {% if _activity.content is not empty and _activity.meta is not empty %}
     <div>
-      {% if _activity.content is not empty %}
+      {%- if _activity.content is not empty -%}
         <p class="mb-2">{{- _activity.content -}}</p>
-      {% endif %}
-      {% if _activity.meta is not empty and _activity.meta is iterable %}
-        {% for _meta in _activity.meta %}
+      {%- endif -%}
+      {%- if _activity.meta is not empty and _activity.meta is iterable -%}
+        {%- for _meta in _activity.meta -%}
         <p class="mb-0">
+        {%-  if _meta.icon is not empty -%}
           {% include '@oe-bcl/bcl-icon/icon.html.twig' with _meta.icon only %}
+        {%- endif -%}
           {{- _meta.label -}}
         </p>
-        {% endfor %}
-      {% endif %}
+        {%- endfor -%}
+      {%- endif -%}
     </div>
-    {% endif %}
+    {%- endif -%}
   </div>
   {% endfor %}
 {% endif %}

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

@@ -2,10 +2,17 @@
 
 {% block banner %}
 {% if banner.search_bar is defined %}
-  <div class="bg-lighter py-4 py-lg-3">
+  <div class="bg-lighter pt-3 pb-4 pb-lg-3">
     <div class="container">
       <div class="row">
-        <div class="col-12 col-lg-6 offset-lg-3">
+        <div class="col-12 col-lg-3">
+          {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+            title: main_title,
+            title_tag: "h1",
+            attributes: create_attribute().addClass(['mb-3', 'mb-lg-0']),
+          } only %}
+        </div>
+        <div class="col-12 col-lg-6 align-self-center">
           {% include '@oe-bcl/bcl-search-form/search-form.html.twig' with banner.search_bar only %}
         </div>
       </div>  

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

@@ -4,6 +4,7 @@
   Parameters:
   - "id" (string) (default: '')
   - "label" (string) (default: '')
+  - "label_extra_classes" (string) (default: '')
   - "hidden_label" (boolean) (default: false)
   - "helper_text" (string) (default: '')
   - "helper_text_id" (string) (default: '')
@@ -16,6 +17,7 @@
   - "multiple" (boolean) (default: false)
   - "options": (array of objects with value and label keys) (default: [])
   - "aria_label": (string) (default: '')
+  - "clean_class": (boolean) (default: false) - removes 'form-select' class
 #}
 
 {% set _classes = ['form-select'] %}
@@ -32,11 +34,12 @@
 {% set _helper_text = helper_text|default('') %}
 {% set _helper_text_id = helper_text_id|default('') %}
 {% set _label = label|default('') %}
-{% set _extra_classes = extra_classes|default('') %}
+{% set _label_extra_classes = label_extra_classes|default('') %}
 {% set _clean_class = clean_class|default(false) %}
-{% set _label_class = 'form-label' %}
 {% set _hidden_label = hidden_label|default(false) %}
 
+{% set _label_class = 'form-label' %}
+
 {% if _clean_class %}
   {% set _classes = [] %}
 {% endif %}
@@ -53,6 +56,10 @@
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{% if _label_extra_classes is not empty %}
+  {% set _label_class = _label_class ~ ' ' ~ _label_extra_classes %}
+{% endif %}
+
 {% if _aria_label is not empty %}
   {% set attributes = attributes.setAttribute('aria-label', _aria_label) %}
 {% endif %}
@@ -78,7 +85,7 @@
 {% endif %}
 
 {% if _classes is not empty %}
-{% set attributes = attributes.addClass(_classes) %}
+  {% set attributes = attributes.addClass(_classes) %}
 {% endif %}
 
 {% if _label is not empty %}

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

@@ -2,27 +2,29 @@
 
 {#
 Parameters:
-  - "id": (integer) (default: random(1000))
-  - "toggle_collapsed": (string) (default: '')
-  - "toggle_expanded": (string) (default: '')
-  - "hide" (object): (default: undefined)
-    - "from": (integer) (default: items.length) Item index after which to start hiding timeline items
-    - "to": (integer) (default: items.length) Item index after which to resume displaying timeline items
+  - id: (integer) (default: random(1000))
   - title: (string) (default: "")
   - title_tag: (string) (default: "h2")
-  - "items" (array) (default: []):
-    - "id": (string) (default: '')
-    - "label": (string) (default: '')
-    - "title": (string) (default: '')
-    - "content": (block) (default: '')
-  - "icon_path" (string) (default: ''): file containing the svg icons
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - toggle_collapsed: (string) (default: '')
+  - toggle_expanded: (string) (default: '')
+  - hide (object): (default: undefined)
+    - from: (integer) (default: items.length) Item index after which to start hiding timeline items
+    - to: (integer) (default: items.length) Item index after which to resume displaying timeline items
+  - items (array) (default: []):
+    - id: (string) (default: '')
+    - label: (string) (default: '')
+    - title: (string) (default: '')
+    - content: (block) (default: '')
+  - icon_path (string) (default: ''): file containing the svg icons
 #}
 
-{# Internal properties #}
-
 {% set _id = id|default(random(1000)) %}
 {% 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 _items = items|default([]) %}
 {% set _icon_path = icon_path|default('') %}
 {% set _toggle_collapsed = toggle_collapsed|default('') %}
@@ -57,10 +59,12 @@ Parameters:
 {% endif %}
 
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-4' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">
-    {{- _title -}}
-  </{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes,
+  } only %}
 {% endif %}
 
 {# Print the result #}

package/templates/bcl-user/user-terms.html.twig

@@ -0,0 +1,11 @@
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+
+{% block content %}
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec. Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. </p>
+  <ul class="mb-4-5">
+    <li>Fusce commodo hendrerit diam, pretium tempus leo varius sit amet. </li>
+    <li>Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, </li>
+    <li>A fermentum libero orci semper lacus. Duis tristique fringilla magna, eu egestas dolor molestie non. </li>
+  </ul>
+  {% include '@oe-bcl/bcl-form/form.html.twig' with terms_form only %}
+{% endblock %}

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

@@ -0,0 +1,129 @@
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+
+{% block content %}
+  {% include "@oe-bcl/bcl-navigation/navigation.html.twig" with navigation only %}
+  <div class="tab-content">
+    <div class="tab-pane fade show active" id="view" role="tabpanel" aria-labelledby="view-tab">
+      {% include '@oe-bcl/bcl-content-banner/content-banner.html.twig' with view.banner only %}
+      <div class="mt-3 mt-md-4-75 pt-4-75 mb-3">
+        <h3 class="mb-4">Personal information</h3>
+        <div class="row">
+          <div class="col-12 col-md-6">
+            <div class="row">
+              <div class="col-12 col-md-4">
+                <p class="mb-0">Gender:</p>
+              </div>
+              <div class="col-12 col-md-8">
+                <p>Male</p>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 col-md-4">
+                <p class="mb-0">Nationality:</p>
+              </div>
+              <div class="col-12 col-md-8">
+                <p>German</p>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 col-md-4">
+                <p class="mb-0">Date of birth:</p>
+              </div>
+              <div class="col-12 col-md-8">
+                <p>22/01/1972</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 col-md-6">
+            <div class="row">
+              <div class="col-12 col-md-4">
+                <p class="mb-0">Country:</p>
+              </div>
+              <div class="col-12 col-md-8">
+                <p>Germany</p>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 col-md-4">
+                <p class="mb-0">City:</p>
+              </div>
+              <div class="col-12 col-md-8">
+                <p>Düsseldorf</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="my-3">
+        <h3 class="mb-4">Professional information</h3>
+        <div class="row">
+          <div class="col-12 col-md-6">
+            <div class="row">
+              <div class="col-12 col-md-4">
+                <p class="mb-0">Organisation:</p>
+              </div>
+              <div class="col-12 col-md-8">
+                <p>DG Test</p>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12 col-md-4">
+                <p class="mb-0">Position:</p>
+              </div>
+              <div class="col-12 col-md-8">
+                <p>Director</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 col-md-6">
+            <div class="row">
+              <div class="col-12 col-md-4">
+                <p class="mb-0">Working languages:</p>
+              </div>
+              <div class="col-12 col-md-8">
+                <p>English, German</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tab-pane fade" id="edit" role="tabpanel" aria-labelledby="edit-tab">
+      <h1 class="my-4-5">Edit my profile</h1>
+      <h2 class="mb-4-5">Profile image</h2>
+      <div class="row">
+        <div class="offset-3 col-6 offset-lg-0 col-lg-3">
+          <img src="https://picsum.photos/seed/1002/400/400" class="img-fluid" alt="profile-image">
+        </div>
+        <div class="col align-self-center">
+          <div class="mt-3 text-center text-md-start">
+            {% include '@oe-bcl/bcl-form-input/form-input.html.twig' with edit.image_upload_input only %}
+            <div class="d-md-inline-block">
+              {% include '@oe-bcl/bcl-button/button.html.twig' with edit.remove_image_button only %}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12">
+          {% include '@oe-bcl/bcl-form/form.html.twig' with edit.profile_information only %}
+        </div>
+      </div>
+    </div>
+    <div class="tab-pane fade" id="privacy" role="tabpanel" aria-labelledby="privacy-tab">
+      <h1 class="my-4-5">Privacy settings</h1>
+      <p>Who can consult my data</p>
+      {% include '@oe-bcl/bcl-form/form.html.twig' with privacy.settings only %}
+    </div>
+    <div class="tab-pane fade" id="visibility" role="tabpanel" aria-labelledby="visibility-tab">
+      <h1 class="my-4-5">Visibility settings</h1>
+      <p class="mb-3">Select what information should be displayed to your profile.</p>
+      {% include '@oe-bcl/bcl-form/form.html.twig' with privacy.public_profile_content only %}
+    </div>
+    <div class="tab-pane fade" id="cancel" role="tabpanel" aria-labelledby="cancel-tab">
+      <h1 class="my-4-5">Are you sure you want to cancel your account?</h1>
+      <p class="mb-3">When cancelling your account</p>
+      {% include '@oe-bcl/bcl-form/form.html.twig' with cancel.form only %}
+    </div>
+  </div>
+{% endblock %}

package/templates/bcl-user/user-edit.html.twig

@@ -1,38 +0,0 @@
-{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
-
-{% block content %}
-  <h2 class="fw-bold mb-3 mb-md-5 d-inline-block">Edit my profile</h2>
-  <div class="mb-4 float-lg-end">
-    {% include '@oe-bcl/bcl-link/link.html.twig' with profile_back only %}
-  </div>
-  {% include "@oe-bcl/bcl-navigation/navigation.html.twig" with navigation only %}
-  <div class="tab-content">
-    <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
-      <div class="row">
-        <div class="offset-3 col-6 offset-lg-0 col-lg-2 mt-4 pt-3">
-          <img src="https://picsum.photos/seed/1002/400/400" class="img-fluid" alt="profile-image">
-          <div class="mt-3 d-grid">
-            {% include '@oe-bcl/bcl-form-input/form-input.html.twig' with image_upload_input only %}
-            {% include '@oe-bcl/bcl-button/button.html.twig' with remove_image_button only %}
-          </div>
-        </div>
-        <div class="col-12 col-lg-10">
-          <h3 class="fw-bold mt-4 mb-3 pt-3">Profile information</h3>
-          {% include '@oe-bcl/bcl-form/form.html.twig' with profile_information only %}
-        </div>
-      </div>
-    </div>
-    <div class="tab-pane fade" id="privacy" role="tabpanel" aria-labelledby="privacy-tab">
-      <h3 class="fw-bold pt-2 mt-4 mb-4">Privacy settings</h3>
-      {% include '@oe-bcl/bcl-form/form.html.twig' with privacy_settings only %}
-      <h3 class="fw-bold my-4">Public profile contents</h3>
-      <p class="mb-0">Select what information should be displayed to your profile.</p>
-      <p class="mb-4">Only people who have access to your data will be able to consult these informations.</p>
-      {% include '@oe-bcl/bcl-form/form.html.twig' with public_profile_content only %}
-      <h3 class="fw-bold my-4">Delete account</h3>
-      <p class="mb-0">Account deletion is permanent and cannot be undone.</p>
-      <p>If you delete your account, all content created by you (comments, articles, ...) will be anonymized.</p>
-      {% include '@oe-bcl/bcl-form/form.html.twig' with delete_account only %}
-    </div>
-  </div>
-{% endblock %}

package/templates/bcl-user/user-view.html.twig

@@ -1,86 +0,0 @@
-{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
-
-{% block content %}
-  <div class="my-3">
-    <h3 class="fw-bold mb-4">Personal information</h3>
-    <div class="row">
-      <div class="col-12 col-md-6">
-        <div class="row">
-          <div class="col-12 col-md-4">
-            <p class="mb-0">Gender:</p>
-          </div>
-          <div class="col-12 col-md-8">
-            <p>Male</p>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-12 col-md-4">
-            <p class="mb-0">Nationality:</p>
-          </div>
-          <div class="col-12 col-md-8">
-            <p>German</p>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-12 col-md-4">
-            <p class="mb-0">Date of birth:</p>
-          </div>
-          <div class="col-12 col-md-8">
-            <p>22/01/1972</p>
-          </div>
-        </div>
-      </div>
-      <div class="col-12 col-md-6">
-        <div class="row">
-          <div class="col-12 col-md-4">
-            <p class="mb-0">Country:</p>
-          </div>
-          <div class="col-12 col-md-8">
-            <p>Germany</p>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-12 col-md-4">
-            <p class="mb-0">City:</p>
-          </div>
-          <div class="col-12 col-md-8">
-            <p>Düsseldorf</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="my-3">
-    <h3 class="fw-bold mb-4">Professional information</h3>
-    <div class="row">
-      <div class="col-12 col-md-6">
-        <div class="row">
-          <div class="col-12 col-md-4">
-            <p class="mb-0">Organisation:</p>
-          </div>
-          <div class="col-12 col-md-8">
-            <p>DG Test</p>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-12 col-md-4">
-            <p class="mb-0">Position:</p>
-          </div>
-          <div class="col-12 col-md-8">
-            <p>Director</p>
-          </div>
-        </div>
-      </div>
-      <div class="col-12 col-md-6">
-        <div class="row">
-          <div class="col-12 col-md-4">
-            <p class="mb-0">Working languages:</p>
-          </div>
-          <div class="col-12 col-md-8">
-            <p>English, German</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-{% endblock %}