Importing <Card /> from NPM-published design-system library (#171)

* Importing cards from NPM

* Added an abstraction inside the store and config for creating layouts for cards

* Adding layout render order for Card

* Allowing lists in the reducer validation

* Added design system package to package.json

* Any version over 0.5.0

* fix lint

Co-authored-by: Lachlan Kermode <lachiekermode@gmail.com>

src/components/CardStack.jsx

@@ -2,7 +2,8 @@ import React from 'react'
 import { connect } from 'react-redux'
 import * as selectors from '../selectors'
 
-import Card from './Card.jsx'
+// import Card from './Card.jsx'
+import { Card } from '@forensic-architecture/design-system/react'
 import copy from '../common/data/copy.json'
 
 class CardStack extends React.Component {
@@ -63,6 +64,8 @@ class CardStack extends React.Component {
       return (<Card
         event={event}
         ref={thisRef}
+        renderOrder={this.props.cardUI.order}
+        renderExtra={this.props.cardUI.extra}
         sourceError={this.props.sourceError}
         language={this.props.language}
         isLoading={this.props.isLoading}
@@ -182,6 +185,7 @@ function mapStateToProps (state) {
     language: state.app.language,
     isCardstack: state.app.flags.isCardstack,
     isLoading: state.app.flags.isFetchingSources,
+    cardUI: state.ui.card,
     features: state.features
   }
 }

src/components/InfoPopup.jsx

@@ -53,8 +53,6 @@ export default ({ ui, app, methods }) => {
       <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='33.723' y1='59.663' x2='39.069' y2='63.723' /> */}
-        {/* <line stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='33.723' y1='67.782' x2='39.069' y2='63.723' /> */}
         <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>

src/components/Layout.js

@@ -11,6 +11,7 @@ import LoadingOverlay from './Overlay/Loading'
 import Map from './Map.jsx'
 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 Timeline from './Timeline.jsx'