CORE-4902: Add toolkit

components/usrn-text/index.jsx

@@ -3,6 +3,7 @@ import React from 'react'
 
 import styles from './styles.module.css'
 import LinkDoc from './linkDoc'
+import LinkToolKit from './linkToolKit'
 
 const TextUSRN = ({ className, content }) => (
   <div
@@ -13,6 +14,7 @@ const TextUSRN = ({ className, content }) => (
     <div className={className.statusTextTitle}>{content.title}</div>
     <div className={className.statusTextDescription}>{content.description}</div>
     <LinkDoc content={content} />
+    <LinkToolKit content={content} />
   </div>
 )
 

components/usrn-text/linkToolKit.jsx

@@ -0,0 +1,31 @@
+import { classNames } from '@oacore/design/lib/utils'
+import React from 'react'
+
+import toolkit from '../upload/assets/toolkit.svg'
+import styles from './styles.module.css'
+
+const LinkToolKit = ({ content }) => {
+  const linkToolKit =
+    content.linkToolKit && content.linkToolKit.length > 3 ? (
+      <div>
+        <a
+          href={content.linkToolKit}
+          target="_blank"
+          rel="noreferrer"
+          className={styles.toolkitLink}
+        >
+          <img
+            className={classNames.use(styles.docsLink)}
+            src={toolkit}
+            alt="toolkit"
+          />
+          Go to the toolkit
+        </a>
+      </div>
+    ) : (
+      ''
+    )
+  return <>{linkToolKit}</>
+}
+
+export default LinkToolKit

components/usrn-text/styles.module.css

@@ -8,3 +8,16 @@
   padding-right: 8px;
   padding-bottom: 5px;
 }
+
+.toolkit-link {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 16px;
+  color: #b75400;
+  border: 1px solid #b75400;
+  padding: 8px 16px;
+}
+
+.toolkit-link:hover {
+  text-decoration: none;
+}

templates/usrn/cards/status-card.jsx

@@ -3,6 +3,7 @@ import React from 'react'
 import styles from '../styles.module.css'
 import TextUSRN from '../../../components/usrn-text'
 import StatUSRN from '../../../components/usrn-stat'
+import LinkToolKit from '../../../components/usrn-text/linkToolKit'
 
 import { Card, Button } from 'design'
 import * as texts from 'texts/usrn'
@@ -42,6 +43,9 @@ const StatusCard = ({ usrnParams }) => {
       <div className={styles.statusDescriptionFirst}>
         <Markdown>{texts.status.descriptionFirst}</Markdown>
       </div>
+      <div className={styles.statusDescriptionFirst}>
+        <LinkToolKit content={texts.status} />
+      </div>
       <div className={styles.statusDateReportSecond}>
         {usrnDateReportUpdate}
       </div>

templates/usrn/styles.module.css

@@ -37,6 +37,9 @@
 }
 
 .status-title-first {
+  max-width: 850px;
+  padding-bottom: 15px;
+  margin: 0 auto;
   font-size: 32px;
   font-weight: 500;
   line-height: 41.6px;
@@ -45,6 +48,7 @@
 
 .status-description-first {
   max-width: 670px;
+  padding-bottom: 15px;
   margin: 0 auto;
   font-size: 16px;
   font-weight: 400;
@@ -70,7 +74,7 @@
 }
 
 .status-date-report-second {
-  padding: 15px 0 5px;
+  padding: 5px 0;
   font-size: 14px;
   font-weight: 500;
   line-height: 18.2px;

texts/usrn/status.yml

@@ -1,7 +1,8 @@
 titleFirst: USRN Desirable Characteristics of Digital Publication Repositories Report
-descriptionFirst: This report should give a live view of the status of the repository against a series of principles defined as
-  ["Desirable Characteristics"](https://sparcopen.org/wp-content/uploads/2022/10/Desirable-Characteristics-of-Digital-Publication-Repositories-APPROVED-20230331.pdf)
-  and it should support and serve as a companion to the [Toolkit](https://github.com/antleaf/USRN-Discovery/wiki/Toolkit) created by the USRN Discovery project.
+descriptionFirst: |
+  This report should give a live view of the status of the repository against a series of principles defined as
+  Desirable Characteristics and it should support and serve as a companion to the Toolkit created by the USRN Discovery project.
+linkToolKit: https://github.com/antleaf/USRN-Discovery/wiki/Toolkit
 dateReport: Date of the last report update
 buttons:
   update: Update report
@@ -259,7 +260,8 @@ statusItems:
       should include provisions for maintaining integrity, authenticity, and availability.
       The repository records basic preservation metadata including provenance, date of
       upload, and file format.
-    linkDocumentation: https://github.com/antleaf/USRN-Discovery/wiki/Preservation
+    linkDocumentation: 0
+    linkToolKit: https://github.com/antleaf/USRN-Discovery/wiki/Toolkit
   - id: longTerm
     isEnable: yes
     type: text
@@ -270,7 +272,8 @@ statusItems:
       containing provisions for cessation of service. The host organization funds staff to support the repository and
       its users and publicly provides contact information for at least one individual charged with assisting users
       and the explicit responsibility of managing the repository services.
-    linkDocumentation: https://github.com/antleaf/USRN-Discovery/wiki/Long-term-Organizational-Sustainability
+    linkDocumentation: 0
+    linkToolKit: https://github.com/antleaf/USRN-Discovery/wiki/Toolkit
   - id: curationQualityAssurance
     isEnable: yes
     type: text
@@ -281,6 +284,7 @@ statusItems:
       and/or conversion to machine-readable formats. The repository provides documentation of what curation and quality
       assurance processes are applied to repository contents.
     linkDocumentation: 0
+    linkToolKit: https://github.com/antleaf/USRN-Discovery/wiki/Toolkit
   - id: provenance
     isEnable: yes
     type: text