From bc9a0325f12c7a13e45fce46e6623d88e62bc1dc Mon Sep 17 00:00:00 2001
From: Amitosh Swain Mahapatra <amitosh.swain@gmail.com>
Date: Sun, 30 Apr 2017 00:37:41 +0530
Subject: [PATCH] PatternFly accordion component - pf-accordion

Closes #25
---
 .gitignore                                    |   1 +
 index.html                                    |   3 +
 src/patternfly.js                             |   3 +
 src/pf-accordion/index.html                   | 156 +++++++++
 src/pf-accordion/index.js                     |   2 +
 src/pf-accordion/package.json                 |  11 +
 .../pf-accordion-body.component.js            |  15 +
 .../pf-accordion-heading.component.js         | 133 +++++++
 .../pf-accordion-panel.component.js           |  78 +++++
 .../pf-accordion-template.component.js        | 184 ++++++++++
 src/pf-accordion/pf-accordion.component.js    | 315 +++++++++++++++++
 src/pf-accordion/pf-accordion.scss            |  10 +
 src/pf-accordion/pf-accordion.spec.js         | 331 ++++++++++++++++++
 src/pf-utils/pf-utils.js                      |  18 +
 src/scss/patternfly-webcomponents.scss        |   4 +-
 webpack.config.js                             |   2 +
 16 files changed, 1265 insertions(+), 1 deletion(-)
 create mode 100644 src/pf-accordion/index.html
 create mode 100644 src/pf-accordion/index.js
 create mode 100644 src/pf-accordion/package.json
 create mode 100644 src/pf-accordion/pf-accordion-body.component.js
 create mode 100644 src/pf-accordion/pf-accordion-heading.component.js
 create mode 100644 src/pf-accordion/pf-accordion-panel.component.js
 create mode 100644 src/pf-accordion/pf-accordion-template.component.js
 create mode 100644 src/pf-accordion/pf-accordion.component.js
 create mode 100644 src/pf-accordion/pf-accordion.scss
 create mode 100644 src/pf-accordion/pf-accordion.spec.js
diff --git a/.gitignore b/.gitignore
index 26a59e8..b1dc339 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 # Ignore Project files
 *.idea
+*.vscode
 
 # Ignore local nodejs packages
 node_modules/
diff --git a/index.html b/index.html
index 1049634..fef0691 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +22,9 @@ <h1>PatternFly Web Components</h1>
       <div class="col-sm-6">
         <h2>Widgets</h2>
         <ul>
+          <li>
+            <a href="app/app.html?dir=pf-accordion&file=index.html">Accordion</a>
+          </li>
           <li>
             <a href="app/app.html?dir=pf-alert&file=index.html">Alerts</a>
           </li>
diff --git a/src/patternfly.js b/src/patternfly.js
index da24ae2..d6c48b4 100644
--- a/src/patternfly.js
+++ b/src/patternfly.js
@@ -1,6 +1,9 @@
 /* Require the HTML Element Shim */
 require('./customElementShim.js');
 
+/** PF Accordion Component **/
+require('pf-accordion.component.js');
+
 /** PF Alert Component **/
 require('pf-alert.component.js');
 
