Merge pull request #1850 from newamericafoundation/accordion-blocks

Accordion blocks

newamericadotorg/assets/react/blocks/accordion.js

@@ -0,0 +1,49 @@
+import '../home-panels/pages/Jobs.scss';
+
+import React, { Component } from 'react';
+import { PlusX } from '../components/Icons';
+
+const NAME = 'accordionBlock';
+const ID = 'accordion-block';
+
+
+class APP extends Component {
+  state = {
+    expanded: new Set()
+  }
+
+  toggleExpand = (i) => {
+    let updated = new Set(this.state.expanded);
+    if (updated.has(i)) {
+      updated.delete(i);
+    } else {
+      updated.add(i);
+    }
+    this.setState({expanded: updated});
+  }
+
+  render() {
+    let { items } = this.props;
+    let { expanded } = this.state;
+    let itemsArray = JSON.parse(items);
+    return (
+      <section className="padding-80">
+        <div className="home__fellowships">
+          <div className="menu-list">
+            {itemsArray.map((item, i) => (
+              <div key={`accordion-${i}`} className={`${expanded.has(i) ? 'expanded ': ''}home__fellowship`}>
+                <PlusX x={expanded.has(i)} />
+                <h2 onClick={()=>{ this.toggleExpand(i) }}>{item.title}</h2>
+                <div className="home__fellowship__more">
+                  <div dangerouslySetInnerHTML={{__html: item.body }} />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    );
+  }
+}
+
+export default { APP, NAME, ID, MULTI: true };

newamericadotorg/assets/react/components.core.js

@@ -2,6 +2,7 @@ import feedback from './feedback/index';
 import cookiesNotification from './cookies-notification/index';
 import resourcesBlock from './blocks/resources';
 import scheduleBlock from './blocks/schedule';
+import accordionBlock from './blocks/accordion';
 import homeSubscribe from './home-subscribe/index';
 import subscribePage from './subscribe-page/index';
 
@@ -11,5 +12,6 @@ reactRenderer.add(feedback);
 reactRenderer.add(cookiesNotification);
 reactRenderer.add(resourcesBlock);
 reactRenderer.add(scheduleBlock);
+reactRenderer.add(accordionBlock);
 reactRenderer.add(homeSubscribe);
 reactRenderer.add(subscribePage);

newamericadotorg/assets/react/program-page/components/About.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import { render } from 'react-dom';
 import { Link, NavLink, Route } from 'react-router-dom';
 import { APP as Resources, ID as resourcesDOMId }  from '../../blocks/resources';
+import Accordion from '../../blocks/accordion'
 import getProps from '../../../lib/utils/get-props';
 
 class AboutBody extends Component {
@@ -21,12 +22,29 @@ class AboutBody extends Component {
       );
     }
   }
+
+  // repeat of above hack for accordion blocks defined inside Django template.
+  addAccordionBlocks = () => {
+    let accordionElements = document.querySelectorAll(`.na-react__${Accordion.ID}`);
+    if (!accordionElements) return;
+
+    accordionElements.forEach(r => {
+      if (r.hasChildNodes()) return;  // already rendered
+      let props = getProps(r);
+      render(
+        <Accordion.APP {...props} />, r
+      );
+    })
+  }
+
   componentDidMount(){
     this.addResourcesBlocks();
+    this.addAccordionBlocks();
   }
 
   componentDidUpdate(){
     this.addResourcesBlocks();
+    this.addAccordionBlocks();
   }
 
   render(){

newamericadotorg/blocks.py

@@ -576,6 +576,30 @@ class Meta:
         template = "blocks/schedule.html"
 
 
+class AccordionItemBlock(blocks.StructBlock):
+    title = blocks.TextBlock()
+    body = blocks.RichTextBlock()
+
+
+class AccordionBlock(blocks.StreamBlock):
+    item = AccordionItemBlock()
+
+    def get_context(self, value, parent_context=None):
+        context = super().get_context(value, parent_context=parent_context)
+        context["items"] = json.dumps([
+            {
+                "title": item.value["title"],
+                # json.dumps cannot implicitly serialize RichText
+                # instances, so we must call `str`.
+                "body": str(item.value["body"]),
+            } for item in value
+        ])
+        return context
+
+    class Meta:
+        template = "blocks/accordion.html"
+
+
 class Body(blocks.StreamBlock):
     introduction = blocks.RichTextBlock(icon="openquote")
     heading = blocks.CharBlock(
@@ -595,6 +619,7 @@ class Body(blocks.StreamBlock):
     timeline = TimelineBlock(icon="order")
     google_map = GoogleMapBlock(icon="site")
     resource_kit = ResourceKit(icon="folder")
+    accordion = AccordionBlock(icon="tasks")
 
 
 class PanelBlock(blocks.StructBlock):

newamericadotorg/templates/blocks/accordion.html

@@ -0,0 +1 @@
+<div class="na-react__accordion-block" data-items="{{ items }}"></div>