@openeuropa/bcl-theme-default 0.11.0 → 0.15.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "0.11.0",
+  "version": "0.15.0",
   "description": "OE - BCL theme default",
   "scripts": {
     "build": "npm-run-all build:*",
@@ -13,9 +13,9 @@
     "prepublish": "npm run build"
   },
   "devDependencies": {
-    "@openeuropa/bcl-bootstrap": "^0.11.0",
-    "@openeuropa/bcl-builder": "^0.11.0",
-    "@openeuropa/bcl-twig-templates": "^0.11.0",
+    "@openeuropa/bcl-bootstrap": "^0.15.0",
+    "@openeuropa/bcl-builder": "^0.15.0",
+    "@openeuropa/bcl-twig-templates": "^0.15.0",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "glob": "7.2.0",
@@ -39,5 +39,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "1c86da7d3aeb5e36ed8bf00ae38f3540285cfccb"
+  "gitHead": "97a9f0822ee0d4d800e40aa17bf87dc698c5906c"
 }

package/src/scss/_badge.scss

@@ -2,7 +2,8 @@
 .badge {
   font-size: $badge-font-size;
   font-weight: $badge-font-weight;
-  vertical-align: 15%;
+  display: inline-flex;
+  align-items: center;
   @include media-breakpoint-up(md) {
     font-size: $badge-font-size-desktop;
   }

package/src/scss/_banners.scss

@@ -30,7 +30,7 @@
 
 .bcl-banner__content {
   padding: map-get($spacers, "4-75") map-get($spacers, "4-5");
-  border-color: $banner-content-border-color !important;
+  border-color: $banner-content-border-color;
 }
 
 .bcl-banner__image {
@@ -91,13 +91,15 @@
         border-left: 4px solid transparent;
       }
     }
+  }
 
-    &.full-width {
-      left: 50%;
-      width: 100vw;
-      margin-left: -50vw;
-      border-radius: 0;
-    }
+  .bcl-banner.full-width,
+  .bcl-content-banner {
+    left: 50%;
+    width: 100vw;
+    margin-left: -50vw;
+    border-radius: 0;
+    position: relative;
   }
 
   .bcl-banner__content {

package/src/scss/_collapse.scss

@@ -0,0 +1,8 @@
+[data-bs-toggle="collapse"] {
+  &[aria-expanded="false"] .text-collapsed {
+    display: none;
+  }
+  &[aria-expanded="true"] .text-not-collapsed {
+    display: none;
+  }
+}

package/src/scss/_header.scss

@@ -23,6 +23,7 @@ $header-link-active-background: #003776 !default;
 
 .bcl-header__project {
   padding-top: map-get($spacers, 3);
+  min-height: map-get($spacers, 5);
 }
 
 .ec__header .bcl-header__project,

package/src/scss/_inpage-navigation.scss

@@ -0,0 +1,19 @@
+#bcl-inpage-navigation {
+  top: map-get($spacers, 3); // needed for position-sticky
+  background-color: $gray-100;
+
+  h5 {
+    font-weight: bold;
+    margin-bottom: 0;
+    padding: map-get($spacers, "3-5");
+    border-bottom: 1px solid $gray-300;
+  }
+  ul {
+    padding: map-get($spacers, "2-5");
+
+    .nav-link {
+      padding: map-get($spacers, 2);
+      margin-bottom: map-get($spacers, 2);
+    }
+  }
+}

package/src/scss/_tabs.scss

@@ -23,6 +23,9 @@
       }
     }
   }
