Questionbox children#224

app/components/question-box.jsx

@@ -1,15 +1,31 @@
 // https://github.com/EnCiv/civil-pursuit/issues/100
 // https://github.com/EnCiv/civil-pursuit/issues/221
+// https://github.com/EnCiv/civil-pursuit/issues/224
+
+/* 
+  Each element in the children array is a row,
+  while each item in each subarray is a component. 
+
+  Defaults to flex display and even spacing.
+  Grouping items together will disable that and justify the row's content.
+
+  Ex. children: [row1, row2] 
+
+  row1 = [[item1, item2]] (nested array, items are all justified left or right)
+  row2 = [item1, item2] (flat array, items are spaced evenly in parent's width)
+
+  See stories in question-box.stories.jsx for examples.
+*/
+
 import React from 'react'
 import { createUseStyles } from 'react-jss'
 import cx from 'classnames'
 import StatusBadge from './status-badge'
 import Markdown from 'markdown-to-jsx'
 
 const QuestionBox = props => {
-  const { className = '', subject = '', description = '', participants = 0, contentAlign = 'center', tagline = '', ...otherProps } = props
+  const { className = '', subject = '', description = '', contentAlign = 'center', tagline = '', children = [], ...otherProps } = props
   const classes = useStylesFromThemeFunction({ ...props, contentAlign })
-  const badgeName = `${participants} participants`
 
   return (
     <div className={cx(classes.container, className)} {...otherProps}>
@@ -19,9 +35,11 @@ const QuestionBox = props => {
         <div className={classes.description}>
           <Markdown>{description}</Markdown>
         </div>
-      </div>
-      <div className={classes.participants}>
-        <StatusBadge name={badgeName} status="" />
+        <div className={classes.children}>
+          {children?.map(row => (
+            <div className={classes.row}>{row.length ? row.map(item => <div className={classes.item}>{item}</div>) : row}</div>
+          ))}
+        </div>
       </div>
     </div>
   )
@@ -83,11 +101,16 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
     color: theme.colors.primaryButtonBlue,
     textAlign: props => props.contentAlign,
   },
-
-  participants: {
+  children: {},
+  row: {
+    display: 'flex',
+    gap: '1rem',
+    padding: '1rem 0',
+  },
+  item: {
     display: 'flex',
-    alignItems: 'center',
-    paddingTop: '1.6875rem',
+    flex: 1,
+    gap: '1rem',
   },
 }))
 

stories/question-box.stories.jsx

@@ -1,7 +1,11 @@
 // https://github.com/EnCiv/civil-pursuit/issues/221
+// https://github.com/EnCiv/civil-pursuit/issues/224
+
 import React from 'react'
 import QuestionBox from '../app/components/question-box'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import StatusBadge from '../app/components/status-badge'
+import { PrimaryButton, SecondaryButton, ModifierButton } from '../app/components/button.jsx'
 
 export default {
   component: QuestionBox,
@@ -18,7 +22,6 @@ export const Default = Template.bind({})
 Default.args = {
   subject: 'What one issue should ‘We the People’ unite and solve first to make our country even better?',
   description: 'This is a large-scale online discussion with the purpose of starting unbiased, and thoughtful conversations. We’re asking about concerns, not solutions.',
-  participants: 1009,
   tagline: 'Civil Pursuit',
 }
 
@@ -29,15 +32,14 @@ export const Markdown = Template.bind({})
 Markdown.args = {
   subject: 'What one issue should ‘We the People’ unite and solve first to make our country even better?',
   description: 'This is a large-scale online discussion with the purpose of starting unbiased, and thoughtful conversations. **We’re asking about concerns, not solutions.**',
-  participants: 1009,
   tagline: 'Civil Pursuit',
 }
 
 export const Mobile = Template.bind({})
 Mobile.args = {
   subject: 'What one issue should ‘We the People’ unite and solve first to make our country even better?',
   description: 'This is a large-scale online discussion with the purpose of starting unbiased, and thoughtful conversations. **We’re asking about concerns, not solutions.**',
-  participants: 1009,
+  children: [[<StatusBadge status="Progress" name="1009 participants" />]],
   tagline: 'Civil Pursuit',
 }
 Mobile.parameters = {
@@ -50,14 +52,47 @@ export const NoTagline = Template.bind({})
 NoTagline.args = {
   subject: 'What one issue should ‘We the People’ unite and solve first to make our country even better?',
   description: 'This is a large-scale online discussion with the purpose of starting unbiased, and thoughtful conversations. We’re asking about concerns, not solutions.',
-  participants: 1009,
+  children: [[<StatusBadge status="Progress" name="1009 participants" />]],
 }
 
 export const Left = Template.bind({})
 Left.args = {
   subject: 'What one issue should ‘We the People’ unite and solve first to make our country even better?',
   description: 'This is a large-scale online discussion with the purpose of starting unbiased, and thoughtful conversations. We’re asking about concerns, not solutions.',
-  participants: 1009,
   contentAlign: 'left',
+  children: [[<StatusBadge status="Progress" name="1009 participants" />]],
   tagline: 'Civil Pursuit',
 }
+
+export const WithChildren = Template.bind({})
+WithChildren.args = {
+  subject: 'What one issue should ‘We the People’ unite and solve first to make our country even better?',
+  description: 'This is a large-scale online discussion with the purpose of starting unbiased, and thoughtful conversations. **We’re asking about concerns, not solutions.**',
+  contentAlign: 'left',
+  children: [
+    [[<StatusBadge name="509 participants" />, <StatusBadge status="Complete" name="Complete" />]],
+    [
+      <PrimaryButton title="View Summary" style={{ width: 100 + '%' }}>
+        View Summary
+      </PrimaryButton>,
+      <SecondaryButton title="View My Activity" style={{ width: 100 + '%' }}>
+        View My Activity
+      </SecondaryButton>,
+    ],
+  ],
+}
+
+export const WithChildren2 = Template.bind({})
+WithChildren2.args = {
+  subject: 'What one issue should ‘We the People’ unite and solve first to make our country even better?',
+  description: 'This is a large-scale online discussion with the purpose of starting unbiased, and thoughtful conversations. **We’re asking about concerns, not solutions.**',
+  contentAlign: 'left',
+  children: [
+    [[<StatusBadge name="509 participants" />, <StatusBadge status="Progress" name="Round 3" />]],
+    [
+      <ModifierButton title="View Summary" style={{ width: 100 + '%' }}>
+        View Summary
+      </ModifierButton>,
+    ],
+  ],
+}