@openeuropa/bcl-theme-default 1.12.0 → 1.13.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -23,9 +23,9 @@
     "@ecl/resources-ec-logo": "3.13.0",
     "@ecl/resources-eu-logo": "3.13.0",
     "@ecl/resources-flag-icons": "3.13.0",
-    "@openeuropa/bcl-bootstrap": "^1.12.0",
-    "@openeuropa/bcl-builder": "^1.12.0",
-    "@openeuropa/bcl-twig-templates": "^1.12.0",
+    "@openeuropa/bcl-bootstrap": "^1.13.0",
+    "@openeuropa/bcl-builder": "^1.13.0",
+    "@openeuropa/bcl-twig-templates": "^1.13.0",
     "@rollup/plugin-replace": "6.0.3",
     "copyfiles": "2.4.1",
     "cross-env": "10.1.0",
@@ -51,5 +51,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "6d1138cf7e70db692c0aae7a598977de7004204e"
+  "gitHead": "34e56d7f9c42b8a331a6fdd483958fa17ecaf8ca"
 }

package/src/icons/icons.js

@@ -129,6 +129,7 @@ module.exports = [
   "youtube.svg",
   "twitch.svg",
   "twitter.svg",
+  "bluesky.svg",
   "facebook.svg",
   "instagram.svg",
   "slack.svg",

package/src/scss/_banners.scss

@@ -11,10 +11,16 @@
   }
 
   p {
+    margin-bottom: 0;
     font-size: 1.125rem;
     font-weight: 500;
   }
 
+  p + .bcl-banner__link {
+    display: inline-block;
+    margin-top: map.get($spacers, 4);
+  }
+
   &.shade {
     color: $dark;
   }

package/templates/{bcl-banner → bcl-twig-templates/templates/bcl-banner}/banner.html.twig

@@ -7,6 +7,7 @@
   - link: (link object) (default: {})
   - image: (string) <img> tag
   - copyright: (string) (default: '')
+  - copyright_label: (string) (default: '')
   - shade: (boolean) (default: false)
   - hero: (boolean) (default: false)
   - full_width: (boolean) (default: false)
@@ -23,6 +24,7 @@
 {% set _link = link|default({}) %}
 {% set _image = image|default('') %}
 {% set _copyright = copyright|default('') %}
+{% set _copyright_label = copyright_label|default('') %}
 {% set _shade = shade ?? false %}
 {% set _hero = hero ?? false %}
 {% set _full_width = full_width ?? false %}
@@ -93,6 +95,11 @@
   </div>{# -#}
 </div>
   {%- if _copyright is not empty -%}
-    <div class="bcl-copyright">{{- _copyright -}}</div>
+    <div class="bcl-copyright">
+      {%- if _copyright_label is not empty -%}
+        <span class="visually-hidden">{{- _copyright_label }} </span>
+      {%- endif -%}
+      {{- _copyright -}}
+    </div>
   {%- endif -%}
 {#--#}

package/templates/{bcl-card → bcl-twig-templates/templates/bcl-card}/card.html.twig

@@ -23,6 +23,7 @@
       position (string)
     }
   - image_copyright (string) (default: '')
+  - image_copyright_label (string) (default: '')
   - date (date block object) (default: {})
   - variant (string) (default: '')
   - horizontal (boolean) (default: false)
@@ -59,6 +60,26 @@
 {% set _content = content|default('') %}
 {% set _image = image|default({}) %}
 {% set _image_copyright = image_copyright|default('') %}
+{% set _image_copyright_label = image_copyright_label|default('') %}
+{% macro image_figure(image, img_class, copyright, copyright_label) %}
+  <figure class="m-0 bcl-card__image-wrapper">
+    <img
+      src="{{ image.path }}"
+      alt="{{ image.alt }}"
+      class="{{ img_class }}"
+    >
+    {%- if copyright is not empty %}
+      <figcaption class="bcl-card__image-footer">
+        <div class="bcl-copyright">
+          {%- if copyright_label is not empty -%}
+            <span class="visually-hidden">{{- copyright_label }} </span>
+          {%- endif -%}
+          {{- copyright -}}
+        </div>
+      </figcaption>
+    {%- endif %}
+  </figure>
+{% endmacro %}
 {% set _date = date|default({}) %}
 {% set _variant = variant|default('') %}
 {% set _horizontal = horizontal ?? false %}
@@ -157,16 +178,7 @@
       {%- include '@oe-bcl/bcl-date-block/date-block.html.twig' with _date only %}
     {%- endblock %}
   {%- elseif _image is not empty and _image.position != "bottom" -%}
-    <img
-      src="{{ _image.path }}"
-      alt="{{ _image.alt }}"
-      class="{{ _img_class }}"
-    >
-    {%- if _image_copyright is not empty %}
-      <div class="bcl-card__image-footer">
-        <div class="bcl-copyright">{{- _image_copyright -}}</div>
-      </div>
-    {%- endif %}
+    {{- _self.image_figure(_image, _img_class, _image_copyright, _image_copyright_label) }}
   {%- endif %}
 {% if _horizontal and (_image is not empty or _date is not empty) -%}
   </div>
@@ -261,16 +273,7 @@
     {%- if _horizontal -%}
     <div class="col-4">
     {%- endif -%}
-    <img
-      src="{{ _image.path }}"
-      alt="{{ _image.alt }}"
-      class="{{ _img_class }}"
-    >
-    {%- if _image_copyright is not empty %}
-      <div class="bcl-card__image-footer">
-        <div class="bcl-copyright">{{- _image_copyright -}}</div>
-      </div>
-    {%- endif %}
+    {{- _self.image_figure(_image, _img_class, _image_copyright, _image_copyright_label) }}
     {%- if _horizontal -%}
     </div>
     {%- endif %}

package/templates/{bcl-carousel → bcl-twig-templates/templates/bcl-carousel}/carousel.html.twig

@@ -14,6 +14,7 @@
       caption_classes (string)
       caption_title (string)
       copyright (string)
+      copyright_label (string)
       interval (integer) (default: 0)
     }
   ],
