the one that refactors the masthead (#1195)

* sneaks in hiding vscode workspaces

* removes masthead search CSS

* removes vf-masthead support as it's no longer needed

* updates to masthead and variants

* updates yaml/nunjuck relationship with variables

* updates masthead variants

* takes this back to normal

* Refactore: vf-masthead-js

Optimastions for #1195, this:

- lints the JS
- allows use of `style=" --vf-masthead__bg-image: url(../../assets/vf-masthead/assets/group-bg_2d4155.png);`
- fixes the JS to remove escaped syntax

* Update vf-masthead.js

* updates masthead JS, image, njk variables

* cupdates theming variable for title-block--primary

* makes words break on smaller devices

* more updates to masthead, cleaner code, improved docs

* cha-cha-cha-changelog

Co-authored-by: Ken Hawkins <[email protected]>

Author: Stuart Robson

.gitignore

@@ -11,4 +11,5 @@ backstop_data/html_report/
 bitmaps_test/
 temp
 package.variables.scss
-*.precompiled.js
+*.precompiled.js
+*.code-workspace

components/vf-componenet-rollup/index.scss

@@ -86,7 +86,6 @@ button {
 @import 'vf-lede/vf-lede.scss';
 
 @import 'vf-masthead/vf-masthead.scss';
-@import 'vf-masthead/vf-masthead--supports.scss';
 
 @import 'vf-navigation/vf-navigation.scss';
 @import 'vf-navigation/vf-navigation--global.scss';

components/vf-masthead/CHANGELOG.md

@@ -1,3 +1,11 @@
+### 2.0.0
+
+* updates how `njk` and `yml` variables are named and work.
+* tidied up how JavaScript decides on text colour from image.
+* renamed `h2` classnames so they're not so specific to its content.
+* removes redundant form search CSS
+* updated documentation
+
 ### 1.2.0
 
 * updates spacing design tokens

components/vf-masthead/README.md

@@ -4,13 +4,23 @@
 
 ## About
 
+The `vf-masthead` (masthead) is a full-width container that can take a text, theme colour, an image, and create a 'block' for the text to lay atop.
+
 ## Usage
 
+The `vf-masthead` component can be used on the home page of group sites to help inform the visitor of the groups name, location, and additional information.
+
+| ✅ Do's                                 | 🚫 Do Not's                                 |
+| --------------------------------------- | ------------------------------------------ |
+| Use this on the homepage of group sites | On every subsquent page                    |
+| Use the title block with a theme colour | Use a title block, theme colour, and image |
+
+
 ### Background Colours
 
-By Default, the `vf-masthead` is white text on a black background except if it is the title block variant where the text will be black on a white background with an overall black background.
+By Default, the `vf-masthead` is black text on a light grey background except if it is the title block variant where the text will be white on a black background with an overall light grey background.
 
-This can be effected by either having a global theme class applied to a parent (usually on `body`) where the colours determined by the theme name will cascade into this component. The other way is to apply a component specific class that effects the colours.
+This can be effected by either having a component specific class that effects the colours.
 
 Theme Variants available are:
 
@@ -41,22 +51,24 @@ When using a background image we have to determine the best text colour to meet
 
 We do this using JavaScript and the background image filename.
 
-In creating the background images for mastheads each image filename needs to have it's most dominate colour added as a hexadecimal code.
+In choosing the image for masthead the image filename needs to have it's most dominate colour added as a hexadecimal code.
 
 ```bash
 masthead-background-image--00EF00.png
 ```
 <br>
 
-The JavaScript looks for this hexidecimal colour code and mathematically works out the correct text colour to use. The CSS custom property `--local-theme-fg-color` is then applied in the style tag of the component.
+To find the dominant colour in the background image you can use a colour picker in graphics software to find the hex code.
+
+This then allows the code to look for this hexidecimal colour code and mathematically works out the correct text colour to use. The CSS custom property `--local-theme-fg-color` is then applied in the style tag of the component.
 
 ```html
 <style>
 <div
   class="vf-masthead vf-masthead--has-image"
   style="background-image: var(--vf-masthead__bg-image);
          --local-theme-fg-color:#FFFFFF;"
-  data-vf-js-masthead=""
+  data-vf-js-masthead
 >
 </style>
 ```

components/vf-masthead/vf-masthead--supports.scss

@@ -7,28 +7,39 @@ context:
   component-type: block
 
   masthead_href: 'JavaScript:Void(0);'
+  masthead_heading: Strategy & Communications
+  masthead_heading_additional: Chromosome structure and dynamics
+  masthead_subheading:
+    - masthead_subheading_text: <a href="JavaScript:Void(0);">VF Hamburg</a>
+    - masthead_subheading_text: Structural Biology
 
 variants:
   - name: default
   - name: primary
     context:
-      mastheadThemeVariant: vf-masthead-theme--primary
+      mastheadTheme: primary
   - name: secondary
     context:
-      mastheadThemeVariant: vf-masthead-theme--secondary
+      mastheadTheme: secondary
   - name: tertiary
     context:
-      mastheadThemeVariant: vf-masthead-theme--tertiary
-  - name: with background image
+      mastheadTheme: tertiary
+
+  - name: title block
     context:
-      mastheadImageClass: vf-masthead--has-image
-      mastheadImage: "../../assets/vf-masthead/assets/group-bg_2d4155.png"
-  - name: with title block
+      hasTitleBlock: true
+
+  - name: title block (primary)
     context:
-      hasTitleBlock: vf-masthead--with-title-block
+      hasTitleBlock: true
+      mastheadTheme: primary
 
-  - name: kitchen sink
+  - name: image
     context:
-      mastheadImageClass: vf-masthead--has-image
-      mastheadImage: "../../assets/vf-masthead/assets/group-bg_2d4155.png"
-      hasTitleBlock: vf-masthead--with-title-block
+      mastheadImage: "https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/VF_Masthead_Example_52ACEA.jpg"
+
+  - name: title block and image
+    context:
+      mastheadImage: "https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/VF_Masthead_Example_52ACEA.jpg"
+      hasTitleBlock: true
+

components/vf-masthead/vf-masthead.config.yml

@@ -1,21 +1,34 @@
 // vf-masthead
 
-
-// The background image for the banner element are taken from the database.
-// The filename includes the hex code for the background colour of the image.
-// Then test if the 6 characters are a hex code and declare the background-color
-
 /**
   * Function for making background color of banner from image file name
+  * The background image for the banner element are taken from the CSS custom property.
+  * The filename includes the hex code for the background colour of the image.
+  * Then test if the 6 characters are a hex code and declare the background-color
   * @example vfMastheadSetStyle()
   */
 
 function vfMastheadSetStyle() {
   const vfMastheads = document.querySelectorAll("[data-vf-js-masthead]");
 
+  // utility colour functions
+  function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h;}
+  function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16);}
+  function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16);}
+  function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16);}
+
+  function getCorrectTextColor(hex){
+    let hRed = hexToR(hex);
+    let hGreen = hexToG(hex);
+    let hBlue = hexToB(hex);
+    return ((hRed * 299) + (hGreen * 587) + (hBlue * 114)) / 1000;
+  }
+
   if (vfMastheads[0]) {
     let el = vfMastheads[0];
     let bannerBG = getComputedStyle(el).getPropertyValue("--vf-masthead__bg-image");
+    let regex = /\\/gi; // avoid escaped syntax like "bg_2d4155\.png"
+    bannerBG = bannerBG.replaceAll(regex,"");
     let filename = bannerBG.substr(0, bannerBG.lastIndexOf(".")) || bannerBG;
     let hexcode = filename.substr(filename.length - 6);
     let bannerBGC = "#" + hexcode;
@@ -26,39 +39,25 @@ function vfMastheadSetStyle() {
     var modalAlertClasses = ["vf-masthead--with-title-block"];
     var modal = document.querySelector(".vf-masthead");
 
-
-    if( modal.classList.contains(modalAlertClasses)){
-    }
-    else {
-
+    if (modal.classList.contains(modalAlertClasses)) {
+      // if using title block no action neccessary
+    } else {
       if (regHex.test(hexcode)) {
 
-        if (!bannerBGC) return;
+        if (!bannerBGC) return; // if no background colour specified, nothing to do
 
         bannerBGC = bannerBGC.trim();
-
-        function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h;}
-        function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16);}
-        function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16);}
-        function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16);}
-
-        function getCorrectTextColor(hex){
-          let hRed = hexToR(hex);
-          let hGreen = hexToG(hex);
-          let hBlue = hexToB(hex);
-          return ((hRed * 299) + (hGreen * 587) + (hBlue * 114)) / 1000;
-        }
-
         cBrightness = getCorrectTextColor(bannerBGC);
 
         if (cBrightness > threshold){
           el.style.setProperty("--vf-masthead__color--foreground-default", "#000000");
+          el.style.setProperty("--vf-masthead__color--background-default", "#FFFFFF");
         } else if (cBrightness < threshold) {
           el.style.setProperty("--vf-masthead__color--foreground-default", "#FFFFFF");
+          el.style.setProperty("--vf-masthead__color--background-default", "#000000");
         }