diff --git a/src/pf-accordion/index.html b/src/pf-accordion/index.html
new file mode 100644
index 0000000..9410dc3
--- /dev/null
+++ b/src/pf-accordion/index.html
@@ -0,0 +1,156 @@
+<!doctype html>
+<html>
+<head>
+  <title>pf-accordion example</title>
+  <link rel="stylesheet" href="../../dist/css/patternfly.css">
+  <link rel="stylesheet" href="../../dist/css/patternfly-additions.css">
+  <link rel="stylesheet" href="../../dist/css/patternfly-webcomponents.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents.js"></script>
+  <script src="../../dist/js/patternfly.js"></script>
+</head>
+<body>
+  <div class="container">
+    <div class="page-header">
+      <h1>Accordion</h1>
+    </div>
+    <pf-accordion id="myAccordion">
+      <pf-accordion-panel>
+        <pf-accordion-heading id="headingOne">
+          <h4 class="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#myAccordion" href="#collapseOne" aria-controls="collapseOne">
+              Collapsible Group Item #1
+            </a>
+          </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template id="collapseOne" open aria-labelledby="headingOne">
+          <pf-accordion-body>
+            Collapse CONTENT 1
+          </pf-accordion-body>
+        </pf-accordion-template>
+      </pf-accordion-panel>
+      <pf-accordion-panel class="panel panel-primary">
+        <pf-accordion-heading id="headingTwo">
+          <h4 class="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#myAccordion" href="#collapseTwo" aria-controls="collapseTwo">
+              Collapsible Group Item #2
+            </a>
+          </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template id="collapseTwo" aria-labelledby="headingTwo">
+          <pf-accordion-body>
+            Collapse CONTENT 2
+          </pf-accordion-body>
+        </pf-accordion-template>
+      </pf-accordion-panel>
+      <pf-accordion-panel class="panel-warning">
+        <pf-accordion-heading id="headingThree">
+          <h4 class="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#myAccordion" href="#collapseThree" aria-controls="collapseThree">
+              Collapsible Group Item #3
+            </a>
+          </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template id="collapseThree" aria-labelledby="headingThree">
+          <pf-accordion-body>
+            Collapse CONTENT 3
+          </pf-accordion-body>
+        </pf-accordion-template>
+      </pf-accordion-panel>
+      <pf-accordion-panel class="panel panel-success">
+        <pf-accordion-heading id="headingFour">
+          <h4 class="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#myAccordion" href="#collapseFour" aria-controls="collapseFour">
+              Collapsible Group Item #4
+            </a>
+          </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template id="collapseFour" aria-labelledby="headingFour">
+          <pf-accordion-body>
+            Collapse CONTENT 4
+          </pf-accordion-body>
+        </pf-accordion-template>
+      </pf-accordion-panel>
+      <pf-accordion-panel class="panel panel-danger">
+        <pf-accordion-heading id="headingFive">
+          <h4 class="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#myAccordion" href="#collapseFive" aria-controls="collapseFive">
+              Collapsible Group Item #5
+            </a>
+          </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template id="collapseFive" aria-labelledby="headingFive">
+          <pf-accordion-body>
+            Collapse CONTENT 5
+          </pf-accordion-body>
+        </pf-accordion-template>
+      </pf-accordion-panel>
+    </pf-accordion>
+
+    <h2>Fixed Height</h2>
+    <pf-accordion fixedheight style="height: 200px" id="myAccordion2">
+      <pf-accordion-panel>
+        <pf-accordion-heading id="headingOne2">
+          <h4 class="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#myAccordion2" href="#collapseOne2" aria-controls="collapseOne2">
+              Collapsible Group Item #1
+            </a>
+          </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template id="collapseOne2" open aria-labelledby="headingOne2">
+          <pf-accordion-body>
+            <p>
+              "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+              ulpa qui officia deserunt mollit anim id est laborum."
+            </p>
+            <p>
+              "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+              ulpa qui officia deserunt mollit anim id est laborum."
+            </p>
+          </pf-accordion-body>
+        </pf-accordion-template>
+      </pf-accordion-panel>
+      <pf-accordion-panel class="panel panel-primary">
+        <pf-accordion-heading id="headingTwo2">
+          <h4 class="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#myAccordion2" href="#collapseTwo2" aria-controls="collapseTwo2">
+              Collapsible Group Item #2
+            </a>
+          </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template id="collapseTwo2" aria-labelledby="headingTwo2">
+          <pf-accordion-body>
+            <p>
+              "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+              ulpa qui officia deserunt mollit anim id est laborum."
+            </p>
+            <p>
+              "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+              ulpa qui officia deserunt mollit anim id est laborum."
+            </p>
+          </pf-accordion-body>
+        </pf-accordion-template>
+      </pf-accordion-panel>
+    </pf-accordion>
+  </div>
+</body>
+</html>
diff --git a/src/pf-accordion/index.js b/src/pf-accordion/index.js
new file mode 100644
index 0000000..47d7edb
--- /dev/null
+++ b/src/pf-accordion/index.js
@@ -0,0 +1,2 @@
+/** PF Accordion Component **/
+require('pf-accordion.component');
\ No newline at end of file
diff --git a/src/pf-accordion/package.json b/src/pf-accordion/package.json
new file mode 100644
index 0000000..11479e1
--- /dev/null
+++ b/src/pf-accordion/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "pf-accordion",
+  "version": "1.0.0",
+  "description": "the pf-accordion webcomponent",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/src/pf-accordion/pf-accordion-body.component.js b/src/pf-accordion/pf-accordion-body.component.js
new file mode 100644
index 0000000..e36ddae
--- /dev/null
+++ b/src/pf-accordion/pf-accordion-body.component.js
@@ -0,0 +1,15 @@
+/**
+ * <b>&lt;pf-accordion-body&gt;</b> element for Patternfly Web Components
+ *
+ */
+export class PfAccordionBody extends HTMLElement {
+  /**
+   * Called when an instance was inserted into the document
+   */
+  attachedCallback() {
+    this.classList.add('panel-body');
+  }
+}
+(function () {
+  document.registerElement('pf-accordion-body', PfAccordionBody);
+}());
\ No newline at end of file
diff --git a/src/pf-accordion/pf-accordion-heading.component.js b/src/pf-accordion/pf-accordion-heading.component.js
new file mode 100644
index 0000000..0d61e51
--- /dev/null
+++ b/src/pf-accordion/pf-accordion-heading.component.js
@@ -0,0 +1,133 @@
+/**
+ * <b>&lt;pf-accordion-heading&gt;</b> element for Patternfly Web Components
+ *
+ */
+export class PfAccordionHeading extends HTMLElement {
+  /**
+   * Called when an instance was inserted into the document
+   */
+  attachedCallback() {
+    this.classList.add('panel-heading');
+    this.setAttribute('role', 'tab');
+
+    this._findTarget();
+
+    this._observer = new MutationObserver((mutations) => {
+      mutations.forEach((record) => {
+        // detach handlers on toggle removal, try to get another toggle
+        if (this._toggle || this._target) {
+          for (let i = 0, length = record.removedNodes.length; i < length; i++) {
+            if (record.removedNodes[i] === this._toggle) {
+              this._toggle.removeEventListener('click', this._toggleClickHandler);
+              this._toggle.removeEventListener('keyup', this._toggleKeyUpHandler);
+              this._initializeToggle();
+            }
+
+            if (record.removedNodes[i] === this._target) {
+              this._findTarget();
+            }
+          }
+        }
+
+        // if there is no toggle or target initialized
+        if (record.addedNodes.length > 0) {
+          if (!this._target) {
+            this._findTarget();
+          } else if (!this._toggle) {
+            this._initializeToggle();
+          }
+        }
+      });
+    });
+
+    this._observer.observe(this, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  _findTarget() {
+    this._target = this.parentElement.querySelector('pf-accordion-template');
+    if (this._target) {
+      if (this._target._initialized) {
+        this._initializeToggle();
+      } else {
+        this._target.addEventListener('pf-accordion.initialized', () => {
+          this._initializeToggle();
+        });
+      }
+    }
+  }
+  /**
+   * Finds the toggle element and adds appropriate listeners to it.
+   * @private
+   */
+  _initializeToggle() {
+    this._toggle = this.querySelector('*[data-toggle="collapse"]');
+
+    if (this._toggle) {
+      this._toggleClickHandler = this._handleToggleClick.bind(this);
+      this._toggleKeyUpHandler = this._handleToggleKeyUp.bind(this);
+      this._toggle.addEventListener('click', this._toggleClickHandler);
+      this._toggle.addEventListener('keyup', this._toggleKeyUpHandler);
+
+      if (this._target !== null) {
+        if (this._target.open) {
+          this._toggle.classList.remove('collapsed');
+          this._toggle.setAttribute('aria-expanded', 'true');
+        } else {
+          this._toggle.classList.add('collapsed');
+          this._toggle.setAttribute('aria-expanded', 'false');
+        }
+        this._target.addEventListener('pf-accordion.expanding', () => {
+          this._toggle.classList.remove('collapsed');
+          this._toggle.setAttribute('aria-expanded', 'true');
+        });
+        this._target.addEventListener('pf-accordion.collapsing', () => {
+          this._toggle.classList.add('collapsed');
+          this._toggle.setAttribute('aria-expanded', 'false');
+        });
+      }
+    }
+  }
+
+  /**
+   * Toggle the target
+   * @private
+   */
+  _doToggle() {
+    if (this._target) {
+      this._target.toggle();
+    }
+  }
+
+  /**
+   * Handle keyUp on the toggle element
+   * @private
+   */
+  _handleToggleKeyUp(event) {
+    event.preventDefault();
+    if (32 === event.keyCode) {
+      this._doToggle();
+    }
+  }
+
+  /**
+   * Handle keyUp on the toggle element
+   * @private
+   */
+  _handleToggleClick(event) {
+    event.preventDefault();
+    this._doToggle();
+  }
+
+  /**
+   * Called when the element is removed from the DOM
+   */
+  detachedCallback() {
+    this._observer.disconnect();
+  }
+}
+(function () {
+  document.registerElement('pf-accordion-heading', PfAccordionHeading);
+}());
\ No newline at end of file
diff --git a/src/pf-accordion/pf-accordion-panel.component.js b/src/pf-accordion/pf-accordion-panel.component.js
new file mode 100644
index 0000000..d33f090
--- /dev/null
+++ b/src/pf-accordion/pf-accordion-panel.component.js
@@ -0,0 +1,78 @@
+import PfAccordionHeading from 'pf-accordion-heading.component';
+import PfAccordionTemplate from 'pf-accordion-template.component';
+/**
+ * <b>&lt;pf-accordion-panel&gt;</b> element for Patternfly Web Components
+ *
+ */
+export class PfAccordionPanel extends HTMLElement {
+  /**
+   * Called when an instance of the element is created
+   */
+  createdCallback() {
+    this._initDefaults();
+  }
+
+  /**
+   * Called when an instance of the element was inserted into the document
+   */
+  attachedCallback() {
+    this._setClasses();
+  }
+
+  /**
+   * Returns a list of attributes on which we are interested to track changes
+   * @returns {String[]}
+   */
+  static get observedAttributes() {
+    return ['class'];
+  }
+
+  /**
+   * Called when element's attribute value has changed
+   *
+   * @param {string} attrName The attribute name that has changed
+   * @param {string} oldValue The old attribute value
+   * @param {string} newValue The new attribute value
+   */
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if ('class' === attrName) {
+      this._setClasses();
+    }
+  }
+
+  /**
+   * Sets default constants
+   * @private
+   */
+  _initDefaults() {
+    this._classes = {
+      'context': {
+        'classes': ['panel-default', 'panel-primary', 'panel-warning', 'panel-success', 'panel-danger'],
+        'default': 'panel-default'
+      }
+    };
+  }
+
+  /**
+   * Sets default classes on the component
+   * @private
+   */
+  _setClasses() {
+    // add default class for this component
+    if (!this.classList.contains('panel')) {
+      this.classList.add('panel');
+    }
+
+    let hasClass = false;
+    this._classes.context.classes.forEach((clazz) => {
+      hasClass = hasClass || this.classList.contains(clazz);
+    });
+
+    if (!hasClass) {
+      this.classList.add(this._classes.context.default);
+    }
+  }
+}
+(function () {
+  document.registerElement('pf-accordion-panel', PfAccordionPanel);
+}());
\ No newline at end of file
diff --git a/src/pf-accordion/pf-accordion-template.component.js b/src/pf-accordion/pf-accordion-template.component.js
new file mode 100644
index 0000000..627dab9
--- /dev/null
+++ b/src/pf-accordion/pf-accordion-template.component.js
@@ -0,0 +1,184 @@
+import PfAccordionBody from 'pf-accordion-body.component';
+import { pfUtil } from 'pf-utils';
+/**
+ * <b>&lt;pf-accordion-template&gt;</b> element for Patternfly Web Components
+ *
+ * @prop {boolean} open indicates if accordion is expanded
+ */
+export class PfAccordionTemplate extends HTMLElement {
+
+  /**
+   * Returns a list of attributes on which we are interested to track changes
+   * @returns {String[]}
+   */
+  static get observedAttributes() {
+    return ['open'];
+  }
+
+  /**
+   * Called when an instance was inserted into the document
+   */
+  attachedCallback() {
+    this.classList.add('panel-collapse');
+    this.classList.add('collapse');
+    this.setAttribute('role', 'tabpanel');
+
+    // attach this as early as possible before fiddling with state attributes
+    this.addEventListener('transitionend', this._handleTransitionEnd);
+
+    if (this.hasAttribute('open')) {
+      this.classList.add('in');
+    } else if (this.classList.contains('in')) {
+      this.setAttribute('open', '');
+    }
+
+    this._initialized = true;
+    this.dispatchEvent(new Event('pf-accordion.initialized'));
+  }
+
+  /**
+   * Called when an instance of the element is created
+   */
+  createdCallback() {
+    this._initialized = false;
+  }
+
+  /**
+   * Called when element's attribute value has changed
+   *
+   * @param {string} attrName The attribute name that has changed
+   * @param {string} oldValue The old attribute value
+   * @param {string} newValue The new attribute value
+   */
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if ('open' === attrName) {
+      if (this.hasAttribute('open')) {
+        this._expand();
+      } else {
+        this._collapse();
+      }
+    }
+  }
+
+  /**
+   * Performs a collapse state change action.
+   * Compatibility function for Bootstrap collapse plugin.
+   *
+   * @param {String} state state of the panel
+   */
+  collapse(state) {
+    switch (state) {
+      case 'show':
+        this.open = true;
+        break;
+      case 'hide':
+        this.open = false;
+        break;
+      case 'toggle':
+        this.toggle();
+        break;
+    }
+  }
+
+  /**
+   * Make the panel visible
+   */
+  _expand() {
+
+    this._transitioning = true;
+
+    this.classList.add('collapsing');
+    this.classList.add('in');
+
+    // force a delay, to allow layout updates
+    setTimeout(() => {
+      this.style.height = pfUtil.getMaxHeight(this) + 'px';
+
+      this.dispatchEvent(new CustomEvent('pf-accordion.expanding', {
+        bubbles: true,
+        cancelable: false
+      }));
+    }, 10);
+  }
+
+  /**
+   * Hide the panel
+   */
+  _collapse() {
+    this._transitioning = true;
+    let maxHeight = pfUtil.getMaxHeight(this);
+    this.style.height = maxHeight + 'px';
+    this.classList.add('collapsing');
+
+    // force a delay, to allow layout updates
+    setTimeout(() => {
+      this.style.height = '0px';
+
+      this.dispatchEvent(new CustomEvent('pf-accordion.collapsing', {
+        bubbles: true,
+        cancelable: false
+      }));
+    }, 10);
+  }
+
+  /**
+   * Toggle the visiblity of the panel
+   */
+  toggle() {
+    this.open = !this.open;
+  }
+
+  /**
+   * Handles the transitionend event.
+   * @private
+   */
+  _handleTransitionEnd() {
+    this.classList.remove('collapsing');
+    this.classList.add('collapse');
+    if (this.open) {
+      this.setAttribute('aria-expanded', 'true');
+      this.classList.remove('collapsing');
+
+      this.dispatchEvent(new CustomEvent('pf-accordion.expanded', {
+        bubbles: true
+      }));
+    } else {
+      this.setAttribute('aria-expanded', 'false');
+      this.classList.remove('collapsing');
+      this.classList.remove('in');
+
+      this.dispatchEvent(new CustomEvent('pf-accordion.collapsed', {
+        bubbles: true
+      }));
+    }
+
+    this.style.height = '';
+    this._transitioning = false;
+  }
+
+  /**
+   * Get the display state of the panel
+   *
+   * @returns {string} the display state, either 'shown' or 'hidden'
+   */
+  get open() {
+    return this.hasAttribute('open');
+  }
+
+  /**
+   * Set the display state of the panel
+   *
+   * @param {string} value the display state, either 'shown' or 'hidden'
+   */
+  set open(value) {
+    if (value) {
+      this.setAttribute('open', '');
+    } else {
+      this.removeAttribute('open');
+    }
+  }
+}
+
+(function () {
+  document.registerElement('pf-accordion-template', PfAccordionTemplate);
+}());
\ No newline at end of file
diff --git a/src/pf-accordion/pf-accordion.component.js b/src/pf-accordion/pf-accordion.component.js
new file mode 100644
index 0000000..5633a39
--- /dev/null
+++ b/src/pf-accordion/pf-accordion.component.js
@@ -0,0 +1,315 @@
+import PfAccordionPanel from 'pf-accordion-panel.component';
+import PfAccordionTemplate from 'pf-accordion-template.component';
+import {
+  pfUtil
+} from 'pf-utils';
+
+/**
+ * <b>&lt;pf-accordion&gt;</b> element for Patternfly Web Components
+ *
+ * @example {@lang xml}
+ * <pf-accordion>
+ *   <pf-accordion-panel>
+ *     <pf-accordion-heading>
+ *       <h4 class="panel-title">
+ *         <a role="button" data-toggle="collapse" href="#">
+ *           Collapsible Group Item #1
+ *         </a>
+ *       </h4>
+ *     </pf-accordion-heading>
+ *     <pf-accordion-template open>
+ *       <pf-accordion-body>
+ *         Collapse CONTENT 1
+ *       </pf-accordion-body>
+ *     </pf-accordion-template>
+ *   </pf-accordion-panel>
+ *   <pf-accordion-panel class="panel panel-primary">
+ *     <pf-accordion-heading>
+ *       <h4 class="panel-title">
+ *         <a role="button" data-toggle="collapse" href="#">
+ *           Collapsible Group Item #2
+ *         </a>
+ *       </h4>
+ *     </pf-accordion-heading>
+ *     <pf-accordion-template>
+ *       <pf-accordion-body>
+ *         Collapse CONTENT 2
+ *       </pf-accordion-body>
+ *     </pf-accordion-template>
+ *   </pf-accordion-panel>
+ * </pf-accordion>
+ *
+ * @prop fixedHeight {Boolean} Whether the accrodion is a fixed-height accordion
+ */
+export class PfAccordion extends HTMLElement {
+  /**
+   * Called when an instance of the element is created
+   */
+  createdCallback() {
+    this._openPanels = [];
+    this._fixedHeight = false;
+  }
+
+  /**
+   * Called when an instance was inserted into the document
+   */
+  attachedCallback() {
+    this.classList.add('panel-group');
+    this.setAttribute('role', 'tablist');
+    this.setAttribute('aria-multiselectable', 'true');
+
+    let nodes = this.querySelectorAll('pf-accordion-panel > pf-accordion-template');
+    if (nodes) {
+      Array.prototype.forEach.call(nodes, ((panel) => {
+        this._checkAndAddPanel(panel);
+      }));
+    }
+
+    // catch bubbled events
+    this.addEventListener('pf-accordion.expanding', this._handlePanelShown);
+    this.addEventListener('pf-accordion.collapsing', this._handlePanelHidden);
+
+    this._observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutationRecord) => {
+        if ('childList' === mutationRecord.type) {
+
+          // handle dynamic addition of panels
+          for (let i = 0; i < mutationRecord.addedNodes.length; i++) {
+            let node = mutationRecord.addedNodes[i];
+            // only check for element nodes
+            if (1 === node.nodeType && 'pf-accordion-panel' === node.tagName.toLowerCase()) {
+              let panel = node.querySelector('pf-accordion-template');
+              this._checkAndAddPanel(panel);
+            }
+          }
+
+          // handle removal of panels
+          for (let i = 0; i < mutationRecord.removedNodes.length; i++) {
+            let node = mutationRecord.removedNodes[i];
+            // only check for element nodes
+            if (1 === node.nodeType && 'pf-accordion-panel' === node.tagName.toLowerCase()) {
+              let panel = node.querySelector('pf-accordion-template');
+              if (null !== panel) {
+                let index = this._openPanels.indexOf(panel);
+                if (index > -1) {
+                  this._openPanels.splice(index, 1);
+                }
+              }
+            }
+          }
+
+          // fixed height needs to be recalculated on DOM initialization
+          if (this.hasAttribute('fixedheight')) {
+            this._setFixedHeight();
+          }
+        }
+      });
+    });
+
+    this._observer.observe(this, {
+      childList: true
+    });
+
+    if (this.hasAttribute('fixedheight')) {
+      // _initialized is raised after _initFixedHeight
+      this._initFixedHeight();
+    } else {
+      this._initialized = true;
+      this.dispatchEvent(new Event('pf-accordion.initialized'));
+    }
+  }
+
+  /**
+   * Check and add panel if it is initialized
+   * @private
+   * @param {PfAccordionTemplate} panel the toggle pane;
+   */
+  _checkAndAddPanel(panel) {
+    if (panel._initialized) {
+      if (panel.open) {
+        this._openPanels.push(panel);
+      }
+    } else {
+      pfUtil.once(panel, 'pf-accordion.initialized', () => {
+        if (panel.open) {
+          this._openPanels.push(panel);
+        }
+      });
+    }
+  }
+
+  /**
+   * Handle bubbled pf-accordion-collapsing on accordion
+   * @param {Event} e event
+   * @private
+   */
+  _handlePanelHidden(e) {
+    let index = this._openPanels.indexOf(e.target);
+    if (index > -1) {
+      this._openPanels.splice(index, 1);
+    }
+  }
+
+  /**
+   * Handle bubbled pf-accordion-expanding on accordion
+   * @param {Event} e event
+   * @private
+   */
+  _handlePanelShown(e) {
+    let panel;
+    while ((panel = this._openPanels.shift())) {
+      panel.open = false;
+    }
+    this._openPanels.push(e.target);
+  }
+
+  /**
+   * Called when the element is removed from the DOM
+   */
+  detachedCallback() {
+    this._observer.disconnect();
+    window.removeEventListener('resize', this._fixedHeightListener);
+  }
+
+
+  /**
+   * Called when element's attribute value has changed
+   *
+   * @param {string} attrName The attribute name that has changed
+   * @param {string} oldValue The old attribute value
+   * @param {string} newValue The new attribute value
+   */
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if ('fixedheight' === attrName) {
+      if (newValue) {
+        this._initFixedHeight();
+      } else {
+        this._unsetFixedHeight();
+      }
+    }
+  }
+
+  /**
+   * Recalculates and sets the collapse height after every browser resize
+   * @private
+   */
+  _setFixedHeight() {
+    let height = this.clientHeight;
+
+    // Close any open panels
+    let openPanels = this.querySelectorAll('.collapse.in');
+
+    Array.prototype.forEach.call(openPanels, (openPanel) => {
+      openPanel.classList.remove('in');
+    });
+
+    // Determine the necessary height for the closed content
+    let contentHeight = 0;
+    Array.prototype.forEach.call(this.children, (element) => {
+      contentHeight += element.offsetHeight;
+    });
+
+    // Determine the height remaining for opened collapse panels
+    let bodyHeight = this.clientHeight - contentHeight;
+
+    // show scrollbars when content height > element height,
+    // if (bodyHeight < 0) {
+    //   bodyHeight = this.clientHeight;
+    // }
+
+    // Make sure we have enough height to be able to scroll the contents if necessary
+    if (bodyHeight < 25) {
+      bodyHeight = 25;
+    }
+
+    // Reopen the initially opened panel
+    Array.prototype.forEach.call(openPanels, (openPanel) => {
+      openPanel.classList.add('in');
+    });
+
+    // run as requestAnimationFrame to prevent performance issues while resizing
+    requestAnimationFrame(() => {
+      // Set the max-height for the collapse panels
+      let panels = this.getElementsByTagName('pf-accordion-template');
+      Array.prototype.forEach.call(panels, (element) => {
+        // Set the max-height and vertical scroll of the scroll element
+        if (!element._oldStyle) {
+          element._oldStyle = {
+            maxHeight: element.style.maxHeight,
+            overflowY: element.style.overflowY
+          };
+        }
+        element.style.maxHeight = bodyHeight + 'px';
+        element.style.overflowY = 'auto';
+      });
+
+      this._oldStyle = {
+        overflowY: this.style.overflowY
+      };
+      this.style.overflowY = 'fixed';
+
+      if (!this._initialized) {
+        // first time run, send an initialized event
+        this._initialized = true;
+        this.dispatchEvent(new Event('pf-accordion.initialized'));
+      }
+    });
+  }
+
+  /**
+   * @private
+   */
+  _unsetFixedHeight() {
+    if (!this._fixedHeight) {
+      return;
+    }
+    let panels = this.getElementsByTagName('pf-accordion-template');
+    Array.prototype.forEach.call(panels, (element) => {
+
+      // Set the max-height and vertical scroll of the scroll element
+      if (element._oldStyle) {
+        element.style.maxHeight = element._oldStyle.maxHeight;
+        element.style.overflowY = element._oldStyle.overflowY;
+        element._oldStyle = null;
+      }
+    });
+    this.style.overflowY = this._oldStyle.overflowY;
+    this._oldStyle = null;
+    window.removeEventListener('resize', this._fixedHeihtListener);
+    this._fixedHeight = false;
+  }
+
+  /**
+   * Initializes a fixed-width accordion
+   * @private
+   */
+  _initFixedHeight() {
+    if (this._fixedHeight) {
+      return;
+    }
+
+    requestAnimationFrame(() => this._setFixedHeight() );
+    // Update on window resizing
+    this._fixedHeightListener = this._setFixedHeight.bind(this);
+    window.addEventListener('resize', this._fixedHeightListener);
+    this._fixedHeight = true;
+  }
+
+  get fixedHeight() {
+    return this._fixedHeight;
+  }
+
+  set fixedHeight(value) {
+    if (value) {
+      if (!this.hasAttribute('fixedheight')) {
+        this.setAttribute('fixedheight', '');
+      }
+    } else {
+      this.removeAttribute('fixedheight');
+    }
+  }
+}
+
+(function () {
+  document.registerElement('pf-accordion', PfAccordion);
+}());
\ No newline at end of file
diff --git a/src/pf-accordion/pf-accordion.scss b/src/pf-accordion/pf-accordion.scss
new file mode 100644
index 0000000..f02d535
--- /dev/null
+++ b/src/pf-accordion/pf-accordion.scss
@@ -0,0 +1,10 @@
+pf-accordion,
+pf-accordion-panel,
+pf-accordion-heading,
+pf-accordion-template,
+pf-accordion-body {
+  display: block;
+  .hidden {
+    display: none;
+  }
+}
diff --git a/src/pf-accordion/pf-accordion.spec.js b/src/pf-accordion/pf-accordion.spec.js
new file mode 100644
index 0000000..94ab143
--- /dev/null
+++ b/src/pf-accordion/pf-accordion.spec.js
@@ -0,0 +1,331 @@
+describe('PatternFly Accordion Component Tests', function () {
+  var accordion, accordionPanel, accordionHeading, accordionTemplate, accordionHeadingToggle,
+    accordionPanel2, accordionHeading2, accordionTemplate2, accordionHeadingToggle2;
+
+  function addChild(parent, element) {
+    var promise = new Promise(function (resolve) {
+      var observer = new MutationObserver(function () {
+        resolve();
+        observer.disconnect();
+      });
+      var config = {
+        attributes: true,
+        childList: true,
+        characterData: true
+      };
+      observer.observe(element, config);
+    });
+    parent.appendChild(element);
+    return promise;
+  }
+
+  function removeChild(parent, element) {
+    var promise = new Promise(function (resolve) {
+      var observer = new MutationObserver(function (mutations) {
+        Array.prototype.forEach.call(mutations, function (mutationRecord) {
+          var i;
+          for (i = 0; i < mutationRecord.removedNodes.length; i++) {
+            if (element === mutationRecord.removedNodes[i]) {
+              observer.disconnect();
+              resolve();
+              break;
+            }
+          }
+        });
+      });
+      var config = {
+        attributes: true,
+        childList: true,
+        characterData: true
+      };
+      observer.observe(parent, config);
+    });
+    parent.removeChild(element);
+    return promise;
+  }
+
+  function addElementToBody(element) {
+    return addChild(document.body, element);
+  }
+
+  beforeEach(function () {
+    jasmine.DEFAULT_TIMEOUT_INTERVAL = 5000;
+    accordion = document.createElement('pf-accordion');
+    accordion.id = 'pfAccordion';
+    accordionPanel = document.createElement('pf-accordion-panel');
+    accordionPanel.id = 'pfAccordionPanel';
+    accordionHeading = document.createElement('pf-accordion-heading');
+    accordionHeading.id = 'pfAccordionHeading';
+    accordionTemplate = document.createElement('pf-accordion-template');
+    accordionTemplate.innerHTML = '<pf-accordion-body>Collapse CONTENT 1</pf-accordion-body>';
+    accordionTemplate.id = 'pfAccordionTemplate';
+
+    // manually trigger 'ontransitionend' for tests in absence of css
+    accordionTemplate.addEventListener('pf-accordion.expanding', function () {
+      accordionTemplate._handleTransitionEnd();
+    });
+
+    accordionTemplate.addEventListener('pf-accordion.collapsing', function () {
+      accordionTemplate._handleTransitionEnd();
+    });
+
+    accordionHeadingToggle = document.createElement('a');
+    accordionHeadingToggle.setAttribute('data-toggle', 'collapse');
+    accordionHeading.appendChild(accordionHeadingToggle);
+    accordionPanel.appendChild(accordionHeading);
+    accordionPanel.appendChild(accordionTemplate);
+    accordion.appendChild(accordionPanel);
+
+    accordionPanel2 = document.createElement('pf-accordion-panel');
+    accordionPanel2.id = 'pfAccordionPanel2';
+    accordionHeading2 = document.createElement('pf-accordion-heading');
+    accordionHeading2.id = 'pfAccordionHeading2';
+    accordionTemplate2 = document.createElement('pf-accordion-template');
+    accordionTemplate2.innerHTML = '<pf-accordion-body>Collapse CONTENT 2</pf-accordion-body>';
+    accordionTemplate2.id = 'pfAccordionTemplate2';
+
+    // manually trigger 'ontransitionend' for tests in absence of css
+    accordionTemplate2.addEventListener('pf-accordion.expanding', function () {
+      accordionTemplate2._handleTransitionEnd();
+    });
+
+    accordionTemplate2.addEventListener('pf-accordion.collapsing', function () {
+      accordionTemplate2._handleTransitionEnd();
+    });
+    accordionHeadingToggle2 = document.createElement('a');
+    accordionHeadingToggle2.setAttribute('data-toggle', 'collapse');
+    accordionHeading2.appendChild(accordionHeadingToggle2);
+    accordionPanel2.appendChild(accordionHeading2);
+    accordionPanel2.appendChild(accordionTemplate2);
+    accordion.appendChild(accordionPanel2);
+  });
+
+  afterEach(function () {
+    document.body.removeChild(accordion);
+  });
+
+  it('put the correct class and aria attributes', function () {
+    return addElementToBody(accordion).then(function () {
+      expect(accordion.classList.contains('panel-group')).toBe(true);
+      expect(accordion.getAttribute('role')).toBe('tablist');
+      expect(accordion.getAttribute('aria-multiselectable')).toBe('true');
+    });
+  });
+
+  it('put the correct class for an accordion panel', function () {
+    return addElementToBody(accordion).then(function () {
+      expect(accordionPanel.classList.contains('panel')).toBe(true);
+    });
+  });
+
+  it('put the correct class and aria attributes for an accordion heading', function () {
+    return addElementToBody(accordion).then(function () {
+      expect(accordionHeading.classList.contains('panel-heading')).toBe(true);
+      expect(accordionHeading.getAttribute('role')).toBe('tab');
+    });
+  });
+
+  it('put the correct class and aria attributes for an accordion template', function () {
+    return addElementToBody(accordion).then(function () {
+      expect(accordionTemplate.classList.contains('panel-collapse')).toBe(true);
+      expect(accordionTemplate.classList.contains('collapse')).toBe(true);
+      expect(accordionTemplate.getAttribute('role')).toBe('tabpanel');
+    });
+  });
+
+  it('recognizes element with data-toggle="collapse" as the accordion toggle', function () {
+    return addElementToBody(accordion).then(function () {
+      expect(accordionHeading._toggle).toBeDefined();
+    });
+  });
+
+  it('put the correct class and aria attributes for an accordion toggle', function () {
+    return addElementToBody(accordion).then(function () {
+      expect(accordionHeadingToggle.classList.contains('collapsed')).toBe(true);
+      expect(accordionTemplate.open).toBe(false);
+    });
+  });
+
+  it('put the correct class and aria attributes for an accordion template when it has open attribute', function (done) {
+    accordionTemplate.setAttribute('open', '');
+    accordionTemplate.addEventListener('pf-accordion.initialized', function () {
+      expect(accordionTemplate.classList.contains('in')).toBe(true);
+      expect(accordionTemplate.open).toBe(true);
+      done();
+    });
+    addElementToBody(accordion);
+  });
+
+  it('put the correct class on accordion toggle when accordion template is hidden', function () {
+    return addElementToBody(accordion).then(function () {
+      accordionTemplate.open = false;
+      return new Promise(function (resolve) {
+        requestAnimationFrame(function () {
+          expect(accordionHeadingToggle.classList.contains('collapsed')).toBe(true);
+          resolve();
+        });
+      });
+    });
+  });
+
+  it('put the correct class on accordion toggle when accordion template is shown', function () {
+    return addElementToBody(accordion).then(function () {
+      accordionTemplate.open = true;
+      return new Promise(function (resolve) {
+        setTimeout(function () {
+          expect(accordionHeadingToggle.classList.contains('collapsed')).toBe(false);
+          resolve();
+        }, 100);
+      });
+    });
+  });
+
+  it('closes other open panel when another is opened', function (done) {
+    accordionTemplate.addEventListener('pf-accordion.collapsed', function () {
+      expect(accordionTemplate.open).toBe(false);
+      done();
+    });
+    accordionTemplate.open = true;
+    addElementToBody(accordion).then(function () {
+      accordionTemplate2.open = true;
+    });
+  });
+
+  it('put the correct value in open on display change of accordion template', function () {
+    return addElementToBody(accordion).then(function () {
+      accordionTemplate.open = true;
+
+      return new Promise(function (resolve) {
+        setTimeout(function () {
+          expect(accordionTemplate.open).toBe(true);
+          accordionTemplate.open = false;
+          setTimeout(function () {
+            expect(accordionTemplate.open).toBe(false);
+            resolve();
+          }, 100);
+        }, 100);
+      });
+    });
+  });
+
+  it('changes the display state of acccordion template with open', function (done) {
+    addElementToBody(accordion).then(function () {
+      accordionTemplate.addEventListener('pf-accordion.expanded', function () {
+        expect(accordionTemplate.classList.contains('in')).toBe(true);
+
+        // wait for transitioning to complete
+        requestAnimationFrame(function () {
+          accordionTemplate.open = false;
+        });
+      });
+
+      accordionTemplate.addEventListener('pf-accordion.collapsed', function () {
+        requestAnimationFrame(function () {
+          expect(accordionTemplate.classList.contains('in')).toBe(false);
+          done();
+        });
+      });
+      accordionTemplate.open = true;
+    }).catch(function () {
+      done.fail();
+    });
+  });
+
+  it('adds the default context modifier class for an accordion panel where none is supplied', function () {
+    return addElementToBody(accordion).then(function () {
+      expect(accordionPanel.classList.contains('panel-default')).toBe(true);
+    });
+  });
+
+  it('does not add the default context modifier class for an accordion panel where a value is supplied', function () {
+    accordionPanel.className = 'panel panel-warning';
+    return addElementToBody(accordion).then(function () {
+      expect(accordionPanel.classList.contains('panel-default')).toBe(false);
+    });
+  });
+
+  it('restores the default context modifier class for an accordion panel when all context modifier classes are removed', function () {
+    accordionPanel.className = 'panel panel-warning';
+    return addElementToBody(accordion).then(function () {
+      expect(accordionPanel.classList.contains('panel-default')).toBe(false);
+      accordionPanel.className = '';
+      // wait till all work by browser is done
+      return new Promise(function (resolve) {
+        requestAnimationFrame(function () {
+          expect(accordionPanel.classList.contains('panel')).toBe(true);
+          expect(accordionPanel.classList.contains('panel-default')).toBe(true);
+          resolve();
+        });
+      });
+    });
+  });
+
+  it('sets css styles for all panels when fixed-height component is enabled', function (done) {
+    accordion.setAttribute('fixedheight', 'fixedheight');
+    accordion.addEventListener('pf-accordion.initialized', function () {
+      expect(accordionTemplate.style.maxHeight).not.toBe('');
+      expect(accordionTemplate2.style.maxHeight).not.toBe('');
+      expect(accordionTemplate.style.overflowY).not.toBe('');
+      expect(accordionTemplate2.style.overflowY).not.toBe('');
+      done();
+    });
+    addElementToBody(accordion).catch(function () {
+      done.fail();
+    });
+  });
+
+  it('restores height of all panels when fixed-height is disabled', function () {
+    return addElementToBody(accordion).then(function () {
+      accordion.fixedHeight = false;
+      expect(accordionTemplate.style.maxHeight).toBe('');
+      expect(accordionTemplate2.style.maxHeight).toBe('');
+      expect(accordionTemplate.style.overflowY).toBe('');
+      expect(accordionTemplate2.style.overflowY).toBe('');
+    });
+  });
+
+  it('picks the next toggle element when current is removed', function () {
+    var newToggle = document.createElement('a');
+    newToggle.setAttribute('data-toggle', 'collapse');
+    accordionHeading.appendChild(newToggle);
+    return addElementToBody(accordion)
+      .then(function () {
+        expect(accordionHeading._toggle).toBeDefined();
+        return removeChild(accordionHeading, accordionHeadingToggle);
+      }).then(function () {
+        expect(accordionHeading._toggle).toBe(newToggle);
+      });
+  });
+
+  it('picks the toggle when added after initialization', function () {
+    var newToggle = document.createElement('a');
+    newToggle.setAttribute('data-toggle', 'collapse');
+    return removeChild(accordionHeading, accordionHeadingToggle)
+      .then(function () {
+        return addElementToBody(accordion);
+      }).then(function () {
+        expect(accordionHeading._toggle).toBe(null);
+        return addChild(accordionHeading, newToggle);
+      }).then(function () {
+        expect(accordionHeading._toggle).toBe(newToggle);
+      });
+  });
+
+  it('allows to add new panels after initialization', function () {
+    var newChild = document.createElement('pf-accordion-panel');
+    newChild.innerHTML = '<pf-accordion-heading>< a href="#" data-toggle="collapse">Heading</a></pf-accordion-heading><pf-accordion-template><pf-accordion-body></pf-accordion-body></pf-accordion-template>';
+    return addElementToBody(accordion).then(function () {
+      return addChild(accordion, newChild);
+    }).then(function () {
+      expect(newChild.parentNode).toBe(accordion);
+    });
+  });
+
+  it('allows to remove panels after addition', function () {
+    return addElementToBody(accordion).then(function () {
+      return removeChild(accordion, accordionPanel2);
+    }).then(function () {
+      expect(accordionPanel2.parentNode).toBe(null);
+    });
+  });
+});
\ No newline at end of file
diff --git a/src/pf-utils/pf-utils.js b/src/pf-utils/pf-utils.js
index 0d6187a..5b37518 100644
--- a/src/pf-utils/pf-utils.js
+++ b/src/pf-utils/pf-utils.js
@@ -64,6 +64,24 @@ class PfUtil {
       x: window.pageXOffset || document.documentElement.scrollLeft
     };
   }
