Merge branch 'develop' into docs/component-labels

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
-  "cSpell.enabled": false,
+  "cSpell.enabled": true,
   "cSpell.enabledLanguageIds": [
     "asciidoc",
     "c",
@@ -33,5 +33,8 @@
     "typescriptreact",
     "yaml",
     "yml"
+  ],
+  "cSpell.enableFiletypes": [
+    "nunjucks"
   ]
 }

PUBLISHING.md

@@ -10,7 +10,7 @@ A reference guide on how to do releases of the VF [monorepo](https://www.toptal.
 
 ## Release workflow
 
-### 1. Component pre-release workflow
+### 1. Component pre-release
 
 1. select the `develop` branch
     - reminder: [we don't use `master`](https://github.com/visual-framework/vf-core/blob/master/README.md)
@@ -19,10 +19,21 @@ A reference guide on how to do releases of the VF [monorepo](https://www.toptal.
 1. test publish
     - `yarn run lerna:test`
 
-### 2. Component release workflow
+### 2. Component release
 
 1. publish to npm
     - `yarn run lerna:publish`
+
+### 3. Communications
+
+1. update the expected new tag version to `/tools/vf-component-library/src/site/_data/siteConfig.js`
+    - see last tag `git describe --abbrev=0 --tags`
+1. generate an update
+    - `yarn run releasenotes`
+    - format and review the newly made file at `tools/vf-component-library/src/site/updates`
+
+### 4. Post-release
+
 1. commit and push changes to the `develop` branch
     - commit message in a format of: `Component release 2020MMDD-01`
 1. add a tag
@@ -33,14 +44,6 @@ A reference guide on how to do releases of the VF [monorepo](https://www.toptal.
        - Trigger a deploy to the CDN (i.e. `v2.3.1-rc.1`) https://assets.emblstatic.net/vf/v2.3.0/css/styles.css
 1. push the tag
     - `git push origin --tags`
-
-### 3. Component post-release workflow
-
-1. generate an update
-    - `yarn run releasenotes`
-    - format and review the newly made file at `tools/vf-component-library/src/site/updates`
-1. commit and push changes to the `develop` branch
-1. update the new tag version to `/tools/vf-component-library/src/site/_data/siteConfig.js`
 1. add release notes to the tag and link to the new blog post
     - https://github.com/visual-framework/vf-core/releases
     - https://stable.visual-framework.dev/updates/

components/embl-breadcrumbs-lookup/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 1.0.1
+
+* JS linting
+
 ### 1.0.0
 
 * prevent recursive breadcrumb lookup: it can occur for the EMBL taxonomy to have recursive parents, this present direct recursion

components/embl-breadcrumbs-lookup/embl-breadcrumbs-lookup.js

@@ -83,7 +83,9 @@ function emblBreadcrumbsLookup(metaProperties) {
  * @param {string} [url] - URL to pull the taxonomy from
  */
 function emblGetTaxonomy(url) {
+  /* eslint-disable no-redeclare */
   var url = url || "https://www.embl.org/api/v1/pattern.json?pattern=embl-ontology&source=contenthub";
+  /* eslint-disable no-redeclare */
 
   return new Promise(function(resolve, reject) {
     // Do the usual XHR stuff
@@ -373,7 +375,9 @@ function emblBreadcrumbAppend(breadcrumbTarget,termName,facet,type) {
     // };
     // console.log('Todos for getBreadcrumbParentTerm():',parentTodos);
 
+    /* eslint-disable no-redeclare */
     var lastParent = lastParent || {}; // track last insertion to prevent recursion
+    /* eslint-enable no-redeclare */
 
     if (parents == undefined || parents == null) {
       // no parent breadcrumb preset, exiting
@@ -455,9 +459,11 @@ function emblBreadcrumbAppend(breadcrumbTarget,termName,facet,type) {
   }
 
   var currentTerm = getCurrentTerm(termName);
+  /* eslint-disable no-unused-vars */
   var breadcrumbId = currentTerm.uuid,
     breadcrumbUrl = currentTerm.url,
     breadcrumbParents = currentTerm.parents;
+  /* eslint-enable no-unused-vars */
 
   // narrow down to the first matching element
   breadcrumbTarget = breadcrumbTarget[0];
@@ -517,9 +523,11 @@ function emblBreadcrumbs() {
 // Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
 (function (arr) {
   arr.forEach(function (item) {
+    /* eslint-disable no-prototype-builtins */
     if (item.hasOwnProperty("prepend")) {
       return;
     }
+    /* eslint-enable no-prototype-builtins */
     Object.defineProperty(item, "prepend", {
       configurable: true,
       enumerable: true,

components/embl-conditional-edit/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 1.0.3
+
+* JS linting
+
 ### 1.0.2
 
 * embl-breadcrumb-lookup.njk was loading demo embl-content-meta-properties that were only needed for an example,

components/embl-conditional-edit/embl-conditional-edit.js

@@ -16,7 +16,7 @@ function emblConditionalEdit() {
     return;
   }
 
-  Array.prototype.forEach.call(emblConditionalEditItems, (element, i) => {
+  Array.prototype.forEach.call(emblConditionalEditItems, (element) => {
     emblConditionalEditDetectParam(location.href,element);
   });
 }

components/embl-content-hub-loader/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 1.0.7
+
+* JS linting
+
 ### 1.0.6
 
 * invoke `emblContentHubSignalFinished()` even in cases where there was nothing to load

components/embl-content-hub-loader/embl-content-hub-loader__fetch.js

@@ -80,6 +80,7 @@ function emblContentHubFetch() {
 
   // Dispatch load to the pollyfill
   function emblContentHubAwaitLoading(targetLink,position) {
+    /* global addImport */
     // Docs: https://github.com/AshleyScirra/html-imports-polyfill#usage
     addImport(targetLink.href, null, emblContentHubLinkLoadingProgress).then(function(value) {
       emblContentHubGrabTheContent(targetLink,position,value);
@@ -207,9 +208,9 @@ function emblContentHubFetch() {
       var targetElement = document.querySelector("."+emblContentHubGenerateID(position)).querySelector(targetSelectorToInject);
 
       // We can't inject space separated classes to we need to split it into arrays and add one by one.
-      var classesToInject = classesToInject.split(" ");
+      classesToInject = classesToInject.split(" ");
 
-      for (classNumber = 0; classNumber < classesToInject.length; classNumber++) {
+      for (var classNumber = 0; classNumber < classesToInject.length; classNumber++) {
         targetElement.classList.add(classesToInject[classNumber]);
       }
 

components/embl-content-hub-loader/embl-content-hub-loader__html-imports.js

@@ -6,7 +6,7 @@
 
 function emblContentHubLoaderHtmlImports() {
   // Map a script URL to its import document for GetImportDocument()
-  const scriptUrlToImportDoc = new Map();
+  // const scriptUrlToImportDoc = new Map();
 
   function GetPathFromURL(url)
   {
@@ -74,7 +74,9 @@ function emblContentHubLoaderHtmlImports() {
 
   function _AddImport(url, preFetchedDoc, rootContext, progressObject)
   {
+    /* eslint-disable no-unused-vars */
     let isRoot = false;
+    /* eslint-enable no-unused-vars */
 
     // The initial import creates a root context, which is passed along to all sub-imports.
     if (!rootContext)
@@ -92,11 +94,13 @@ function emblContentHubLoaderHtmlImports() {
     }
 
     // Each import also tracks its own state with its own context.
+    /* eslint-disable no-unused-vars */
     const context = {
       importDoc: null,
       baseUrl: GetPathFromURL(url),
       dependencies: []
     };
+    /* eslint-enable no-unused-vars */
 
     // preFetchedDoc is passed for sub-imports which pre-fetch their documents as an optimisation. If it's not passed,
     // fetch the URL to get the document.

components/embl-notifications/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 1.0.1
+
+* JS linting
+
 ### 1.0.0
 
 * Check a backup URL for cases of major outages: https://embl-communications.github.io/embl-notifcations-fallback/notifications.js

components/embl-notifications/embl-notifications.js

@@ -198,7 +198,7 @@ function emblNotifications(currentHost, currentPath) {
       var xmlhttp = new XMLHttpRequest();
     }
     xmlhttp.open("GET", file, true);
-    xmlhttp.onload = function (e) {
+    xmlhttp.onload = function() {
       if (xmlhttp.readyState === 4) {
         if (xmlhttp.status === 200) {
           // eval(xmlhttp.responseText);
@@ -209,7 +209,7 @@ function emblNotifications(currentHost, currentPath) {
         }
       }
     };
-    xmlhttp.onerror = function (e) {
+    xmlhttp.onerror = function() {
       console.error(xmlhttp.statusText);
     };
     xmlhttp.send(null);

components/vf-analytics-google/CHANGELOG.md

@@ -1,3 +1,15 @@
+### 1.0.2
+
+* Improves link name detection
+  * `data-vf-analytics-label` supersedes any derived value calculation
+  * image alt text support
+* Bug: Issue when tracking image interactions
+  * https://github.com/visual-framework/vf-core/issues/887
+
+### 1.0.1
+
+* JS linting
+
 ### 1.0.0
 
 * Stable release

components/vf-analytics-google/vf-analytics-google.js

@@ -2,7 +2,7 @@
 
 /*
  * A note on the Visual Framework and JavaScript:
- * The VF is primairly a CSS framework so we've included only a minimal amount
+ * The VF is primarily a CSS framework so we've included only a minimal amount
  * of JS in components and it's fully optional (just remove the JavaScript selectors
  * i.e. `data-vf-js-tabs`). So if you'd rather use Angular or Bootstrap for your
  * tabs, the Visual Framework won't get in the way.
@@ -11,12 +11,12 @@
  * 🚫 Don't: const tabs = document.querySelectorAll('.vf-tabs');
  * ✅ Do:    const tabs = document.querySelectorAll('[data-vf-js-tabs]');
  *
- * This allows users who would prefer not to have this JS engange on an element
+ * This allows users who would prefer not to have this JS engage on an element
  * to drop `data-vf-js-component` and still maintain CSS styling.
  */
 
 
-// Decaclare `ga` as a global for eslint
+// Declare `ga` as a global for eslint
 /* global ga */
 
 /**
@@ -88,7 +88,6 @@ function vfGaIndicateLoaded(vfGaTrackOptions,numberOfGaChecksLimit,numberOfGaChe
       }, 900); // give a second check if GA was slow to load
     }
   }
-
 }
 
 /**
@@ -307,7 +306,11 @@ function vfGaTrackInteraction(actedOnItem, customEventName) {
 
   if (customEventName.length > 0) {
     linkName = customEventName;
-  } else { // then derive a value
+  } else if (actedOnItem.dataset.vfAnalyticsLabel) {
+    // if an explicit label, use that
+    linkName = actedOnItem.dataset.vfAnalyticsLabel;
+  } else {
+    // otherwise derive a value
 
     // Fix for when tags have undefined .innerText
     if (typeof actedOnItem.innerText === "undefined") {
@@ -324,19 +327,18 @@ function vfGaTrackInteraction(actedOnItem, customEventName) {
     // is there an inner image?
     if (linkName.length == 0 && actedOnItem.getElementsByTagName("img")) {
       if (actedOnItem.getElementsByTagName("img")[0]) {
-        if (actedOnItem.getElementsByTagName("img")[0].hasAttribute("src")) {
-          linkName = actedOnItem.src.split("/").vfGaLinkLast();
+        // if alt text, use that
+        if (actedOnItem.getElementsByTagName("img")[0].hasAttribute("alt")) {
+          linkName = actedOnItem.getElementsByTagName("img")[0].alt;
+        } else if (actedOnItem.getElementsByTagName("img")[0].hasAttribute("src")) {
+          linkName = actedOnItem.getElementsByTagName("img")[0].src.split("/").vfGaLinkLast();
         }
       }
     }
 
     // fallback to an href value
     if (linkName.length == 0 && actedOnItem.href) linkName = actedOnItem.href;
 
-    if (actedOnItem.dataset.vfAnalyticsLabel) {
-      linkName = actedOnItem.dataset.vfAnalyticsLabel;
-    }
-
     // special things for gloabl search box
     // if (parentContainer == 'Global search') {
     //   linkName = 'query: ' + jQuery('#global-search input#query').value;
@@ -374,6 +376,7 @@ function vfGaTrackInteraction(actedOnItem, customEventName) {
     var href = actedOnItem.href;
 
     // log emails and downloads to seperate event "buckets"
+    /* eslint-disable no-useless-escape */
     if (href && href.match(/^mailto\:/i)) {
       // email click
       var mailLink = href.replace(/^mailto\:/i, "");
@@ -386,6 +389,7 @@ function vfGaTrackInteraction(actedOnItem, customEventName) {
       ga && ga("send", "event", "Download", "Type / " + extension + " / " + parentContainer, filePath);
       vfGaLogMessage("Download", "Type / " + extension + " / " + parentContainer, filePath, lastGaEventTime, actedOnItem);
     }
+    /* eslint-enable no-useless-escape */
 
     // If link and is external, log it as an external link
     if (href && href.match(/^\w+:\/\//i)) {
@@ -451,7 +455,7 @@ function vfGaLogMessage(eventCategory, eventAction, eventLabel, lastGaEventTime,
   // conditional logging
   let conditionalLoggingCheck = document.querySelector("body");
   // debug: always turn on verbose analytics
-  // conditionalLoggingCheck.setAttribute('data-vf-google-analytics-verbose', 'true');
+  // conditionalLoggingCheck.setAttribute("data-vf-google-analytics-verbose", "true");
   if (conditionalLoggingCheck.dataset.vfGoogleAnalyticsVerbose) {
     if (conditionalLoggingCheck.dataset.vfGoogleAnalyticsVerbose == "true") {
       /* eslint-disable */

components/vf-banner/CHANGELOG.md

@@ -1,3 +1,11 @@
+### 1.6.3
+
+* Bug: For fixed banners, avoid interpretting numbers as strings and blowing out the page padding
+
+### 1.6.2
+
+* JS linting
+
 ### 1.6.1
 
 * removes CSS for 'inlayed' design as no longer in use