From 38a50a285e6f558ee5eb40304a845de0506d80d3 Mon Sep 17 00:00:00 2001
From: Ben Furber <ben.furber@googlemail.com>
Date: Fri, 31 May 2024 16:14:28 +0100
Subject: [PATCH] feat: add guidelines component to library

---
 .../src/Guidelines/Guidelines.stories.tsx     | 38 +++++++++++++++++++
 .../src/Guidelines/Guidelines.test.tsx        | 15 ++++++++
 .../components/src/Guidelines/Guidelines.tsx  | 28 ++++++++++++++
 packages/components/src/index.ts              | 21 +++++-----
 4 files changed, 92 insertions(+), 10 deletions(-)
 create mode 100644 packages/components/src/Guidelines/Guidelines.stories.tsx
 create mode 100644 packages/components/src/Guidelines/Guidelines.test.tsx
 create mode 100644 packages/components/src/Guidelines/Guidelines.tsx

diff --git a/packages/components/src/Guidelines/Guidelines.stories.tsx b/packages/components/src/Guidelines/Guidelines.stories.tsx
new file mode 100644
index 0000000000..1e232f4def
--- /dev/null
+++ b/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>
+      </>,
+    ]}
+  />
+)
diff --git a/packages/components/src/Guidelines/Guidelines.test.tsx b/packages/components/src/Guidelines/Guidelines.test.tsx
new file mode 100644
index 0000000000..cdcc334f61
--- /dev/null
+++ b/packages/components/src/Guidelines/Guidelines.test.tsx
@@ -0,0 +1,15 @@
+import { render } from '../tests/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()
+  })
+})
diff --git a/packages/components/src/Guidelines/Guidelines.tsx b/packages/components/src/Guidelines/Guidelines.tsx
new file mode 100644
index 0000000000..6e57bb2ba6
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 032716be2b..9a61d21239 100644
--- a/packages/components/src/index.ts
+++ b/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,21 +48,14 @@ 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 { UserNotificationItem } from './NotificationItem/NotificationItem'