app-project: Announcements markdown direction (#6308)

* minor styling updates to paragraphs used in markdown of announcement banners

* address styling for multiple paragraphs with Storybook

packages/app-project/src/components/Announcements/components/GenericAnnouncement/GenericAnnouncement.js

@@ -24,13 +24,17 @@ function GenericAnnouncement({
       justify='between'
     >
       <Box
-        align='center'
         direction='row'
-        gap='small'
+        fill='horizontal'
+        background={color}
+        align='center'
         justify='center'
-        width='100%'
+        gap='small'
       >
-        <Markdownz components={markdownzComponents}>{announcement}</Markdownz>
+        <Box align='center' gap='small' justify='center'>
+          <Markdownz components={markdownzComponents}>{announcement}</Markdownz>
+        </Box>
+        {/* These are buttons passed from AuthenticationInvitation and FinishedAnnouncement */}
         {children}
       </Box>
       {dismissable && <CloseButton color='black' closeFn={closeFn} />}

packages/app-project/src/components/Announcements/components/GenericAnnouncement/markdownzComponents.js

@@ -4,10 +4,15 @@ import styled from 'styled-components'
 const StyledParagraph = styled(Paragraph)`
   font-weight: bold;
   line-height: 1.25;
+  margin: 0 0 0 0;
+
+  &:not(:first-child) {
+    margin: 10px 0 0 0;
+  }
 `
 function MarkdownParagraph(nodeProps) {
   return (
-    <StyledParagraph color='black' margin='0'>
+    <StyledParagraph color='black' margin='0' textAlign='center'>
       {nodeProps.children}
     </StyledParagraph>
   )

packages/app-project/src/components/Announcements/components/ProjectAnnouncement/ProjectAnnouncement.stories.js

@@ -1,13 +1,28 @@
 import { Provider } from 'mobx-react'
 import ProjectAnnouncementConnector from './ProjectAnnouncementConnector'
 
-const ANNOUNCEMENT =
-  'Neque magnis massa cum elementum dignissim nibh congue facilisis suscipit dictumst, porta hac porttitor praesent purus velit nullam nascetur eu ultricies libero, ipsum viverra molestie orci mollis faucibus habitant a placerat.'
-
 export const mockStore = {
   project: {
     configuration: {
-      announcement: ANNOUNCEMENT
+      announcement:
+        'Neque magnis massa cum elementum dignissim nibh congue facilisis suscipit dictumst, porta hac porttitor praesent purus velit nullam nascetur eu ultricies libero, ipsum viverra molestie orci mollis faucibus habitant a placerat.'
+    }
+  },
+  ui: {
+    dismissProjectAnnouncementBanner: () => {},
+    showAnnouncement: true
+  }
+}
+
+const mockParagraphsStore = {
+  project: {
+    configuration: {
+      announcement: `Welcome to BMT's Documentation Detectives! Check out our project intro video [here](https://www.youtube.com).
+Our accession register records may contain offensive and outdated terms. For more information, please see the [Content Note](https://www.zooniverse.org) etc.
+
+We value your feedback and would love to hear your thoughts about our project! If you would like to tell us more, click here: https://www.surveymonkey.com to take part in our survey. The survey is available until Friday 20th September 2024, 4pm (UK time)
+
+New subjects sets have been uploaded to the handwritten workflow today, the next upload will be on the 2nd of October.`
     }
   },
   ui: {
@@ -17,7 +32,8 @@ export const mockStore = {
 }
 
 export default {
-  title: 'Project App / Screens / Project Home / Announcements / ProjectAnnouncement',
+  title:
+    'Project App / Screens / Project Home / Announcements / ProjectAnnouncement',
   component: ProjectAnnouncementConnector,
   excludeStories: ['mockStore']
 }
@@ -27,3 +43,9 @@ export const Default = () => (
     <ProjectAnnouncementConnector />
   </Provider>
 )
+
+export const MultipleParagraphs = () => (
+  <Provider store={mockParagraphsStore}>
+    <ProjectAnnouncementConnector />
+  </Provider>
+)