MarkdownBlockGroup component

Specs

Create a new component that displays multiple MarkdownBlocks.

<MarkdownBlockGroup
     title = '',
     blocks = [],
     cols = 4,
     mode = 'light',
>

// Blocks takes passed props
// const { key, ...otherProps } = block

Requirements

Note: These are only really needed to display in home.stories.js - the component can still be worked on without these.

#45
#43

Tasks

Create a new file: components/markdown-block-group.js
If no title is provided, don't leave any spacing above the MarkdownBlocks.
For each 'block', look up the react component in a table - see

enciv-home/app/web-components/home.js

Line 10 in a11a51b

const Blocks = {

and pass otherProps to it
Display all blocks based on the 'cols' value for width in blocks.
In condensed/mobile mode, use a single column to display all blocks.
Change the subject/background color based on 'mode'. (example: text-block.js)
Create a new stories file "markdown-block-group.stories.js" to test different configurations of these props.
Add two blocks to home.stories.js to display MarkdownBlockGroups like those in the mockup.

Figma

Example 1

Example 2

This looks good, but here are a few things to consider. And I think it's more educational if I write the changes and reasons here - rather than just making the changes.

In terms of the UI design, the number across needs to be either maxCols (or targetCols or just cols ) or 1 wide when width less than condensedWidthBreakPoint. It disrupts the ui for it to be 3 and 1, or 2 and 1.

Also, like other block components, there is theme.maxPanelWidth that is the maxmum width. See text-block for example.

Instead of children, use blocks as the prop, and like app/web-componnents/home.js this component can take named blocks from props and look up the corresponding react component. -- this is so the data for what's in the MarkDownBlockGroup can come from the database. Perhaps Blocks needs to be exported or become a separate component.

In enciv-home, and in the future in civil-pursuit - we want to reserve .jsx for old react class components. for functional react components we want to use .js -- they all compiles either way. It's helps differentiate, and it's just a style that was settled on by team members in the undebate project.

I think this needs to support mode for subject color and background color.

This looks good, but here are a few things to consider. And I think it's more educational if I write the changes and reasons here - rather than just making the changes.

In terms of the UI design, the number across needs to be either maxCols (or targetCols or just cols ) or 1 wide when width less than condensedWidthBreakPoint. It disrupts the ui for it to be 3 and 1, or 2 and 1.

Also, like other block components, there is theme.maxPanelWidth that is the maxmum width. See text-block for example.

Instead of children, use blocks as the prop, and like app/web-componnents/home.js this component can take named blocks from props and look up the corresponding react component. -- this is so the data for what's in the MarkDownBlockGroup can come from the database. Perhaps Blocks needs to be exported or become a separate component.

In enciv-home, and in the future in civil-pursuit - we want to reserve .jsx for old react class components. for functional react components we want to use .js -- they all compiles either way. It's helps differentiate, and it's just a style that was settled on by team members in the undebate project.

I think this needs to support mode for subject color and background color.

Thanks for the input! This clarifies things a bit - I updated the specs to take these into consideration.

@justin-b-yee

For each block, do a lookup for the name in the database to retrieve the component. (example: app/web-components/home.js)
Changed to
For each 'block', look up the react component in a table - see

enciv-home/app/web-components/home.js

Line 10 in a11a51b

const Blocks = {

And now I'm posting it.

Waiting for issues #43 and #45 to be completed and merged before finishing the addition of MarkdownBlockGroup examples to home.stories.js.

@RobH0 What is the status of this? If you are not going to be able to work on it, can you unassign yourself or let me know? Thanks.

@RobH0 What is the status of this? If you are not going to be able to work on it, can you unassign yourself or let me know? Thanks.

Hi @ddfridley, sorry for the late reply. Just want to confirm that I am still working this issue. I've been waiting for issue #45 to be completed so I can finish the story to mockup the example 1 screenshot within this issue.