Merge pull request #1868 from hypothesis/annotation-omega-css-classes

Add reply and collapsed classnames to `AnnotationOmega`

src/sidebar/components/annotation-omega.js

+import classnames from 'classnames';
 import { createElement } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 import propTypes from 'prop-types';
@@ -115,7 +116,13 @@ function AnnotationOmega({
 
   return (
     /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */
-    <div className="annotation-omega" onKeyDown={onKeyDown}>
+    <div
+      className={classnames('annotation-omega', {
+        'annotation--reply': isReply(annotation),
+        'is-collapsed': threadIsCollapsed,
+      })}
+      onKeyDown={onKeyDown}
+    >
       <AnnotationHeader
         annotation={annotation}
         isEditing={isEditing}

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

@@ -95,6 +95,25 @@ describe('AnnotationOmega', () => {
 
   it('should test `isSaving`');
 
+  describe('annotation classnames', () => {
+    it('should assign a reply class if the annotation is a reply', () => {
+      fakeMetadata.isReply.returns(true);
+
+      const wrapper = createComponent({ threadIsCollapsed: false });
+      const annot = wrapper.find('.annotation-omega');
+
+      assert.isTrue(annot.hasClass('annotation--reply'));
+      assert.isFalse(annot.hasClass('is-collapsed'));
+    });
+
+    it('should assign a collapsed class if the annotation thread is collapsed', () => {
+      const wrapper = createComponent({ threadIsCollapsed: true });
+      const annot = wrapper.find('.annotation-omega');
+
+      assert.isTrue(annot.hasClass('is-collapsed'));
+    });
+  });
+
   describe('annotation quote', () => {
     it('renders quote if annotation has a quote', () => {
       fakeMetadata.quote.returns('quote');