feat: use guidelines component across app

ONEARMY · May 31, 2024 · 49e62bb · 49e62bb
1 parent aa7053f
commit 49e62bb
Show file tree

Hide file tree

Showing 13 changed files with 178 additions and 195 deletions.
diff --git 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
@@ -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
diff --git 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
diff --git 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
@@ -0,0 +1,51 @@
+import { useTheme } from '@emotion/react'
+import { ExternalLink, Guidelines } from 'oa-components'
+
+export const QuestionPostingGuidelines = () => {
+  const theme = useTheme()
+
+  const steps = [
+    <>
+      Write your question{' '}
+      <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}>
+        profile 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
@@ -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
diff --git 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