@openeuropa/bcl-theme-default 0.22.0 → 0.25.0

package/src/scss/base/_colors.scss

@@ -11,8 +11,6 @@ $dark: #212529;
 
 $text-muted: #495057;
 
-$link-visited: #6b22b5;
-
 // Color variants scales
 
 // Tables

package/src/scss/base/_layout.scss

@@ -0,0 +1,42 @@
+@include media-breakpoint-up(lg) {
+  .bcl-sidebar h2 {
+    font-size: $h4-font-size;
+  }
+}
+
+.bcl-card-start-col {
+  flex-basis: $card-start-col-size;
+  padding: 0;
+  &.bcl-size-small {
+    flex-basis: $card-start-col-small-size;
+  }
+  &.bcl-size-large {
+    flex-basis: $card-start-col-large-size;
+  }
+  &.bcl-size-extra-large {
+    flex-basis: $card-start-col-extra-large-size;
+  }
+}
+
+.row {
+  .bcl-card-start-col {
+    margin-left: calc(var(--#{$variable-prefix}gutter-x) * 0.5);
+    margin-right: calc(var(--#{$variable-prefix}gutter-x) * 0.5);
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .bcl-content-banner {
+    .bcl-card-start-col {
+      margin: 0 auto;
+      padding: 0 calc(var(--#{$variable-prefix}gutter-x) * 0.5);
+    }
+  }
+}
+@include media-breakpoint-down(lg) {
+  .bcl-content-banner {
+    .bcl-card-start-col.bcl-size-extra-large {
+      margin: 0 auto;
+    }
+  }
+}

package/src/scss/base/_mixins.scss

@@ -0,0 +1,13 @@
+@mixin horizontal-slider {
+  position: relative;
+  flex-wrap: nowrap;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}

package/src/scss/base/_utilities.scss

@@ -23,8 +23,8 @@ $utilities: map-merge(
             map-merge(
               map-get(map-get($utilities, "max-width"), "values"),
               (
-                date: 7.5rem,
-                col-date: calc(7.5rem + var(--#{$variable-prefix}gutter-x)),
+                date: 10rem,
+                col-date: calc(10rem + var(--#{$variable-prefix}gutter-x)),
                 "listing-img": 10rem,
               )
             ),
@@ -46,6 +46,20 @@ $utilities: map-merge(
           responsive: true,
         )
       ),
+    "border-top":
+      map-merge(
+        map-get($utilities, "border-top"),
+        (
+          responsive: true,
+        )
+      ),
+    "border-bottom":
+      map-merge(
+        map-get($utilities, "border-bottom"),
+        (
+          responsive: true,
+        )
+      ),
     // Create medium font weight class
     "font-weight":
       map-merge(
@@ -67,26 +81,32 @@ $utilities: map-merge(
 a {
   text-underline-offset: 2px;
 
-  &:not(.text-underline-hover),
-  &:not(.standalone) {
+  &:not(.text-underline-hover):not(.standalone) {
     text-decoration-color: rgba($primary, 0.3);
+
+    &:visited {
+      text-decoration-color: rgba($purple, 0.3);
+    }
+
     &:hover {
       text-decoration-color: currentColor;
+
+      &:visited {
+        text-decoration-color: $purple;
+      }
     }
   }
 
   &.standalone,
   &.text-underline-hover {
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
+    text-decoration-color: transparent;
 
-  &:visited {
-    color: $link-visited;
     &:hover {
-      color: shade-color($link-visited, 20%);
+      text-decoration-color: currentColor;
+
+      &:visited {
+        text-decoration-color: $purple;
+      }
     }
   }
 }
@@ -117,6 +137,10 @@ svg {
   background-color: $gray-400;
 }
 
+.border-gray-300 {
+  border-color: $gray-300;
+}
+
 .grid-3-9 {
   grid-template-columns: 25% 75%;
   grid-gap: map-get($gutters, "2-5");

package/src/scss/base/_variables.scss

@@ -10,6 +10,8 @@ $yellow-50: tint-color($yellow, 90%);
 $green-50: tint-color($green, 90%);
 $cyan-50: tint-color($cyan, 90%);
 
+$zindex-dropdown: 1055;
+
 // Override theme-color "light"
 $theme-colors: map-merge(
   $theme-colors,
@@ -75,6 +77,8 @@ $accordion-border-color: $gray-300;
 $badge-font-weight: $font-weight-normal; // 400
 $badge-font-size: 1.125rem; // 18px
 $badge-font-size-desktop: 1rem; // 16px
+$badge-active-box-shadow: $btn-active-box-shadow;
+$badge-focus-width: $btn-focus-width;
 
 // banners
 $banner-content-border-color: $primary;
@@ -92,3 +96,8 @@ $navbar-nav-link-padding-x: 0.75rem;
 // Circular progress bar
 $circular-progress-border-color: $gray-400;
 $circular-progress-border-color-fill: $primary;
+
+$card-start-col-extra-large-size: 350px;
+$card-start-col-large-size: 255px;
+$card-start-col-size: 160px;
+$card-start-col-small-size: 120px;

package/src/scss/oe-bcl-default.scss

@@ -46,15 +46,22 @@
 
 // Helpers
 @import "@openeuropa/bcl-bootstrap/scss/helpers";
+@import "@openeuropa/bcl-theme-default/src/scss/base/layout";
 @import "@openeuropa/bcl-theme-default/src/scss/base/utilities";
 
 // Utilities
 @import "@openeuropa/bcl-bootstrap/scss/utilities/api";
 
+// BCL mixins
+@import "@openeuropa/bcl-theme-default/src/scss/base/mixins";
+
 // Custom styles
+@import "@openeuropa/bcl-theme-default/src/scss/alert";
 @import "@openeuropa/bcl-theme-default/src/scss/button";
+@import "@openeuropa/bcl-theme-default/src/scss/card";
 @import "@openeuropa/bcl-theme-default/src/scss/collapse";
 @import "@openeuropa/bcl-theme-default/src/scss/circular-progress-bar";
+@import "@openeuropa/bcl-theme-default/src/scss/description_list";
 @import "@openeuropa/bcl-theme-default/src/scss/reset";
 @import "@openeuropa/bcl-theme-default/src/scss/header";
 @import "@openeuropa/bcl-theme-default/src/scss/footer";

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

@@ -2,21 +2,28 @@
 
 {#
   Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes: (drupal attrs)
   - id (int) (default: random(1000))
-  - flush (boolean) (default: false) flush variant of the accordion
+  - flush (boolean) (default: false)
   - items (array) (default: []): format: [
       {
         title: (string),
         title_tag: (string),
         content: (block),
-        stay_open (boolean) (default: false) stay open after another selected
+        stay_open (boolean) (default: false)
       },
-      ...
     ]
-  - open_item_id (int) (default: 0) index value of the item to open (starting from 1),
-    all closed by default (0)
+  - open_item_id (int) (default: 0)
+  - 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 _id = id|default(random(1000)) %}
 {% set _flush = flush|default(false) %}
 {% set _items = items|default([]) %}
@@ -36,6 +43,15 @@
 <div
   {{ attributes }}
 >
+{%- if _title is not empty -%}
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes,
+  } only %}
+{%- endif -%}
+
 {% for _item in _items %}
   {% set _open_item = _open_item_id == loop.index %}
   {% set _button_classes = ['accordion-button'] %}

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

@@ -8,15 +8,17 @@
   - animated_dismiss (boolean) (default: true)
   - icon_path (string) (default: '')
   - icon_name (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
 {% set _message = message|default('') %}
-{% set _variant = variant|default('primary') %}
 {% set _heading = heading|default('') %}
-{% set _icon_path = icon_path|default('') %}
+{% set _variant = variant|default('primary') %}
 {% set _dismissible = dismissible ?? true %}
 {% set _animated_dismiss = animated_dismiss ?? true %}
+{% set _icon_path = icon_path|default('') %}
 {% set _icon_name = icon_name|default('') %}
+
 {% set _classes = ['alert', 'alert-' ~ _variant|e('html_attr'), 'd-flex', 'align-items-center'] %}
 {% set _icon_names = {
     primary: "info-circle-fill",
@@ -62,7 +64,7 @@
 {% endif %}
   <div class="alert-content flex-grow-1">
   {%- if _heading is not empty -%}
-    <h4 class="alert-heading">{{ _heading }}</h4>
+    <div class="alert-heading h4">{{ _heading }}</div>
   {%- endif -%}
   {%- if _message is not empty -%}
     {{- _message -}}

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

@@ -10,18 +10,20 @@
   - rounded_pill (boolean) (default: false)
   - outline (boolean) (default: false)
   - icon_path (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
-{% set _rounded_pill = rounded_pill|default(false) %}
-{% set _outline = outline|default(false) %}
-{% set _background = background|default('primary') %}
 {% set _label = label|default('') %}
-{% set _classes = ['badge'] %}
+{% set _background = background|default('primary') %}
 {% set _url = url|default('') %}
-{% set _icon_path = icon_path|default('') %}
 {% set _title = title|default(_label) %}
 {% set _dismissible = dismissible|default(false) %}
 {% set _assistive_text = assistive_text|default('') %}
+{% set _rounded_pill = rounded_pill|default(false) %}
+{% set _outline = outline|default(false) %}
+{% set _icon_path = icon_path|default('') %}
+
+{% set _classes = ['badge'] %}
 
 {% if _rounded_pill %}
   {% set _classes = _classes|merge(['rounded-pill']) %}
@@ -33,22 +35,25 @@
   {% set _classes = _classes|merge([ 'bg-' ~ _background]) %}
 {% endif %}
 
-{% if _background in ['light', 'warning'] %}
-  {% set _classes = _classes|merge(['text-dark']) %}
-{% endif %}
-
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
+{%- if _url is not empty -%}
+  {% set attributes = attributes.setAttribute('title', _title).setAttribute('href', _url) %}
+{%- endif -%}
+
 {% set attributes = attributes.addClass(_classes) %}
 
 {%- if _url is not empty -%}
-<a href="{{ _url }}" title="{{ _title }}">
+<a
+  {{ attributes }}
+>
+{%- else -%}
+<span
+  {{ attributes }}
+>
 {%- endif -%}
-  <span
-    {{ attributes }}
-  >
   {%- if _assistive_text is not empty -%}
     <span class="visually-hidden">
       {{- _assistive_text -}}
@@ -63,9 +68,10 @@
       } only %}
     </span>
   {%- endif -%}
-  </span>
 {%- if _url is not empty -%}
 </a>
+{%- else -%}
+</span>
 {%- endif -%}
 
 {% endspaceless %}

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

@@ -1,19 +1,23 @@
 {% spaceless %}
 
 {# Parameters:
-  - title: (string) (default: "")
-  - title_tag: (string) (default: "div")
-  - description: (string) (default: "")
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'div')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - description: (string) (default: '')
   - link: (link object) (default: {}): predefined structure for Link component
   - image: (string) <img> tag
   - shade: (boolean) (default: false)
   - hero: (boolean) (default: false)
   - full_width: (boolean) (default: false)
-  - content_classes: (string) (default: "")
+  - content_classes: (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('div') %}
+{% set _title_link = title_link|default({}) %}
 {% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _description = description|default('') %}
 {% set _link = link|default({}) %}
@@ -23,7 +27,6 @@
 {% set _full_width = full_width|default(false) %}
 {% set _content_classes = content_classes|default('') %}
 
-
 {% set _content_class = 'bcl-banner__content' %}
 {% if _content_classes is not empty %}
   {% set _content_class = _content_class ~ " " ~ _content_classes %}
@@ -60,6 +63,7 @@
         {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
           title: _title,
           title_tag: _title_tag,
+          title_link: _title_link,
           attributes: _title_attributes,
         } only %}
       {% endif %}

package/templates/bcl-base-templates/content-type.html.twig

@@ -16,6 +16,7 @@
   - header
   - footer
   - content
+  - content_row
   - sidebar
   - banner
   - feedback
@@ -37,6 +38,7 @@
   {% set _col_classes = {
     left: [
       'col-12',
+      'bcl-sidebar',
     ],
     right: [
       'col-12',
@@ -92,6 +94,9 @@
 
   <div class="container mt-md-4-75 mt-4">
     <div class="row">
+      {% block content_row %}
+        {{ content_row }}
+      {% endblock %}
     {% if _with_sidebar %}
       <div class="{{ _col_classes.left|join(' ') }}">
         {% block sidebar %}{% endblock %}
@@ -116,6 +121,9 @@
       {% block related %}
         {{ related }}
       {% endblock %}
+      {% block share %}
+        {{ share }}
+      {% endblock %}
     </div>
   </div>
 </main>
@@ -123,9 +131,6 @@
 {% block feedback %}
   {{ feedback }}
 {% endblock %}
-{% block share %}
-  {{ share }}
-{% endblock %}
 
 {% if _with_footer %}
   {% include '@oe-bcl/bcl-footer/footer.html.twig' with footer only %}

package/templates/bcl-base-templates/listing-page.html.twig

@@ -1,29 +1,41 @@
 {#
   Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - listing (object) (default: {})
   - pagination (object) (default: {})
   - sidebar (object) (default: '')
-  - page_title (string) (default: '')
 #}
 
 {% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
 
+{% 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 _listing = listing|default({}) %}
 {% set _pagination = pagination|default({}) %}
 {% set _search = search|default({}) %}
 {% set _sidebar = sidebar|default({}) %}
-{% set _page_title = page_title|default({}) %}
+
+{% set _title_attributes = _title_attributes ?: create_attribute() %}
 
 {% block content_top %}
+{% if filter_button %}
   {% include '@oe-bcl/bcl-button/button.html.twig' with filter_button only %}
+{% endif %}
   <div class="row">
     <div class="col-md-6 col-lg-8 align-self-center">
-      <h4 class="mb-0">
-        <span class="text-capitalize">
-          {{- _page_title -}}
-        </span>
-        ({{ listing.items.length }})
-      </h4>
+      {% if _title is not empty %}
+        {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+          title: _title ~ ' (' ~ listing.items.length ~ ')',
+          title_tag: _title_tag,
+          title_link: _title_link,
+          attributes: _title_attributes.addClass(['mb-0', 'text-capitalize']),
+        } only %}
+      {% endif %}
     </div>
     {% if badges is not empty and badges is iterable %}
       <div class="col-md-12 order-md-2 mt-3">
@@ -47,7 +59,7 @@
 
 {% block content %}
   {% if _listing is not empty %}
-    {% include '@oe-bcl/bcl-listing/listing.html.twig' with  _listing %}
+    {% include '@oe-bcl/bcl-listing/listing.html.twig' with  _listing only %}
   {% endif %}
 {% endblock %}
 

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

@@ -1,17 +1,27 @@
 {% spaceless %}
 
 {# Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes: (drupal attrs)
   - quote (string) (default: '')
   - attribution (string) (default: '')
   - cite (string) (default: '')
   - alignment (string) (default: 'left')
-    - options ["left", "center", "end"]
+    - options ['left', 'center', 'end']
+  - 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 _quote = quote|default('') %}
 {% set _attribution = attribution|default('') %}
 {% set _cite = cite|default('') %}
 {% set _alignment = alignment|default('left') %}
+
 {% set _classes = [
   'text-' ~ _alignment,
   "bg-lighter",
@@ -35,6 +45,15 @@
 
 {% set attributes = attributes.addClass(_classes) %}
 
+{%- if _title is not empty -%}
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes,
+  } only %}
+{%- endif -%}
+
 <figure
   {{ attributes }}
 >

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

@@ -1,7 +1,9 @@
 {% spaceless %}
 
 {# Parameters:
-  - links (array of objects of type link)
+  - links (array of objects of type link) (default: [])
+  - icon_path (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
 {% set _classes = 'breadcrumb' %}

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

@@ -5,7 +5,7 @@
   - label (string) (default: '')
   - variant (string) (default: 'primary')
   - size (string) (default: 'md')
-    - options ["sm", "md", "lg"]
+    - options ['sm', 'md', 'lg']
   - type (string) (default: 'button')
   - outline (boolean) (default: false)
   - disabled (boolean) (default: false)
@@ -14,12 +14,13 @@
   - id (string) (default: '')
   - icon (icon object) (default: {}): predefined structure for Icon component
   - icon_position (string) (default: after)
-    - options ["after", "before"]
+    - options ['after', 'before']
   - icon_spacing (string) (default: '')
-    - options ["sm", "md", "lg"]
-  - clean_class (boolean) (default: false)
+    - options ['sm', 'md', 'lg']
   - spinner (spinner object) (default: {})
   - show_spinner (boolean) (default: false)
+  - clean_class (boolean) (default: false)
+  - attributes (drupal attrs)
 #}
 
 {% set _label = label|default('') %}
@@ -37,6 +38,7 @@
 {% set _show_spinner = show_spinner|default(false) %}
 {% set _spinner = spinner|default({}) %}
 {% set _clean_class = clean_class|default(false) %}
+
 {% set _classes = [] %}
 {% if _clean_class == false %}
   {% set _classes = _classes|merge(['btn', 'btn-' ~ (_outline ? 'outline-' : '') ~ _variant|e('html_attr')]) %}

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

@@ -3,11 +3,12 @@
 {# Parameters:
   - vertical (boolean) (default: false)
   - size (string) (default: 'md')
-    - options ["sm", "md", "lg"]
-  - toolbar (boolean) (default: 'false')
+    - options ['sm', 'md', 'lg']
   - aria_label (string) (default: '')
+  - toolbar (boolean) (default: 'false')
   - toolbar_aria_label (string) (default: '')
-  - items (array of arrays with objects of type button or form-input (input key mandatory when the object is a form-input))
+  - items (array of arrays with objects of type button or form-input (input key mandatory when the object is a form-input)) (default: [])
+  - attributes (drupal attrs)
 #}
 
 {% set _vertical = vertical|default(false) %}