Add `AnnotationDocumentInfo` component

- Used by `AnnotationHeader`
- Renders metadata about an annotation’s document

src/sidebar/components/annotation-document-info.js

+'use strict';
+
+const propTypes = require('prop-types');
+const { createElement } = require('preact');
+
+const annotationMetadata = require('../annotation-metadata');
+
+/**
+ * Render some metadata about an annotation's document and link to it
+ * if a link is available.
+ */
+function AnnotationDocumentInfo({ annotation }) {
+  const documentInfo = annotationMetadata.domainAndTitle(annotation);
+  // If there's no document title, nothing to do here
+  if (!documentInfo.titleText) {
+    return null;
+  }
+
+  return (
+    <div className="annotation-document-info">
+      <div className="annotation-document-info__title">
+        on &quot;
+        {documentInfo.titleLink ? (
+          <a href={documentInfo.titleLink}>{documentInfo.titleText}</a>
+        ) : (
+          <span>{documentInfo.titleText}</span>
+        )}
+        &quot;
+      </div>
+      {documentInfo.domain && (
+        <div className="annotation-document-info__domain">
+          ({documentInfo.domain})
+        </div>
+      )}
+    </div>
+  );
+}
+
+AnnotationDocumentInfo.propTypes = {
+  /* Annotation for which the document metadata will be rendered */
+  annotation: propTypes.object.isRequired,
+};
+
+module.exports = AnnotationDocumentInfo;

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

+'use strict';
+
+const { createElement } = require('preact');
+const { shallow } = require('enzyme');
+
+const fixtures = require('../../test/annotation-fixtures');
+
+const AnnotationDocumentInfo = require('../annotation-document-info');
+
+describe('AnnotationDocumentInfo', () => {
+  let fakeDomainAndTitle;
+  let fakeMetadata;
+
+  const createAnnotationDocumentInfo = props => {
+    return shallow(
+      <AnnotationDocumentInfo
+        annotation={fixtures.defaultAnnotation()}
+        {...props}
+      />
+    );
+  };
+
+  beforeEach(() => {
+    fakeDomainAndTitle = sinon.stub();
+    fakeMetadata = { domainAndTitle: fakeDomainAndTitle };
+    AnnotationDocumentInfo.$imports.$mock({
+      '../annotation-metadata': fakeMetadata,
+    });
+  });
+
+  afterEach(() => {
+    AnnotationDocumentInfo.$imports.$restore();
+  });
+
+  it('should not render if there is no document title', () => {
+    fakeDomainAndTitle.returns({});
+
+    const wrapper = createAnnotationDocumentInfo();
+    const info = wrapper.find('.annotation-document-info');
+
+    assert.notOk(info.exists());
+  });
+
+  it('should render the document title', () => {
+    fakeDomainAndTitle.returns({ titleText: 'I have a title' });
+
+    const wrapper = createAnnotationDocumentInfo();
+    const info = wrapper.find('.annotation-document-info');
+
+    assert.isOk(info.exists());
+  });
+
+  it('should render a link if available', () => {
+    fakeDomainAndTitle.returns({
+      titleText: 'I have a title',
+      titleLink: 'https://www.example.com',
+    });
+
+    const wrapper = createAnnotationDocumentInfo();
+    const link = wrapper.find('.annotation-document-info__title a');
+
+    assert.equal(link.prop('href'), 'https://www.example.com');
+  });
+
+  it('should render domain if available', () => {
+    fakeDomainAndTitle.returns({
+      titleText: 'I have a title',
+      domain: 'www.example.com',
+    });
+
+    const wrapper = createAnnotationDocumentInfo();
+    const domain = wrapper.find('.annotation-document-info__domain');
+
+    assert.equal(domain.text(), '(www.example.com)');
+  });
+});

src/styles/sidebar/components/annotation-document-info.scss

+.annotation-document-info {
+  font-size: 13px;
+  color: $grey-5;
+  display: flex;
+
+  &__title {
+    margin-right: 5px;
+  }
+
+  &__domain {
+    margin-right: 5px;
+    font-size: 12px;
+  }
+}

src/styles/sidebar/sidebar.scss

@@ -19,6 +19,7 @@ $base-line-height: 20px;
 // Components
 // ----------
 @import './components/annotation';
+@import './components/annotation-document-info';
 @import './components/annotation-share-dialog';
 @import './components/annotation-publish-control';
 @import './components/annotation-thread';