Markdown block group component#48

app/components/markdown-block-group.js

@@ -0,0 +1,82 @@
+//https://github.com/EnCiv/enciv-home/issues/48
+import React from 'react'
+import MarkdownBlock from './markdown-block'
+import { createUseStyles } from 'react-jss'
+
+const Blocks = {
+    MarkdownBlock: MarkdownBlock
+}
+
+const MarkdownBlockGroup = props => {
+    const {
+        title = '',
+        blocks = [],
+        cols = 4,
+        mode = 'light',
+    } = props
+    const classes = useStylesFromThemeFunction({ cols, mode })
+
+    // contains blocks component generation to prevent code reuse within component.
+    const blocksGridDiv = <div className={classes.BlockGridLayout}>
+                        {blocks.map((block, i) => {
+                        const { key, ...otherProps } = block
+                        if (!Blocks[key]) return null
+                        const Component = Blocks[key]
+                        return <Component key={block + '-' + i}  {...otherProps} mode={props.mode} />
+                        })}
+                    </div>
+
+    if (title === ''){
+        return (
+            <div className={classes.container}>
+                <div className={`${classes.markdownBlockGroup} ${classes[mode]}`}>
+                    {blocksGridDiv}
+                </div>
+            </div>
+        )
+    } else {
+        return (
+            <div className={classes.container}>
+                <div className={`${classes.markdownBlockGroup} ${classes[mode]}`}>
+                    <h3>{props.title}</h3>
+                    {blocksGridDiv}
+                </div>
+            </div>
+        )
+    } 
+}
+
+export default MarkdownBlockGroup
+
+const useStylesFromThemeFunction = createUseStyles( theme => ({
+    container: props => ({
+        backgroundColor: props.mode === 'light' ? '#F2F2F2' : theme.colors.darkModeGray,
+        color: props.mode === 'light' ? theme.colors.darkModeGray : 'white',
+    }),    
+
+    BlockGridLayout: props => ({
+        display: 'grid',
+        gridTemplateColumns: `repeat(${props.cols}, 1fr)`,
+        textAlign: 'center',
+        margin: 'auto',
+        [`@media (max-width: ${theme.condensedWidthBreakPoint})`]: {
+            display: 'flex',
+            flexDirection: 'column',
+        },
+    }),
+    markdownBlockGroup: props => ({
+        maxWidth: theme.maxPanelWidth,
+        margin: 'auto', 
+        display: 'flex',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        fontFamily: 'Montserrat',
+        '& > h3': {
+            marginBottom: '0',
+            fontSize: '2rem',
+            fontWeight: 600,
+            marginBlockEnd: 0,
+            marginLeft: '2rem',
+        },
+    }),
+}))

app/components/markdown-block.js

