Merge pull request #3095 from benfurber/component-user-engagement-wra…

…pper

New component: Add user engagement wrapper

packages/components/src/ArticleCallToAction/ArticleCallToAction.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@emotion/react'
-import { Card, Flex, Heading, Text } from 'theme-ui'
+import { Flex, Heading, Text } from 'theme-ui'
 
 import { Username } from '../'
 
@@ -14,52 +14,50 @@ export interface Props {
 export const ArticleCallToAction = (props: Props) => {
   const theme = useTheme() as any
   return (
-    <Card sx={{ py: 6, px: 4 }}>
+    <Flex
+      sx={{
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}
+    >
+      <Text variant="body" sx={{ fontSize: 2 }}>
+        Made by
+        <Username
+          isVerified={props.author.isVerified}
+          user={props.author}
+          sx={{ ml: 1 }}
+        />
+      </Text>
+      {props.contributors && props?.contributors.length ? (
+        <Text
+          data-testid="ArticleCallToAction: contributors"
+          variant="quiet"
+          sx={{ display: 'block', mt: 2, textAlign: 'center', fontSize: 2 }}
+        >
+          With contributions from:{' '}
+          {props.contributors.map((contributor, key) => (
+            <Username
+              key={key}
+              user={contributor}
+              isVerified={contributor.isVerified}
+              sx={{
+                mr: 1,
+              }}
+            />
+          ))}
+        </Text>
+      ) : null}
+      <Heading sx={{ my: 4 }}>Like what you see? 👇</Heading>
       <Flex
         sx={{
-          flexDirection: 'column',
-          alignItems: 'center',
+          gap: 2,
+          [`@media screen and (max-width: ${theme.breakpoints[0]})`]: {
+            flexDirection: 'column',
+          },
         }}
       >
-        <Text variant="body" sx={{ fontSize: 2 }}>
-          Made by
-          <Username
-            isVerified={props.author.isVerified}
-            user={props.author}
-            sx={{ ml: 1 }}
-          />
-        </Text>
-        {props.contributors && props?.contributors.length ? (
-          <Text
-            data-testid="ArticleCallToAction: contributors"
-            variant="quiet"
-            sx={{ display: 'block', mt: 2, textAlign: 'center', fontSize: 2 }}
-          >
-            With contributions from:{' '}
-            {props.contributors.map((contributor, key) => (
-              <Username
-                key={key}
-                user={contributor}
-                isVerified={contributor.isVerified}
-                sx={{
-                  mr: 1,
-                }}
-              />
-            ))}
-          </Text>
-        ) : null}
-        <Heading sx={{ my: 4 }}>Like what you see? 👇</Heading>
-        <Flex
-          sx={{
-            gap: 2,
-            [`@media screen and (max-width: ${theme.breakpoints[0]})`]: {
-              flexDirection: 'column',
-            },
-          }}
-        >
-          {props.children}
-        </Flex>
+        {props.children}
       </Flex>
-    </Card>
+    </Flex>
   )
 }

packages/components/src/UserEngagementWrapper/UserEngagementWrapper.stories.tsx

@@ -0,0 +1,37 @@
+import { Box, Button } from 'theme-ui'
+
+import { ArticleCallToAction, UsefulStatsButton } from '..'
+import { UserEngagementWrapper } from './UserEngagementWrapper'
+
+import type { Meta, StoryFn } from '@storybook/react'
+
+export default {
+  title: 'Components/UserEngagementWrapper',
+  component: UserEngagementWrapper,
+} as Meta<typeof UserEngagementWrapper>
+
+export const Default: StoryFn<typeof UserEngagementWrapper> = () => (
+  <Box sx={{ maxWidth: '1000px', margin: '0 auto' }}>
+    <UserEngagementWrapper>
+      <Box sx={{ margin: 3 }}>
+        <ArticleCallToAction
+          author={{
+            userName: 'howto._createdBy',
+            countryCode: 'howto.creatorCountry',
+            isVerified: true,
+          }}
+        >
+          <Button sx={{ fontSize: 2 }} onClick={() => null}>
+            Leave a comment
+          </Button>
+          <UsefulStatsButton
+            votedUsefulCount={28}
+            hasUserVotedUseful={false}
+            isLoggedIn={false}
+            onUsefulClick={() => null}
+          />
+        </ArticleCallToAction>
+      </Box>
+    </UserEngagementWrapper>
+  </Box>
+)

packages/components/src/UserEngagementWrapper/UserEngagementWrapper.test.tsx

@@ -0,0 +1,12 @@
+import { render } from '../tests/utils'
+import { Default } from './UserEngagementWrapper.stories'
+
+import type { Props } from './UserEngagementWrapper'
+
+describe('UserEngagementWrapper', () => {
+  it('renders the children', () => {
+    const { getByText } = render(<Default {...(Default.args as Props)} />)
+
+    expect(getByText('Mark as useful')).toBeInTheDocument()
+  })
+})

packages/components/src/UserEngagementWrapper/UserEngagementWrapper.tsx

@@ -0,0 +1,26 @@
+import { Flex } from 'theme-ui'
+
+import whiteBubble from '../../assets/images/white-bubble_1.svg'
+
+export interface Props {
+  children: React.ReactNode
+}
+
+export const UserEngagementWrapper = ({ children }: Props) => {
+  return (
+    <Flex
+      sx={{
+        backgroundImage: `url("${whiteBubble}")`,
+        backgroundPosition: 'top center',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: ['150% auto', '125% auto', '80% auto'],
+        flexDirection: 'column',
+        marginTop: [1, 2, 4],
+        paddingBottom: [1, 1, 8],
+        paddingTop: [4, 5, 6],
+      }}
+    >
+      {children}
+    </Flex>
+  )
+}

packages/components/src/index.ts

@@ -51,3 +51,4 @@ 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'

src/pages/Howto/Content/Howto/HowToComments/HowToComments.tsx

@@ -77,11 +77,11 @@ export const HowToComments = ({ comments }: IProps) => {
       data-cy="howto-comments"
     >
       <Flex
-        mb={4}
         sx={{
-          width: [`100%`, `${(4 / 5) * 100}%`, `${(2 / 3) * 100}%`],
-          flexDirection: 'column',
           alignItems: 'stretch',
+          flexDirection: 'column',
+          marginBottom: [2, 2, 4],
+          width: ['100%', '100%', `90%`, `${(2 / 3) * 100}%`],
         }}
       >
         <Card sx={{ gap: 2, padding: 3 }}>

src/pages/Howto/Content/Howto/Howto.tsx

@@ -6,6 +6,7 @@ import {
   Button,
   Loader,
   UsefulStatsButton,
+  UserEngagementWrapper,
 } from 'oa-components'
 import { trackEvent } from 'src/common/Analytics'
 import { isUserVerifiedWithStore } from 'src/common/isUserVerified'
@@ -128,14 +129,7 @@ export const Howto = observer(() => {
           <Step step={step} key={index} stepindex={index} />
         ))}
       </Box>
-      <Box
-        sx={{
-          mt: 10,
-          mb: 6,
-          mx: 'auto',
-          width: [`100%`, `${(4 / 5) * 100}%`, `${(2 / 3) * 100}%`],
-        }}
-      >
+      <UserEngagementWrapper>
         <ArticleCallToAction
           author={{
             userName: howto._createdBy,
@@ -181,8 +175,8 @@ export const Howto = observer(() => {
             />
           )}
         </ArticleCallToAction>
-      </Box>
-      <HowToComments comments={activeHowToComments} />
+        <HowToComments comments={activeHowToComments} />
+      </UserEngagementWrapper>
     </>
   )
 })

src/pages/Research/Content/ResearchArticle.tsx

@@ -7,6 +7,7 @@ import {
   FollowButton,
   Loader,
   UsefulStatsButton,
+  UserEngagementWrapper,
 } from 'oa-components'
 import { trackEvent } from 'src/common/Analytics'
 import { useContributorsData } from 'src/common/hooks/contributorsData'
@@ -229,7 +230,7 @@ const ResearchArticle = observer(() => {
             .length || 0
         }
       />
-      <Box my={16}>
+      <Box sx={{ marginTop: 8, marginBottom: 4 }}>
         {item &&
           getPublicUpdates(item).map((update, index) => (
             <ResearchUpdate
@@ -247,35 +248,40 @@ const ResearchArticle = observer(() => {
             />
           ))}
       </Box>
-      <Box
-        sx={{
-          paddingLeft: [null, '12%', '12%'],
-          mb: 16,
-        }}
-      >
-        {researchAuthor && (
-          <ArticleCallToAction
-            author={researchAuthor}
-            contributors={contributors}
-          >
-            {item.moderation === 'accepted' && (
-              <UsefulStatsButton
+
+      <UserEngagementWrapper>
+        <Box
+          sx={{
+            marginBottom: [6, 6, 12],
+          }}
+        >
+          {researchAuthor && (
+            <ArticleCallToAction
+              author={researchAuthor}
+              contributors={contributors}
+            >
+              {item.moderation === 'accepted' && (
+                <UsefulStatsButton
+                  isLoggedIn={!!loggedInUser}
+                  votedUsefulCount={researchStore.votedUsefulCount}
+                  hasUserVotedUseful={
+                    researchStore.userVotedActiveResearchUseful
+                  }
+                  onUsefulClick={() =>
+                    onUsefulClick(item._id, item.slug, 'ArticleCallToAction')
+                  }
+                />
+              )}
+              <FollowButton
                 isLoggedIn={!!loggedInUser}
-                votedUsefulCount={researchStore.votedUsefulCount}
-                hasUserVotedUseful={researchStore.userVotedActiveResearchUseful}
-                onUsefulClick={() =>
-                  onUsefulClick(item._id, item.slug, 'ArticleCallToAction')
-                }
-              />
-            )}
-            <FollowButton
-              isLoggedIn={!!loggedInUser}
-              hasUserSubscribed={researchStore.userHasSubscribed}
-              onFollowClick={() => onFollowClick(item.slug)}
-            ></FollowButton>
-          </ArticleCallToAction>
-        )}
-      </Box>
+                hasUserSubscribed={researchStore.userHasSubscribed}
+                onFollowClick={() => onFollowClick(item.slug)}
+              ></FollowButton>
+            </ArticleCallToAction>
+          )}
+        </Box>
+      </UserEngagementWrapper>
+
       {isEditable && (
         <Flex my={4}>
           <Link to={`/research/${item.slug}/new-update`}>