From 93ba08d761eb8fb3d2847229cf81ac15d89c17f9 Mon Sep 17 00:00:00 2001
From: Prokyonn <daniel.mathis@sulu.io>
Date: Sun, 10 Oct 2021 23:21:01 +0200
Subject: [PATCH] Add toggle component (#62)

---
 CHANGELOG.md                         |  9 +++++
 packages/components/toggle/toggle.js | 49 ++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 packages/components/toggle/toggle.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 58c4e89..bc42828 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changes
 
+## 2.3.0
+
+ - FEATURE: Add toggle component.
+
+## 2.2.0
+
+ - FEATURE: Add accordion component
+ - FEATURE: Remove jquery requirement from expand component
+
 ## 2.1.1
 
  - BUGFIX: Fix path to passive events for scroll direction (#58)
diff --git a/packages/components/toggle/toggle.js b/packages/components/toggle/toggle.js
new file mode 100644
index 0000000..0aadf1d
--- /dev/null
+++ b/packages/components/toggle/toggle.js
@@ -0,0 +1,49 @@
+// Toggle component module
+
+'use strict';
+
+module.exports = function Toggle() {
+    var toggle = {};
+
+    /**
+     * @example
+     * <button id="toggle" class="button">
+     *    Lorem ipsum ...
+     * </button>
+     *
+     * import Toggle from '@sulu/web/packages/components/toggle/toggle';
+     * var component = new Toggle();
+     * component.initialize(document.getElementById('toggle'), {});
+     *
+     * @param {HTMLElement} el
+     * @param {object} options
+     */
+    toggle.initialize = function initialize(el, options) {
+        toggle.el = el;
+        toggle.modifier = options.modifier ? options.modifier : '--open';
+        toggle.toggleButtonClass = toggle.getFirstClass(toggle.el) + toggle.modifier;
+
+        // Run init functions
+        toggle.bindEvents();
+    };
+
+    /**
+     * @param {HTMLElement} element
+     * @returns {string}
+     */
+    toggle.getFirstClass = function getFirstClass(element) {
+        return element.getAttribute('class').split(' ')[0];
+    };
+
+    toggle.bindEvents = function bindEvents() {
+        toggle.el.addEventListener('click', toggle.toggleClass);
+    };
+
+    toggle.toggleClass = function toggleClass() {
+        toggle.el.classList.toggle(toggle.toggleButtonClass);
+    };
+
+    return {
+        initialize: toggle.initialize,
+    };
+};