CORE-4742: add linking

oacore · Dec 18, 2023 · d65e78c · d65e78c
1 parent df940c5
commit d65e78c
Show file tree

Hide file tree

Showing 10 changed files with 280 additions and 71 deletions.
diff --git a/modules/dropdown/index.jsx b/modules/dropdown/index.jsx
@@ -3,17 +3,17 @@ import {
   Button,
   Card,
   DataProviderLogo,
-  Icon,
   Link,
 } from '@oacore/design/lib/elements'
 import classNames from '@oacore/design/lib/utils/class-names'
+import { Popover } from '@oacore/design/lib/modules'
 
+import redirect from '../../public/static/images/redirect.svg'
 import styles from './styles.module.css'
 import { capitalizeFirstLetter } from '../../utils/titleCase'
 
 const DropDown = ({
   title,
-  subtitle,
   renderOAI,
   children,
   className,
@@ -25,15 +25,18 @@ const DropDown = ({
   makeVisible,
   dataProviderId,
   disableRedirect,
+  outputRedirect,
+  metadata,
+  coreDownloadUrl,
+  sourceFulltextUrls,
+  sourceFulltextUrlsUpd,
+  id,
+  oai,
+  doi,
+  useOtherVersions,
 }) => {
-  const [activeDropdown, setActiveDropdown] = useState(!useExpandButton)
   const [logoFetched, setLogoFetched] = useState('')
 
-  const onToggleDropdown = (e) => {
-    e.stopPropagation()
-    setActiveDropdown(!activeDropdown)
-  }
-
   const Tag = href ? Link : 'div'
 
   // eslint-disable-next-line consistent-return
@@ -43,6 +46,10 @@ const DropDown = ({
     window.location.href = href
   }
 
+  const redirectToProviders = () => {
+    window.location.href = metadata.hrefDataProvider
+  }
+
   const getLogoLink = () => {
     useEffect(() => {
       async function fetchData() {
@@ -64,30 +71,36 @@ const DropDown = ({
 
   return (
     <>
-      {checkBillingType && !makeVisible ? (
-        <div className={styles.placement}>
-          <a href="/membership" className={styles.memberType}>
-            {capitalizeFirstLetter(memberType?.billing_type)} member
-          </a>
-        </div>
-      ) : (
-        <></>
-      )}
       <div
         className={classNames
-          .use(styles.dropdown, {
+          .use({
             [styles.activeClass]: checkBillingType && !makeVisible,
+            [styles.cardItem]: useOtherVersions,
           })
           .join(className)}
       >
+        {checkBillingType && !makeVisible ? (
+          <div className={styles.placement}>
+            <a
+              href="https://core.ac.uk/membership"
+              className={styles.memberType}
+            >
+              {capitalizeFirstLetter(memberType?.billing_type)} member
+            </a>
+          </div>
+        ) : (
+          <></>
+        )}
         <div className={styles.header}>
-          <Tag className={styles.content} onClick={redirectOnClick}>
+          <Tag className={styles.content}>
             <div
               className={classNames.use(styles.headerWrapper, {
                 [styles.headerWrapperClickable]: useExpandButton,
               })}
             >
-              <div className={styles.itemWrapper}>
+              {/* eslint-disable-next-line max-len */}
+              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+              <div className={styles.itemWrapper} onClick={redirectToProviders}>
                 <DataProviderLogo
                   imageSrc={checkBillingType ? getLogoLink() : ''}
                   useDefault
@@ -103,33 +116,75 @@ const DropDown = ({
                   >
                     {title}
                   </Card.Title>
-                  <Card.Description className={styles.subtitle} tag="span">
-                    {subtitle}
-                  </Card.Description>
                 </div>
+                <img
+                  className={styles.redirectImg}
+                  src={redirect}
+                  alt="redirect"
+                />
               </div>
-              {useExpandButton && (
-                <Button type="button" onClick={onToggleDropdown}>
-                  <Icon
-                    src="#menu-down"
-                    className={classNames.use(styles.iconMenu, {
-                      [styles.iconMenuActive]: activeDropdown,
-                    })}
-                  />
-                </Button>
-              )}
             </div>
             <Card.Description
               className={classNames.use(styles.subtitle, {
                 [styles.oaiTitle]: renderOAI,
               })}
               tag="span"
             >
+              {outputRedirect && (
+                <Button
+                  onClick={redirectOnClick}
+                  className={styles.actionButton}
+                  variant="outlined"
+                >
+                  See this paper in CORE
+                </Button>
+              )}
+              {oai ? (
+                <a
+                  className={styles.ellipsis}
+                  href={`https://api.core.ac.uk/oai/${oai}`}
+                >
+                  <Button className={styles.actionButton} variant="outlined">
+                    Go to the repository landing page
+                  </Button>
+                </a>
+              ) : (
+                <a className={styles.ellipsis} href={`https://doi.org/${doi}`}>
+                  <Button className={styles.actionButton} variant="outlined">
+                    Go to the repository landing page
+                  </Button>
+                </a>
+              )}
+              {coreDownloadUrl &&
+              coreDownloadUrl.match(/core.ac.uk/gm) &&
+              sourceFulltextUrls ? (
+                <a
+                  href={sourceFulltextUrlsUpd}
+                  aria-labelledby={`${id}-downloaded-from-title`}
+                  aria-describedby={`${id}-downloaded-from-body`}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <Button className={styles.actionButton} variant="outlined">
+                    Download from data provider
+                  </Button>
+                </a>
+              ) : (
+                <Popover
+                  placement="right"
+                  content="We don't have a full text link from this data provider"
+                  className={styles.popover}
+                >
+                  <Button className={styles.disabledButton} variant="outlined">
+                    Download from data provider
+                  </Button>
+                </Popover>
+              )}
               {renderOAI}
             </Card.Description>
           </Tag>
         </div>
-        {activeDropdown && children}
+        {children}
       </div>
     </>
   )

diff --git a/modules/dropdown/styles.module.css b/modules/dropdown/styles.module.css
@@ -23,6 +23,9 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #e0e0e0;
+  cursor: pointer;
 }
 
 .header-wrapper-clickable {
@@ -45,25 +48,69 @@
 }
 
 .title-colored {
-  color: var(--primary);
+  color: var(--gray-900);
+}
+
+.redirect-img {
+  margin-left: 1rem;
 }
 
 .subtitle {
   display: block;
   padding-bottom: 0.3rem;
   margin-top: 0.3rem;
   color: var(--gray-700);
+  padding-top: 10px;
+}
+
+.action-button {
+  width: 100%;
+  margin-bottom: 14px;
+  text-align: center;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.175px;
+  text-transform: initial;
+}
+
+.disabled-button {
+  width: 100%;
+  border: 1px solid #9E9E9E;
+  color: #9E9E9E;
+  cursor: not-allowed;
+  margin-bottom: 14px;
+  letter-spacing: 0.175px;
+  text-transform: initial;
+}
+
+.popover {
+  padding: 4px;
+  width: 160px;
+  color: #FFF;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 12px;
+  letter-spacing: 0.048px;
+}
+
+.disabled-button:hover {
+  background: unset;
 }
 
 .oai-title {
-  border-top: 1px solid #e0e0e0;
   padding-top: 10px;
 }
 
-.activeClass {
-  border: 1px solid #B75400;
+.card-item {
   background: #F5F5F5;
-  padding: 0.5rem;
+  padding: 0.5rem 1rem 1rem;
+}
+
+.activeClass {
+  padding: 0 1rem 1rem;
   cursor: pointer;
   transition: all 0.5s ease-in-out;
 }
@@ -77,13 +124,14 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  margin-bottom: -1rem;
+  margin-bottom: 0.5rem;
+  margin-right: -1rem;
 }
 
 .memberType {
   min-width: 113px;
   width: max-content;
-  background: #B75400;
+  background: #8BC34A;
   font-style: normal;
   font-weight: 400;
   font-size: 12px;

diff --git a/pages/outputs/[id].jsx b/pages/outputs/[id].jsx
@@ -4,7 +4,7 @@ import { Header } from '@oacore/design'
 import { useRouter } from 'next/router'
 
 import { checkLogo, checkMembership } from 'utils/data-providers-transform'
-import { fetchMetadata, fetchCitations, fetchDataProvider } from 'api/outputs'
+import { fetchCitations, fetchDataProvider, fetchMetadata } from 'api/outputs'
 import { useStore } from 'store'
 import Meta from 'modules/meta'
 import Template from 'templates/output'

diff --git a/public/static/images/redirect.svg b/public/static/images/redirect.svg
diff --git a/templates/output/card-dropdown.jsx b/templates/output/card-dropdown.jsx
@@ -34,6 +34,10 @@ const CardDropdown = ({
   dataProviderId,
   makeVisible,
   worksOai,
+  outputRedirect,
+  metadata,
+  doi,
+  useOtherVersions,
 }) => {
   const [copyUrlStatus, copyUrl] = useCopyToClipboard(oai)
   const [isTooltipVisible, setIsTooltipVisible] = useState(false)
@@ -128,6 +132,15 @@ const CardDropdown = ({
       memberType={memberType}
       checkBillingType={checkBillingType}
       makeVisible={makeVisible}
+      outputRedirect={outputRedirect}
+      metadata={metadata}
+      coreDownloadUrl={coreDownloadUrl}
+      sourceFulltextUrls={sourceFulltextUrls}
+      sourceFulltextUrlsUpd={sourceFulltextUrlsUpd}
+      id={id}
+      oai={oai}
+      doi={doi}
+      useOtherVersions={useOtherVersions}
     >
       <div className={styles.dropdownContent}>
         {!worksOai && oai && (
@@ -161,23 +174,11 @@ const CardDropdown = ({
             Last time updated on {formatDate(updatedDate || createdDate)}
           </Card.Description>
         )}
-        {coreDownloadUrl &&
-          coreDownloadUrl.match(/core.ac.uk/gm) &&
-          sourceFulltextUrls && (
-            <Card.Description className={styles.descriptionLink} tag="span">
-              <a
-                href={sourceFulltextUrlsUpd}
-                aria-labelledby={`${id}-downloaded-from-title`}
-                aria-describedby={`${id}-downloaded-from-body`}
-                target="_blank"
-                rel="noreferrer"
-              >
-                View original full text link
-              </a>
-            </Card.Description>
-          )}
         {checkBillingType && makeVisible ? (
-          <a href="/membership" className={styles.memberHighlight}>
+          <a
+            href="https://core.ac.uk/membership"
+            className={styles.memberHighlight}
+          >
             Provided by our {capitalizeFirstLetter(memberType?.billing_type)}{' '}
             member
           </a>

diff --git a/templates/output/card-dropdown.module.css b/templates/output/card-dropdown.module.css
@@ -6,12 +6,6 @@
   margin-bottom: 1rem;
 }
 
-.dropdown-content {
-  padding-top: 0.5rem;
-  margin-bottom: 1rem;
-  border-top: 1px solid var(--gray-100);
-}
-
 .identifier {
   position: relative;
   display: flex;
@@ -91,7 +85,7 @@
   font-weight: 400;
   color: #fff;
   letter-spacing: 0.004em;
-  background: #b75400;
+  background: #8BC34A;
   border-radius: 2px;
 }