Merge branch 'develop' into feature/simplified-card-props

src/components/InfoPopup.jsx

@@ -1,110 +1,13 @@
 import React from 'react'
-import marked from 'marked'
+import Popup from './presentational/Popup'
 import copy from '../common/data/copy.json'
 
-export default ({ ui, app, methods }) => {
-  function renderIntro () {
-    var introCopy = copy[app.language].legend.default.intro
-    if (process.env.store.text && process.env.store.text.introCopy) introCopy = process.env.store.text.introCopy
-    return introCopy.map(txt => <p dangerouslySetInnerHTML={{ __html: marked(txt) }} />)
-  }
-
-  function renderHalfWithDot () {
-    // extract category colors from store for combined display.
-    const categoryKeys = Object.keys(ui.style.categories)
-    let firstFill = 'red'
-    let secondFill = 'blue'
-    if (categoryKeys.length >= 1) {
-      firstFill = ui.style.categories[categoryKeys[0]]
-    }
-    if (categoryKeys.length >= 2) {
-      secondFill = ui.style.categories[categoryKeys[1]]
-    }
-
-    return [
-      <style>{`.svg-demo { max-width: 30px } .first { fill: ${firstFill} } .second { fill: ${secondFill} } .demo-text { font-size: 9pt; color: white; font-weight:900 }`}</style>,
-      <svg viewBox='0 0 30 30' className='svg-demo'>
-        <g className='location demo-element' transform='translate(15,15)'>
-          <path className='location-event-marker first' id='arc_0' d='M 10 0 A 10 10 0 0 1 -10 1.2246467991473533e-15 L 0 0  L 10 0 Z' />
-          <path class='location-event-marker second' id='arc_1' d='M -10 1.2246467991473533e-15 A 10 10 0 0 1 10 -2.4492935982947065e-15 L 0 0  L -10 1.2246467991473533e-15 Z' />
-          <text class='location-count demo-text' dx='-4' dy='4'>2</text>
-        </g>
-      </svg>
-    ]
-  }
-
-  function renderCategoryColors () {
-    const categories = Object.keys(ui.style.categories).filter(label => label !== 'default')
-    categories.reverse()
-    return categories.map(category => (
-      <div className='legend-section'>
-        <svg x='0px' y='0px' width='50px' height='20px' viewBox='0 0 100 30' enableBackground='new 0 0 100 30'>
-          <circle opacity='1' fill={ui.style.categories[category]} cx='50' cy='15' r='15' />
-        </svg>
-        <div className='legend-labels'>
-          <div className='label'>{category}</div>
-        </div>
-      </div>
-    ))
-  }
-
-  function renderArrow (strokeFill) {
-    return (
-      <svg x='-10px' y='0px' width='100px' height='30px' viewBox='0 40 100 30' enableBackground='new 0 0 100 70'>
-        <polyline fill='none' stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' stroke-miterlimit='10' points='
-          8.376,63.723 47.287,63.723 60,46 80,46 ' />
-        <line stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='78.849' y1='41.94' x2='84.195' y2='46' />
-        <line stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='78.849' y1='50.06' x2='84.195' y2='46' />
-      </svg>
-    )
-  }
-
-  function renderView2DLegend () {
-    return (
-      <div className={`infopopup ${(app.flags.isInfopopup) ? '' : 'hidden'}`}>
-        <div className='legend-header'>
-          <button onClick={methods.onClose} className='side-menu-burg over-white is-active'><span /></button>
-          <h2>{copy[app.language].legend.default.header}</h2>
-        </div>
-        {renderIntro()}
-        <div>
-          {renderCategoryColors()}
-        </div>
-        <br />
-        <div className='legend'>
-          <div className='legend-container'>
-            <div className='legend-item one'>
-              {renderHalfWithDot()}
-            </div>
-            <div className='legend-item three'>
-              {copy[app.language].legend.default.notation}
-            </div>
-          </div>
-        </div>
-        <br />
-        <div>
-          <p>{copy[app.language].legend.default.arrows}</p>
-        </div>
-
-        {
-          ui.style.arrows ? (
-
-            Object.keys(ui.style.arrows).map(arrowName => (
-              <div className='legend-section'>
-                {renderArrow(ui.style.arrows[arrowName])}
-                <div className='legend-labels'>
-                  <div className='label'>{arrowName}</div>
-                </div>
-              </div>
-            ))
-          ) : null
-        }
-
-      </div>
-    )
-  }
-
-  return (
-    <div>{renderView2DLegend()}</div>
-  )
-}
+export default ({ isOpen, onClose, language, styles }) => (
+  <Popup
+    title={copy[language].legend.default.header}
+    content={copy[language].legend.default.intro}
+    onClose={onClose}
+    isOpen={isOpen}
+    styles={styles}
+  />
+)