-      }
-      else {
-        el.style.setProperty("--vf-masthead__bg-image", "none");
+      } else {
+        el.style.setProperty("--vf-masthead__bg-image", "unset");
       }
     }
   }

components/vf-masthead/vf-masthead.js

@@ -1,34 +1,32 @@
-<style>
-    .vf-masthead {
-      --vf-masthead__bg-image: url({{ mastheadImage }});
-    }
-</style>
+{% spaceless %}
 <div
   class="vf-masthead
-  {%- if mastheadThemeVariant %}
-  {{mastheadThemeVariant}}
+  {%- if mastheadTheme %} vf-masthead-theme--{{mastheadTheme}}{%- endif -%}
+
+  {% if hasTitleBlock %} vf-masthead--with-title-block{% endif %}
+
+  {%- if mastheadImage %} vf-masthead--has-image{% endif %}
+  | vf-u-fullbleed"
+  {% if mastheadImage -%}
+  style="
+    --vf-masthead__bg-image: url({{ mastheadImage }});
+    background-image: var(--vf-masthead__bg-image)" data-vf-js-masthead
   {%- endif -%}
-  {% if hasTitleBlock %}
-  {{hasTitleBlock}}
-  {% endif -%}
-  {% if mastheadImageClass %}
-  {{mastheadImageClass}}
-  {% endif -%}"
-  {% if mastheadImage %}
-  style="background-image: var(--vf-masthead__bg-image)"
-  data-vf-js-masthead
-  {% endif %}
 >
-  <div class="vf-masthead__inner">
     <div class="vf-masthead__title">
       <h1 class="vf-masthead__heading">
-        <a href="{{ masthead_href }}" class="vf-masthead__heading__link">Strategy &amp; Communications</a>
-        <span class="vf-masthead__heading--additional">Chromosome structure and dynamics</span>
+        <a href="{{ masthead_href }}" class="vf-masthead__heading__link">{{ masthead_heading }}</a>
+        {%- if masthead_heading_additional -%}
+        <span class="vf-masthead__heading--additional">{{ masthead_heading_additional }}</span>
+        {%- endif -%}
       </h1>
+      {%- if masthead_subheading -%}
       <h2 class="vf-masthead__subheading">
-        <span class="vf-masthead__location">VF Hamburg</span>
-        <span class="vf-masthead__group">Structural Biology</span>
+      {% for item in masthead_subheading %}
+        <span class="vf-masthead__subheading__text">{{ item.masthead_subheading_text }}</span>
+      {% endfor %}
       </h2>
+      {%- endif -%}
     </div>
-  </div>
 </div>
+{% endspaceless %}