@@ -119,36 +120,43 @@
     {% endif %}
     >
     {%- if _item.image is defined and _item.image is not empty %}
-      {{- _item.image }}
-    {%- endif %}
-    {%- if (_item.caption is defined and _item.caption is not empty) or (_item.link is defined and _item.link is not empty) or (_item.caption_title is defined and _item.caption_title is not empty) %}
-      {%- set _caption_classes = 'carousel-caption' %}
-      {%- if _item.caption is not empty and _item.link is empty %}
-        {%- set _caption_classes = _caption_classes ~ ' d-none d-md-block' %}
-      {%- endif -%}
-      <div
-        class="{{ _caption_classes }}"
-      >
-        {%- if _item.caption is not empty or _item.caption_title is not empty %}
-          {%- if _item.caption_classes is defined and _item.caption_classes is not empty -%}
-            <div class="{{ _item.caption_classes }}">
-          {%- endif %}
-          {%- if _item.caption_title is not empty -%}
-            <div class="fs-5">{{ _item.caption_title }}</div>
-          {%- endif %}
-            {{- _item.caption -}}
-          {% if _item.caption_classes is defined and _item.caption_classes is not empty -%}
-            </div>
-          {%- endif %}
-        {%- endif %}
-        {%- if _item.link is defined and _item.link is not empty %}
-          {%- include '@oe-bcl/bcl-link/link.html.twig' with _item.link only %}
+      <figure class="m-0 h-100">
+        {{- _item.image }}
+        {%- if (_item.caption is defined and _item.caption is not empty) or (_item.link is defined and _item.link is not empty) or (_item.caption_title is defined and _item.caption_title is not empty) %}
+          {%- set _caption_classes = 'carousel-caption' %}
+          {%- if _item.caption is not empty and _item.link is empty %}
+            {%- set _caption_classes = _caption_classes ~ ' d-none d-md-block' %}
+          {%- endif -%}
+          <div
+            class="{{ _caption_classes }}"
+          >
+            {%- if _item.caption is not empty or _item.caption_title is not empty %}
+              {%- if _item.caption_classes is defined and _item.caption_classes is not empty -%}
+                <div class="{{ _item.caption_classes }}">
+              {%- endif %}
+              {%- if _item.caption_title is not empty -%}
+                <div class="fs-5">{{ _item.caption_title }}</div>
+              {%- endif %}
+                {{- _item.caption -}}
+              {% if _item.caption_classes is defined and _item.caption_classes is not empty -%}
+                </div>
+              {%- endif %}
+            {%- endif %}
+            {%- if _item.link is defined and _item.link is not empty %}
+              {%- include '@oe-bcl/bcl-link/link.html.twig' with _item.link only %}
+            {%- endif -%}
+          </div>
         {%- endif -%}
