uses image component to add graphics to annotation (#730)

* uses image component to add graphics to annotation

* graphic in the render tree!

* structual changes to annotation component syntax

* remove prop from annotation

* fix for slice error

* slight refactor, fix spacing

* cleanup

* reduce annotated-text spacing by half

Co-authored-by: Matthew Conlen <mc@mathisonian.com>

packages/idyll-components/src/annotation.js

@@ -1,11 +1,24 @@
 import React from 'react';
+const { filterChildren } = require('idyll-component-children');
 
 class Annotation extends React.PureComponent {
   render() {
+    const { children } = this.props;
+
+    const annotationBox = filterChildren(children || [], c => {
+      return c.type && c.type.name && c.type.name.toLowerCase() === 'graphic';
+    });
+
+    const inlineText = filterChildren(children || [], c => {
+      return !c.type || !c.type.name || c.type.name.toLowerCase() !== 'graphic';
+    });
+
     return (
-      <span className="annotated-text">
-        {this.props.children}
-        <span className="annotation-text">{this.props.annotation}</span>
+      <span>
+        {' '}
+        <span className="annotated-text">
+          {inlineText} <span className="annotation-text">{annotationBox}</span>
+        </span>{' '}
       </span>
     );
   }
@@ -14,18 +27,7 @@ class Annotation extends React.PureComponent {
 Annotation._idyll = {
   name: 'Annotation',
   tagType: 'open',
-  displayType: 'inline',
-  children: [
-    'Content placed inside of an annotation component will be displayed inline with some styling.'
-  ],
-  props: [
-    {
-      name: 'annotation',
-      type: 'string',
-      example: '"This is annotation text"',
-      description: 'The displayed text when user hovers on annotated text.'
-    }
-  ]
+  displayType: 'inline'
 };
 
 export default Annotation;

packages/idyll-themes/src/default/styles.js

@@ -1017,7 +1017,7 @@ img {
 .annotated-text,
 .annotated-text:visited {
   background: #efefef;
-  padding: 0 5px;
+  padding: 0 2.5px;
   transition: background 0.25s ease-out;
 }
 

packages/idyll-themes/src/github/styles.js

@@ -833,7 +833,7 @@ hr {
 .annotated-text,
 .annotated-text:visited {
   background: #efefef;
-  padding: 0 5px;
+  padding: 0 2.5px;
   transition: background 0.25s ease-out;
 }
 

packages/idyll-themes/src/idyll/styles.js

@@ -227,7 +227,7 @@ span.action {
 .annotated-text,
 .annotated-text:visited {
   background: #efefef;
-  padding: 0 5px;
+  padding: 0 2.5px;
   transition: background 0.25s ease-out;
 }
 

packages/idyll-themes/src/tufte/styles.js

@@ -385,7 +385,7 @@ pre {
 .annotated-text,
 .annotated-text:visited {
   background: #efefef;
-  padding: 0 5px;
+  padding: 0 2.5px;
   transition: background 0.25s ease-out;
 }