src/components/Layout.js

@@ -13,7 +13,8 @@ import Toolbar from './Toolbar/Layout'
 import CardStack from './CardStack.jsx'
 // import {CardStack} from '@forensic-architecture/design-system'
 import NarrativeControls from './presentational/Narrative/Controls.js'
-import InfoPopUp from './InfoPopup.jsx'
+import InfoPopup from './InfoPopup.jsx'
+import Popup from './presentational/Popup'
 import Timeline from './Timeline.jsx'
 import Notification from './Notification.jsx'
 import StateOptions from './StateOptions.jsx'
@@ -239,7 +240,7 @@ class Dashboard extends React.Component {
   }
 
   render () {
-    const { actions, app, domain, ui, features } = this.props
+    const { actions, app, domain, features } = this.props
     if (isMobile || window.innerWidth < 600) {
       const msg = 'This platform is not suitable for mobile. Please re-visit the site on a device with a larger screen.'
       return (
@@ -259,6 +260,13 @@ class Dashboard extends React.Component {
       )
     }
 
+    const popupStyles = {
+      fontSize: 24,
+      height: `calc(100vh - ${app.timeline.dimensions.height}px)`,
+      width: '40vw',
+      bottom: app.timeline.dimensions.height
+    }
+
     return (
       <div>
         <Toolbar
@@ -310,12 +318,19 @@ class Dashboard extends React.Component {
             onSelectNarrative: this.setNarrative
           }}
         />
-        <InfoPopUp
-          ui={ui}
-          app={app}
-          methods={{
-            onClose: actions.toggleInfoPopup
-          }}
+        <InfoPopup
+          language={app.language}
+          styles={popupStyles}
+          isOpen={app.flags.isInfopopup}
+          onClose={actions.toggleInfoPopup}
+        />
+        <Popup
+          title={process.env.display_title}
+          theme='dark'
+          isOpen={app.flags.isIntropopup}
+          onClose={actions.toggleIntroPopup}
+          content={app.intro}
+          styles={popupStyles}
         />
         {app.debug ? <Notification
           isNotification={app.flags.isNotification}

src/components/TemplateCover.js

@@ -176,7 +176,9 @@ class TemplateCover extends React.Component {
             </div>
           </div>
 
-          <div className='md-container' dangerouslySetInnerHTML={{ __html: marked(this.props.cover.description) }} />
+          {Array.isArray(this.props.cover.description)
+            ? this.props.cover.description.map(e => <div className='md-container' dangerouslySetInnerHTML={{ __html: marked(e) }} />)
+            : <div className='md-container' dangerouslySetInnerHTML={{ __html: marked(this.props.cover.description) }} />}
 
           {videos ? (
             <div className='hero'>

src/components/presentational/Popup.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import marked from 'marked'
+
+export default ({
+  content = [],
+  styles = {},
+  isOpen = true,
+  onClose,
+  title,
+  theme = 'light'
+}) => (
+  <div>
+    <div className={`infopopup ${isOpen ? '' : 'hidden'} ${theme === 'dark' ? 'dark' : 'light'}`} style={styles}>
+      <div className='legend-header'>
+        <button onClick={onClose} className='side-menu-burg over-white is-active'><span /></button>
+        <h2>{title}</h2>
+      </div>
+      {content.map(t => <div dangerouslySetInnerHTML={{ __html: marked(t) }} />)}
+    </div>
+  </div>
+)