issue/2824-jsx JSX version of accordion

js/accordionModel.js

@@ -1,30 +1,24 @@
-define([
-  'core/js/models/itemsComponentModel'
-], function(ItemsComponentModel) {
+import ItemsComponentModel from 'core/js/models/itemsComponentModel';
 
-  var AccordionModel = ItemsComponentModel.extend({
+export default class AccordionModel extends ItemsComponentModel {
 
-    defaults: function() {
-      return _.extend({}, _.result(ItemsComponentModel.prototype, 'defaults'), {
-        _shouldCollapseItems: true,
-        _toggleSpeed: 200
-      });
-    },
+  defaults() {
+    return ItemsComponentModel.resultExtend('defaults', {
+      _shouldCollapseItems: true,
+      _toggleSpeed: 200
+    });
+  }
 
-    toggleItemsState: function(index) {
-      var item = this.getItem(index);
-      var previousActiveItem = this.getActiveItem();
+  toggleItemsState(index) {
+    const item = this.getItem(index);
+    const previousActiveItem = this.getActiveItem();
 
-      item.toggleActive();
-      item.toggleVisited(true);
+    item.toggleActive();
+    item.toggleVisited(true);
 
-      if (previousActiveItem && this.get('_shouldCollapseItems')) {
-        previousActiveItem.toggleActive(false);
-      }
+    if (previousActiveItem && this.get('_shouldCollapseItems')) {
+      previousActiveItem.toggleActive(false);
     }
+  }
 
-  });
-
-  return AccordionModel;
-
-});
+}

js/accordionView.js

@@ -1,84 +1,58 @@
-define([
-  'core/js/views/componentView'
-], function(ComponentView) {
-
-  var AccordionView = ComponentView.extend({
-
-    events: {
-      'click .js-toggle-item': 'onClick'
-    },
-
-    preRender: function() {
-      this.checkIfResetOnRevisit();
-
-      this.model.resetActiveItems();
-
-      this.listenTo(this.model.get('_children'), {
-        'change:_isActive': this.onItemsActiveChange,
-        'change:_isVisited': this.onItemsVisitedChange
-      });
-    },
-
-    postRender: function() {
-      this.setReadyStatus();
-
-      if (this.model.get('_setCompletionOn') === 'inview') {
-        this.setupInviewCompletion();
-      }
-    },
-
-    checkIfResetOnRevisit: function() {
-      var isResetOnRevisit = this.model.get('_isResetOnRevisit');
-
-      // If reset is enabled set defaults
-      if (isResetOnRevisit) {
-        this.model.reset(isResetOnRevisit);
-      }
-    },
-
-    onClick: function(event) {
-      event.preventDefault();
-
-      this.model.toggleItemsState($(event.currentTarget).parent().data('index'));
-    },
-
-    onItemsActiveChange: function(item, isActive) {
-      this.toggleItem(item, isActive);
-    },
-
-    onItemsVisitedChange: function(item, isVisited) {
-      if (!isVisited) return;
-
-      var $item = this.getItemElement(item);
-
-      $item.children('.accordion__item-btn').addClass('is-visited');
-    },
-
-    toggleItem: function(item, shouldExpand) {
-      var $item = this.getItemElement(item);
-      var $body = $item.children('.accordion__item-content').stop(true, true);
-
-      $item.children('.accordion__item-btn')
-        .toggleClass('is-selected is-open', shouldExpand)
-        .toggleClass('is-closed', !shouldExpand)
-        .attr('aria-expanded', shouldExpand);
-
-      if (!shouldExpand) {
-        $body.slideUp(this.model.get('_toggleSpeed'));
-        return;
-      }
-
-      $body.slideDown(this.model.get('_toggleSpeed'));
-    },
-
-    getItemElement: function(item) {
-      var index = item.get('_index');
+import ComponentView from 'core/js/views/componentView';
+
+class AccordionView extends ComponentView {
+
+  preRender() {
+    this.checkIfResetOnRevisit();
+    this.model.resetActiveItems();
+    this.listenTo(this.model.get('_children'), {
+      'change:_isActive': this.onItemsActiveChange,
+      'change:_isVisited': this.onItemsVisitedChange,
+      'all': this.changed
+    });
+  }
+
+  postRender() {
+    this.setReadyStatus();
+    if (this.model.get('_setCompletionOn') === 'inview') {
+      this.setupInviewCompletion();
+    }
+  }
 
-      return this.$('.accordion__item').filter('[data-index="' + index +'"]');
+  checkIfResetOnRevisit() {
+    const isResetOnRevisit = this.model.get('_isResetOnRevisit');
+    // If reset is enabled set defaults
+    if (isResetOnRevisit) {
+      this.model.reset(isResetOnRevisit);
     }
+  }
+
+  onClick(event) {
+    event.preventDefault();
+    this.model.toggleItemsState($(event.currentTarget).parent().data('index'));
+  }
+
+  onItemsActiveChange(item, isActive) {
+    this.toggleItem(item, isActive);
+  }
+
+  toggleItem(item, shouldExpand) {
+    const $item = this.getItemElement(item);
+    const $body = $item.children('.accordion__item-content').stop(true, true);
+    if (!shouldExpand) {
+      $body.slideUp(this.model.get('_toggleSpeed'));
+      return;
+    }
+    $body.slideDown(this.model.get('_toggleSpeed'));
+  }
+
+  getItemElement(item) {
+    const index = item.get('_index');
+    return this.$('.accordion__item').filter('[data-index="' + index +'"]');
+  }
 
-  });
+}
 
-  return AccordionView;
+AccordionView.template = 'accordion.jsx';
 
-});
+export default AccordionView;

js/adapt-contrib-accordion.js

@@ -1,12 +1,8 @@
-define([
-  'core/js/adapt',
-  './accordionModel',
-  './accordionView'
-], function(Adapt, AccordionModel, AccordionView) {
-
-  return Adapt.register('accordion', {
-    model: AccordionModel,
-    view: AccordionView
-  });
+import Adapt from 'core/js/adapt';
+import AccordionModel from './accordionModel';
+import AccordionView from './accordionView';
 
+export default Adapt.register('accordion', {
+  model: AccordionModel,
+  view: AccordionView
 });

templates/accordion.jsx

@@ -0,0 +1,60 @@
+import { compile, classes, templates, html } from 'core/js/reactHelpers';
+
+export default function (view, data) {
+  return <div className="component__inner accordion__inner">
+    {templates.component(view, data)}
+    <div className="component__widget accordion__widget">
+      {data._items.map(({ _id, _graphic, _classes, title, body, _index, _isVisited, _isActive }, index) => {
+        return <div key={_index} className={classes(
+              "accordion__item",
+              _graphic.src && 'has-image',
+              _classes && _classes
+            )} data-index={_index}>
+          <button onClick={view.onClick.bind(view)} id={`${_id}-${index}-accordion-button`} className={classes(
+            'accordion__item-btn',
+            'js-toggle-item',
+            _isVisited && 'is-visited',
+            _isActive ? 'is-open is-selected' : 'is-closed'
+          )} aria-expanded={_isActive ? 'true' : 'false'}>
+            <div className="accordion__item-btn-inner">
+              <div className="accordion__item-icon">
+                <div className="icon"></div>
+              </div>
+              <div className="accordion__item-title">
+                <div className="accordion__item-title-inner">
+                  {html(title)}
+                </div>
+              </div>
+            </div>
+          </button>
+          <div className="accordion__item-content" role="region" aria-labelledby={`${_id}-${index}-accordion-button`}>
+            <div className="accordion__item-content-inner">
+              {body &&
+              <div className="accordion__item-body">
+                <div className="accordion__item-body-inner">
+                  {html(compile(body))}
+                </div>
+              </div>
+              }
+              {_graphic.src &&
+              <div className={classes(
+                  'accordion__item-image-container',
+                  _graphic.attribution && 'has-attribution'
+                )}>
+                <img className="accordion__item-image" src={_graphic.src} aria-label={_graphic.alt} aria-hidden={_graphic.alt ? 'true' : 'false'} />
+                {_graphic.attribution &&
+                <div className="component__attribution accordion__attribution">
+                  <div className="component__attribution-inner accordion__attribution-inner">
+                    {html(_graphic.attribution)}
+                  </div>
+                </div>
+                }
+              </div>
+              }
+            </div>
+          </div>
+        </div>
+      })}
+    </div>
+  </div>
+}