@nys-cui/cui-section 0.2.17 → 0.2.19

package/package.json

@@ -6,7 +6,7 @@
     },
     "main": "./dist/js/section.js",
     "type": "module",
-    "version": "0.2.17",
+    "version": "0.2.19",
     "scripts": {
         "clean": "rm -rf ./dist",
         "build": "npm run clean && cui --dep",

package/src/section.js

@@ -29,10 +29,11 @@ export default class CUI_SECTION extends HTMLElement {
         this.oPropsToStateNames = {
             "sectiontitle": "sTitle",
             "hideControls": "bHideControls",
+            "hideHeader": "bHideHeader",
             "collapsed": "bCollapsed",
             "styles": "asStyles",
-            "label": "sTitle"
-
+            "label": "sTitle",
+            "instructions": "oInstructions"
         }
     }
 
@@ -42,31 +43,34 @@ export default class CUI_SECTION extends HTMLElement {
 
     get template() {
 
-        let sTemplate = `<section part="root-section"><header part="section-header">
-            <div class='header-info' part='header-info'><h2 id="section-title" part="section-title"></h2><slot name='section-help-tag'></slot></div>`;
+        let sTemplate = `<section part="root-section"><header part="section-header ${this.state.bHideHeader ? `headless" class="headless"` : `"`}>`;
 
-        if (!this.state.bHideControls) {
+        if(!this.state.bHideHeader) {
+            sTemplate += `<div class='header-info' part='header-info'><h2 id="section-title" part="section-title"></h2><slot name='section-help-tag'></slot></div>`;
 
-            if (this.sIconBasePath) {
+            if (!this.state.bHideControls) {
 
-                sTemplate += `
-                    <div class="header-controls" part="header-controls">
-                        <button type="button" id="collapse-control" aria-controls="container" part="collapse-control">
-                            <cui-icon src="caret-down" basePath="${this.sIconBasePath}" part="collapse-control-icon"></cui-icon>
-                        </button>
-                    </div>`;
+                if (this.sIconBasePath) {
 
-            }
-            else {
-
-                sTemplate += `
-                    <div class="header-controls" part="header-controls">
-                        <button type="button" id="collapse-control" aria-controls="container" part="collapse-control">
-                            <cui-icon src="caret-down" part="collapse-control-icon"></cui-icon>
-                        </button>
-                    </div>`;
-            }
+                    sTemplate += `
+                        <div class="header-controls" part="header-controls">
+                            <button type="button" id="collapse-control" aria-controls="container" part="collapse-control">
+                                <cui-icon src="caret-down" basePath="${this.sIconBasePath}" part="collapse-control-icon"></cui-icon>
+                            </button>
+                        </div>`;
+
+                }
+                else {
+
+                    sTemplate += `
+                        <div class="header-controls" part="header-controls">
+                            <button type="button" id="collapse-control" aria-controls="container" part="collapse-control">
+                                <cui-icon src="caret-down" part="collapse-control-icon"></cui-icon>
+                            </button>
+                        </div>`;
+                }
 
+            }
         }
 
         sTemplate += `</header><div class="container" id="container" part="container">
@@ -201,9 +205,11 @@ export default class CUI_SECTION extends HTMLElement {
 
         this.state = {
             sTitle: this.state.sTitle || this.getAttribute('sectiontitle') || "SECTION TITLE",
-            bHideControls: this.hasAttribute("hideControls") ? true : false,
-            bCollapsed: (this.getAttribute('collapsed') === "true") ? true : false,
-            asStyles: (this.getAttribute('styles')) ? this.getAttribute('styles').split(',') : null
+            bHideControls: this.state.bHideControls || this.hasAttribute("hideControls") ? true : false,
+            bHideHeader: this.state.bHideHeader || this.hasAttribute("hideHeader") ? true : false,
+            bCollapsed: this.state.bCollapsed || (this.getAttribute('collapsed') === "true") ? true : false,
+            asStyles: this.state.asStyles || (this.getAttribute('styles')) ? this.getAttribute('styles').split(',') : null,
+            oInstructions: this.state.oInstructions || null
         }
 
         this.sIconBasePath = this.getAttribute('iconbase') || null;
@@ -290,6 +296,14 @@ export default class CUI_SECTION extends HTMLElement {
             })
         })
 
+        if(this.state.oInstructions && (this.state.oInstructions.text || this.state.oInstructions.html)) {
+            let dSectionInstructions = document.createElement("div");
+            dSectionInstructions.innerHTML = this.state.oInstructions.html || this.state.oInstructions.text;
+            dSectionInstructions.classList.add("section-instructions");
+            dSectionInstructions.setAttribute('slot', 'section-text');
+            this.appendChild(dSectionInstructions);
+        }
+
     }
 
     get messages() {

package/src/section.scss

@@ -68,6 +68,11 @@
                 }
             }
 
+            &.headless {
+                border-bottom: none;
+                margin: 0.75em 0.75em;
+            }
+
         }
 
         .container {