change(header): tweaked report gradient 271001 web report and allow a…

…nother level of web report sections (#466)

* fix(header, inpage-navigation, custom): adjust styles for mobile responsiveness
- Increase padding for .eea.banner .gradient .content on smaller screens
- Avoid overlap of .main.bar with .view-viewview.light-header
- Adjust positioning of #inpage-navigation on smaller screens
- Remove unnecessary z-index from .block.right

* style 2nd and 3rd level of accordion items

* style tweaks for side-menu on mobile and tablet resolutions

* lowered height of hero-header banner size

* style tweaks for hero header to attempt to make it full screen

* fix(banner, header): adjust styles for hero header and banner
- Increase bottom margin for .gradient .content on hero header
- Adjust line-height for .title on hero header
- Remove unnecessary margin-bottom on .eea.banner .gradient .content for smaller screens

* reduced @topSectionZIndex: to @z-index-2

- With z-index 3 when we open the toolbar menus their content is clipped by the top-bar
  since toolbar has z-index: 2. This way we reduce back to 2 and toolbar is again on top
- the rest of changes come from prettier formatting

* introduced `contentTypesToAvoidAsLinks` to filter which content type breadcrumb turn into links

- Allow also breadcrumbs item to reference url or href for the item url

* renamed `contentTypesToAvoidAsLinks` to `contentTypesAsBreadcrumbSection` making it clearer on what this  property is supposed to be used for

* support level 4 links for accordion context navigation

* feat(banner): increase minimum height for hero header banner
- Set minimum height for .hero-header .banner to 400px
- Ensures banner has a minimum height even on smaller screens

* Allow passing of all styles values as classes for eea-banner image wrapper div

* Allow copyright to be aligned also to the center and modified has--text-center class so that the justify-content to also be center as space-evenly does not perform a center justification

* Modified addition of border-bttom on first level accordion and introduced also a border bottom on the content area when expanded

* better organization of light header styling

- we have 2 main categories that the new header affects:
  - 1. the header styles
  - 2. the banner styles
-  tweaked position of inpage-navigation to move it more
   toward the bottom right corner of the page trying to
   avoid content overlap as much as possible
- added accordion-header box-shadow when part of the
  header when we aren't scrolling

* moved fixed for z-index of block.align.left and right outside of block-chooser parent

* change(context-navigation): remove border-bottom from sidenav header

The changes remove the `@sidenavHeaderBorderBottom` variable and the corresponding
 `border-bottom` declaration from the sidenav header as instructed by Marie as meeting feedback

* change(header): use only the homepage gradient which trades a11y for a clearer middle without the white gradient

src/ui/Banner/Banner.jsx

@@ -53,7 +53,10 @@ function Banner({ image, metadata, properties, children, styles, ...rest }) {
     return (
       <div className="eea banner">
         <div
-          className={cx(imageUrl ? 'image' : '', styles?.bg)}
+          className={cx(
+            imageUrl ? 'image' : '',
+            ...Object.values(styles || {}),
+          )}
           style={imageUrl ? { backgroundImage: `url(${imageUrl})` } : {}}
         >
           <div className="gradient">

src/ui/Breadcrumbs/Breadcrumbs.jsx

@@ -15,7 +15,7 @@ const Breadcrumbs = ({
   sections = [],
   icon = 'ri-arrow-right-s-line',
   size = 'tiny',
-  linkLevels = 1,
+  contentTypesAsBreadcrumbSection = [],
 }) => {
   return sections.length > 0 ? (
     <Segment className="breadcrumbs" attached vertical>
@@ -27,22 +27,27 @@ const Breadcrumbs = ({
                 <Image src={homeIcon} alt="" />
               </Link>
             </li>
-            {sections.map((item, index, items) => [
-              <li key={index}>
-                <Breadcrumb.Divider key={`divider-${item.href}`}>
-                  <Icon className={icon}></Icon>
-                </Breadcrumb.Divider>
-                {index < items.length - linkLevels ? (
-                  <Link key={item.key} to={item.href} className="section">
-                    {item.title}
-                  </Link>
-                ) : (
-                  <Breadcrumb.Section key={item.key} active>
-                    {item.title}
-                  </Breadcrumb.Section>
-                )}
-              </li>,
-            ])}
+            {sections.map((item, index, items) => {
+              const url = item.url || item.href;
+              return (
+                <li key={index}>
+                  <Breadcrumb.Divider key={`divider-${url}`}>
+                    <Icon className={icon}></Icon>
+                  </Breadcrumb.Divider>
+                  {index < items.length - 1 &&
+                  contentTypesAsBreadcrumbSection.indexOf(item.portal_type) ===
+                    -1 ? (
+                    <Link key={item.key} to={url} className="section">
+                      {item.title}
+                    </Link>
+                  ) : (
+                    <Breadcrumb.Section key={item.key} className="section">
+                      {item.title}
+                    </Breadcrumb.Section>
+                  )}
+                </li>
+              );
+            })}
           </ol>
         </Breadcrumb>
       </Container>
@@ -58,6 +63,8 @@ Breadcrumbs.propTypes = {
     PropTypes.shape({
       title: PropTypes.string,
       href: PropTypes.string,
+      url: PropTypes.string,
+      portal_type: PropTypes.string,
       key: PropTypes.string,
     }),
   ).isRequired,

theme/themes/eea/extras/banner.less

@@ -112,53 +112,6 @@
   }
 }
 
-.light-header {
-  .container {
-    width: 100%;
-    max-width: 1300px !important;
-  } 
-  .eea.banner {
-    --text-color: @bannerHomepageColor;
-
-    .content-type {
-      color: @secondaryColorCSSVar;
-      font-weight: bold;
-    }
-
-    .gradient .content .subtitle {
-      margin: 0 0 0.5rem 0;
-    }
-  }
-}
-
-.homepage-header .banner {
-  --text-color: @bannerHomepageColor;
-  height: 500px;
-
-  .content-type {
-    color: @secondaryColorCSSVar;
-    font-size: @h2;
-    font-weight: bold;
-  }
-  .container {
-      display: flex;
-      height: 100%;
-      align-items: flex-end;
-    }
-
-    .content {
-      padding: 0 !important;
-      margin-bottom: 2rem;
-    }
-    .grid {
-      text-align: center;
-    }
-    .wrapper {
-      justify-content: center;
-    }
-}
-
-
 /*Share Popup*/
 
 .ui.popup.share-popup {
@@ -253,14 +206,91 @@
   }
 }
 
-.light-header .eea.banner .gradient .content {
-  padding: @computerContentPadding;
+/*******************************
+          Light & Hero Header
+*******************************/
+.light-header {
+  .container {
+    width: 100%;
+    max-width: 1300px !important;
+  }
+  .eea.banner {
+    --text-color: @bannerHomepageColor;
+
+    .content-type {
+      color: @secondaryColorCSSVar;
+      font-weight: bold;
+    }
+
+    .subtitle-light {
+      font-size: 24px !important;
+      line-height: 1.2;
+    }
+
+    .gradient .content {
+      padding: @computerContentPadding;
+      .subtitle {
+        margin: 0.5rem 0;
+        font-size: 1.25rem;
+        line-height: 1.2;
+      }
+      .metadata {
+        margin-top: 1rem;
+      }
+    }
+  }
+}
+
+.homepage-header .banner {
+  --text-color: @bannerHomepageColor;
+  height: 500px;
+
+  .content-type {
+    color: @secondaryColorCSSVar;
+    font-size: @h4;
+    font-weight: bold;
+  }
+  .container {
+    display: flex;
+    height: 100%;
+    align-items: flex-end;
+  }
+
+  .grid {
+    text-align: center;
+  }
+  .wrapper {
+    justify-content: center;
+  }
+}
+
+.hero-header {
+  .banner {
+    height: calc(100dvh - 35px);
+    min-height: 400px;
+  }
+}
+@media only screen and (min-height: 600px) {
+  .hero-header {
+    .gradient .content {
+      margin-bottom: 10dvh;
+    }
+  }
+}
+
+@media only screen and (max-width: @largestTabletScreen) {
+  .light-header .eea.banner .gradient .content {
+    padding: 16.5rem 0 1.25rem;
+  }
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
-  .hero-header .banner {
-    height: 800px;
+  .hero-header {
+    .subtitle-light {
+      letter-spacing: @font-letterspacing-00;
+    }
   }
+
   .eea.banner {
     .image {
       .gradient .content {
@@ -271,24 +301,48 @@
     .gradient .content {
       padding: @computerContentPadding;
       .light-header & {
-        padding: @computerContentPaddingWithImage;
+        padding: 18.625rem 0 1.25rem;
       }
 
       .title {
         margin: @computerTitleMargin;
         font-size: @computerTitleFontSize;
         line-height: @computerTitleLineHeight;
+        .hero-header & {
+          line-height: 1.2;
+          letter-spacing: @font-letterspacing-00;
+        }
       }
 
       .subtitle {
-        margin: @computerSubtitleMargin;
         font-size: @computerSubtitleFontSize;
+        margin: @computerSubtitleMargin;
         line-height: @computerSubtitleLineHeight;
       }
     }
   }
 }
 
+@media screen and (min-width: 1280px) {
+  .hero-header .banner {
+    .title {
+      font-size: @heroTitleFontSize !important;
+    }
+
+    .content-type {
+      font-size: @h3;
+    }
+
+    .subtitle-light {
+      font-size: @h2 !important;
+      line-height: 1.2;
+    }
+  }
+}
+/*******************************
+      /Light & Hero Header
+*******************************/
+
 @media print {
   .eea.banner .gradient .content,
   .eea.banner .image .gradient .content {

theme/themes/eea/extras/banner.variables

@@ -35,6 +35,7 @@
 @mobileTitleFontSize       : @mobileH1;
 @tabletTitleFontSize       : @h2;
 @computerTitleFontSize     : @h1;
+@heroTitleFontSize         : 3.5rem;
 @mobileTitleLineHeight     : @headerLineHeight;
 @tabletTitleLineHeight     : @headerLineHeight;
 @computerTitleLineHeight   : @headerLineHeight;