feat: add guidelines component

packages/components/scripts/templates/{componentName}.test.tsx.mst

@@ -1,11 +1,11 @@
-import { render } from '../tests/utils'
+import { render } from '../test/utils'
 import { Default } from './{{ComponentName}}.stories'
-import type { {{ComponentName}}Props } from './{{ComponentName}}'
+import type { IProps } from './{{ComponentName}}'
 
 describe('{{ComponentName}}', () => {
   it('validates the component behaviour', () => {
     const { getByText } = render(
-      <Default {...(Default.args as {{ComponentName}}Props)} />,
+      <Default {...(Default.args as IProps)} />,
     )
 
     expect(getByText('{{ComponentName}}')).toBeInTheDocument();

packages/components/scripts/templates/{componentName}.tsx.mst

@@ -1,5 +1,5 @@
-export interface {{ComponentName}}Props {}
+export interface IProps {}
 
-export const {{ComponentName}} = (props: {{ComponentName}}Props) => {
+export const {{ComponentName}} = (props: IProps) => {
   return <>{{ComponentName}}</>
 }

packages/components/src/Guidelines/Guidelines.stories.tsx

@@ -0,0 +1,38 @@
+import { ExternalLink } from '../ExternalLink/ExternalLink'
+import { Guidelines } from './Guidelines'
+
+import type { Meta, StoryFn } from '@storybook/react'
+
+export default {
+  title: 'Components/Guidelines',
+  component: Guidelines,
+} as Meta<typeof Guidelines>
+
+export const Default: StoryFn<typeof Guidelines> = () => (
+  <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>
+      </>,
+    ]}
+  />
+)

packages/components/src/Guidelines/Guidelines.test.tsx

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/vitest'
+
+import { describe, expect, it } from 'vitest'
+
+import { render } from '../test/utils'
+import { Default } from './Guidelines.stories'
+
+import type { IProps } from './Guidelines'
+
+describe('Guidelines', () => {
+  it('validates the component behaviour', () => {
+    const { getByText } = render(<Default {...(Default.args as IProps)} />)
+
+    expect(getByText('How does it work?')).toBeInTheDocument()
+    expect(
+      getByText('Choose a topic you want to research', { exact: false }),
+    ).toBeInTheDocument()
+  })
+})

packages/components/src/Guidelines/Guidelines.tsx

@@ -0,0 +1,28 @@
+import { Card, Flex, Heading, Text } from 'theme-ui'
+
+import type { ReactElement } from 'react'
+
+export interface IProps {
+  title: string
+  steps: ReactElement[]
+}
+
+export const Guidelines = ({ title, steps }: IProps) => {
+  return (
+    <Card>
+      <Flex sx={{ flexDirection: 'column', padding: [2, 3, 4], gap: 1 }}>
+        <Heading as="h2" mb={2}>
+          {title}
+        </Heading>
+
+        {steps.map((step, index) => {
+          return (
+            <Text variant="auxiliary" key={index}>
+              {`${index + 1}. `} {step}
+            </Text>
+          )
+        })}
+      </Flex>
+    </Card>
+  )
+}

packages/components/src/index.ts

@@ -1,27 +1,35 @@
 export { ArticleCallToAction } from './ArticleCallToAction/ArticleCallToAction'
+export { BlockedRoute } from './BlockedRoute/BlockedRoute'
 export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs'
 export { Button } from './Button/Button'
 export { ButtonShowReplies } from './ButtonShowReplies/ButtonShowReplies'
 export { Category } from './Category/Category'
+export { ContentStatistics } from './ContentStatistics/ContentStatistics'
 export { CommentItem } from './CommentItem/CommentItem'
 export { CommentList } from './CommentList/CommentList'
 export { CreateReply } from './CreateReply/CreateReply'
 export { ConfirmModal } from './ConfirmModal/ConfirmModal'
 export { CreateComment } from './CreateComment/CreateComment'
+export { DiscussionContainer } from './DiscussionContainer/DiscussionContainer'
+export { DiscussionTitle } from './DiscussionTitle/DiscussionTitle'
+export { DonationRequest } from './DonationRequest/DonationRequest'
+export { DonationRequestModal } from './DonationRequestModal/DonationRequestModal'
 export { DownloadButton } from './DownloadButton/DownloadButton'
 export { DownloadCounter } from './DownloadCounter/DownloadCounter'
 export { DownloadFileFromLink } from './DownloadFileFromLink/DownloadFileFromLink'
+export { DownloadStaticFile } from './DownloadStaticFile/DownloadStaticFile'
 export { EditComment } from './EditComment/EditComment'
 export { ElWithBeforeIcon } from './ElWithBeforeIcon/ElWithBeforeIcon'
 export { ExternalLink } from './ExternalLink/ExternalLink'
 export { FieldDatepicker } from './FieldDatepicker/FieldDatepicker'
 export { FieldInput } from './FieldInput/FieldInput'
 export { FieldTextarea } from './FieldTextarea/FieldTextarea'
-export { DownloadStaticFile } from './DownloadStaticFile/DownloadStaticFile'
+export { Guidelines } from './Guidelines/Guidelines'
 export { FlagIcon, FlagIconHowTos, FlagIconEvents } from './FlagIcon/FlagIcon'
 export { FollowButton } from './FollowButton/FollowButton'
 export { GlobalStyles } from './GlobalStyles/GlobalStyles'
 export { Icon } from './Icon/Icon'
+export { IconCountWithTooltip } from './IconCountWithTooltip/IconCountWithTooltip'
 export { ImageCrop } from './ImageCrop/ImageCrop'
 export { ImageGallery } from './ImageGallery/ImageGallery'
 export { InternalLink } from './InternalLink/InternalLink'
@@ -40,22 +48,15 @@ export { ProfileLink } from './ProfileLink/ProfileLink'
 export { ResearchEditorOverview } from './ResearchEditorOverview/ResearchEditorOverview'
 export { Select } from './Select/Select'
 export { SiteFooter } from './SiteFooter/SiteFooter'
+export { Tab, TabsList, TabPanel, Tabs } from './TabbedContent/TabbedContent'
 export { Tag } from './Tag/Tag'
 export { TagList } from './TagList/TagList'
 export { TextNotification } from './TextNotification/TextNotification'
 export { Tooltip } from './Tooltip/Tooltip'
 export { UsefulStatsButton } from './UsefulStatsButton/UsefulStatsButton'
+export { UserEngagementWrapper } from './UserEngagementWrapper/UserEngagementWrapper'
 export { Username } from './Username/Username'
 export { UserStatistics } from './UserStatistics/UserStatistics'
 export { VideoPlayer } from './VideoPlayer/VideoPlayer'
-export { BlockedRoute } from './BlockedRoute/BlockedRoute'
-export { ContentStatistics } from './ContentStatistics/ContentStatistics'
-export { Tab, TabsList, TabPanel, Tabs } from './TabbedContent/TabbedContent'
-export { DiscussionContainer } from './DiscussionContainer/DiscussionContainer'
-export { DiscussionTitle } from './DiscussionTitle/DiscussionTitle'
-export { UserEngagementWrapper } from './UserEngagementWrapper/UserEngagementWrapper'
-export { IconCountWithTooltip } from './IconCountWithTooltip/IconCountWithTooltip'
-export { DonationRequest } from './DonationRequest/DonationRequest'
-export { DonationRequestModal } from './DonationRequestModal/DonationRequestModal'
 // export { IImageGalleryItem } from './ImageGallery/ImageGallery'
 // export { availableGlyphs } from './Icon/types'

packages/themes/src/precious-plastic/styles.ts

@@ -30,6 +30,8 @@ export const styles: ThemeWithName = {
   logo: logo,
   profileGuidelinesURL:
     'https://community.preciousplastic.com/academy/guides/platform',
+  questionsGuidelinesURL:
+    'https://community.preciousplastic.com/academy/guides/guidelines-questions',
   communityProgramURL:
     'https://community.preciousplastic.com/academy/guides/community-program',
   ...baseTheme,

packages/themes/src/types/index.ts

@@ -33,11 +33,10 @@ type Badge = {
 
 export interface ThemeWithName {
   name: string
-
   logo: string
 
   profileGuidelinesURL: string
-
+  questionsGuidelinesURL?: string
   communityProgramURL: string
 
   alerts: any

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

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>
+      </>,
+    ]}
+  />
+)

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'