Update content-info banner to link to item

Update for changed `contentInfo` structure, including the separation of
`title` and `subtitle` into separate fields. Show subtitle for item
title but not container title.

src/annotator/components/ContentInfoBanner.js

@@ -2,6 +2,7 @@ import classnames from 'classnames';
 
 import {
   Link,
+  LinkUnstyled,
   CaretLeftIcon,
   CaretRightIcon,
 } from '@hypothesis/frontend-shared/lib/next';
@@ -23,6 +24,10 @@ import {
  *   @param {ContentInfoConfig} props.info
  */
 export default function ContentInfoBanner({ info }) {
+  // Format item title to show subtitle
+  const itemTitle = `${info.item.title}${info.item.subtitle && ': '}${
+    info.item.subtitle
+  }`;
   return (
     <div
       className={classnames(
@@ -52,9 +57,9 @@ export default function ContentInfoBanner({ info }) {
           'font-semibold'
         )}
         data-testid="content-container-info"
-        title={info.item.containerTitle}
+        title={info.container.title}
       >
-        {info.item.containerTitle}
+        {info.container.title}
       </div>
       <div
         className={classnames(
@@ -97,9 +102,13 @@ export default function ContentInfoBanner({ info }) {
             'min-w-0 whitespace-nowrap overflow-hidden text-ellipsis shrink font-medium'
           )}
         >
-          <span title={info.item.title} data-testid="content-item-title">
-            {info.item.title}
-          </span>
+          <LinkUnstyled
+            title={itemTitle}
+            href={info.links.currentItem}
+            data-testid="content-item-link"
+          >
+            {itemTitle}
+          </LinkUnstyled>
         </div>
 
         {info.links.nextItem && (

src/annotator/components/test/ContentInfoBanner-test.js

@@ -17,8 +17,13 @@ describe('ContentInfoBanner', () => {
       },
 
       item: {
-        title: 'Chapter 2: Some book chapter',
-        containerTitle: 'Expansive Book',
+        title: 'Chapter 2',
+        subtitle: 'Some book chapter',
+      },
+
+      container: {
+        title: 'Expansive Book',
+        subtitle: 'The revenge',
       },
 
       links: {
@@ -41,9 +46,7 @@ describe('ContentInfoBanner', () => {
   it('shows item title', () => {
     const wrapper = createComponent();
 
-    // TODO: This should be a link once the item link is available in
-    // content-info metadata
-    const title = wrapper.find('span[data-testid="content-item-title"]');
+    const title = wrapper.find('LinkUnstyled[data-testid="content-item-link"]');
     assert.equal(title.text(), 'Chapter 2: Some book chapter');
   });
 
@@ -57,7 +60,9 @@ describe('ContentInfoBanner', () => {
       'Expansive Book'
     );
     assert.equal(
-      wrapper.find('span[data-testid="content-item-title"]').prop('title'),
+      wrapper
+        .find('LinkUnstyled[data-testid="content-item-link"]')
+        .prop('title'),
       'Chapter 2: Some book chapter'
     );
   });

src/annotator/integrations/test/pdf-test.js

@@ -228,7 +228,9 @@ describe('annotator/integrations/pdf', () => {
         },
         item: {
           title: 'Chapter 2: A chapter',
-          containerTitle: 'Book Title Here',
+        },
+        container: {
+          title: 'Book Title Here',
         },
         links: {
           previousItem: 'https://jstor.org/stable/book123.1',

src/types/annotator.js

@@ -201,8 +201,7 @@
  *
  * @typedef ContentInfoItem
  * @prop {string} title - Title of the current article, chapter etc.
- * @prop {string} containerTitle - Title of the journal issue, book etc. which
- *   contains the current work
+ * @prop {string} [subtitle]
  */
 
 /**
@@ -211,6 +210,7 @@
  * @typedef ContentInfoLinks
  * @prop {string} [previousItem] - Previous item in the book, journal etc.
  * @prop {string} [nextItem] - Next item in the book, journal etc.
+ * @prop {string} currentItem - This item in the content provider's context
  */
 
 /**
@@ -222,7 +222,9 @@
  *
  * @typedef {object} ContentInfoConfig
  * @prop {ContentInfoLogo} logo - Logo of the content provider
- * @prop {ContentInfoItem} item
+ * @prop {ContentInfoItem} item - Metadata about the current content item
+ * @prop {ContentInfoItem} container - Metadata about the container (journal or
+ *   book, e.g.) the current `item` is part of
  * @prop {ContentInfoLinks} links
  */