Add comments to the content set component

Author: castastrophe

elements/pfe-content-set/src/pfe-content-set.js

@@ -26,7 +26,7 @@ class PfeContentSet extends PFElement {
   }
 
   get orientation() {
-    return this.hasAttribute("vertical") ? "vertical" : null;
+    return this.hasAttribute("vertical") ? "vertical" : "horizontal";
   }
 
   get settings() {
@@ -63,62 +63,91 @@ class PfeContentSet extends PFElement {
   }
 
   _buildAccordion() {
+    // Use a document fragment for efficiency
     const fragment = document.createDocumentFragment();
+    // Create the accordion wrapper component
     const accordion = document.createElement("pfe-accordion");
 
+    // Iterate over each element in the light DOM
     [...this.children].forEach(child => {
+      // If one of them has the attribute indicating they belong in the header region
       if (child.hasAttribute("pfe-content-set--header")) {
+        // Create a header component
         const header = document.createElement("pfe-accordion-header");
+        // Append the light DOM element to that component
         header.appendChild(child);
+        // Append the component to the accordion parent
         accordion.appendChild(header);
       }
-
+      // If one of them has the attribute indicating they belong in the panel region
       if (child.hasAttribute("pfe-content-set--panel")) {
+        // Create a panel component
         const panel = document.createElement("pfe-accordion-panel");
+        // Append the light DOM element to that component
         panel.appendChild(child);
+        // Append the component to the accordion parent
         accordion.appendChild(panel);
       }
     });
 
+    // Append the accordion to the document fragment
     fragment.appendChild(accordion);
 
+    // Pass the color property down to the accordion component
     if (this.settings.color) {
       accordion.setAttribute("color", this.settings.color);
     }
 
+    // Append the fragment to the component
     this.appendChild(fragment);
   }
 
   _buildTabs() {
+    // Use a document fragment for efficiency
     const fragment = document.createDocumentFragment();
+    // Create the tabs wrapper component
     const tabs = document.createElement("pfe-tabs");
 
+    // Iterate over each element in the light DOM
     [...this.children].forEach(child => {
+      // If one of them has the attribute indicating they belong in the header region
       if (child.hasAttribute("pfe-content-set--header")) {
+        // Create a tab component
         const header = document.createElement("pfe-tab");
+        // Set the attribute indicating its slot
         header.setAttribute("slot", "tab");
+        // Append the light DOM element to that component
         header.appendChild(child);
+        // Append the component to the tabs parent
         tabs.appendChild(header);
       }
-
+      // If one of them has the attribute indicating they belong in the panel region
       if (child.hasAttribute("pfe-content-set--panel")) {
+        // Create the panel component
         const panel = document.createElement("pfe-tab-panel");
+        // Set the attribute indicating its slot
         panel.setAttribute("slot", "panel");
+        // Append the light DOM element to that component
         panel.appendChild(child);
+        // Append the component to the tabs parent
         tabs.appendChild(panel);
       }
     });
 
+    // Append the tabs to the document fragment
     fragment.appendChild(tabs);
 
-    if (this.orientation) {
+    // If the orientation is set to vertical, add that attribute to the tabs
+    if (this.orientation === "vertical") {
       tabs.setAttribute("vertical", true);
     }
 
+    // Pass the variant attribute down to the tabs component
     if (this.settings.variant) {
       tabs.setAttribute("pfe-variant", this.settings.variant);
     }
 
+    // Append the fragment to the component
     this.appendChild(fragment);
   }
 }

examples/index.html

@@ -22,8 +22,6 @@ <h1>Demos</h1>
 					<li><a href="../elements/pfe-icon/demo">pfe-icon</a></li>
 					<li><a href="../elements/pfe-icon-panel/demo">pfe-icon-panel</a></li>
 					<li><a href="../elements/pfe-layouts/demo">pfe-layouts</a></li>
-					<li><a href="../elements/pfe-link-list/demo">pfe-link-list</a></li>
-					<li><a href="../elements/pfe-navigation/demo">pfe-navigation</a></li>
 					<li><a href="../elements/pfe-number/demo">pfe-number</a></li>
 					<li><a href="../elements/pfe-tabs/demo">pfe-tabs</a></li>
 				</ul>