@openeuropa/bcl-theme-default 0.21.0 → 0.24.0

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

@@ -2,33 +2,38 @@
 
 {#
 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
-  - 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
+  - id: (integer) (default: random(1000))
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - toggle_collapsed: (string) (default: '')
+  - toggle_expanded: (string) (default: '')
+  - items (array) (default: []): [
+    {
+      id: (string) (default: '')
+      label: (string) (default: '')
+      title: (string) (default: '')
+      content: (block) (default: '')
+    }
+  ]
+  - hide_from (integer) (default: items.length) Item index after which to start hiding timeline items
+  - hide_to (integer) (default: items.length) Item index after which to resume displaying timeline items
+  - 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 _items = items|default([]) %}
-{% set _icon_path = icon_path|default('') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _toggle_collapsed = toggle_collapsed|default('') %}
 {% set _toggle_expanded = toggle_expanded|default('') %}
+{% set _items = items|default([]) %}
 {% set _hide_from = hide.from|default(items|length) %}
 {% set _hide_to = hide.to|default(items|length) %}
+{% set _icon_path = icon_path|default('') %}
+
 {% set _toggler = false %}
 
 {% if attributes is empty %}
@@ -57,10 +62,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 #}
@@ -76,9 +83,9 @@ Parameters:
         {% if _item.id is defined and _item.id is not empty %}
           id="{{ _item.id }}"
         {% endif %}>
-          <h5>{{ _item.label }}</h5>
+          <p class="fs-5 mb-1 fw-medium">{{ _item.label }}</p>
           {% if _item.title is defined and _item.title is not empty %}
-          <h6>{{ _item.title }}</h6>
+          <p class="fs-6 mb-1 fw-medium">{{ _item.title }}</p>
           {% endif %}
           {% if _item.content is defined and _item.content is not empty %}
           <div>{{ _item.content }}</div>

package/templates/bcl-toast/toasts.html.twig

@@ -2,23 +2,23 @@
 
 {#
   Parameters:
-  - "with_wrapper" (boolean) (default: false)
-  - "wrapper_classes" (string) (default: '')
-  - "wrapper_aria_live" (string) (default: '')
-  - "with_container" (boolean) (default: false)
-  - "container_classes" (string) (default: '')
-  - "toasts" (array of objects) format: [
+  - with_wrapper (boolean) (default: false)
+  - wrapper_classes (string) (default: '')
+  - wrapper_aria_live (string) (default: '')
+  - with_container (boolean) (default: false)
+  - container_classes (string) (default: '')
+  - toasts (array of objects) format: [
     {
-      - "body" (string) (default: '')
-      - "role" (string) (default: 'alert')
-      - "with_close" (boolean) (default: true)
-      - "autohide" (boolean) (default: false)
-      - "with_body_wrapper" (boolean) (default: false)
-      - "body_wrapper_classes" (string) (default: '')
-      - "attributes" (drupal object) (default: undefined)
-    },
-    ...
+      - body (string) (default: '')
+      - role (string) (default: 'alert')
+      - with_close (boolean) (default: true)
+      - autohide (boolean) (default: false)
+      - with_body_wrapper (boolean) (default: false)
+      - body_wrapper_classes (string) (default: '')
+      - attributes (drupal object) (default: undefined)
+    }
   ]
+  - attributes (drupal attrs)
 #}
 
 {% set _toasts = toasts|default([]) %}

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,137 @@
+{% 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">
+        {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+          title: 'Personal information',
+          title_tag: 'h2',
+          attributes: create_attribute().addClass(['mb-4']),
+        } only %}
+        <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">
+        {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+          title: 'Professional information',
+          title_tag: 'h2',
+          attributes: create_attribute().addClass(['mb-4']),
+        } only %}
+        <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 %}