Sample JS for Drupal + Storybook projects

button.js

/*

 The code below is an example of writing JS code within Savas Labs Drupal projects using Storybook.
 
 This does not work for event binding in Storybook, only on the Drupal site.

 All JS files should be stored in the {theme}/storybook/components directory in the folder corresponding with 
 the appropriate component. For example, the below code would be stored in storybook/components/atoms/button.

 All .js or .ts files within the storybook/components directory are compiled into {theme}/build/scripts.js.
 
 Make sure all JS files are written using vanilla JS and ES6.
 
 Note: You can make scripts.js hot reload by using the npm run build-dev command.
 Then run npm run build-library to compile for production.

*/

class Button {
  constructor() {
    this.variables();
    this.bindEvents();
  }

  variables() {
    this.buttons = document.querySelectorAll('.button');
  }

  bindEvents() {
    this.buttons.forEach(button => {
      button.addEventListener('click', this.onClick);
    });
  }

  onClick = e => {
    e.preventDefault();

    console.log(e.currentTarget);
  };
}

if (document.querySelectorAll('.button') !== null) {
  module.exports = new Button();
}