Protocol review survey article

articles/protocol-review-survey/components/indy-review-table.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Table } from '@carbonplan/components'
+import { Box } from 'theme-ui'
+
+const IndyReviewTable = ({ data, question }) => {
+  const formattedData = data.map(([text, value]) => [
+    <Box key={`${text}-${value}`} sx={{ color: 'primary' }}>
+      {text}
+    </Box>,
+    value,
+  ])
+
+  return (
+    <>
+      <Box
+        sx={{
+          mb: [4],
+          fontSize: [2, 2, 2, 3],
+          textTransform: 'uppercase',
+          letterSpacing: 'smallcaps',
+          fontFamily: 'heading',
+          color: 'pink',
+        }}
+      >
+        {question}
+      </Box>
+      <Table
+        columns={[6]}
+        start={[[1], [6]]}
+        width={[[5], [1]]}
+        data={formattedData}
+        borderTop={true}
+        borderBottom={true}
+        index={false}
+      />
+    </>
+  )
+}
+
+export default IndyReviewTable

articles/protocol-review-survey/components/novel-efforts-table.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Table } from '@carbonplan/components'
+import { Box } from 'theme-ui'
+
+const NovelEffortsTable = ({ data, question }) => {
+  const formattedData = data.map(([text, value]) => {
+    const [title, ...rest] = text.split('.')
+    const description = rest.join('.').trim()
+
+    return [
+      <Box key={`${text}-${value}`} sx={{ display: 'inline' }}>
+        <Box as='span' sx={{ fontWeight: 'bold' }}>
+          {title + '.'}
+        </Box>{' '}
+        <Box as='span' sx={{ color: 'primary' }}>
+          {description}
+        </Box>
+      </Box>,
+      value,
+    ]
+  })
+
+  return (
+    <>
+      <Box
+        sx={{
+          mb: [4],
+          fontSize: [2, 2, 2, 3],
+          textTransform: 'uppercase',
+          letterSpacing: 'smallcaps',
+          fontFamily: 'heading',
+          color: 'pink',
+        }}
+      >
+        {question}
+      </Box>
+      <Table
+        columns={[6]}
+        start={[[1], [6]]}
+        width={[[5], [1]]}
+        data={formattedData}
+        borderTop={true}
+        borderBottom={true}
+        index={false}
+      />
+    </>
+  )
+}
+
+export default NovelEffortsTable

articles/protocol-review-survey/components/organizations-table.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Table } from '@carbonplan/components'
+import { Box } from 'theme-ui'
+
+const OrganizationsTable = ({ data }) => {
+  return (
+    <Table
+      columns={[6]}
+      start={[[1], [1, 3, 3, 3]]}
+      width={[
+        [6, 2, 2, 2],
+        [6, 4, 4, 4],
+      ]}
+      data={data.map(([title, content]) => [
+        <Box
+          key={title}
+          sx={{
+            fontSize: [2, 2, 2, 3],
+            textTransform: 'uppercase',
+            letterSpacing: 'smallcaps',
+            fontFamily: 'heading',
+            color: 'pink',
+          }}
+        >
+          {title}
+        </Box>,
+        content,
+      ])}
+      borderTop={true}
+      borderBottom={true}
+    />
+  )
+}
+
+export default OrganizationsTable

