SFR-2300: Add survey banner to DRB

CHANGELOG.md

@@ -2,14 +2,19 @@
 
 ## [Prerelease]
 
+- Add survey banner to Landing, Collection, Edition, Work, and Search pages
+
 ## [0.18.7]
+
 - Fix header when banner is up
 
 ## [0.18.6]
+
 - Add submit feedback error handling and new fields
 - Fix docker file and playwright tests
 
 ## [0.18.5]
+
 - Make NYPL footer sticky
 
 ## [0.18.4]

src/components/Collection/Collection.tsx

@@ -29,6 +29,7 @@ import Loading from "~/src/components/Loading/Loading";
 import DrbHero from "../DrbHero/DrbHero";
 import { CollectionItem } from "./CollectionItem";
 import DrbBreakout from "../DrbBreakout/DrbBreakout";
+import SurveyBanner from "../SurveyBanner/SurveyBanner";
 
 const Collection: React.FC<{
   collectionQuery: CollectionQuery;
@@ -139,6 +140,7 @@ const Collection: React.FC<{
 
   const contentTopElement = (
     <>
+      <SurveyBanner />
       <Heading level="h2" marginBottom="xl">
         {`Collection - ${title}`}
       </Heading>

src/components/EditionDetail/Edition.tsx

@@ -26,6 +26,7 @@ import { Instance } from "~/src/types/DataModel";
 import { PLACEHOLDER_LINK } from "~/src/constants/collection";
 import DrbBreakout from "../DrbBreakout/DrbBreakout";
 import AuthorsList from "../AuthorsList/AuthorsList";
+import SurveyBanner from "../SurveyBanner/SurveyBanner";
 
 const Edition: React.FC<{ editionResult: EditionResult; backUrl?: string }> = (
   props
@@ -81,6 +82,7 @@ const Edition: React.FC<{ editionResult: EditionResult; backUrl?: string }> = (
 
   const contentTopElement = (
     <>
+      <SurveyBanner />
       <Flex direction={{ base: "column", md: "row" }}>
         {edition && (
           <Heading

src/components/Landing/Landing.tsx

@@ -3,7 +3,6 @@ import {
   Box,
   Heading,
   Hero,
-  Link,
   TemplateAppContainer,
   useNYPLBreakpoints,
 } from "@nypl/design-system-react-components";
@@ -12,6 +11,8 @@ import CollectionList from "../CollectionList/CollectionList";
 import { Opds2Feed } from "~/src/types/OpdsModel";
 import DrbHero from "../DrbHero/DrbHero";
 import DrbBreakout from "../DrbBreakout/DrbBreakout";
+import Link from "../Link/Link";
+import SurveyBanner from "../SurveyBanner/SurveyBanner";
 
 const LandingPage: React.FC<{ collections?: Opds2Feed }> = ({
   collections,
@@ -28,7 +29,7 @@ const LandingPage: React.FC<{ collections?: Opds2Feed }> = ({
         Find millions of digital books for research from multiple sources
         world-wide--all free to read, download, and keep. No library card
         required. This is an early beta test, so we want your feedback!{" "}
-        <Link href="/about">Read more about the project</Link>.
+        <Link to="/about">Read more about the project</Link>.
       </span>
       <Box marginTop="s">
         <SearchForm />
@@ -87,6 +88,7 @@ const LandingPage: React.FC<{ collections?: Opds2Feed }> = ({
 
   const contentPrimaryElement = (
     <Box marginLeft="l" marginRight="l">
+      <SurveyBanner />
       <Heading level="h2">Recently Added Collections</Heading>
       <CollectionList collections={collections} />
     </Box>

src/components/Search/Search.tsx

@@ -33,6 +33,7 @@ import TotalWorks from "../TotalWorks/TotalWorks";
 import filterFields from "~/src/constants/filters";
 import { findFiltersForField } from "~/src/util/SearchQueryUtils";
 import DrbBreakout from "../DrbBreakout/DrbBreakout";
+import SurveyBanner from "../SurveyBanner/SurveyBanner";
 
 const SearchResults: React.FC<{
   searchQuery: SearchQuery;
@@ -263,6 +264,7 @@ const SearchResults: React.FC<{
           <TotalWorks totalWorks={numberOfWorks} />
         </Box>
       )}
+      <SurveyBanner />
       <Box className="search-heading">
         <Box role="alert">
           <Heading level="h1" size="heading3" id="page-title-heading">

src/components/SurveyBanner/SurveyBanner.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Banner, Text } from "@nypl/design-system-react-components";
+import Link from "../Link/Link";
+
+const SurveyBanner: React.FC = () => {
+  return (
+    <Banner
+      type="informative"
+      content={
+        <>
+          <Text noSpace>
+            Do you use Digital Research Books at the Library? Help us learn
+            about your experiences by{" "}
+            <Link to="https://www.surveymonkey.com/r/8B37XDL">
+              taking a short survey.
+            </Link>
+          </Text>
+        </>
+      }
+      marginBottom="l"
+    />
+  );
+};
+
+export default SurveyBanner;

src/components/Work/Work.tsx

@@ -25,6 +25,7 @@ import { MAX_TITLE_LENGTH } from "~/src/constants/editioncard";
 import { PLACEHOLDER_LINK } from "~/src/constants/collection";
 import DrbBreakout from "../DrbBreakout/DrbBreakout";
 import AuthorsList from "../AuthorsList/AuthorsList";
+import SurveyBanner from "../SurveyBanner/SurveyBanner";
 
 const WorkDetail: React.FC<{ workResult: WorkResult; backUrl?: string }> = (
   props
@@ -77,6 +78,7 @@ const WorkDetail: React.FC<{ workResult: WorkResult; backUrl?: string }> = (
 
   const contentTopElement = (
     <>
+      <SurveyBanner />
       <Box>
         <Heading level="h1" size="heading2" id="work-title">
           {work.title}