Additional card cleanup

src/components/presentational/CardCaret.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const CardCaret = ({ isHighlighted, toggle }) => {
+
+  let classes = (isHighlighted)
+    ? 'arrow-down'
+    : 'arrow-down folded';
+
+  return (
+    <div className="card-toggle" onClick={toggle}>
+      <p>
+        <i className={classes}></i>
+      </p>
+    </div>
+  );
+}
+
+export default CardCaret;

src/components/presentational/CardCategory.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const CardCategory = ({ categoryTitle, categoryLabel, colorType }) => (
+  <div className="event-card-section category">
+    <h4>{categoryTitle}</h4>
+    <p>
+      <span className={`color-category ${colorType}`}/>
+      {categoryLabel}
+    </p>
+  </div>
+);
+
+export default CardCategory;

src/components/presentational/CardLocation.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import copy from '../../js/data/copy.json';
+import {isNotNullNorUndefined} from '../../js/data/utilities';
+
+const CardLocation = ({ language, location }) => {
+
+  const location_lang = copy[language].cardstack.location;
+  if (isNotNullNorUndefined(location)) {
+    return (
+      <p className="event-card-section location">
+        <h4>{location_lang}</h4>
+        <p>{location}</p>
+      </p>
+    );
+  } else {
+    return (
+      <p className="event-card-section location">
+        <h4>{location_lang}</h4>
+        <p>Sin localización conocida.</p>
+      </p>
+    );
+  }
+}
+
+export default CardLocation;

src/components/presentational/CardNarrative.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import CardNarrativeLink from './CardNarrativeLink';
+
+const CardNarrative = (props) => (
+  <div className="event-card-section">
+    <h4>Connected events</h4>
+    <p>Next: <CardNarrativeLink {...props} event={props.next}/></p>
+    <p>Previous: <CardNarrativeLink {...props} event={props.prev} /></p>
+  </div>
+);
+
+export default CardNarrative;

src/components/presentational/CardNarrativeLink.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const CardNarrativeLink = ({ event, makeTimelabel, select }) => {
+  if (event !== null) {
+    const timelabel = makeTimelabel(event.timestamp);
+
+    return (
+      <a onClick={() => select(event)}>
+        {`${timelabel} - ${event.location}`}
+      </a>
+    );
+  }
+
+  return (<a className="disabled">None</a>);
+}
+
+export default CardNarrativeLink;

src/components/presentational/CardSource.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import copy from '../../js/data/copy.json';
+
+const CardSource = ({ source, language }) => {
+  const source_lang = copy[language].cardstack.source;
+
+  return (
+    <div className="event-card-section source">
+      <h4>{source_lang}</h4>
+      <p>{source}</p>
+    </div>
+  );
+}
+
+export default CardSource;

src/components/presentational/CardSummary.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import copy from '../../js/data/copy.json';
+
+const CardSummary = ({ language, description, isHighlighted }) => {
+
+  const summary = copy[language].cardstack.description;
+  const descriptionText = (isHighlighted) ? description : `${description.substring(0, 40)}...`;
+
+  return (
+    <div className="event-card-section summary">
+      <h4>{summary}</h4>
+      <p>{descriptionText}</p>
+    </div>
+  );
+}
+
+export default CardSummary;

src/components/presentational/CardTags.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import copy from '../../js/data/copy.json';
+
+const CardTags = ({ tags, language }) => {
+  const label = copy[language].cardstack.people;
+
+  return (
+    <div className="event-card-section tags">
+      <h4>{label}</h4>
+      <p>{
+          tags.map((tag, idx) => {
+            return (
+              <span className="tag">
+                {tag.name}
+                {
+                  (idx < tags.length - 1)
+                    ? ','
+                    : ''
+                }
+              </span>
+            );
+          })
+        }</p>
+    </div>
+);
+}
+
+export default CardTags;

src/components/presentational/CardTimestamp.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import copy from '../../js/data/copy.json';
+import {isNotNullNorUndefined} from '../../js/data/utilities';
+
+const CardTimestamp = ({ makeTimelabel, language, timestamp }) => {
+
+  const daytime_lang = copy[language].cardstack.timestamp;
+  const estimated_lang = copy[language].cardstack.estimated;
+  const unknown_lang = copy[language].cardstack.unknown_time;
+
+  if (isNotNullNorUndefined(timestamp)) {
+    const timelabel = makeTimelabel(timestamp);
+    return (
+      <div className="event-card-section timestamp">
+        <h4>{daytime_lang}</h4>
+        {timelabel}
+      </div>
+    );
+  } else {
+    return (
+      <div className="event-card-section timestamp">
+        <h4>{daytime_lang}</h4>
+        {unknown_lang}
+      </div>
+    );
+  }
+}
+
+export default CardTimestamp;

src/components/presentational/Checkbox.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default ({ label, isActive, onClickCheckbox }) => (
+  <div className={(isActive) ? 'item active' : 'item'}>
+    <span onClick={() => onClickCheckbox()}>{label}</span>
+    <button onClick={() => onClickCheckbox()}>
+      <div className="checkbox" />
+    </button>
+  </div>
+);

src/components/presentational/Spinner.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Spinner = ({}) => {
+  return (
+    <div className="spinner">
+      <div className="double-bounce1"></div>
+      <div className="double-bounce2"></div>
+    </div>
+  )
+}
+
+export default Spinner;