SGD8-2505: Update content header implementation

gent_base.theme

@@ -778,6 +778,27 @@ function gent_base_preprocess_node(&$variables) {
       $variables['event_datetime'] = \Drupal::service('date.formatter')->format($event_start_date, 'custom', 'c') . '-' . \Drupal::service('date.formatter')->format($event_end_date, 'custom', 'c');
     }
   }
+
+  // Add variable to mark content headers to be overlapped by first paragraph.
+  $bundles = ['infopage', 'event', 'news'];
+  $overlappingParagraphs = [
+    'text',
+    'table_of_contents',
+    'partners',
+    'teaser',
+  ];
+
+  if (in_array($node->bundle(), $bundles)) {
+    $paragraphs = $node->get('field_paragraphs')->referencedEntities();
+
+    if (!empty($paragraphs)) {
+      /** @var \Drupal\paragraphs\Entity\Paragraph $firstParagraph */
+      $firstParagraph = reset($paragraphs);
+    }
+    if (in_array($firstParagraph->getType(), $overlappingParagraphs)) {
+      $variables['content_header_overlap'] = TRUE;
+    }
+  }
 }
 
 /**

source/sass/31-molecules/file-upload/_file-upload.scss

@@ -12,7 +12,7 @@
       width: 1rem;
       min-height: 0;
       padding: 0;
-      background: transparent svg-as-background('cross', color('dark-gray'), 16, 16);
+      background: transparent svg-as-background('cross', color('gray'), 16, 16);
       background-repeat: no-repeat;
       background-position: center;
       border: 0;

source/sass/31-molecules/map/_map.scss

@@ -4,7 +4,7 @@
 $map-padding: .8rem;
 $map-button-size: 2.2rem;
 $map-button-background: color('white');
-$map-text-color: color('dark-gray');
+$map-text-color: color('gray');
 
 %map-button {
   width: $map-button-size;
@@ -258,7 +258,7 @@ $map-text-color: color('dark-gray');
       width: 1.2rem;
       height: 1.2rem;
       margin-top: -.6rem;
-      background: svg-as-background('search', color('cyan-wcag'), 24, 24) no-repeat center center;
+      background: svg-as-background('search', color('cyan'), 24, 24) no-repeat center center;
       z-index: 11;
     }
 
@@ -340,7 +340,7 @@ $map-text-color: color('dark-gray');
         right: .4rem;
         width: 1.6rem;
         height: 1.6rem;
-        background: transparent svg-as-background('cross', color('dark-gray'), 22.5, 22.5) no-repeat center;
+        background: transparent svg-as-background('cross', color('gray'), 22.5, 22.5) no-repeat center;
         cursor: pointer;
 
         &::after {

source/sass/41-organisms/header/_content-header.scss

@@ -0,0 +1,25 @@
+body {
+  div.content-header-container {
+    margin-top: 0;
+    // Content header in Drupal should always break out on the sides.
+    // This breakout is provided for several layouts by the styleguide.
+    margin-right: -1rem;
+    margin-left: -1rem;
+
+    @include tablet {
+      width: calc(100% + 6.75rem * 2);
+      margin-left: -6.75rem;
+      padding-right: 6.75rem;
+      padding-left: 6.75rem;
+    }
+
+    &.accolade-title {
+      @include tablet {
+        // Set max width because the absolute title gets out of boundary.
+        .left {
+          max-width: calc(100% - (6.75rem * 2 + 1rem));
+        }
+      }
+    }
+  }
+}

source/sass/61-layouts/_detail-layout.scss

@@ -57,7 +57,7 @@
         margin-top: -6rem;
       }
 
-      + .partner-block {
+      & + .paragraph--type--partners {
         max-width: 100%;
         padding: 1rem;
         background-color: color('white');

source/sass/61-layouts/_overview-layout.scss

@@ -0,0 +1,32 @@
+.overview-layout {
+  // This is defined in styleguide as well, but not with paragraph classes.
+  > .content-header-container {
+    & + .paragraph--type--table-of-contents,
+    & + .paragraph--type--partners,
+    & + .paragraph--type--text {
+      position: relative;
+      z-index: 1;
+    }
+
+    &:not(.image) {
+      & + .paragraph--type--table-of-contents,
+      & + .paragraph--type--partners,
+      & + .paragraph--type--text {
+        @include set-layout('width-12');
+
+        margin-top: -6rem;
+      }
+
+      & + .partner-block,
+      & + .paragraph--type--text {
+        max-width: 100%;
+        padding: 1rem;
+        background-color: color('white');
+
+        @include tablet {
+          padding: 3rem;
+        }
+      }
+    }
+  }
+}

templates/custom/nodes/node--detail--layout.html.twig

@@ -86,6 +86,10 @@
   {% set header_classes = header_classes|merge(['image']) %}
 {% endif %}
 
+{% if content_header_overlap %}
+  {% set header_classes = header_classes|merge(['overlap']) %}
+{% endif %}
+
 {{ attach_library('classy/node') }}
 
 <article{{ attributes.addClass(classes) }}>

templates/custom/nodes/node--news--full.html.twig

@@ -2,7 +2,7 @@
 
 {% block article_content_top %}
   {% set header_classes = header_classes|filter((v, k) => v != 'primary') %}
-  {% set header_classes = header_classes|filter((v, k) => v != 'dark-backgroud') %}
+  {% set header_classes = header_classes|filter((v, k) => v != 'dark-background') %}
   {% set header_classes = header_classes|merge(['secondary']) %}
 
   {{ parent() }}