articles/protocol-review-survey/components/perspective-table.js

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Table } from '@carbonplan/components'
+import { Box } from 'theme-ui'
+
+const PerspectiveTable = ({ data }) => {
+  const { scopeData, outputData, scopeQuestion, outputQuestion } = data
+
+  const formattedScopeData = scopeData.map(([text, subtext, value]) => [
+    <Box key={`scope-${text}`} sx={{ color: 'primary' }}>
+      {text}
+      <Box sx={{ fontSize: [0, 0, 0, 1], color: 'secondary', mt: [2] }}>
+        {subtext}
+      </Box>
+    </Box>,
+    value,
+  ])
+
+  const formattedOutputData = outputData.map(([text, value]) => [
+    <Box key={`output-${text}`} sx={{ color: 'primary' }}>
+      {text}
+    </Box>,
+    value,
+  ])
+
+  return (
+    <>
+      <Box
+        sx={{
+          mb: [4],
+          fontSize: [2, 2, 2, 3],
+          textTransform: 'uppercase',
+          letterSpacing: 'smallcaps',
+          fontFamily: 'heading',
+          color: 'pink',
+        }}
+      >
+        {scopeQuestion}
+      </Box>
+      <Table
+        columns={[6]}
+        start={[[1], [6]]}
+        width={[[5], [1]]}
+        data={formattedScopeData}
+        borderTop={true}
+        borderBottom={true}
+        index={false}
+      />
+
+      <Box
+        sx={{
+          mb: [4],
+          mt: [6],
+          fontSize: [2, 2, 2, 3],
+          textTransform: 'uppercase',
+          letterSpacing: 'smallcaps',
+          fontFamily: 'heading',
+          color: 'pink',
+        }}
+      >
+        {outputQuestion}
+      </Box>
+      <Table
+        columns={[6]}
+        start={[[1], [6]]}
+        width={[[5], [1]]}
+        data={formattedOutputData}
+        borderTop={true}
+        borderBottom={true}
+        index={false}
+      />
+    </>
+  )
+}
+
+export default PerspectiveTable

articles/protocol-review-survey/components/questions-table.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Table } from '@carbonplan/components'
+import { Box } from 'theme-ui'
+
+const QuestionsTable = ({ data }) => {
+  return (
+    <Box sx={{ mt: [4] }}>
+      <Table
+        columns={[6]}
+        start={[[1], [5], [6]]}
+        width={[[4], [1], [1]]}
+        data={[
+          ['', 'Yes', 'No'],
+          ...data.map(([question, yes, no]) => {
+            const { main, subtext } =
+              typeof question === 'object'
+                ? question
+                : { main: question, subtext: null }
+            return [
+              <Box key={main}>
+                <Box
+                  sx={{
+                    fontSize: [2, 2, 2, 3],
+                    textTransform: 'uppercase',
+                    letterSpacing: 'smallcaps',
+                    fontFamily: 'heading',
+                    color: 'pink',
+                  }}
+                >
+                  {main}
+                </Box>
+                {subtext && (
+                  <Box
+                    sx={{ mt: [2], fontSize: [0, 0, 0, 1], color: 'secondary' }}
+                  >
+                    {subtext}
+                  </Box>
+                )}
+              </Box>,
+              yes,
+              no,
+            ]
+          }),
+        ]}
+        borderTop={false}
+        borderBottom={true}
+        index={false}
+      />
+    </Box>
+  )
+}
+
+export default QuestionsTable

articles/protocol-review-survey/components/ranking-table.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Table } from '@carbonplan/components'
+import { Box } from 'theme-ui'
+
+const RankingTable = ({ data }) => {
+  const formattedData = [
+    ['', 'Highest', 'Lowest'],
+    ...data.map(([title, description, topPriority, lowestPriority]) => [
+      <>
+        <Box
+          key={title}
+          sx={{
+            fontSize: [2, 2, 2, 3],
+            textTransform: 'uppercase',
+            letterSpacing: 'smallcaps',
+            fontFamily: 'heading',
+            color: 'pink',
+          }}
+        >
+          {title}
+        </Box>
+        <Box
+          sx={{
+            fontSize: [0, 0, 0, 1],
+            color: 'secondary',
+            mt: [2],
+          }}
+        >
+          {description}
+        </Box>
+      </>,
+      topPriority,
+      lowestPriority,
+    ]),
+  ]
+
+  return (
+    <Table
+      columns={[6]}
+      start={[[1], [5], [6]]}
+      width={[[4], [1], [1]]}
+      data={formattedData}
+      borderTop={false}
+      borderBottom={true}
+      index={false}
+    />
+  )
+}
+
+export default RankingTable