Rename `AnnotationOmega` -> `Annotation`

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

@@ -19,9 +19,9 @@ import TagEditor from './tag-editor';
 import TagList from './tag-list';
 
 /**
- * The "new", migrated-to-preact annotation component.
+ * A single annotation.
  */
-function AnnotationOmega({
+function Annotation({
   annotation,
   annotationsService,
   flash,
@@ -147,7 +147,7 @@ function AnnotationOmega({
   );
 }
 
-AnnotationOmega.propTypes = {
+Annotation.propTypes = {
   annotation: propTypes.object.isRequired,
 
   /** Callback for reply-count clicks */
@@ -164,6 +164,6 @@ AnnotationOmega.propTypes = {
   flash: propTypes.object.isRequired,
 };
 
-AnnotationOmega.injectedProps = ['annotationsService', 'flash'];
+Annotation.injectedProps = ['annotationsService', 'flash'];
 
-export default withServices(AnnotationOmega);
+export default withServices(Annotation);

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

@@ -10,10 +10,10 @@ import { waitFor } from '../../../test-util/wait';
 
 // @TODO Note this import as `Annotation` for easier updating later
 
-import Annotation from '../annotation-omega';
-import { $imports } from '../annotation-omega';
+import Annotation from '../annotation';
+import { $imports } from '../annotation';
 
-describe('AnnotationOmega', () => {
+describe('Annotation', () => {
   let fakeOnReplyCountClick;
 
   // Dependency Mocks

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

@@ -7,7 +7,7 @@ import moderationBanner from '../moderation-banner';
 
 function PageObject(element) {
   this.annotations = function() {
-    return Array.from(element[0].querySelectorAll('annotation-omega'));
+    return Array.from(element[0].querySelectorAll('annotation'));
   };
   this.visibleReplies = function() {
     return Array.from(
@@ -255,27 +255,4 @@ describe('annotationThread', function() {
     assert.notOk(element[0].querySelector('moderation-banner'));
     assert.notOk(element[0].querySelector('annotation'));
   });
-
-  describe('preact-migrated Annotation component', () => {
-    it('renders `AnnotationOmega`', () => {
-      const element = util.createDirective(document, 'annotationThread', {
-        thread: {
-          id: '1',
-          annotation: { id: '1', text: 'text' },
-          children: [
-            {
-              id: '2',
-              annotation: { id: '2', text: 'areply' },
-              children: [],
-              visible: true,
-            },
-          ],
-          visible: true,
-        },
-      });
-
-      assert.notOk(element[0].querySelector('annotation'));
-      assert.ok(element[0].querySelector('annotation-omega'));
-    });
-  });
 });

src/sidebar/index.js

@@ -133,11 +133,11 @@ function autosave(autosaveService) {
 
 // Preact UI components that are wrapped for use within Angular templates.
 
+import Annotation from './components/annotation';
 import AnnotationActionBar from './components/annotation-action-bar';
 import AnnotationBody from './components/annotation-body';
 import AnnotationHeader from './components/annotation-header';
 import AnnotationLicense from './components/annotation-license';
-import AnnotationOmega from './components/annotation-omega';
 import AnnotationPublishControl from './components/annotation-publish-control';
 import AnnotationQuote from './components/annotation-quote';
 import FocusedModeHeader from './components/focused-mode-header';
@@ -265,11 +265,11 @@ function startAngularApp(config) {
     .component('hypothesisApp', hypothesisApp)
 
     // UI components
+    .component('annotation', wrapComponent(Annotation))
     .component('annotationBody', wrapComponent(AnnotationBody))
     .component('annotationHeader', wrapComponent(AnnotationHeader))
     .component('annotationActionBar', wrapComponent(AnnotationActionBar))
     .component('annotationLicense', wrapComponent(AnnotationLicense))
-    .component('annotationOmega', wrapComponent(AnnotationOmega))
     .component(
       'annotationPublishControl',
       wrapComponent(AnnotationPublishControl)

src/sidebar/templates/annotation-thread.html

@@ -14,13 +14,13 @@
       annotation="vm.thread.annotation"
       ng-if="vm.thread.annotation">
     </moderation-banner>
-    <annotation-omega ng-if="vm.thread.annotation && vm.thread.visible"
+    <annotation ng-if="vm.thread.annotation && vm.thread.visible"
       annotation="vm.thread.annotation"
       reply-count="vm.thread.replyCount"
       on-reply-count-click="vm.toggleCollapsed()"
       show-document-info="vm.showDocumentInfo"
       thread-is-collapsed="vm.thread.collapsed">
-    </annotation-omega>
+    </annotation>
 
     <div ng-if="!vm.thread.annotation" class="thread-deleted">
       <p><em>Message not available.</em></p>

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

-@use "../../variables" as var;
-
-.annotation-omega {
-  &__reply-toggle.button {
-    background-color: transparent;
-    padding: 0;
-    font-weight: 400;
-
-    &:hover {
-      background-color: transparent;
-      text-decoration: underline;
-    }
-  }
-
-  &__controls {
-    display: flex;
-  }
-
-  &__actions {
-    margin-left: auto;
-  }
-
-  &__form-actions {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 10px;
-  }
-
-  &__footer {
-    @include var.font-normal;
-    color: var.$grey-5;
-    margin-top: var.$layout-h-margin;
-  }
-
-  &--reply &__footer {
-    margin-top: var.$layout-h-margin - 8px;
-  }
-}
-
-// FIXME vertical rhythm here should be refactored
-.annotation-omega--reply {
-  .annotation-header {
-    // Margin between bottom of ascent of annotation card footer labels
-    // and top of ascent of username should be ~20px
-    margin-top: 0px;
-  }
-
-  .annotation-body {
-    // Margin between top of ascent of annotation body and
-    // bottom of ascent of username should be ~15px
-    margin-top: var.$layout-h-margin - 8px;
-    // Margin between bottom of ascent of annotation body and
-    // top of annotation footer labels should be ~15px
-    margin-bottom: var.$layout-h-margin - 3px;
-  }
-}
-
-.annotation-omega--reply.is-collapsed {
-  margin-bottom: 0;
-
-  .annotation-header {
-    margin: 0;
-  }
-
-  .annotation-body,
-  .annotation-footer {
-    display: none;
-  }
-}

src/styles/sidebar/sidebar.scss

@@ -30,7 +30,6 @@
 @use './components/annotation-document-info';
 @use './components/annotation-header';
 @use './components/annotation-license';
-@use './components/annotation-omega';
 @use './components/annotation-publish-control';
 @use './components/annotation-quote';
 @use './components/annotation-share-control';