Pt 2: Storybook updates (#277)

* Update pfe-accordion and pfe-card to dynamic approach

* Add cta and tabs compatibility with new approach

* Remove commented out code; optimize rendering with a shared util function

* Update tabs with orientation fix

* Fix fallback for booleans and update datetime to show knobs

* Update remaining storybook issues

* Fix issue with the default not being injected

* Updates based on feedback re: kyle

* Add manual clean of empty boolean attributes

* Update story rendering

* Update band and tab story to fix dropdowns and tab rendering

* Clean up inconsistencies after merge

* Clean up schemas a bit for consistency

* Fix typo in accordion

* Remove deprecated prefix value from util function

* Remove striped test since that attribute is no longer supported

Author: castastrophe

.storybook/utils.js

@@ -3,6 +3,8 @@
 // Automatic content generation
 // https://www.npmjs.com/package/lorem-ipsum
 const loremIpsum = require("lorem-ipsum");
+// HTML cleaner
+// https://www.npmjs.com/package/clean-html
 const cleaner = require("clean-html");
 
 // Escape HTML to display markup as content
@@ -19,27 +21,56 @@ String.prototype.sentenceCase = function() {
 };
 
 // Print attributes based on an object
-const listProperties = (obj, prefix = "") =>
+const listProperties = (obj) =>
   Object.entries(obj)
     .map(set => {
+      let string = " ";
       let p = set[0];
       let v = set[1];
-      let print = set[2] || true;
-      return print && v && v !== "null"
-        ? ` ${p !== "slot" ? `${prefix ? `${prefix}-` : ""}` : ""}${p}="${v}"`
-        : "";
+      let print = set[2];
+
+      // If no print value is provided, default to true
+      if (typeof print === "undefined") {
+        print = true;
+      }
+
+      // If printing is allowed, the value exists and is not null and is not a slot
+      if (
+        print &&
+        typeof v !== "undefined" &&
+        (v !== null && v !== "null") &&
+        p !== "slot"
+      ) {
+        string += p;
+        // If the value is a boolean and is false, or the value is not a string true
+        if (
+          (typeof v === "string" && v !== "true") ||
+          (typeof v === "boolean" && !v)
+        ) {
+          string += "=";
+          if (typeof v === "string") {
+            // If it's a string, use quotation marks around it
+            string += `"${v}"`;
+          } else {
+            // Use, use it raw
+            string += v;
+          }
+        }
+      }
+      return string.toLowerCase();
     })
-    .join("");
+    .join(" ");
 
 // Create a tag based on a provided object
 // Accepts an object that can contain (all optional):
 // -- tag: html tag such as h1 or p, default is div
 // -- slot: rendered as slot="<input>"
 // -- attributes: passed through the listProperties function
 // -- content: Accepts html or plain text or renders default content
-export function customTag(obj, prefix = "") {
+export function customTag(obj) {
   let start = "";
   let end = "";
+
   // If a tag is defined, or it has slots or attributes to apply
   // render an open and close tag
   if (obj.tag || obj.slot || obj.attributes) {
@@ -54,11 +85,11 @@ export function customTag(obj, prefix = "") {
       end += "div";
     }
     start += obj.slot ? ` slot="${obj.slot}"` : "";
-    start += obj.attributes ? listProperties(obj.attributes || {}, prefix) : "";
+    start += obj.attributes ? listProperties(obj.attributes || {}) : "";
     start += ">";
     end += ">";
   }
-  return `${start}${obj.content || autoContent()}${end}`;
+  return `${start}${obj.content}${end}`;
 }
 
 const parseMarkup = string => {
@@ -133,15 +164,15 @@ const renderSlots = (slots = []) =>
     .join("");
 
 // Creates a component dynamically based on inputs
-export function component(tag, attributes = {}, slots = [], prefix = "") {
-  return `<${tag}${listProperties(attributes, prefix)}>${
+export function component(tag, attributes = {}, slots = []) {
+  return `<${tag}${listProperties(attributes)}>${
     slots.length > 0 ? renderSlots(slots) : autoContent()
   }</${tag}>`;
 }
 
 // Create an automatic heading
 export function autoHeading(short = false) {
-  let length = short ? Math.random() + 2 : Math.random() * 10 + 5;
+  let length = short ? Math.random() + 1 : Math.random() * 10 + 5;
   return loremIpsum({
     count: length,
     units: "words"
@@ -168,25 +199,52 @@ export function autoPropKnobs(properties, bridge) {
     let type = prop[1].type || "string";
     let defaultValue = prop[1].default;
     let options = prop[1].enum || [];
-    let hidden = prop[1].hidden || false;
+    let hidden = prop[1].hidden;
+    let required = prop[1].required;
+    let prefixed = prop[1].prefixed;
+
+    // Convert the type to lowercase values
+    type = type.toLowerCase();
+
+    // Initialize booleans to false if undefined
+    if (typeof hidden === "undefined") {
+      hidden = false;
+    }
+
+    if (typeof required === "undefined") {
+      required = false;
+    }
+
+    if (typeof prefixed === "undefined") {
+      prefixed = false;
+    }
+
+    if(prefixed) {
+      attr = `pfe-${attr}`;
+    }
 
     // Set the default method to text
     let method = "text";
     if (["boolean", "number", "object", "array", "date"].includes(type)) {
-      method = type.toLowerCase();
+      method = type;
     }
 
     // If the property is not hidden from the user
     if (!hidden) {
       // If an array of options exists, create a select list
       if (options.length > 0) {
         let opts = {};
+
+        // If this is not a required field, add a null option
+        if (!required) {
+          opts.null = "-- Not selected --";
+        }
+
         // Convert the array into an object
         options.map(item => (opts[item] = item));
 
-        // If a default is not defined, add a null option
+        // If the default value is not defined, use the new null option as the default
         if (defaultValue === "" || defaultValue === null) {
-          opts.null = "none";
           defaultValue = null;
         }
 
@@ -258,7 +316,7 @@ export function code(markup) {
 
   // Return the rendered markup and the code snippet output
   return `<pre style="white-space: pre-wrap; padding: 20px 50px; background-color: #f0f0f0; font-weight: bold; border: 1px solid #bccc;">${escapeHTML(
-    markup
+    markup.replace(/\=\"\"/g, "")
   )}</pre>`;
 }
 // prettier-ignore-end

elements/pfe-accordion/demo/pfe-accordion.story.js

@@ -6,9 +6,6 @@ import PfeAccordion from "../pfe-accordion";
 
 const stories = storiesOf("Accordion", module);
 
-const defaultHeader = tools.autoHeading();
-const defaultContent = tools.autoContent(5, 3);
-
 // Define the template to be used
 const template = (data = {}) => {
   return tools.component(PfeAccordion.tag, data.prop, data.slots);
@@ -18,8 +15,10 @@ stories.addDecorator(storybookBridge.withKnobs);
 
 stories.add(PfeAccordion.tag, () => {
   let config = {};
+  let headings = [];
+  let panels = [];
+
   // const props = PfeAccordion.properties;
-  // const slots = PfeAccordion.slots;
   const props = {
     on: {
       title: "Theme",
@@ -28,13 +27,15 @@ stories.add(PfeAccordion.tag, () => {
         "light",
         "dark"
       ],
-      default: "light"
+      default: "light",
+      prefixed: false
     }
   };
 
   config.prop = tools.autoPropKnobs(props, storybookBridge);
 
   //-- Add content to light DOM
+  // const slots = PfeAccordion.slots;
   config.slots = [];
 
   // Let the user determine number of accordions
@@ -43,42 +44,36 @@ stories.add(PfeAccordion.tag, () => {
     max: 10
   });
 
-  // Let the user customize the first header + panel set
-  let header = storybookBridge.text("Header", defaultHeader, "accordion-set");
-  let content = storybookBridge.text("Panel", defaultContent, "accordion-set");
-
-  config.slots.push({
-    content:
-      tools.component("pfe-accordion-header", {}, [
-        {
-          content: tools.customTag({
-            tag: "h2",
-            content: header
-          })
-        }
-      ]) +
-      tools.component("pfe-accordion-panel", {}, [
-        {
-          content: content
-        }
-      ])
-  });
+  // Ask user if they want to add any custom content
+  const customContent = storybookBridge.boolean(
+    "Use custom content?",
+    false,
+    "Content"
+  );
+    
+  // Let the user customize the header + panel set
+  if (customContent) {
+    for (let i = 0; i < accordionCount; i++) {
+      headings[i] = storybookBridge.text(`Heading ${i + 1}`, "", "accordion-set");
+      panels[i] = storybookBridge.text(`Panel ${i + 1}`, "", "accordion-set");
+    }
+  }
 
   // Use dynamic content for the rest
-  for (let i = 1; i < accordionCount; i++) {
+  for (let i = 0; i < accordionCount; i++) {
     config.slots.push({
       content:
         tools.component("pfe-accordion-header", {}, [
           {
             content: tools.customTag({
               tag: "h2",
-              content: tools.autoHeading()
+              content: customContent ? headings[i] : tools.autoHeading()
             })
           }
         ]) +
         tools.component("pfe-accordion-panel", {}, [
           {
-            content: tools.autoContent(5, 3)
+            content: customContent ? panels[i] : tools.autoContent(5, 3)
           }
         ])
     });

elements/pfe-accordion/src/pfe-accordion.js

@@ -64,19 +64,27 @@ class PfeAccordion extends PFElement {
     return "pfe-accordion.html";
   }
 
+  get schemaUrl() {
+    return "pfe-accordion.json";
+  }
+
   static get observedAttributes() {
-    return ["theme", "color", "on"];
+    return ["on"];
   }
 
   static get cascadingAttributes() {
     return {
-      color: "pfe-accordion-header, pfe-accordion-panel",
       on: "pfe-accordion-header, pfe-accordion-panel"
     };
   }
 
+  // Declare the type of this component
+  static get PfeType() {
+    return PFElement.PfeTypes.Container;
+  }
+
   constructor() {
-    super(PfeAccordion);
+    super(PfeAccordion, { type: PfeAccordion.PfeType });
   }
 
   connectedCallback() {
@@ -101,21 +109,6 @@ class PfeAccordion extends PFElement {
 
   attributeChangedCallback(attr, oldVal, newVal) {
     super.attributeChangedCallback(attr, oldVal, newVal);
-
-    if (attr === "color") {
-      const headers = this.querySelectorAll(PfeAccordionHeader.tag);
-
-      if (newVal === "striped") {
-        [...headers].forEach((header, index) => {
-          const headerClass = index % 2 ? "even" : "odd";
-          header.classList.add(headerClass);
-        });
-      } else {
-        [...headers].forEach((header, index) => {
-          header.classList.remove("even", "odd");
-        });
-      }
-    }
   }
 
   toggle(index) {

elements/pfe-accordion/src/pfe-accordion.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "http://json-schema.org/draft-04/schema#",
+  "title": "Accordion",
+  "description": "This element renders content in an accordion.",
+  "type": "object",
+  "tag": "pfe-accordion",
+  "class": "pfe-accordion",
+  "category": "container",
+  "properties": {
+    "slots": {
+      "title": "Slots",
+      "description": "Definition of the supported slots",
+      "type": "object",
+      "properties": {
+        "default": {
+          "title": "Default",
+          "type": "array",
+          "namedSlot": false,
+          "items": {
+            "oneOf": [{
+              "$ref": "pfe-accordion-header"
+            }, {
+              "$ref": "pfe-accordion-panel"
+            }]
+          }
+        }
+      }
+    },
+    "attributes": {
+      "title": "Attributes",
+      "type": "object",
+      "properties": {
+        "on": {
+          "title": "Context",
+          "type": "string",
+          "enum": [
+            "light",
+            "dark"
+          ],
+          "default": "light",
+          "prefixed": false
+        }
+      },
+      "required": ["on"]
+    }
+  },
+  "required": ["slots", "attributes"],
+  "additionalProperties": false
+}

elements/pfe-accordion/test/pfe-accordion_test.html

@@ -237,25 +237,6 @@ <h2>Where do the main characters work as adults?</h2>
 
           sinon.assert.calledWith(spy, 'pfe-accordion-header: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)');
         });
-
-        test('it should add an even or odd class to the headers if the theme is striped', () => {
-          const pfeAccordion = document.querySelector('pfe-accordion');
-          const headers = [...pfeAccordion.querySelectorAll('pfe-accordion-header')];
-
-          pfeAccordion.setAttribute('color', 'striped');
-
-          /*
-           * this can be confusing. index of 0 is really "even" but visually,
-           * the first heading (index of 0) is 1 making it have a class of odd.
-           */
-          headers.forEach((header, index) => {
-            if (index % 2 === 0) {
-              assert.isTrue(header.classList.contains('odd'));
-            } else {
-              assert.isTrue(header.classList.contains('even'));
-            }
-          });
-        });
       });
     </script>
   </body>