From 5edb7a3bc95339b34da35b11b29b02a2cf30d05c Mon Sep 17 00:00:00 2001
From: Ben Furber <ben.furber@googlemail.com>
Date: Fri, 31 May 2024 16:15:27 +0100
Subject: [PATCH] feat: use guidelines component across app

---
 src/pages/Howto/Content/Common/Howto.form.tsx |  6 +-
 .../Content/Common/HowtoPostingGuidelines.tsx | 55 +++++++++++++++++
 .../Content/Common/PostingGuidelines.tsx      | 60 -------------------
 src/pages/Howto/Content/Common/index.ts       |  2 +-
 .../Content/Common/PostingGuidelines.tsx      | 48 ---------------
 .../Question/Content/Common/QuestionForm.tsx  |  6 +-
 .../Common/QuestionPostingGuidelines.tsx      | 56 +++++++++++++++++
 src/pages/Question/Content/Common/index.ts    |  2 +-
 .../Content/Common/PostingGuidelines.tsx      | 51 ----------------
 .../Research/Content/Common/Research.form.tsx |  6 +-
 .../Common/ResearchPostingGuidelines.tsx      | 43 +++++++++++++
 src/pages/Research/Content/Common/index.ts    |  2 +-
 .../content/PostingGuidelines.tsx             | 41 ++++++-------
 13 files changed, 183 insertions(+), 195 deletions(-)
 create mode 100644 src/pages/Howto/Content/Common/HowtoPostingGuidelines.tsx
 delete mode 100644 src/pages/Howto/Content/Common/PostingGuidelines.tsx
 delete mode 100644 src/pages/Question/Content/Common/PostingGuidelines.tsx
 create mode 100644 src/pages/Question/Content/Common/QuestionPostingGuidelines.tsx
 delete mode 100644 src/pages/Research/Content/Common/PostingGuidelines.tsx
 create mode 100644 src/pages/Research/Content/Common/ResearchPostingGuidelines.tsx

diff --git a/src/pages/Howto/Content/Common/Howto.form.tsx b/src/pages/Howto/Content/Common/Howto.form.tsx
index b1aecfe0e3..ad387b5182 100644
--- a/src/pages/Howto/Content/Common/Howto.form.tsx
+++ b/src/pages/Howto/Content/Common/Howto.form.tsx
@@ -31,8 +31,8 @@ import {
   HowtoFieldTags,
   HowtoFieldTime,
   HowtoFieldTitle,
+  HowtoPostingGuidelines,
   HowToSubmitStatus,
-  PostingGuidelines,
 } from '.'
 
 import type { FormApi } from 'final-form'
