Fix bug in label parsing (#232)

Fixes an issue with some labels being wrongly parsed where the text
before the first hyphen was used instead of the full label.

For example, `aura-db-enterprise` was being treated as `aura` because
that is a valid label in rolesData.json.

There are essentially two types of labels:
- 'version' labels, where we want to use only the text before the
hyphen, eg `new-5.20` for the label class and add the text after the
hyphen as label text.
- all other labels, where we take the whole label text and use that for
the label class, and take the label text from rolesData.json

This PR also fixes an issue with discrete headings.
Labels are no longer displayed on discrete headings.

preview-src/docs-roles.adoc

@@ -1,5 +1,5 @@
 = Docs roles with a long title
-:page-role: not-on-aura new-5.17
+:page-role: alpha aura-db-enterprise beta deprecated-5.17 invented-label new-5.17 not-on-aura
 :page-theme: docs
 :page-banner: warning
 :page-banner-text: Lorem ipsum dolor sit est.
@@ -22,7 +22,7 @@ Blocks with the appropriate roles have labels added.
 [role="label--new-5.17 label--enterprise-edition"]
 === (Discrete) H3 AuraDB Enterprise AND Not on Aura
 
-Lorem ipsum dolor sit
+Labels are not displayed for discrete headers.
 
 
 [role=label--aura-db-enterprise label--not-on-aura]

src/js/60-docs-roles.js

@@ -25,9 +25,11 @@ document.addEventListener('DOMContentLoaded', function () {
     var label = role.replace('label--', '')
     var labelParts = label.split('-')
 
-    // label could be eg label--new-5.19 but in rolesData it's just new
-    label = rolesData[labelParts[0]] ? labelParts[0] : label
+    // label could be eg aura-db-enterprise - we use the full label
+    // label could be eg new-5.20 - we use 'new' for the label and add the version as text
+    label = (rolesData[label] && rolesData[label].category !== 'version') ? label : labelParts[0]
 
+    // ignore labels that are not defined in rolesData
     if (!rolesData[label]) {
       return
     }
@@ -63,12 +65,13 @@ document.addEventListener('DOMContentLoaded', function () {
   const roleDivs = document.querySelectorAll('body.docs:not(.docshome) *[class*="label--"]')
 
   roleDivs.forEach(function (roleDiv) {
-    // ignore spans because they're inline
-    // we only care about labels on block elements
-    // DIV or TABLE
-    if (roleDiv.nodeName === 'SPAN') return
-
     var roles = roleDiv.classList
+
+    // ignore:
+    // - spans because they're inline and we only care about labels on block elements DIV or TABLE
+    // - discrete headers
+    if (roleDiv.nodeName === 'SPAN' || [...roles].includes('discrete')) return
+
     roles = [...roles].sort().filter(function (c) {
       return (c.startsWith('label--'))
     })
@@ -79,6 +82,10 @@ document.addEventListener('DOMContentLoaded', function () {
 
     roles.forEach(function (role) {
       const labelDetails = getLabelDetails(role)
+
+      // remove the role from the parent div
+      roleDiv.classList.remove(role)
+
       if (typeof labelDetails === 'undefined') {
         return
       }
@@ -93,9 +100,6 @@ document.addEventListener('DOMContentLoaded', function () {
 
       labelSpan.appendChild(document.createTextNode(labelDetails.text))
 
-      // remove the role from the parent div
-      roleDiv.classList.remove(role)
-
       labels.push(labelSpan)
     })