chore: Update generator with knobs import; add events (#1527)

* chore: Update generator

* chore: Update logic for events in storybook template

* chore: Revert test listing, update line breaking in generator

* Update test/index.html

* chore: Update package lock

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: castastrophe

generators/element/index.js

@@ -348,9 +348,9 @@ module.exports = class extends Generator {
         }
 
         if (isPfelement) {
-          if (fs.existsSync(this.templatePath("demo/element.story.js"))) {
+          if (fs.existsSync(this.templatePath("demo/element.story.ejs"))) {
             this.fs.copyTpl(
-              this.templatePath("demo/element.story.js"),
+              this.templatePath("demo/element.story.ejs"),
               this.destinationPath(`${this.props.elementName}/demo/${this.props.elementName}.story.js`),
               this.props
             );

…/element/templates/demo/element.story.js …element/templates/demo/element.story.ejsgenerators/element/templates/demo/element.story.js renamed to generators/element/templates/demo/element.story.ejs generators/element/templates/demo/element.story.js renamed to generators/element/templates/demo/element.story.ejs

@@ -1,11 +1,20 @@
 import { storiesOf } from "@storybook/polymer";
-import * as bridge from "@storybook/addon-knobs/polymer";
+import * as bridge from "@storybook/addon-knobs";
+import { withActions } from "@storybook/addon-actions";
 import * as tools from "../../../.storybook/utils.js";
 
 import <%= elementClassName %> from "../dist/<%= elementName %>";
 
 const stories = storiesOf("<%= readmeName %>", module);
 
+// Add the readme
+import readme from "../README.md";
+stories.addParameters({
+  notes: {
+    markdown: readme
+  }
+});
+
 // Define the template to be used
 const template = (data = {}) => {
   return tools.component(<%= elementClassName %>.tag, data.prop, data.slots);
@@ -17,14 +26,28 @@ const defaultContent = tools.autoContent(1, 2);
 
 stories.addDecorator(bridge.withKnobs);
 
+<% if (events.length > 0) { -%>
+// Log events
+<% for(let i = 0; i < events.length; i++) { -%>
+stories.addDecorator(withActions(`${<%= elementClassName %>.tag}:<%= events[i] %>`));
+<% } } -%>
+
 stories.add(<%= elementClassName %>.tag, () => {
   let config = {};
   const props = <%= elementClassName %>.properties;
 
   //-- Set any custom defaults just for storybook here
+  let overrides = {};
+  // Example:
+  // let overrides = {
+  //   color: {
+  //     default: "lightest",
+  //     required: true
+  //   }
+  // };
 
   // Trigger the auto generation of the knobs for attributes
-  config.prop = tools.autoPropKnobs(<%= elementClassName %>);
+  config.prop = tools.autoPropKnobs(<%= elementClassName %>, overrides);
 
   const slots = <%= elementClassName %>.slots;
 

generators/element/templates/src/element.ejs

@@ -1,3 +1,5 @@
+// Documentation for building can be found at: https://patternflyelements.com/docs/develop/javascript/
+
 import PFElement from "<%= pfeElementLocation %>";
 
 class <%= elementClassName %> extends PFElement {
@@ -37,7 +39,7 @@ class <%= elementClassName %> extends PFElement {
 
   static get properties() {
     return {<%_ if (attributes.length > 0) { _%>
-    <%_ for(let i = 0; i < attributes.length; i++) { _%>
+    <%_ for(let i = 0; i < attributes.length; i++) { %>
       <%= attributes[i] %>: {
         title: "<%= _.capitalize(attributes[i]) %>",
         // Valid types are: String, Boolean, and Number
@@ -66,7 +68,9 @@ class <%= elementClassName %> extends PFElement {
 
   connectedCallback() {
     super.connectedCallback();
+
     // If you need to initialize any attributes, do that here
+
     <%_ if (slots.length > 0) { %>
     <%_ for(let i = 0; i < slots.length; i++) { _%>
     this.<%= _.camelCase(slots[i]) %> = this.querySelector(`[slot="${this.tag}--<%= slots[i] %>"]`);
@@ -77,14 +81,17 @@ class <%= elementClassName %> extends PFElement {
     <%_ } _%>
     <%_ } _%>
 
+    <%_ if (events.length > 0) { %>
+    // @EXAMPLE Attaches a click event to fire the handler as a test
     <%_ for(let i = 0; i < events.length; i++) { _%>
-    this.addEventListener(<%= elementClassName %>.events.<%= events[i] %>, this._<%= events[i] %>Handler);
+    this.addEventListener("click", this._<%= events[i] %>Handler);
+    <%_ } _%>
     <%_ } _%>
   }
 
   disconnectedCallback() {
     <%_ for(let i = 0; i < events.length; i++) { _%>
-    this.removeEventListener(<%= elementClassName %>.events.<%= events[i] %>, this._<%= events[i] %>Handler);
+    this.removeEventListener("click", this._<%= events[i] %>Handler);
     <%_ } _%>
   }
 
@@ -95,7 +102,7 @@ class <%= elementClassName %> extends PFElement {
     <% if (attributes.length < 1) { %>//   <% } %>}
 <%_ } _%>
 
-<%_ for(let i = 0; i < events.length; i++) { _%>
+<%_ for(let i = 0; i < events.length; i++) { %>
   _<%= events[i] %>Handler(event) {
     this.emitEvent(<%= elementClassName %>.events.<%= events[i] %>, {
       detail: {}