-      </div>
-    {%- endif -%}
-    {%- if _item.copyright is defined and _item.copyright is not empty -%}
-      <div class="bcl-copyright">{{- _item.copyright -}}</div>
-    {%- endif -%}
+        {%- if _item.copyright is defined and _item.copyright is not empty -%}
+          <figcaption class="bcl-copyright">
+            {%- if _item.copyright_label is defined and _item.copyright_label is not empty -%}
+              <span class="visually-hidden">{{- _item.copyright_label }} </span>
+            {%- endif -%}
+            {{- _item.copyright -}}
+          </figcaption>
+        {%- endif -%}
+      </figure>
+    {%- endif %}
     </div>
     {%- endfor %}
   {%- endif -%}

package/templates/{bcl-content-banner → bcl-twig-templates/templates/bcl-content-banner}/content-banner.html.twig

@@ -11,6 +11,7 @@
       options: ['md', 'lg', 'xl']
     - date: (date block object) (default: {})
     - copyright: (string) (default: '')
+    - copyright_label: (string) (default: '')
 
     Card inheritance
       - badges (badge[]) (default: [])
@@ -45,6 +46,7 @@
 {% set _action_bar = action_bar|default('') %}
 {% set _date = date|default({}) %}
 {% set _copyright = copyright|default('') %}
+{% set _copyright_label = copyright_label|default('') %}
 {%- set _action_bar_content -%}
   {%- block action_bar -%}
     {{ _action_bar }}
@@ -120,6 +122,7 @@
   extra_classes_header: 'bg-transparent pt-0 pb-0 border-0',
   extra_classes_body: _body_classes,
   image_copyright: _copyright,
+  image_copyright_label: _copyright_label,
   attributes: create_attribute().addClass(['bg-transparent', 'border-0']),
 } %}
 

package/templates/{bcl-featured-media → bcl-twig-templates/templates/bcl-featured-media}/featured-media.html.twig

@@ -10,6 +10,7 @@
   - poster_image: (string) (default: '')
   - content: (string) (default: '')
   - copyright: (string) (default: '')
+  - copyright_label: (string) (default: '')
   - wrapper_classes: (default: '')
   - force_wrapper (boolean) (default: false) - always render wrapper element
   - content_classes: (string) (default: '')
@@ -50,6 +51,7 @@
 {% set _poster_image = poster_image|default('') %}
 {% set _content = content|default('') %}
 {% set _copyright = copyright|default('') %}
+{% set _copyright_label = copyright_label|default('') %}
 {% set _wrapper_classes = wrapper_classes|default('') %}
 {% set _content_classes = content_classes|default('') %}
 {% set _read_more = read_more|default({}) %}
@@ -149,17 +151,19 @@
   {{- _image }}
 {%- endif %}
 
-{%- if _copyright is not empty -%}
-  <div class="bcl-copyright">{{- _copyright -}}</div>
-{%- endif -%}
-
-{%- if _content is not empty -%}
-  <figcaption
-    {% if _content_classes is not empty %}
-    class="{{ _content_classes }}"
-    {% endif %}
-  >
-    {{- _content -}}
+{%- if _copyright is not empty or _content is not empty -%}
+  <figcaption>
+    {%- if _content is not empty -%}
+      <div{% if _content_classes is not empty %} class="{{ _content_classes }}"{% endif %}>{{- _content -}}</div>
+    {%- endif -%}
+    {%- if _copyright is not empty -%}
+      <div class="bcl-copyright">
+        {%- if _copyright_label is not empty -%}
+          <span class="visually-hidden">{{- _copyright_label }} </span>
+        {%- endif -%}
+        {{- _copyright -}}
+      </div>
+    {%- endif -%}
   </figcaption>
 {%- endif -%}
 </figure>

package/templates/{bcl-gallery → bcl-twig-templates/templates/bcl-gallery}/gallery.html.twig

@@ -18,6 +18,7 @@ Parameters:
         caption (string)
         caption_title (string)
         copyright (string)
+        copyright_label (string)
       }
     ]
   - icon_path (string) (default: '')