CORE-5055: add layout and cards

components/application/activities.js

@@ -73,6 +73,11 @@ const config = new RouteConfig([
     path: 'doi',
     icon: 'barcode',
   },
+  {
+    test: /\/orcid/,
+    path: 'orcid',
+    icon: 'orcid',
+  },
   {
     test: /\/usrn/,
     path: 'usrn',

components/statsCard/statsCard.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { Icon } from '@oacore/design/lib/elements'
+import { classNames } from '@oacore/design/lib/utils'
+
+import styles from './styles.module.css'
+import { Button } from '../../../design'
+import { formatNumber } from '../../utils/helpers'
+import Actions from '../actions'
+
+import { Card } from 'design'
+
+const StatsCard = ({
+  title,
+  description,
+  action,
+  tooltip,
+  statUrl,
+  statList,
+  statLoading,
+  noticeable,
+  checkBillingType,
+}) => (
+  <Card className={styles.cardWrapper} tag="section" title={title}>
+    <div>
+      <div className={styles.headerWrapper}>
+        <Card.Title className={styles.cardTitle} tag="h2">
+          {title}
+        </Card.Title>
+        <Actions
+          description={tooltip}
+          hoverIcon={
+            <Icon src="#alert-circle-outline" style={{ color: '#757575' }} />
+          }
+        />
+      </div>
+      <div className={styles.innerWrapper} />
+      <Card.Description className={styles.cardDescription}>
+        {description}
+      </Card.Description>
+    </div>
+    <div>
+      {statLoading ? (
+        <div className={styles.loadingContainer}>
+          <div className={styles.loadingStroke} />
+        </div>
+      ) : (
+        <div
+          className={classNames.use(styles.subFooter, {
+            [styles.subFooterRed]: noticeable,
+          })}
+        >
+          {formatNumber(statList.length)}
+        </div>
+      )}
+    </div>
+    <div className={styles.footerWrapper}>
+      {!checkBillingType && (
+        <Button href={statUrl} variant="contained">
+          {action}
+        </Button>
+      )}
+    </div>
+  </Card>
+)
+
+export default StatsCard

components/statsCard/styles.module.css

@@ -0,0 +1,67 @@
+.card-wrapper {
+  width: 100%;
+}
+
+.header-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+.card-description {
+  margin-bottom: unset;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  color: #666;
+  letter-spacing: 0.021px;
+}
+
+.loading-container {
+  position: relative;
+  width: 100%;
+  height: 36px;
+  margin: 16px 0;
+  overflow: hidden;
+  background-color: #f2f2f2;
+  border-radius: 2px;
+}
+
+.loading-container-outputs {
+  position: relative;
+  width: 100%;
+  height: 36px;
+  margin: 26px 0;
+  overflow: hidden;
+  background-color: #f2f2f2;
+  border-radius: 2px;
+}
+
+.loading-stroke {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background-color: #e5e5e5;
+  animation: loading 5s linear infinite;
+}
+
+.footer-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sub-footer {
+  margin: 28px 0;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 32px;
+  color: #8bc34a;
+}
+
+.sub-footer-red {
+  color: #ff5f52;
+}

package.json

@@ -45,7 +45,7 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/runtime": "^7.20.13",
     "@mdi/svg": "^5.8.55",
-    "@oacore/design": "5.0.1",
+    "@oacore/design": "5.0.19",
     "@octokit/rest": "^19.0.5",
     "@sentry/browser": "^5.27.2",
     "@sentry/node": "^5.29.0",

pages/data-providers/[data-provider-id]/orcid.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import OrcidPageTemplate from '../../../templates/orcid'
+
+import { withGlobalStore } from 'store'
+
+const OrcidPage = ({ store, ...props }) => <OrcidPageTemplate {...props} />
+
+export default withGlobalStore(OrcidPage)

store/activities.js

@@ -39,6 +39,11 @@ const config = [
     path: 'doi',
     icon: 'barcode',
   },
+  {
+    id: 'orcid',
+    path: 'orcid',
+    icon: 'orcid',
+  },
   {
     id: 'plugins',
     path: 'plugins',

templates/orcid/index.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import { classNames } from '@oacore/design/lib/utils'
+import { observer } from 'mobx-react-lite'
+
+import styles from './styles.module.css'
+import texts from '../../texts/orcid/orcid.yml'
+import ShowMoreText from '../../components/showMore'
+import DashboardHeader from '../../components/dashboard-header'
+import StatsCard from '../../components/statsCard/statsCard'
+
+import orcid from 'texts/orcid'
+
+const OrcidPageTemplate = observer(
+  ({ tag: Tag = 'main', className, ...restProps }) => {
+    const [showMore, setShowMore] = useState(false)
+
+    const toggleShowMore = () => {
+      setShowMore(!showMore)
+    }
+
+    const statsCardsArray = Object.values(orcid.statsCards)
+
+    return (
+      <Tag
+        className={classNames.use(styles.main).join(className)}
+        {...restProps}
+      >
+        <DashboardHeader
+          title={texts.title}
+          identifier="BETA"
+          showMore={
+            <ShowMoreText
+              className={styles.description}
+              text={texts.description || 'N/A'}
+              maxLetters={320}
+              showMore={showMore}
+              toggleShowMore={toggleShowMore}
+              textRestyle
+            />
+          }
+        />
+        <div className={styles.mainWrapper}>
+          <div className={styles.cardsWrapper}>
+            {statsCardsArray.map((card) => (
+              <StatsCard
+                key={card.title}
+                title={card.title}
+                description={card.description}
+                action={card.action}
+                tooltip={card.tooltip}
+                noticeable={card.noticeable}
+                statUrl="test"
+                statList="test"
+                statLoading={false}
+              />
+            ))}
+          </div>
+        </div>
+      </Tag>
+    )
+  }
+)
+export default OrcidPageTemplate

templates/orcid/styles.module.css

@@ -0,0 +1,14 @@
+.main {
+  padding-top: var(--component-padding-y, 1rem);
+}
+
+.main-wrapper {
+  margin: 0 var(--component-spacer-x, 1rem) var(--component-spacer-y, 1.5rem);
+}
+
+.cards-wrapper {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  gap: 30px;
+}

texts/navigation.yml

@@ -10,6 +10,7 @@ items:
   deposit-compliance: OA compliance
   rights-retention-strategy: RRS Policy
   doi: DOI
+  orcid: ORCID
   plugins: Plugins
   usrn: USRN
   fair: FAIR

texts/orcid/index.js

@@ -0,0 +1,23 @@
+import orcid from './orcid.yml'
+import sourceMessages from '../issues/messages.yml'
+
+const messages = {}
+
+Object.values(sourceMessages).forEach((msg) => {
+  messages[msg.type] = msg
+  Object.values(msg.matches ?? {}).forEach((type) => {
+    messages[type] = msg
+  })
+})
+
+const articleTemplate = Object.keys(orcid.article).reduce(
+  (a, key) => Object.assign(a, { [key]: Object.values(orcid.article[key]) }),
+  {}
+)
+
+export default {
+  ...orcid,
+  actions: Object.values(orcid.actions),
+  article: articleTemplate,
+  messages,
+}