+
+  getMaxHeight (parent) { // get collapse trueHeight and border
+    let parentHeight = 0;
+    for (let k = 0, ll = parent.children.length; k < ll; k++) {
+      parentHeight += parent.children[k].offsetHeight;
+    }
+    return parentHeight;
+  }
+  once (element, event, handler, context) {
+    let ephemeralHandler = function (e) {
+      try {
+        handler.call(context || this, e);
+      } finally {
+        element.removeEventListener(event, ephemeralHandler);
+      }
+    };
+    element.addEventListener(event, ephemeralHandler);
+  }
 }
 let pfUtil = new PfUtil();
 export {pfUtil};
diff --git a/src/scss/patternfly-webcomponents.scss b/src/scss/patternfly-webcomponents.scss
index d9e4e9d..5e68a48 100644
--- a/src/scss/patternfly-webcomponents.scss
+++ b/src/scss/patternfly-webcomponents.scss
@@ -1,4 +1,6 @@
+@import "src/pf-accordion/pf-accordion.scss";
 @import "src/pf-alert/pf-alert.scss";
 @import "src/pf-tooltip/pf-tooltip.scss";
 @import "src/pf-utilization-bar-chart/pf-utilization-bar-chart.scss";
-@import "src/pf-dropdown/pf-dropdown.scss"
\ No newline at end of file
+@import "src/pf-dropdown/pf-dropdown.scss";
+
diff --git a/webpack.config.js b/webpack.config.js
index 9b200d9..555d8f9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,6 +7,7 @@ module.exports = {
 
   entry: {
     'patternfly': './src/patternfly',
+    'pf-accordion': './src/pf-accordion/index',
     'pf-alert': './src/pf-alert/index',
     'pf-i18n': './src/pf-i18n/index',
     'pf-hello': './src/pf-hello/index',
@@ -22,6 +23,7 @@ module.exports = {
 
   resolve: {
     root: [
+      path.join(__dirname, "src/pf-accordion"),
       path.join(__dirname, "src/pf-alert"),
       path.join(__dirname, "src/pf-hello"),
       path.join(__dirname, "src/pf-i18n"),