@@ -172,7 +172,7 @@ export const HowtoForm = observer((props: IProps) => {
                     <Box
                       sx={{ mt: '20px', display: ['block', 'block', 'none'] }}
                     >
-                      <PostingGuidelines />
+                      <HowtoPostingGuidelines />
                     </Box>
                     <Card mt={3}>
                       <Flex
@@ -250,7 +250,7 @@ export const HowtoForm = observer((props: IProps) => {
                   }}
                 >
                   <Box sx={{ display: ['none', 'none', 'block'] }}>
-                    <PostingGuidelines />
+                    <HowtoPostingGuidelines />
                   </Box>
 
                   <HowtoButtonDraft
diff --git a/src/pages/Howto/Content/Common/HowtoPostingGuidelines.tsx b/src/pages/Howto/Content/Common/HowtoPostingGuidelines.tsx
new file mode 100644
index 0000000000..f17dd079c3
--- /dev/null
+++ b/src/pages/Howto/Content/Common/HowtoPostingGuidelines.tsx
@@ -0,0 +1,55 @@
+import { ExternalLink, Guidelines } from 'oa-components'
+
+export const HowtoPostingGuidelines = () => (
+  <Guidelines
+    title="How does it work?"
+    steps={[
+      <>
+        Choose what you want to share{' '}
+        <span role="img" aria-label="raised-hand">
+          🙌
+        </span>
+      </>,
+      <>
+        Read{' '}
+        <ExternalLink sx={{ color: 'blue' }} href="/academy/create/howto">
+          our guidelines{' '}
+          <span role="img" aria-label="nerd-face">
+            🤓
+          </span>
+        </ExternalLink>
+      </>,
+      <>
+        Prepare your text & images{' '}
+        <span role="img" aria-label="archive-box">
+          🗄️
+        </span>
+      </>,
+      <>
+        Create your How-to{' '}
+        <span role="img" aria-label="writing-hand">
+          ✍️
+        </span>
+      </>,
+      <>
+        Click on “Publish”{' '}
+        <span role="img" aria-label="mouse">
+          🖱️
+        </span>
+      </>,
+      <>We will either send you feedback, or</>,
+      <>
+        Approve if everything is okay{' '}
+        <span role="img" aria-label="tick-validate">
+          ✅
+        </span>
+      </>,
+      <>
+        Be proud{' '}
+        <span role="img" aria-label="simple-smile">
+          🙂
+        </span>
+      </>,
+    ]}
+  />
+)
diff --git a/src/pages/Howto/Content/Common/PostingGuidelines.tsx b/src/pages/Howto/Content/Common/PostingGuidelines.tsx
deleted file mode 100644
index 7c9abccc4b..0000000000
--- a/src/pages/Howto/Content/Common/PostingGuidelines.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { ExternalLink } from 'oa-components'
-import { Card, Flex, Heading, Text } from 'theme-ui'
-
-export const PostingGuidelines = () => (
-  <Card>
-    <Flex sx={{ flexDirection: 'column' }} p={4}>
-      <Heading as="h2" mb={2}>
-        How does it work?
-      </Heading>
-      <Text variant="auxiliary" mb={1}>
-        1. Choose what you want to share{' '}
-        <span role="img" aria-label="raised-hand">
-          🙌
-        </span>
-      </Text>
-      <Text variant="auxiliary" mb={1}>
-        2. Read{' '}
-        <ExternalLink sx={{ color: 'blue' }} href="/academy/create/howto">
-          our guidelines{' '}
-          <span role="img" aria-label="nerd-face">
-            🤓
-          </span>
-        </ExternalLink>
-      </Text>
-      <Text variant="auxiliary" mb={1}>
-        3. Prepare your text & images{' '}
-        <span role="img" aria-label="archive-box">
-          🗄️
-        </span>
-      </Text>
-      <Text variant="auxiliary" mb={1}>
-        4. Create your How-to{' '}
-        <span role="img" aria-label="writing-hand">
-          ✍️
-        </span>
-      </Text>
-      <Text variant="auxiliary" mb={1}>
-        5. Click on “Publish”{' '}
-        <span role="img" aria-label="mouse">
-          🖱️
-        </span>
-      </Text>
-      <Text variant="auxiliary" mb={1}>
-        6. We will either send you feedback, or
-      </Text>
-      <Text variant="auxiliary" mb={1}>
-        7. Approve if everything is okay{' '}
-        <span role="img" aria-label="tick-validate">
-          ✅
-        </span>
-      </Text>
-      <Text variant="auxiliary" mb={1}>
-        8. Be proud{' '}
-        <span role="img" aria-label="simple-smile">
-          🙂
-        </span>
-      </Text>
-    </Flex>
-  </Card>
-)
diff --git a/src/pages/Howto/Content/Common/index.ts b/src/pages/Howto/Content/Common/index.ts
index 1c622313d7..3ca756cdda 100644
--- a/src/pages/Howto/Content/Common/index.ts
+++ b/src/pages/Howto/Content/Common/index.ts
@@ -16,4 +16,4 @@ export { HowtoFieldTags } from './HowtoFieldTags'
 export { HowtoFieldTime } from './HowtoFieldTime'
 export { HowtoFieldTitle } from './HowtoFieldTitle'
 export { HowToSubmitStatus } from './SubmitStatus'
-export { PostingGuidelines } from './PostingGuidelines'
+export { HowtoPostingGuidelines } from './HowtoPostingGuidelines'
diff --git a/src/pages/Question/Content/Common/PostingGuidelines.tsx b/src/pages/Question/Content/Common/PostingGuidelines.tsx
deleted file mode 100644
index 37fe984843..0000000000
--- a/src/pages/Question/Content/Common/PostingGuidelines.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { ExternalLink } from 'oa-components'
-import { Card, Flex, Heading, Text } from 'theme-ui'
-
-export const PostingGuidelines = () => (
-  <Card>
-    <Flex sx={{ flexDirection: 'column' }} p={4}>
-      <Heading as="h2" mb={2}>
-        How does it work?
-      </Heading>
-      <Text mb={1} variant="auxiliary">
-        1. Write your question{' '}
-        <span role="img" aria-label="raised-hand">
-          🙌
-        </span>
-      </Text>
-      <Text mb={1} variant="auxiliary">
-        2. Double check if it's already made and{' '}
-        <ExternalLink sx={{ color: 'blue' }} href="/questions">
-          search{' '}
-        </ExternalLink>
-      </Text>
-      <Text mb={1} variant="auxiliary">
-        3. Provide enough info for people to help{' '}
-        <span role="img" aria-label="archive-box">
-          🗄️
-        </span>
-      </Text>
-      <Text mb={1} variant="auxiliary">
-        4. Add a category and search so others can find it{' '}
-        <span role="img" aria-label="writing-hand">
-          ✍️
-        </span>
-      </Text>
-      <Text mb={1} variant="auxiliary">
-        5. Publish
-      </Text>
-      <Text mb={1} variant="auxiliary">
-        6. Come back to comment the answers
-      </Text>
-      <Text mb={1} variant="auxiliary">
-        7. Get your best answer{' '}
-        <span role="img" aria-label="simple-smile">
-          🙂
-        </span>
-      </Text>
-    </Flex>
-  </Card>
-)
diff --git a/src/pages/Question/Content/Common/QuestionForm.tsx b/src/pages/Question/Content/Common/QuestionForm.tsx
index 6bdcb3a083..075c171c0b 100644
--- a/src/pages/Question/Content/Common/QuestionForm.tsx
+++ b/src/pages/Question/Content/Common/QuestionForm.tsx
@@ -4,7 +4,7 @@ import { Button, ElWithBeforeIcon } from 'oa-components'
 import { IModerationStatus } from 'oa-shared'
 import IconHeaderHowto from 'src/assets/images/header-section/howto-header-icon.svg'
 import { logger } from 'src/logger'
-import { PostingGuidelines } from 'src/pages/Question/Content/Common'
+import { QuestionPostingGuidelines } from 'src/pages/Question/Content/Common'
 import * as LABELS from 'src/pages/Question/labels'
 import { useQuestionStore } from 'src/stores/Question/question.store'
 import { setAllowDraftSaveFalse } from 'src/utils/validators'
@@ -90,7 +90,7 @@ export const QuestionForm = (props: IProps) => {
                   </Flex>
                 </Card>
                 <Box sx={{ mt: '20px', display: ['block', 'block', 'none'] }}>
-                  <PostingGuidelines />
+                  <QuestionPostingGuidelines />
                 </Box>
                 <Card sx={{ marginTop: 4, padding: 4, overflow: 'visible' }}>
                   <QuestionTitleField
@@ -123,7 +123,7 @@ export const QuestionForm = (props: IProps) => {
                 }}
               >
                 <Box sx={{ display: ['none', 'none', 'block'] }}>
-                  <PostingGuidelines />
+                  <QuestionPostingGuidelines />
                 </Box>
                 <Button
                   large
diff --git a/src/pages/Question/Content/Common/QuestionPostingGuidelines.tsx b/src/pages/Question/Content/Common/QuestionPostingGuidelines.tsx
new file mode 100644
index 0000000000..c6fe413664
--- /dev/null
+++ b/src/pages/Question/Content/Common/QuestionPostingGuidelines.tsx
@@ -0,0 +1,56 @@
+import { useTheme } from '@emotion/react'
+import { ExternalLink, Guidelines } from 'oa-components'
+
+export const QuestionPostingGuidelines = () => {
+  const theme = useTheme()
+
+  const steps = [
+    <>
+      Write your question (in English){' '}
+      <span role="img" aria-label="raised-hand">
+        🙌
+      </span>
+    </>,
+    <>
+      Double check if it's already made and{' '}
+      <ExternalLink sx={{ color: 'blue' }} href="/questions">
+        search{' '}
+      </ExternalLink>
+    </>,
+    <>
+      Provide enough info for people to help{' '}
+      <span role="img" aria-label="archive-box">
+        🗄️
+      </span>
+    </>,
+    <>
+      Add a category and search so others can find it{' '}
+      <span role="img" aria-label="writing-hand">
+        ✍️
+      </span>
+    </>,
+    <>Come back to comment the answers</>,
+    <>
+      Get your best answer{' '}
+      <span role="img" aria-label="simple-smile">
+        🙂
+      </span>
+    </>,
+  ]
+
+  if (theme.questionsGuidelinesURL) {
+    steps.unshift(
+      <>
+        Have a look at our{' '}
+        <ExternalLink
+          sx={{ color: 'blue' }}
+          href={theme.questionsGuidelinesURL}
+        >
+          question guidelines.
+        </ExternalLink>
+      </>,
+    )
+  }
+
+  return <Guidelines title="How does it work?" steps={steps} />
+}
diff --git a/src/pages/Question/Content/Common/index.ts b/src/pages/Question/Content/Common/index.ts
index ae8f0558c3..3a59b44bd9 100644
--- a/src/pages/Question/Content/Common/index.ts
+++ b/src/pages/Question/Content/Common/index.ts
@@ -1 +1 @@
-export { PostingGuidelines } from './PostingGuidelines'
+export { QuestionPostingGuidelines } from './QuestionPostingGuidelines'
diff --git a/src/pages/Research/Content/Common/PostingGuidelines.tsx b/src/pages/Research/Content/Common/PostingGuidelines.tsx
deleted file mode 100644
index 8944cc44db..0000000000
--- a/src/pages/Research/Content/Common/PostingGuidelines.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { ExternalLink } from 'oa-components'
-import { Card, Flex, Heading, Text } from 'theme-ui'
-
-export const PostingGuidelines = () => (
-  <Card>
-    <Flex sx={{ flexDirection: 'column' }} p={4}>
-      <Heading as="h2" mb={2}>
-        How does it work?
-      </Heading>
-      <Text mb={1} variant="auxiliary">
-        1. Choose a topic you want to research{' '}
-        <span role="img" aria-label="raised-hand">
-          🙌
-        </span>
-      </Text>
-      <Text mb={1} variant="auxiliary">
-        2. Read{' '}
-        <ExternalLink sx={{ color: 'blue' }} href="/academy/guides/research">
-          our guidelines{' '}
-          <span role="img" aria-label="nerd-face">
-            🤓
-          </span>
-        </ExternalLink>
-      </Text>
-      <Text mb={1} variant="auxiliary">
-        3. Write your introduction{' '}
-        <span role="img" aria-label="archive-box">
-          🗄️
-        </span>
-      </Text>
-      <Text mb={1} variant="auxiliary">
-        4. Come back when you made progress{' '}
-        <span role="img" aria-label="writing-hand">
-          ✍️
-        </span>
-      </Text>
-      <Text mb={1} variant="auxiliary">
-        5. Keep doing this
-      </Text>
-      <Text mb={1} variant="auxiliary">
-        6. When its ready, press finished
-      </Text>
-      <Text mb={1} variant="auxiliary">
-        7. Be proud{' '}
-        <span role="img" aria-label="simple-smile">
-          🙂
-        </span>
-      </Text>
-    </Flex>
-  </Card>
-)
diff --git a/src/pages/Research/Content/Common/Research.form.tsx b/src/pages/Research/Content/Common/Research.form.tsx
index 04b3642447..ebab4b4f59 100644
--- a/src/pages/Research/Content/Common/Research.form.tsx
+++ b/src/pages/Research/Content/Common/Research.form.tsx
@@ -17,8 +17,8 @@ import { usePrompt } from 'src/common/hooks/usePrompt'
 import { researchStatusOptions } from 'src/models/research.models'
 import { CategoriesSelect } from 'src/pages/Howto/Category/CategoriesSelect'
 import {
-  PostingGuidelines,
   ResearchErrors,
+  ResearchPostingGuidelines,
   ResearchSubmitStatus,
 } from 'src/pages/Research/Content/Common'
 import { useResearchStore } from 'src/stores/Research/research.store'
@@ -219,7 +219,7 @@ const ResearchForm = observer((props: IProps) => {
                     <Box
                       sx={{ mt: '20px', display: ['block', 'block', 'none'] }}
                     >
-                      <PostingGuidelines />
+                      <ResearchPostingGuidelines />
                     </Box>
                     <Card mt={3} sx={{ overflow: 'visible' }}>
                       <Flex
@@ -370,7 +370,7 @@ const ResearchForm = observer((props: IProps) => {
                   }}
                 >
                   <Box sx={{ display: ['none', 'none', 'block'] }}>
-                    <PostingGuidelines />
+                    <ResearchPostingGuidelines />
                   </Box>
 
                   <Button
diff --git a/src/pages/Research/Content/Common/ResearchPostingGuidelines.tsx b/src/pages/Research/Content/Common/ResearchPostingGuidelines.tsx
new file mode 100644
index 0000000000..38e8632515
--- /dev/null
+++ b/src/pages/Research/Content/Common/ResearchPostingGuidelines.tsx
@@ -0,0 +1,43 @@
+import { ExternalLink, Guidelines } from 'oa-components'
+
+export const ResearchPostingGuidelines = () => (
+  <Guidelines
+    title="How does it work?"
+    steps={[
+      <>
+        Choose a topic you want to research{' '}
+        <span role="img" aria-label="raised-hand">
+          🙌
+        </span>
+      </>,
+      <>
+        Read{' '}
+        <ExternalLink sx={{ color: 'blue' }} href="/academy/guides/research">
+          our guidelines{' '}
+          <span role="img" aria-label="nerd-face">
+            🤓
+          </span>
+        </ExternalLink>
+      </>,
+      <>
+        Write your introduction{' '}
+        <span role="img" aria-label="archive-box">
+          🗄️
+        </span>
+      </>,
+      <>
+        Come back when you made progress{' '}
+        <span role="img" aria-label="writing-hand">
+          ✍️
+        </span>
+      </>,
+      <>Keep doing this</>,
+      <>
+        Be proud{' '}
+        <span role="img" aria-label="simple-smile">
+          🙂
+        </span>
+      </>,
+    ]}
+  />
+)
diff --git a/src/pages/Research/Content/Common/index.ts b/src/pages/Research/Content/Common/index.ts
index 1eefbbc0e1..2a349596f8 100644
--- a/src/pages/Research/Content/Common/index.ts
+++ b/src/pages/Research/Content/Common/index.ts
@@ -1,4 +1,4 @@
-export { PostingGuidelines } from './PostingGuidelines'
+export { ResearchPostingGuidelines } from './ResearchPostingGuidelines'
 export * as ResearchForm from './Research.form'
 export { ResearchErrors } from './ResearchErrors'
 export { ResearchUpdateForm } from './ResearchUpdate.form'
diff --git a/src/pages/UserSettings/content/PostingGuidelines.tsx b/src/pages/UserSettings/content/PostingGuidelines.tsx
index c93175d891..f24546a580 100644
--- a/src/pages/UserSettings/content/PostingGuidelines.tsx
+++ b/src/pages/UserSettings/content/PostingGuidelines.tsx
@@ -1,40 +1,33 @@
 import { useTheme } from '@emotion/react'
-import { ExternalLink } from 'oa-components'
+import { ExternalLink, Guidelines } from 'oa-components'
 import { DISCORD_INVITE_URL } from 'src/constants'
-import { Card, Flex, Heading, Text } from 'theme-ui'
 
 export const ProfileGuidelines = () => {
   const theme = useTheme()
 
   return (
-    <Card>
-      <Flex sx={{ flexDirection: 'column' }} p={4}>
-        <Heading as="h2" mb={2}>
-          Profile tips
-        </Heading>
-        <Text variant="auxiliary" mb={1}>
-          1. Have a look at our{' '}
+    <Guidelines
+      title="Profile tips"
+      steps={[
+        <>
+          Have a look at our{' '}
           <ExternalLink href={theme.profileGuidelinesURL}>
             profile guidelines.
           </ExternalLink>
-        </Text>
-        <Text variant="auxiliary" mb={1}>
-          2. Choose your focus.
-        </Text>
-        <Text variant="auxiliary" mb={1}>
-          3. If you want to get a pin on the map check our{' '}
+        </>,
+        <>Choose your focus.</>,
+        <>
+          If you want to get a pin on the map check our{' '}
           <ExternalLink href={theme.communityProgramURL}>
             Community Program.
           </ExternalLink>
-        </Text>
-        <Text variant="auxiliary" mb={1}>
-          4. Add a nice description, pics and details.
-        </Text>
-        <Text variant="auxiliary" mb={1}>
-          5. If something doesn't work,{' '}
+        </>,
+        <>Add a nice description, pics and details.</>,
+        <>
+          If something doesn't work,{' '}
           <ExternalLink href={DISCORD_INVITE_URL}>let us know.</ExternalLink>
-        </Text>
-      </Flex>
-    </Card>
+        </>,
+      ]}
+    />
   )
 }