[B] Wrap annotations in blockquotes, include cite tag

Author: jen-castiron

client/src/global/components/Annotation/Annotation/HighlightAnnotation/index.js

@@ -46,23 +46,25 @@ class HighlightDetail extends PureComponent {
     return (
       <div className={wrapperClasses}>
         <div className="annotation-selection__container">
-          <IconComposer
-            icon="interactHighlight32"
-            size="default"
-            className="annotation-selection__icon"
-          />
-          <FromNodes
-            annotation={annotation}
-            selection={annotation.attributes.subject}
-            overlayLight
-          />
-          <SourceSummary
-            includeDate
-            includeCreator
-            annotation={annotation}
-            onClick={visitHandler}
-            onHover={this.hoverHandler}
-          />
+          <blockquote>
+            <IconComposer
+              icon="interactHighlight32"
+              size="default"
+              className="annotation-selection__icon"
+            />
+            <FromNodes
+              annotation={annotation}
+              selection={annotation.attributes.subject}
+              overlayLight
+            />
+            <SourceSummary
+              includeDate
+              includeCreator
+              annotation={annotation}
+              onClick={visitHandler}
+              onHover={this.hoverHandler}
+            />
+          </blockquote>
           <Authorize entity={annotation} ability={"delete"}>
             <div className="annotation-selection__action-buttons">
               <Utility.ConfirmableButton

client/src/global/components/Annotation/Annotation/ResourceAnnotation/index.js

@@ -31,23 +31,25 @@ export default function ResourceAnnotation({
   return (
     <div className={wrapperClasses}>
       <div className="annotation-selection__container">
-        <IconComposer
-          icon="bookmark32"
-          size="default"
-          className="annotation-selection__icon"
-        />
-        <FromNodes
-          annotation={annotation}
-          selection={annotation.attributes.subject}
-          expandable={false}
-        />
-        <SourceSummary
-          includeDate
-          includeCreator
-          annotation={annotation}
-          onClick={visitHandler}
-          onHover={setHovering}
-        />
+        <blockquote>
+          <IconComposer
+            icon="bookmark32"
+            size="default"
+            className="annotation-selection__icon"
+          />
+          <FromNodes
+            annotation={annotation}
+            selection={annotation.attributes.subject}
+            expandable={false}
+          />
+          <SourceSummary
+            includeDate
+            includeCreator
+            annotation={annotation}
+            onClick={visitHandler}
+            onHover={setHovering}
+          />
+        </blockquote>
         <Authorize entity={annotation} ability={"delete"}>
           <div className="annotation-selection__action-buttons">
             <Utility.ConfirmableButton

client/src/global/components/Annotation/Annotation/SourceSummary/index.js

@@ -84,7 +84,7 @@ class SourceSummary extends React.PureComponent {
 
     /* eslint-disable jsx-a11y/anchor-is-valid */
     return (
-      <div className="annotation-selection__source-summary">
+      <cite className="annotation-selection__source-summary">
         <a
           href="#"
           onClick={onClick}
@@ -113,7 +113,7 @@ class SourceSummary extends React.PureComponent {
             />
           )}
         </a>
-      </div>
+      </cite>
     );
     /* eslint-enable jsx-a11y/anchor-is-valid */
   }

client/src/global/components/Annotation/Annotation/TextContent/index.js

@@ -57,17 +57,19 @@ class AnnotationSelectionWrapper extends PureComponent {
     return (
       <div className={wrapperClasses}>
         <div className="annotation-selection__container">
-          <IconComposer
-            icon="socialCite32"
-            size="default"
-            className="annotation-selection__icon annotation-selection__icon--flipped"
-          />
-          <FromNodes annotation={annotation} selection={selection} />
-          <SourceSummary
-            annotation={annotation}
-            onClick={this.props.visitHandler}
-            onHover={this.hoverHandler}
-          />
+          <blockquote>
+            <IconComposer
+              icon="socialCite32"
+              size="default"
+              className="annotation-selection__icon annotation-selection__icon--flipped"
+            />
+            <FromNodes annotation={annotation} selection={selection} />
+            <SourceSummary
+              annotation={annotation}
+              onClick={this.props.visitHandler}
+              onHover={this.hoverHandler}
+            />
+          </blockquote>
         </div>
         {this.annotatable && (
           <>

client/src/theme/styles/components/global/annotation/selection.js

@@ -142,6 +142,8 @@ export default `
 
     &__source-summary {
       padding-top: 10px;
+      display: inline-block;
+      font-style: initial;
     }
 
     &__source-summary-link {