Merge pull request #1546 from hypothesis/excerpt-cleanup

Refactor `AnnotationBody` and `AnnotationQuote` styles

src/sidebar/components/annotation-body.js

@@ -14,7 +14,6 @@ function AnnotationBody({
   collapse,
   isEditing,
   isHiddenByModerator,
-  hasContent,
   onCollapsibleChanged,
   onEditText,
   onToggleCollapsed,
@@ -34,8 +33,9 @@ function AnnotationBody({
           <MarkdownView
             markdown={text}
             textClass={{
-              'annotation-body is-hidden': isHiddenByModerator,
-              'has-content': hasContent,
+              'annotation-body__text': true,
+              'is-hidden': isHiddenByModerator,
+              'has-content': text.length > 0,
             }}
           />
         </Excerpt>
@@ -54,15 +54,6 @@ AnnotationBody.propTypes = {
    */
   collapse: propTypes.bool,
 
-  /**
-   * Whether to show moderated content, if `isHiddenByModerator` is true or
-   * a placeholder otherwise.
-   *
-   * This will be `true` if the current user is a moderator of the annotation's
-   * group. For non-moderators the content is not exposed via the API.
-   */
-  hasContent: propTypes.bool,
-
   /**
    * Whether to display the body in edit mode (if true) or view mode.
    */
@@ -71,6 +62,10 @@ AnnotationBody.propTypes = {
   /**
    * `true` if the contents of this annotation body have been redacted by
    * a moderator.
+   *
+   * For redacted annotations, the text is shown struck-through (if available)
+   * or replaced by a placeholder indicating redacted content (if `text` is
+   * empty).
    */
   isHiddenByModerator: propTypes.bool,
 

src/sidebar/components/annotation-quote.js

@@ -14,7 +14,7 @@ const Excerpt = require('./excerpt');
 function AnnotationQuote({ isOrphan, quote, settings = {} }) {
   return (
     <section
-      className={classnames('annotation-quote-list', isOrphan && 'is-orphan')}
+      className={classnames('annotation-quote', isOrphan && 'is-orphan')}
     >
       <Excerpt
         collapsedHeight={35}
@@ -22,7 +22,7 @@ function AnnotationQuote({ isOrphan, quote, settings = {} }) {
         overflowThreshold={20}
       >
         <blockquote
-          className="annotation-quote"
+          className="annotation-quote__quote"
           style={applyTheme(['selectionFontFamily'], settings)}
         >
           {quote}

src/sidebar/components/test/annotation-test.js

@@ -159,7 +159,6 @@ describe('annotation', function() {
         .component('annotationBody', {
           bindings: {
             collapse: '<',
-            hasContent: '<',
             isEditing: '<',
             isHiddenByModerator: '<',
             onCollapsibleChanged: '&',
@@ -1270,7 +1269,6 @@ describe('annotation', function() {
           text: 'Some offensive content',
         }),
         isHiddenByModerator: true,
-        hasContent: true,
       },
       {
         context: 'for non-moderators',
@@ -1280,16 +1278,14 @@ describe('annotation', function() {
           text: '',
         }),
         isHiddenByModerator: true,
-        hasContent: false,
       },
-    ].forEach(({ ann, context, isHiddenByModerator, hasContent }) => {
+    ].forEach(({ ann, context, isHiddenByModerator }) => {
       it(`passes moderation status to annotation body (${context})`, () => {
         const el = createDirective(ann).element;
         assert.match(
           el.find('annotation-body').controller('annotationBody'),
           sinon.match({
             isHiddenByModerator,
-            hasContent,
           })
         );
       });

src/sidebar/templates/annotation.html

@@ -21,7 +21,6 @@
 
   <annotation-body
     collapse="vm.collapseBody"
-    has-content="vm.hasContent()"
     is-editing="vm.editing()"
     is-hidden-by-moderator="vm.isHiddenByModerator()"
     on-collapsible-changed="vm.setBodyCollapsible(collapsible)"

src/styles/sidebar/components/annotation-body.scss

+@use '../../variables' as var;
+
+.annotation-body {
+  @include var.font-normal;
+  color: var.$grey-6;
+  // Margin between top of ascent of annotation body and
+  // bottom of ascent of annotation-quote should be ~15px.
+  margin-top: var.$layout-h-margin - 5px;
+  margin-bottom: var.$layout-h-margin;
+  margin-right: 0px;
+  margin-left: 0px;
+}
+
+.annotation-body__text {
+  // Hidden annotations displayed to moderators, where the content is still
+  // present.
+  &.is-hidden.has-content {
+    text-decoration: line-through;
+    filter: grayscale(100%) contrast(65%);
+  }
+
+  // Hidden annotations displayed to non-moderators, where the content has been
+  // filtered out by the service.
+  &.is-hidden:not(.has-content) {
+    // Create a column of horizontal stripes, giving the impression of text
+    // underneath that has been censored.
+    display: block;
+    height: 60px;
+    width: 100vw;
+    background: repeating-linear-gradient(
+      to bottom,
+      var.$grey-2,
+      var.$grey-2 15px,
+      white 15px,
+      white 20px
+    );
+  }
+}

src/styles/sidebar/components/annotation-quote.scss

+@use '../../variables' as var;
+
+.annotation-quote {
+  // Margin between top of ascent of annotation quote and
+  // bottom of ascent of username should be ~15px
+  margin-top: var.$layout-h-margin - 5px;
+  // Margin between bottom of ascent of annotation quote and
+  // top of ascent of annotation-body should be ~15px
+  margin-bottom: var.$layout-h-margin - 3px;
+}
+
+.annotation-quote.is-orphan {
+  text-decoration: line-through;
+}
+
+.annotation-quote__quote {
+  @include var.font-normal;
+
+  border-left: 3px solid var.$gray-lighter;
+  color: var.$grey-4;
+  font-family: sans-serif;
+  font-size: 12px;
+  font-style: italic;
+  letter-spacing: 0.1px;
+  padding: 0 1em;
+
+  // Prevent long URLs etc. in quote causing overflow
+  overflow-wrap: break-word;
+}

src/styles/sidebar/components/annotation.scss

@@ -2,20 +2,8 @@
 @use "../../mixins/icons";
 @use "../../variables" as var;
 
-@mixin quote {
-  @include var.font-normal;
-
-  border-left: 3px solid var.$gray-lighter;
-  color: var.$grey-4;
-  font-family: sans-serif;
-  font-size: 12px;
-  font-style: italic;
-  letter-spacing: 0.1px;
-  padding: 0 1em;
-}
-
 // Highlight quote of annotation whenever its thread is hovered
-.thread-list__card:hover .annotation-quote {
+.thread-list__card:hover .annotation-quote__quote {
   border-left: var.$highlight 3px solid;
 }
 
@@ -72,45 +60,10 @@
   }
 }
 
-.annotation-quote-list,
 .annotation-footer {
   @include forms.pie-clearfix;
 }
 
-.annotation-body {
-  @include var.font-normal;
-  color: var.$grey-6;
-  // Margin between top of ascent of annotation body and
-  // bottom of ascent of annotation-quote should be ~15px.
-  margin-top: var.$layout-h-margin - 5px;
-  margin-bottom: var.$layout-h-margin;
-  margin-right: 0px;
-  margin-left: 0px;
-}
-
-// Hidden annotations displayed to moderators, where the content is still
-// present.
-.annotation-body.is-hidden.has-content {
-  text-decoration: line-through;
-  filter: grayscale(100%) contrast(65%);
-}
-
-// Hidden annotations displayed to non-moderators, where the content has been
-// filtered out by the service.
-.annotation-body.is-hidden:not(.has-content) {
-  // Create a column of horizontal stripes, giving the impression of text
-  // underneath that has been censored.
-  display: block;
-  height: 60px;
-  background: repeating-linear-gradient(
-    to bottom,
-    var.$grey-2,
-    var.$grey-2 15px,
-    white 15px,
-    white 20px
-  );
-}
-
 // the footer at the bottom of an annotation displaying
 // the annotation actions and reply counts
 .annotation-footer {
@@ -123,19 +76,6 @@
   flex-grow: 1;
 }
 
-.annotation-quote-list {
-  // Margin between top of ascent of annotation quote and
-  // bottom of ascent of username should be ~15px
-  margin-top: var.$layout-h-margin - 5px;
-  // Margin between bottom of ascent of annotation quote and
-  // top of ascent of annotation-body should be ~15px
-  margin-bottom: var.$layout-h-margin - 3px;
-}
-
-.annotation-quote-list.is-orphan {
-  text-decoration: line-through;
-}
-
 .annotation-media-embed {
   width: 369px;
   height: 208px;
@@ -169,13 +109,6 @@
   }
 }
 
-.annotation-quote {
-  @include quote;
-
-  // Prevent long URLs etc. in quote causing overflow
-  overflow-wrap: break-word;
-}
-
 .annotation-citation-domain {
   color: var.$gray-light;
   font-size: var.$body1-font-size;

src/styles/sidebar/sidebar.scss

@@ -27,11 +27,13 @@
 @use './components/action-button';
 @use './components/annotation-action-button';
 @use './components/annotation';
+@use './components/annotation-body';
 @use './components/annotation-document-info';
 @use './components/annotation-header';
+@use './components/annotation-publish-control';
+@use './components/annotation-quote';
 @use './components/annotation-share-control';
 @use './components/annotation-share-info';
-@use './components/annotation-publish-control';
 @use './components/annotation-thread';
 @use './components/annotation-user';
 @use './components/excerpt';