Implement theme UI in V2 components

.storybook/decorators.js

@@ -14,6 +14,30 @@ export const withThemeUi = (Story) => (
   </ThemeProvider>
 )
 
+const customParticipationTheme = Object.assign({}, compdemAdminTheme)
+customParticipationTheme.fonts.body = "Arial"
+customParticipationTheme.buttons.primary.border = 0
+customParticipationTheme.buttons.primary.borderRadius = 4
+customParticipationTheme.buttons.secondary = {
+  ...customParticipationTheme.buttons.primary,
+  color: 'darkGray',
+  bg: 'lightGray',
+  fontFamily: 'body',
+  cursor: 'pointer'
+}
+customParticipationTheme["letterSpacings"] = {
+  button: 0.75,
+}
+customParticipationTheme.colors["polisBlue"] = "#03a9f4"
+customParticipationTheme.colors["darkGray"] = "rgb(100,100,100)"
+customParticipationTheme.colors["lightGray"] = "rgb(235,235,235)"
+
+export const withParticipationThemeUi = (Story) => (
+  <ThemeProvider theme={customParticipationTheme}>
+    <Story />
+  </ThemeProvider>
+)
+
 export const withDelibThemeUi = (Story) => (
   <ThemeProvider theme={haiDelibTheme}>
     <Story />

stories/2.OurComponents.mdx

@@ -18,7 +18,7 @@ As a helpful resource, here is a summary of existing components (each a **clicka
 
 - <LinkTo kind="compdem/client-participation/CivicTechTO/CurateV2" story="Interactive">`CurateV2`</LinkTo>
   (Replaces <LinkTo kind="compdem/client-participation/Curate" story="Interactive">`Curate`</LinkTo>)
-- <LinkTo kind="compdem/client-participation/CivicTechTO/TidCarouselV2" story="Interactive">`TidCarouselV2`</LinkTo>
+- <LinkTo kind="compdem/client-participation/CivicTechTO/TidCarouselV2Animated" story="Interactive">`TidCarouselV2Animated`</LinkTo>
   and <LinkTo kind="compdem/client-participation/CivicTechTO/TidCarouselV2Static" story="Interactive">`TidCarouselV2Static`</LinkTo>
   (Replaces <LinkTo kind="compdem/client-participation/TidCarousel" story="Interactive">`TidCarousel`</LinkTo>)
 - <LinkTo kind="compdem/client-participation/CivicTechTO/SelectionWidgetV2" story="Interactive">`SelectionWidgetV2`</LinkTo>

stories/compdem/client-participation/CivicTechTO/CurateV2.js

@@ -1,74 +1,75 @@
+/** @jsx jsx */
+import { jsx, Box } from 'theme-ui'
+
 import React from 'react'
 import * as globals from '../../../../codebases/compdem/client-participation/vis2/components/globals'
 
-export const CurateV2Button = ({isSelected, onCurateButtonClick, style, children}) => {
-  const colors = {
-    polisBlue: "#03a9f4",
-    darkGray: "rgb(100,100,100)",
-    lightGray: "rgb(235,235,235)",
-  }
-  const buttonStyle = {
-    ...style,
-    border: 0,
-    cursor: "pointer",
-    borderRadius: 4,
-    fontSize: 14,
-    padding: "6px 12px",
-    letterSpacing: 0.75,
-    // fontWeight: isSelected ? 700 : 500,
-    textShadow: isSelected ? "0 0 .65px #fff" : null,
-    backgroundColor: isSelected ? colors.polisBlue : colors.lightGray,
-    color: isSelected ? "white" : colors.darkGray,
+export const CurateV2Button = React.forwardRef(({isSelected, handleClick, style, children, ...rest}, ref) => {
+  const styles = {
+    button: {
+      ...style,
+      fontSize: 14,
+      letterSpacing: 0.75,
+      variant: isSelected ? "buttons.primary" : "buttons.secondary",
+      textShadow: isSelected ? "0 0 .65px #fff" : null,
+    },
   }
   return (
-    <button style={buttonStyle} role="tab" aria-selected={isSelected} onClick={onCurateButtonClick}>
+    <Box as="button" ref={ref} sx={styles.button} onClick={handleClick} {...rest}>
       {children}
-    </button>
+    </Box>
   )
-}
+})
 
 const CurateV2 = ({selectedTidCuration, handleCurateButtonClick = () => {}, math}) => {
   const GROUP_COUNT = math["group-clusters"].length
   const styles = {
     container: {
       display: "flex",
-      flexDirection: "column",
-      rowGap: 5,
+      flexDirection: ["column-reverse", "row"],
+      gap: "5px",
+      rowGap: "5px",
     },
     groupContainer: {
       display: "flex",
-      gap: 5,
+      flex: [1, "1 1 calc(2*100% / 3)"],
+      gap: "5px",
     },
     groupButton: {
+      height: 35,
       flex: 1,
     },
+    majorityContainer: {
+      flex: [1, "1 1 calc(100% / 3)"],
+    },
     majorityButton: {
+      height: 35,
       width: "100%",
     },
   }
   const groups = ['A', 'B', 'C', 'D', 'E']
 
   return(
-    <div style={styles.container} role="tablist">
-      <div style={styles.groupContainer}>
+    <div sx={styles.container}>
+      <div sx={styles.majorityContainer}>
+        <CurateV2Button
+          handleClick={() => handleCurateButtonClick(globals.tidCuration.majority)}
+          isSelected={selectedTidCuration === globals.tidCuration.majority}
+          style={styles.majorityButton}
+          children="Diverse Majority Opinion"
+        />
+      </div>
+      <div sx={styles.groupContainer}>
         {groups.slice(0, GROUP_COUNT).map((groupLabel, index) => (
           <CurateV2Button
             key={groupLabel}
-            onCurateButtonClick={() => handleCurateButtonClick(index)}
+            handleClick={() => handleCurateButtonClick(index)}
             isSelected={selectedTidCuration === index}
             style={styles.groupButton}
-          >
-            {groupLabel}
-          </CurateV2Button>
+            children={groupLabel}
+          />
         ))}
       </div>
-      <CurateV2Button
-        onCurateButtonClick={() => handleCurateButtonClick(globals.tidCuration.majority)}
-        isSelected={selectedTidCuration === globals.tidCuration.majority}
-        style={styles.majorityButton}
-      >
-        Diverse Majority Opinion
-      </CurateV2Button>
     </div>
   )
 }

stories/compdem/client-participation/CivicTechTO/CurateV2.stories.js

@@ -4,11 +4,13 @@ import * as globals from '../../../../codebases/compdem/client-participation/vis
 import Strings from '../../../../codebases/compdem/client-participation/js/strings/en_us'
 import CurateV2 from './CurateV2'
 import { getMath } from '../../../../.storybook/utils'
+import { withParticipationThemeUi } from '../../../../.storybook/decorators'
 
 const mathResults = getMath()
 
 export default {
   component: CurateV2,
+  decorators: [withParticipationThemeUi],
   argTypes: {
     groupCount: {
       options: [2, 3, 4],