@@ -68,6 +68,7 @@ const MarkdownBlock = props => {
           imgUrl={imgUrl}
           imgSide={imgSide}
           children={children}
+          lineWidth={lineWidth}
           {...otherProps}
         />
       </div>

app/web-components/home.js

@@ -6,13 +6,15 @@ import BrevoCommunity from '../components/brevo-community'
 import { BrevoHelmet } from '../components/brevo-join'
 import MarkdownBlock from '../components/markdown-block'
 import VideoBlock from '../components/video-block'
+import MarkdownBlockGroup from '../components/markdown-block-group'
 
 const Blocks = {
   HeroBlock: HeroBlock,
   TextBlock: TextBlock,
   VideoBlock: VideoBlock,
   MarkdownBlock: MarkdownBlock,
   Faq: Faq,
+  MarkdownBlockGroup: MarkdownBlockGroup,
 }
 export default function Home(props) {
   const { subject, description, location, blocks } = props

stories/home.stories.js

@@ -108,6 +108,72 @@ Together, we can fix it.\n\nTo overcome the forces polarizing us, we must have n
     imgUrl:
       'https://res.cloudinary.com/hf6mryjpf/image/upload/v1721882509/assets%20enciv-home%202024/0a73bf0c-dcd6-4ec9-a0e8-68034c4494cb.png',
   },
+  {
+    key: 'MarkdownBlockGroup',
+    mode: 'light',
+    cols: 3,
+    blocks: [
+      {
+        key: 'MarkdownBlock',
+        mode: 'light',
+        iconName: 'NoPartisanship',
+        children: `###No partisanship.\n\n---\n\nWe're non-partisan\n\nWe never endorse a particular party, policy, or, candidate
+        `,
+        lineWidth: 'full',
+      },
+      {
+        key: 'MarkdownBlock',
+        mode: 'light',
+        iconName: 'NoSponsorship',
+        children: `###No sponsorship.\n\n---\n\nWe're cross-partisan\n\nWe actively seek out and give voice to multiple perspectives`,
+        lineWidth: 'full',
+      },
+      {
+        key: 'MarkdownBlock',
+        mode: 'light',
+        iconName: 'ProductiveDialogueHead',
+        children: `###Productive dialogue.\n\n---\n\nWe're community-led and community built\n\nWe never endorse a particular party, policy, or candidate`,
+        lineWidth: 'full',
+      },
+    ],
+    title: '',
+  },
+  {
+    key: 'MarkdownBlockGroup',
+    mode: 'dark',
+    cols: 4,
+    title: 'When we speak as One',
+    blocks: [
+      {
+        key: 'MarkdownBlock',
+        lineWidth: 'partial',
+        children: `\n\n---\n\nWe're fed up with (and frankly scared of) the current political system`,
+        imgUrl: 'https://images.unsplash.com/photo-1641945511537-359c4f7510fe?q=80&w=1280&h=1280&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        imgSide: 'top'
+      },
+      {
+        key: 'MarkdownBlock',
+        lineWidth: 'partial',
+        children: `\n\n---\n\nSick of partisan gridlock that stops real policy and productive discussion`,
+        imgUrl: 'https://images.unsplash.com/photo-1641945511537-359c4f7510fe?q=80&w=1280&h=1280&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        imgSide: 'top'
+      },
+      {
+        key: 'MarkdownBlock',
+        lineWidth: 'partial',
+        children: `\n\n---\n\nDone with the media that only presents the most viral candidate moments and polarized takes`,
+        imgUrl: 'https://images.unsplash.com/photo-1641945511537-359c4f7510fe?q=80&w=1280&h=1280&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        imgSide: 'top'
+      },
+      {
+        key: 'MarkdownBlock',
+        lineWidth: 'partial',
+        children: `\n\n---\n\nThere is currently no cross-partisan discourse to address the biggest problems facing our country`,
+        imgUrl: 'https://images.unsplash.com/photo-1641945511537-359c4f7510fe?q=80&w=1280&h=1280&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        imgSide: 'top'
+      },
+    ],
+  }, 
   {
     key: 'Faq',
     faqs: [

stories/markdown-block-group.stories.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import MarkdownBlockGroup from '../app/components/markdown-block-group'
+
+export default {
+    component: MarkdownBlockGroup,
+    parameters: {
+        layout: 'fullscreen',
+    },
+}
+
+const blocks = [
+    {
+        key: 'MarkdownBlock',
+        mode: 'light',
+        children: `###No partisanship.\n\n---\n\nWe're non-partisan\n\nWe never endorse a particular party, policy, or, candidate
+        `,
+        lineWidth: 'full',
+    },
+    {
+        key: 'MarkdownBlock',
+        mode: 'light',
+        children: `###No partisanship.\n\n---\n\nWe're non-partisan\n\nWe never endorse a particular party, policy, or, candidate
+        `,
+        lineWidth: 'full',
+    },
+    {
+        key: 'MarkdownBlock',
+        mode: 'light',
+        children: `###No partisanship.\n\n---\n\nWe're non-partisan\n\nWe never endorse a particular party, policy, or, candidate
+        `,
+        lineWidth: 'full',
+    },
+    {
+        key: 'MarkdownBlock',
+        mode: 'light',
+        children: `###No partisanship.\n\n---\n\nWe're non-partisan\n\nWe never endorse a particular party, policy, or, candidate
+        `,
+        lineWidth: 'full',
+    },
+]
+
+export const ColumnsTest = {
+    args: {
+        blocks: blocks,
+        cols: 4,
+        mode: 'light',
+        title: '',        
+    },
+}