feat(content-preview): Add host-owned comparison banner slots

src/elements/content-preview/ContentPreview.js

@@ -137,7 +137,9 @@ type Props = {
     hasProviders?: boolean,
     hideSidebar?: boolean,
     isComparing?: boolean,
+    banner?: React.Node,
     comparedSlotRef?: (?HTMLDivElement) => mixed,
+    comparedBanner?: React.Node,
     comparedVersion?: BoxItemVersion,
     isLarge: boolean,
     isVeryLarge?: boolean,
@@ -1727,6 +1729,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
             hasHeader,
             hasProviders,
             hideSidebar,
+            banner,
             comparedSlotRef,
             isComparing,
             history,
@@ -1830,6 +1833,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
                                         onMouseMove={this.onMouseMove}
                                         ref={this.containerRef}
                                     >
+                                        {banner && <div className="bcpr-banner">{banner}</div>}
                                         {file && (
                                             <Measure bounds onResize={this.onResize}>
                                                 {({ measureRef: previewRef }) => {
@@ -1932,7 +1936,7 @@ const ConnectedContentPreview = flow([
 const MemoConnectedContentPreview = React.memo(ConnectedContentPreview);
 
 function ContentPreviewWithComparison(props: ContentPreviewProps) {
-    const { comparedVersion, ...rest } = props;
+    const { comparedBanner, comparedVersion, ...rest } = props;
     const [comparedSlot, setComparedSlot] = React.useState<?HTMLDivElement>(null);
     const comparedVersionId = comparedVersion && comparedVersion.id;
     const isComparing = comparedVersionId != null && comparedVersionId !== '';
@@ -1953,6 +1957,7 @@ function ContentPreviewWithComparison(props: ContentPreviewProps) {
                           accessPattern={undefined}
                           advancedContentInsights={undefined}
                           autoFocus={false}
+                          banner={comparedBanner}
                           boxAnnotations={undefined}
                           collection={EMPTY_COLLECTION}
                           componentRef={undefined}

src/elements/content-preview/ContentPreview.scss

@@ -39,6 +39,14 @@
         flex: 1;
     }
 
+    .bcpr-banner {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        z-index: 1;
+    }
+
     .bcpr-content {
         flex: 1;
     }
@@ -105,6 +113,11 @@
             position: static;
         }
 
+        // Compared instance is not --comparing. Keep the banner's containing block.
+        .bcpr-body:not(.bcpr-body--comparing) .bcpr-container:has(.bcpr-banner) {
+            position: relative;
+        }
+
         &.bcpr-thumbnails-open .bcpr-navigate-left {
             left: 0;
         }

src/elements/content-preview/__tests__/ContentPreview.test.js

@@ -2802,6 +2802,57 @@ describe('elements/content-preview/ContentPreview', () => {
             expect(bodyDiv.find('.bcpr-compared-slot').exists()).toBe(false);
         });
 
+        test('should render the banner above the viewer content when provided', () => {
+            const wrapper = getWrapper({
+                banner: <div className="test-banner">v12</div>,
+                fileId: '123',
+            });
+            wrapper.setState({
+                currentFileId: '123',
+                file: { id: '123', name: 'test.pdf' },
+            });
+
+            const container = wrapper.find('.bcpr-container');
+            const bannerDiv = container.children().at(0);
+            expect(bannerDiv.hasClass('bcpr-banner')).toBe(true);
+            expect(bannerDiv.find('.test-banner').exists()).toBe(true);
+        });
+
+        test('should not render a banner element when the banner prop is omitted', () => {
+            const wrapper = getWrapper({
+                fileId: '123',
+            });
+            wrapper.setState({
+                currentFileId: '123',
+                file: { id: '123', name: 'test.pdf' },
+            });
+
+            expect(wrapper.find('.bcpr-banner').exists()).toBe(false);
+        });
+
+        test('should forward comparedBanner as the compared instance banner only', () => {
+            const banner = <div className="main-banner" />;
+            const comparedBanner = <div className="compared-banner" />;
+            const wrapper = shallow(
+                <ContentPreviewWithComparison
+                    banner={banner}
+                    comparedBanner={comparedBanner}
+                    comparedVersion={{ id: '456' }}
+                    fileId="123"
+                    logger={{ onReadyMetric: jest.fn(), onPreviewMetric: jest.fn() }}
+                />,
+            );
+
+            wrapper.childAt(0).props().comparedSlotRef(document.createElement('div'));
+            wrapper.update();
+
+            const mainProps = wrapper.childAt(0).props();
+            const comparedProps = wrapper.childAt(1).props().children.props;
+            expect(mainProps.banner).toBe(banner);
+            expect(mainProps.comparedBanner).toBeUndefined();
+            expect(comparedProps.banner).toBe(comparedBanner);
+        });
+
         test('should not render PreviewNavigation when isComparing', () => {
             const wrapper = getWrapper({
                 fileId: '456',