+  &.bg-gray {
+    background: $gray-200;
+  }
 }
 
 @include media-breakpoint-down(md) {

package/src/scss/_timeline.scss

@@ -0,0 +1,78 @@
+/* stylelint-disable declaration-no-important */
+// timeline
+.bcl-timeline {
+  list-style-type: none;
+  position: relative;
+  padding: 0;
+  margin: 0;
+  max-width: 648px;
+
+  > li {
+    position: relative;
+    padding-bottom: map-get($spacers, "4-5");
+    padding-left: calc(22px + map-get($spacers, 3));
+
+    &::before {
+      content: "";
+      background: $white;
+      display: inline-block;
+      position: absolute;
+      border-radius: 50%;
+      border: 2px solid $primary;
+      left: 0;
+      width: 22px;
+      height: 22px;
+    }
+
+    &::after {
+      content: "";
+      background: $gray-300;
+      display: inline-block;
+      position: absolute;
+      left: 10px;
+      top: 22px;
+      width: 2px;
+      height: 100%;
+    }
+
+    &.collapsing {
+      transition: none !important;
+    }
+
+    &.bcl-timeline__item--toggle {
+      &::before {
+        border-color: $gray-600;
+        top: 7px;
+      }
+      &::after {
+        top: 30px;
+        background: repeating-linear-gradient(
+          to bottom,
+          $gray-300,
+          $gray-300 3px,
+          $white 3px,
+          $white 6px
+        );
+      }
+    }
+    &:last-child {
+      &::after {
+        content: none;
+      }
+    }
+  }
+
+  button[aria-expanded="false"] {
+    .label-expanded {
+      display: none;
+    }
+  }
+  button[aria-expanded="true"] {
+    .label-collapsed {
+      display: none;
+    }
+    svg {
+      transform: rotate(180deg);
+    }
+  }
+}

package/src/scss/_utilities.scss

@@ -0,0 +1,78 @@
+$utilities: map-merge(
+  $utilities,
+  (
+    "background-color":
+      map-merge(
+        map-get($utilities, "background-color"),
+        (
+          values:
+            map-merge(
+              map-get(map-get($utilities, "background-color"), "values"),
+              (
+                date: $date,
+              )
+            ),
+        )
+      ),
+    // Extend rounded-top utility.
+    "max-width":
+      map-merge(
+        map-get($utilities, "max-width"),
+        (
+          values:
+            map-merge(
+              map-get(map-get($utilities, "max-width"), "values"),
+              (
+                date: 7.5rem,
+                "listing-img": 10rem,
+              )
+            ),
+        )
+      ),
+    // Create responsive classes for padding
+    "padding":
+      map-merge(
+        map-get($utilities, "padding"),
+        (
+          responsive: true,
+        )
+      ),
+    // Create responsive classes for borders
+    "border":
+      map-merge(
+        map-get($utilities, "border"),
+        (
+          responsive: true,
+        )
+      ),
+  )
+);
+
+.text-underline-hover {
+  text-decoration: none;
+}
+.text-underline-hover:hover {
+  text-decoration: underline;
+}
+
+@include media-breakpoint-down(md) {
+  .n-mx-container {
+    padding-right: $container-padding-x;
+    padding-left: $container-padding-x;
+    margin-right: -$container-padding-x;
+    margin-left: -$container-padding-x;
+  }
+}
+
+.bg-lighter {
+  background-color: $lighter;
+}
+
+.bg-gray-200 {
+  background-color: $gray-200;
+}
+
+.grid-3-9 {
+  grid-template-columns: 25% 75%;
+  grid-gap: map-get($gutters, "2-5");
+}

package/src/scss/_variables.scss

@@ -1,12 +1,25 @@
+$enable-negative-margins: true;
+$negative-spacers: negativify-map($spacers);
+
 // Colors variables
-$gray-100: #f0f0f0;
-$light: $gray-100;
+$light: #f0f0f0;
+$lighter: $gray-100;
+$date: #1698af;
 $blue-50: tint-color($blue, 90%);
 $red-50: tint-color($red, 90%);
 $yellow-50: tint-color($yellow, 90%);
 $green-50: tint-color($green, 90%);
 $cyan-50: tint-color($cyan, 90%);
 
+// Override theme-color "light"
+$theme-colors: map-merge(
+  $theme-colors,
+  (
+    "light": $light,
+  )
+);
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
+
 $custom-blues: (
   "blue-50": $blue-50,
 );
@@ -23,13 +36,6 @@ $custom-cyans: (
   "cyan-50": $cyan-50,
 );
 
-$theme-colors: map-merge(
-  $theme-colors,
-  (
-    "light": $light,
-  )
-);
-$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
 $blues: map-merge($blues, $custom-blues);
 $reds: map-merge($reds, $custom-reds);
 $yellows: map-merge($yellows, $custom-yellows);
@@ -53,6 +59,7 @@ $spacers-extended: (
 );
 
 $spacers: map-merge($spacers, $spacers-extended);
+$gutters: $spacers;
 
 // Forms
 $form-check-input-size-lg: $form-check-input-width + 0.3em !default;

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

@@ -8,20 +8,6 @@
 
 @import "@openeuropa/bcl-bootstrap/scss/utilities";
 
-// Create responsive classes for padding
-$utilities: map-merge(
-  $utilities,
-  (
-    "padding":
-      map-merge(
-        map-get($utilities, "padding"),
-        (
-          responsive: true,
-        )
-      ),
-  )
-);
-
 // Layout & components
 @import "@openeuropa/bcl-bootstrap/scss/root";
 @import "@openeuropa/bcl-bootstrap/scss/reboot";
@@ -56,11 +42,13 @@ $utilities: map-merge(
 
 // Helpers
 @import "@openeuropa/bcl-bootstrap/scss/helpers";
+@import "@openeuropa/bcl-theme-default/src/scss/utilities";
 
 // Utilities
 @import "@openeuropa/bcl-bootstrap/scss/utilities/api";
 
 // Custom styles
+@import "@openeuropa/bcl-theme-default/src/scss/collapse";
 @import "@openeuropa/bcl-theme-default/src/scss/reset";
 @import "@openeuropa/bcl-theme-default/src/scss/header";
 @import "@openeuropa/bcl-theme-default/src/scss/footer";
@@ -74,3 +62,5 @@ $utilities: map-merge(
 @import "@openeuropa/bcl-theme-default/src/scss/bcl-offcanvas";
 @import "@openeuropa/bcl-theme-default/src/scss/breadcrumb";
 @import "@openeuropa/bcl-theme-default/src/scss/banners";
+@import "@openeuropa/bcl-theme-default/src/scss/timeline";
+@import "@openeuropa/bcl-theme-default/src/scss/inpage-navigation";

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

@@ -0,0 +1,64 @@
+{% spaceless %}
+
+{# Parameters:
+  - title: (string) (default: "")
+  - title_tag: (string) (default: "div")
+  - 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: "")
+#}
+
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('div') %}
+{% set _description = description|default('') %}
+{% set _link = link|default({}) %}
+{% set _image = image|default('') %}
+{% set _shade = shade|default(false) %}
+{% set _hero = hero|default(false) %}
+{% 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 %}
+{% endif %}
+
+{% set _title_classes = "display-6" %}
+{% if _description is not empty or _link is not empty %}
+  {% set _title_classes = _title_classes ~ " mb-3" %}
+{% endif %}
+
+{% set _classes = [
+  'bcl-banner',
+  _shade ? 'shade',
+  _image and not _shade ? 'overlay',
+  _hero ? 'hero',
+  _full_width ? 'full-width' 
+  ] %}
+{% set attributes = attributes.addClass(_classes) %}
+
+<div {{ attributes }}>
+  {% if _image is not empty %}
+    <div class="bcl-banner__image" style="background-image:url({{ _image }})"></div>
+  {% endif %}
+  <div class="container">
+    <div class="{{ _content_class }}">
+    {% if _title is not empty %}
+      <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
+      {% if _description is not empty %}
+      <p class="mb-4">{{ _description }}</p>
+      {% endif %}
+      {% if _link.path %}
+        {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
+      {% endif %}
+    {% endif %}
+    </div>
+  </div>
+</div>
+
+{% endspaceless %}

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

@@ -0,0 +1,91 @@
+{% spaceless %}
+
+{#
+  Parameters:
+  - with_header (boolean) (default: false)
+  - with_footer (boolean) (default: false)
+  - with_banner (boolean) (default: false)
+  - with_sidebar (boolean) (default: false)
+  - columns (string) (default: 3-9 )
+  - content_type (string) (default: '')
+  - attributes (drupal attrs)
+
+  BLOCKS:
+  - header
+  - footer
+  - content
+  - sidebar
+  - banner
+  - feedback
+  - share
+  - related
+#}
+
+{% set _with_header = header|default(false) %}
+{% set _with_footer = footer|default(false) %}
+{% set _with_banner = banner|default(false) %}
+{% set _with_sidebar = sidebar|default(false) %}
+{% set _columns = columns|default('3-9') %}
+{% set _content_type = content_type|default('') %}
+{% set _classes = ['bcl-node-type'] %}
+{% set _col_classes = { left: 'col-md-3', right: 'col-12 col-md-9' } %}
+
+{% if _columns == '4-8' %}
+  {% set _col_classes = { left: 'col-md-4', right: 'col-12 col-md-8' } %}
+{% elseif _columns == '2-10' %}
+  {% set _col_classes = { left: 'col-md-2', right: 'col-12 col-md-10' } %}
+{% endif %}
+
+{% if _content_type is not empty %}
+  {% set _classes = _classes|merge(['bcl-' ~ _content_type]) %}
+{% endif %}
+
+{% if _with_header %}
+  {% include '@oe-bcl/bcl-header/header.html.twig' with header only %}
+{% endif %}
+
+<main {{ attributes }}>
+{% if _with_banner %}
+  {% block banner %}
+    {% include '@oe-bcl/bcl-content-banner/content-banner.html.twig' with banner only %}
+  {% endblock %}
+{% endif %}
+
+  <div class="container mt-md-4-75 mt-4">
+    <div class="row">
+    {% if _with_sidebar %}
+      <div class="{{ _col_classes.left }}">
+        {% block sidebar %}{% endblock %}
+      </div>
+      <div class="{{ _col_classes.right }}">
+    {% else %}
+      <div class="col-md-12">
+    {% endif %}
+      {% block content_top %}
+        {{ content_top }}
+      {% endblock %}
+      {% block content %}
+        {{ content }}
+      {% endblock %}
+      {% block content_bottom %}
+        {{ content_bottom }}
+      {% endblock %}
+      {% block related %}
+        {{ related }}
+      {% endblock %}
+    </div>
+  </div>
+</main>
+
+{% block feedback %}
+  {{ feedback }}
+{% endblock %}
+{% block share %}
+  {{ share }}
+{% endblock %}
+
+{% if _with_footer %}
+  {% include '@oe-bcl/bcl-footer/footer.html.twig' with footer only %}
+{% endif %}
+
+{% endspaceless %}

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

@@ -0,0 +1,60 @@
+{#
+  Parameters:
+  - listing (object) (default: {})
+  - pagination (object) (default: {})
+  - sidebar (object) (default: '')
+  - page_title (string) (default: '')
+#}
+
+{% extends "@oe-bcl/bcl-base-templates/content-type.html.twig" %}
+
+{% set _listing = listing|default({}) %}
+{% set _pagination = pagination|default({}) %}
+{% set _search = search|default({}) %}
+{% set _sidebar = sidebar|default({}) %}
+{% set _page_title = page_title|default({}) %}
+
+{% block content_top %}
+  {% include '@oe-bcl/bcl-button/button.html.twig' with filter_button only %}
+  <div class="mb-3 clearfix">
+    <div class="float-end d-none d-md-flex align-items-center">
+      {% include '@oe-bcl/bcl-select/select.html.twig' with sort_select|merge({
+        attributes: create_attribute().addClass(['ms-2 mb-2']),
+      }) only %}
+    </div>
+    <h4 class="mb-4">
+      <span class="text-capitalize">
+        {{- _page_title -}}
+      </span>
+      ({{ listing.items.length }})
+    </h4>
+    {% if badges is not empty and badges is iterable %}
+      {% for badge in badges %}
+        {% include '@oe-bcl/bcl-badge/badge.html.twig' with badge only %}
+      {% endfor %}
+    {% endif %}
+  </div>
+  <hr class="d-none d-md-block mb-4"/>
+  <div class="d-md-none">
+    {% include '@oe-bcl/bcl-select/select.html.twig' with sort_select|merge({
+      extra_classes: 'mb-4',
+    }) only %}
+  </div>
+{% endblock %}
+
+{% block content %}
+  {% if _listing is not empty %}
+    {% include '@oe-bcl/bcl-listing/listing.html.twig' with  _listing %}
+  {% endif %}
+{% endblock %}
+
+{% block content_bottom %}
+  {% if _pagination is not empty %}
+    <hr class="d-none d-md-block mt-4-5">
+    {% include '@oe-bcl/bcl-pagination/pagination.html.twig' with _pagination only %}
+  {% endif %}
+{% endblock %}
+
+{% block sidebar %}
+  {% include '@oe-bcl/bcl-base-templates/sidebar-search.html.twig' with _sidebar only %}
+{% endblock %}

package/templates/{bcl-search/search-offcanvas.html.twig → bcl-base-templates/sidebar-search.html.twig}

@@ -4,5 +4,4 @@
   <div class="offcanvas-body p-lg-0">
     {% include '@oe-bcl/bcl-form/form.html.twig' with search_form only %}
   </div>
-  
 {% endblock %}