From cb5830c6bfa230c65bdc65bca507437ab2760228 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Sat, 12 Oct 2024 13:01:03 -0400 Subject: [PATCH 01/35] Fix up existing TidCarouselV2 stories and components. --- .../client-participation/CivicTechTO/TidCarouselV2.js | 2 ++ .../CivicTechTO/TidCarouselV2.stories.js | 3 ++- stories/compdem/client-participation/TidCarousel.stories.js | 6 +++++- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js index 6ae9c05..7b3117a 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js @@ -62,6 +62,7 @@ const TidCarouselV2 = ({ handleCommentClick, Strings, }) => { + // TODO: Why doesn't this line avoid infinite renders when null? if ( selectedTidCuration === null ) return null const [ref, bounds] = useMeasure() @@ -79,6 +80,7 @@ const TidCarouselV2 = ({ gap: 5, rowGap: 5, flexWrap: "wrap", + justifyContent: "flex-start", }}> {!bounds.width || allComments.map((c, i) => ( a.tid - b.tid) export default { component: TidCarouselV2, argTypes: { selectedTidCuration: { + // TODO: Figure out why null does infinite renders. + // options: [null, 'majority', 0, 1, 2, 3], options: ['majority', 0, 1, 2, 3], control: { type: 'inline-radio' }, }, diff --git a/stories/compdem/client-participation/TidCarousel.stories.js b/stories/compdem/client-participation/TidCarousel.stories.js index dbf4751..218b930 100644 --- a/stories/compdem/client-participation/TidCarousel.stories.js +++ b/stories/compdem/client-participation/TidCarousel.stories.js @@ -54,7 +54,11 @@ const Template = (args) => { ?.map(i => i.tid).includes(c.tid) ) - return + return } export const Interactive = Template.bind({}) From 20161bb8e24f2c6d03d2619b4ccc9fab0ea6b3d0 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Sat, 12 Oct 2024 13:09:58 -0400 Subject: [PATCH 02/35] Added TidCarouselV2Static component and stories. --- .../CivicTechTO/TidCarouselV2Static.js | 71 +++++++++++++ .../TidCarouselV2Static.stories.js | 99 +++++++++++++++++++ 2 files changed, 170 insertions(+) create mode 100644 stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js create mode 100644 stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.stories.js diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js new file mode 100644 index 0000000..32220fb --- /dev/null +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js @@ -0,0 +1,71 @@ +import React from "react" + +const Button = ({ isSelected, style, children, handleClick }) => { + 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, + } + return +} + +const TidCarouselV2Static = ({ + selectedTidCuration, + // allComments, + commentsToShow, + selectedComment, + handleCommentClick, + Strings, +}) => { + const commentsToShowTids = commentsToShow.map(c => c.tid) + + const buttonHeight = 25 + const gap = 5 + const cols = 5 + // Example: calc(20%-4px) + const buttonWidthCalc = `calc(${100/cols}% - ${gap*((cols-1)/cols)}px)` + const styles = { + container: { + height: buttonHeight*2 + gap, + display: "flex", + flexWrap: "wrap", + gap: gap, + justifyContent: "flex-start", + }, + button: { + flex: `1 0 ${buttonWidthCalc}`, + maxWidth: buttonWidthCalc, + height: buttonHeight, + boxSizing: "border-box", + } + } + return ( +
+ {commentsToShowTids.map(tid => ( + + ))} +
+ ) +} + +export default TidCarouselV2Static diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.stories.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.stories.js new file mode 100644 index 0000000..b3cbb28 --- /dev/null +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.stories.js @@ -0,0 +1,99 @@ +import React, { useState } from 'react' +import { action } from '@storybook/addon-actions' +import TidCarouselV2Static from './TidCarouselV2Static' +import * as globals from '../../../../codebases/compdem/client-participation/vis2/components/globals' +import Strings from '../../../../codebases/compdem/client-participation/js/strings/en_us' +import { getMath, getComments } from '../../../../.storybook/utils' + +const mathResults = getMath() +const commentsData = getComments() + +export default { + component: TidCarouselV2Static, +} + +const Template = (args) => { + const [selectedComment, setSelectedComment] = useState(null) + + const handleCommentClick = (comment) => () => { + action("Clicked")(comment) + setSelectedComment(comment) + } + + const commentsByGroup = Object.assign({}, + mathResults.repness, + { + "majority": [ + ...mathResults.consensus.agree, + ...mathResults.consensus.disagree, + ], + } + ) + const commentsToShow = commentsData + .filter(c => commentsByGroup[args.selectedTidCuration] + ?.map(i => i.tid).includes(c.tid) + ) + + return +} + +export const Interactive = Template.bind({}) +Interactive.args = { + selectedTidCuration: 0, + Strings, +} +Interactive.argTypes = { + selectedTidCuration: { + options: [null, 'majority', 0, 1, 2, 3], + control: { type: 'inline-radio' }, + }, +} + +export const Empty = Template.bind({}) +Empty.args = { + commentsToShow: [], + selectedTidCuration: null, + selectedComment: null, + // TODO: Pretty sure this is janky. It should be simply action("Clicked") + // and the prop in tidCarousel should be: + // onClick={() => this.props.handleCommentClick(c)} + // not just + // onClick={this.props.handleCommentClick(c)} + handleCommentClick: (c) => () => action("Clicked")(c), + Strings, +} + +export const OneStatement = Template.bind({}) +OneStatement.args = { + ...Empty.args, + commentsToShow: commentsData.slice(10,11), +} + +export const FullFirstRow = Template.bind({}) +FullFirstRow.args = { + ...Empty.args, + commentsToShow: commentsData.slice(10,15), +} + +export const StartSecondRow = Template.bind({}) +StartSecondRow.args = { + ...Empty.args, + commentsToShow: commentsData.slice(10,16), +} + +export const FullSecondRow = Template.bind({}) +FullSecondRow.args = { + ...Empty.args, + commentsToShow: commentsData.slice(10,20), +} + +export const Selected = Template.bind({}) +Selected.args = { + ...Empty.args, + commentsToShow: commentsData.slice(10,20), + selectedComment: commentsData[11], +} From 8845d80422b02bd07a29a2618377c15700438679 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Sat, 12 Oct 2024 13:10:23 -0400 Subject: [PATCH 03/35] Added more stories to TidCarousel component. --- .../TidCarousel.stories.js | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/stories/compdem/client-participation/TidCarousel.stories.js b/stories/compdem/client-participation/TidCarousel.stories.js index 218b930..19c91a5 100644 --- a/stories/compdem/client-participation/TidCarousel.stories.js +++ b/stories/compdem/client-participation/TidCarousel.stories.js @@ -7,7 +7,6 @@ import { getMath, getComments } from '../../../.storybook/utils' const mathResults = getMath() const commentsData = getComments() -commentsData.sort((a,b) => a.tid - b.tid) const pluckNBetweenLowerUpper = (n, lower, upper) => { let numbers = [] @@ -25,12 +24,6 @@ const pluckNBetweenLowerUpper = (n, lower, upper) => { export default { component: TidCarousel, - argTypes: { - selectedTidCuration: { - options: [null, "majority", 0, 1, 2, 3], - control: { type: 'inline-radio' }, - }, - }, } const Template = (args) => { @@ -66,10 +59,16 @@ Interactive.args = { selectedTidCuration: 0, Strings, } +Interactive.argTypes = { + selectedTidCuration: { + options: [null, "majority", 0, 1, 2, 3], + control: { type: 'inline-radio' }, + }, +} export const Default = Template.bind({}) Default.args = { - selectedTidCuration: 1, + selectedTidCuration: undefined, commentsToShow: commentsData.slice(10,20), selectedComment: null, // TODO: Pretty sure this is janky. It should be simply action("Clicked") @@ -81,6 +80,12 @@ Default.args = { Strings, } +export const Hidden = Template.bind({}) +Hidden.args = { + ...Default.args, + selectedTidCuration: null, +} + // TODO: Load dataset with hundreds/thousands of comments. //export const DoubleToTripleDigits = Template.bind({}) //DoubleToTripleDigits.args = { From 0b996f39927208ff248f24bd54501e53b8afd77c Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Sat, 12 Oct 2024 13:50:47 -0400 Subject: [PATCH 04/35] Added new stories for large numbers. Renamed to be more general. Ensured sorting happens in components. --- .../CivicTechTO/TidCarouselV2Static.js | 2 +- .../TidCarouselV2Static.stories.js | 38 +++++++-- .../TidCarousel.stories.js | 81 +++++++++++++------ 3 files changed, 89 insertions(+), 32 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js index 32220fb..acc0d1b 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js @@ -30,7 +30,7 @@ const TidCarouselV2Static = ({ handleCommentClick, Strings, }) => { - const commentsToShowTids = commentsToShow.map(c => c.tid) + const commentsToShowTids = commentsToShow.map(c => c.tid).sort((a, b) => a - b) const buttonHeight = 25 const gap = 5 diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.stories.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.stories.js index b3cbb28..0e08719 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.stories.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.stories.js @@ -8,6 +8,20 @@ import { getMath, getComments } from '../../../../.storybook/utils' const mathResults = getMath() const commentsData = getComments() +const pluckNBetweenLowerUpper = (n, lower, upper) => { + let numbers = [] + while (numbers.length < n) { + let candidate = Math.floor(Math.random() * (upper - lower)) + (lower + 1) + if (!numbers.includes(candidate)) { + numbers.push(candidate) + } + } + // Ascending integer sort. + numbers.sort((a, b) => a - b) + + return numbers +} + export default { component: TidCarouselV2Static, } @@ -73,20 +87,20 @@ OneStatement.args = { commentsToShow: commentsData.slice(10,11), } -export const FullFirstRow = Template.bind({}) -FullFirstRow.args = { +export const FiveStatements = Template.bind({}) +FiveStatements.args = { ...Empty.args, commentsToShow: commentsData.slice(10,15), } -export const StartSecondRow = Template.bind({}) -StartSecondRow.args = { +export const SixStatements = Template.bind({}) +SixStatements.args = { ...Empty.args, commentsToShow: commentsData.slice(10,16), } -export const FullSecondRow = Template.bind({}) -FullSecondRow.args = { +export const TenStatements = Template.bind({}) +TenStatements.args = { ...Empty.args, commentsToShow: commentsData.slice(10,20), } @@ -97,3 +111,15 @@ Selected.args = { commentsToShow: commentsData.slice(10,20), selectedComment: commentsData[11], } + +export const UpToDoubleDigits = Template.bind({}) +UpToDoubleDigits.args = { + ...Empty.args, + commentsToShow: pluckNBetweenLowerUpper(10, 0, 100).map(i => ({ tid: i })), +} + +export const UpToTripleDigits = Template.bind({}) +UpToTripleDigits.args = { + ...Empty.args, + commentsToShow: pluckNBetweenLowerUpper(10, 0, 400).map(i => ({ tid: i })), +} diff --git a/stories/compdem/client-participation/TidCarousel.stories.js b/stories/compdem/client-participation/TidCarousel.stories.js index 19c91a5..fa7e7c6 100644 --- a/stories/compdem/client-participation/TidCarousel.stories.js +++ b/stories/compdem/client-participation/TidCarousel.stories.js @@ -6,7 +6,7 @@ import Strings from '../../../codebases/compdem/client-participation/js/strings/ import { getMath, getComments } from '../../../.storybook/utils' const mathResults = getMath() -const commentsData = getComments() +const commentsData = getComments().sort((a, b) => a.tid - b.tid) const pluckNBetweenLowerUpper = (n, lower, upper) => { let numbers = [] @@ -18,7 +18,7 @@ const pluckNBetweenLowerUpper = (n, lower, upper) => { } // Ascending integer sort. numbers.sort((a, b) => a - b) - + return numbers } @@ -80,10 +80,49 @@ Default.args = { Strings, } -export const Hidden = Template.bind({}) -Hidden.args = { - ...Default.args, - selectedTidCuration: null, +export const Empty = Template.bind({}) +Empty.args = { + commentsToShow: [], + selectedTidCuration: globals.tidCuration.majority, + selectedComment: null, + // TODO: Pretty sure this is janky. It should be simply action("Clicked") + // and the prop in tidCarousel should be: + // onClick={() => this.props.handleCommentClick(c)} + // not just + // onClick={this.props.handleCommentClick(c)} + handleCommentClick: (c) => () => action("Clicked")(c), + Strings, +} + +export const OneStatement = Template.bind({}) +OneStatement.args = { + ...Empty.args, + commentsToShow: pluckNBetweenLowerUpper(1, 0, 25).map(i => ({ tid: i })), +} + +export const FiveStatements = Template.bind({}) +FiveStatements.args = { + ...Empty.args, + commentsToShow: pluckNBetweenLowerUpper(5, 0, 25).map(i => ({ tid: i })), +} + +export const SixStatements = Template.bind({}) +SixStatements.args = { + ...Empty.args, + commentsToShow: pluckNBetweenLowerUpper(6, 0, 25).map(i => ({ tid: i })), +} + +export const TenStatements = Template.bind({}) +TenStatements.args = { + ...Empty.args, + commentsToShow: pluckNBetweenLowerUpper(10, 0, 25).map(i => ({ tid: i })), +} + +export const Selected = Template.bind({}) +Selected.args = { + ...Empty.args, + commentsToShow: commentsData.slice(10,20), + selectedComment: commentsData[11], } // TODO: Load dataset with hundreds/thousands of comments. @@ -93,32 +132,24 @@ Hidden.args = { // commentsToShow: commentsData.slice(95,105), //} -export const StatementSelected = Template.bind({}) -StatementSelected.args = { - ...Default.args, - selectedComment: { tid: commentsData[11].tid } -} +// export const Pagination = Template.bind({}) +// Pagination.args = { +// ...Default.args, +// commentsToShow: commentsData.slice(10,40), +// } -export const FewStatements = Template.bind({}) -FewStatements.args = { +export const UpToDoubleDigits = Template.bind({}) +UpToDoubleDigits.args = { ...Default.args, - commentsToShow: commentsData.slice(10,15), + commentsToShow: pluckNBetweenLowerUpper(10, 0, 100).map(i => ({ tid: i })), } -export const Pagination = Template.bind({}) -Pagination.args = { +export const UpToTripleDigits = Template.bind({}) +UpToTripleDigits.args = { ...Default.args, - commentsToShow: commentsData.slice(10,40), + commentsToShow: pluckNBetweenLowerUpper(10, 0, 400).map(i => ({ tid: i })), } -export const UpToDoubleDigits = Template.bind({}) -UpToDoubleDigits.args = { - ...Default.args, - commentsToShow: [ - ...pluckNBetweenLowerUpper(10, 0, commentsData.length-1).map(i => commentsData[i]) - ] -} - export const NoGroupSelectedSoHidden = Template.bind({}) NoGroupSelectedSoHidden.args = { ...Default.args, From ed6c59e3fa4b632cfe68a87a0a95f797b75f9714 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Mon, 14 Oct 2024 19:01:27 -0400 Subject: [PATCH 05/35] Convert TidCarouselV2Static to use basic theme-ui. --- .storybook/decorators.js | 20 ++++++ .../CivicTechTO/TidCarouselV2Static.js | 65 +++++++++---------- .../TidCarouselV2Static.stories.js | 2 + 3 files changed, 53 insertions(+), 34 deletions(-) diff --git a/.storybook/decorators.js b/.storybook/decorators.js index ff04f30..296f874 100644 --- a/.storybook/decorators.js +++ b/.storybook/decorators.js @@ -14,6 +14,26 @@ export const withThemeUi = (Story) => ( ) +const customParticipationTheme = Object.assign({}, compdemAdminTheme) +customParticipationTheme.buttons["secondary"] = { + 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) => ( + + + +) + export const withDelibThemeUi = (Story) => ( diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js index acc0d1b..272c385 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js @@ -1,25 +1,26 @@ +/** @jsx jsx */ +import { jsx } from 'theme-ui' + import React from "react" -const Button = ({ isSelected, style, children, handleClick }) => { - 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, +const TidCarouselButton = ({ isSelected, children, handleClick, width, height }) => { + const styles = { + button: { + border: 0, + cursor: "pointer", + borderRadius: 4, + fontSize: 14, + letterSpacing: 0.75, + boxSizing: "border-box", + textShadow: isSelected ? "0 0 .65px white" : null, + backgroundColor: isSelected ? "polisBlue" : "lightGray", + color: isSelected ? "white" : "darkGray", + flex: `1 0 ${width}`, + maxWidth: width, + height: height, + } } - return + return } const TidCarouselV2Static = ({ @@ -35,34 +36,30 @@ const TidCarouselV2Static = ({ const buttonHeight = 25 const gap = 5 const cols = 5 + const maxStatements = 10 + const rows = Math.ceil(maxStatements/cols) // Example: calc(20%-4px) const buttonWidthCalc = `calc(${100/cols}% - ${gap*((cols-1)/cols)}px)` const styles = { container: { - height: buttonHeight*2 + gap, + height: buttonHeight*rows + gap*(rows-1), display: "flex", - flexWrap: "wrap", - gap: gap, + flexWrap: "wrap", + gap: `${gap}px`, justifyContent: "flex-start", }, - button: { - flex: `1 0 ${buttonWidthCalc}`, - maxWidth: buttonWidthCalc, - height: buttonHeight, - boxSizing: "border-box", - } } return ( -
+
{commentsToShowTids.map(tid => ( - + children={tid} + /> ))}
) diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.stories.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.stories.js index 0e08719..405434d 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.stories.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.stories.js @@ -4,6 +4,7 @@ import TidCarouselV2Static from './TidCarouselV2Static' import * as globals from '../../../../codebases/compdem/client-participation/vis2/components/globals' import Strings from '../../../../codebases/compdem/client-participation/js/strings/en_us' import { getMath, getComments } from '../../../../.storybook/utils' +import { withParticipationThemeUi } from '../../../../.storybook/decorators' const mathResults = getMath() const commentsData = getComments() @@ -24,6 +25,7 @@ const pluckNBetweenLowerUpper = (n, lower, upper) => { export default { component: TidCarouselV2Static, + decorators: [withParticipationThemeUi], } const Template = (args) => { From ae13e3f63e25443d020317552fa1cd6b6e78f9ee Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Mon, 14 Oct 2024 22:54:30 -0400 Subject: [PATCH 06/35] Set proper font-family in theme-ui. --- .storybook/decorators.js | 1 + 1 file changed, 1 insertion(+) diff --git a/.storybook/decorators.js b/.storybook/decorators.js index 296f874..90fd367 100644 --- a/.storybook/decorators.js +++ b/.storybook/decorators.js @@ -15,6 +15,7 @@ export const withThemeUi = (Story) => ( ) const customParticipationTheme = Object.assign({}, compdemAdminTheme) +customParticipationTheme.fonts.body = "Arial" customParticipationTheme.buttons["secondary"] = { color: 'darkGray', bg: 'lightGray', From 06b166b62205bfe0c3a32c8759159d210c9ffba1 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Mon, 14 Oct 2024 23:08:54 -0400 Subject: [PATCH 07/35] Align proptypes for TidCarouselV2 and V2Static. --- .../CivicTechTO/SelectionWidgetV2.stories.js | 2 +- .../compdem/client-participation/CivicTechTO/TidCarouselV2.js | 2 +- .../client-participation/CivicTechTO/TidCarouselV2.stories.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js index bfc58c7..d4965e6 100644 --- a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js +++ b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js @@ -37,7 +37,7 @@ const SelectionWidgetV2 = ({math}) => { setSelectedTidCuration(tidCuration) } - const handleCommentClick = (c) => { + const handleCommentClick = (c) => () => { setSelectedComment(c) action("Clicked")(c) } diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js index 7b3117a..ef02a1c 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js @@ -87,7 +87,7 @@ const TidCarouselV2 = ({ containerWidth={bounds.width} id={c.tid} label={c.tid} - handleClick={() => handleCommentClick(c)} + handleClick={handleCommentClick(c)} isSelected={selectedComment && selectedComment.tid === c.tid} isShown={commentsToShowTids.includes(c.tid)} /> diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.stories.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.stories.js index d423b98..547e55c 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.stories.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.stories.js @@ -31,7 +31,7 @@ const Template = (args) => { } ) - const handleCommentClick = (c) => { + const handleCommentClick = (c) => () => { setSelectedComment(c) action("Clicked")(c) } From 3d546b32f073bc4cf888f2b687713e7caa1f2188 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Mon, 14 Oct 2024 23:09:45 -0400 Subject: [PATCH 08/35] Align TidCarouselV2 button height to V2Static. --- .../compdem/client-participation/CivicTechTO/TidCarouselV2.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js index ef02a1c..2e5649f 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js @@ -26,7 +26,7 @@ export const TidCarouselButton = ({ label, isShown, isSelected, handleClick, con onClick={handleClick} style={{ width: style.width, - height: 30, + height: 25, marginRight: style.marginRight, // fontSize changes seem slow. Scale span instead. // fontSize: style.fontSize, @@ -75,7 +75,7 @@ const TidCarouselV2 = ({ display: "flex", flex: 1, width: "100%", - height: 65, + height: 55, paddingX: 0, gap: 5, rowGap: 5, From b4b255add87e823336b54a1ad5c1d0c91ed298dc Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Mon, 14 Oct 2024 23:10:39 -0400 Subject: [PATCH 09/35] Allow switching between TidCarousel types in SelectionWidgetV2. --- .../CivicTechTO/SelectionWidgetV2.stories.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js index d4965e6..2f3d390 100644 --- a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js +++ b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js @@ -3,13 +3,15 @@ import { action } from '@storybook/addon-actions' import * as globals from '../../../../codebases/compdem/client-participation/vis2/components/globals' import Strings from '../../../../codebases/compdem/client-participation/js/strings/en_us' import { getMath, getComments } from '../../../../.storybook/utils' +import { withParticipationThemeUi } from '../../../../.storybook/decorators' import TidCarouselV2 from './TidCarouselV2' +import TidCarouselV2Static from './TidCarouselV2Static' import CurateV2 from './CurateV2' const mathResult = getMath() const commentsData = getComments() -const SelectionWidgetV2 = ({math}) => { +const SelectionWidgetV2 = ({isStatic, math}) => { const [selectedTidCuration, setSelectedTidCuration] = useState(globals.tidCuration.majority) const [selectedComment, setSelectedComment] = useState(null) @@ -50,12 +52,13 @@ const SelectionWidgetV2 = ({math}) => { rowGap: 5, } } + const TidCarouselComponent = isStatic ? TidCarouselV2Static : TidCarouselV2 return (
- { export default { component: SelectionWidgetV2, + decorators: [withParticipationThemeUi], + argTypes: { + isStatic: { + type: "boolean", + } + } } const Template = (args) => { @@ -78,5 +87,6 @@ const Template = (args) => { export const Interactive = Template.bind({}) Interactive.args = { + isStatic: true, math: mathResult, } From 8154c306e3572eaee23507c485dfbf88dbaafd6e Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Mon, 14 Oct 2024 23:22:43 -0400 Subject: [PATCH 10/35] Was missing key from TidCarousel subcomponent. --- .../compdem/client-participation/CivicTechTO/TidCarouselV2.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js index 2e5649f..b1812b4 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js @@ -85,7 +85,7 @@ const TidCarouselV2 = ({ {!bounds.width || allComments.map((c, i) => ( Date: Mon, 14 Oct 2024 23:23:12 -0400 Subject: [PATCH 11/35] Test maxWidth on SelectionWidgetV2. --- .../CivicTechTO/SelectionWidgetV2.stories.js | 1 + 1 file changed, 1 insertion(+) diff --git a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js index 2f3d390..34d42fd 100644 --- a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js +++ b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js @@ -80,6 +80,7 @@ export default { const Template = (args) => { // TODO: Figure out how to make this sticky at the bottom return
From 9197aade4514066183e59ec282db25d011456809 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Mon, 14 Oct 2024 23:24:41 -0400 Subject: [PATCH 12/35] Shift number of rows in TidCarouselV2Static at breakpoint. --- .../CivicTechTO/TidCarouselV2Static.js | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js index 272c385..496b025 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js @@ -3,20 +3,20 @@ import { jsx } from 'theme-ui' import React from "react" -const TidCarouselButton = ({ isSelected, children, handleClick, width, height }) => { +const TidCarouselButton = ({ isSelected, children, handleClick, widths, height }) => { const styles = { button: { + // variant: isSelected ? "button.primary" : "button.secondary", border: 0, cursor: "pointer", borderRadius: 4, fontSize: 14, letterSpacing: 0.75, - boxSizing: "border-box", textShadow: isSelected ? "0 0 .65px white" : null, backgroundColor: isSelected ? "polisBlue" : "lightGray", color: isSelected ? "white" : "darkGray", - flex: `1 0 ${width}`, - maxWidth: width, + flex: widths.map(w => (`1 0 ${w}`)), + maxWidth: widths, height: height, } } @@ -35,14 +35,16 @@ const TidCarouselV2Static = ({ const buttonHeight = 25 const gap = 5 - const cols = 5 - const maxStatements = 10 - const rows = Math.ceil(maxStatements/cols) + const getRows = cols => { + const maxStatements = 10 + return Math.ceil(maxStatements/cols) + } // Example: calc(20%-4px) - const buttonWidthCalc = `calc(${100/cols}% - ${gap*((cols-1)/cols)}px)` + const getButtonWidthCalc = cols => `calc(${100/cols}% - ${gap*((cols-1)/cols)}px)` + const getContainerHeight = cols => buttonHeight*getRows(cols) + gap*(getRows(cols)-1) const styles = { container: { - height: buttonHeight*rows + gap*(rows-1), + height: [getContainerHeight(5), getContainerHeight(10)], display: "flex", flexWrap: "wrap", gap: `${gap}px`, @@ -53,7 +55,7 @@ const TidCarouselV2Static = ({
{commentsToShowTids.map(tid => ( Date: Mon, 14 Oct 2024 23:45:31 -0400 Subject: [PATCH 13/35] Migrate some styling from style prop to theme-ui variants. --- .storybook/decorators.js | 5 ++++- .../CivicTechTO/TidCarouselV2Static.js | 11 +++-------- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/.storybook/decorators.js b/.storybook/decorators.js index 90fd367..c5f25bd 100644 --- a/.storybook/decorators.js +++ b/.storybook/decorators.js @@ -16,7 +16,10 @@ export const withThemeUi = (Story) => ( const customParticipationTheme = Object.assign({}, compdemAdminTheme) customParticipationTheme.fonts.body = "Arial" -customParticipationTheme.buttons["secondary"] = { +customParticipationTheme.buttons.primary.border = 0 +customParticipationTheme.buttons.primary.borderRadius = 4 +customParticipationTheme.buttons.secondary = { + ...customParticipationTheme.buttons.primary, color: 'darkGray', bg: 'lightGray', fontFamily: 'body', diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js index 496b025..ec41346 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js @@ -1,26 +1,21 @@ /** @jsx jsx */ -import { jsx } from 'theme-ui' +import { jsx, Box } from 'theme-ui' import React from "react" const TidCarouselButton = ({ isSelected, children, handleClick, widths, height }) => { const styles = { button: { - // variant: isSelected ? "button.primary" : "button.secondary", - border: 0, - cursor: "pointer", - borderRadius: 4, fontSize: 14, letterSpacing: 0.75, + variant: isSelected ? "buttons.primary" : "buttons.secondary", textShadow: isSelected ? "0 0 .65px white" : null, - backgroundColor: isSelected ? "polisBlue" : "lightGray", - color: isSelected ? "white" : "darkGray", flex: widths.map(w => (`1 0 ${w}`)), maxWidth: widths, height: height, } } - return + return {children} } const TidCarouselV2Static = ({ From 106b336785382f9319841122e6faabbb4046e6ad Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Tue, 15 Oct 2024 00:35:41 -0400 Subject: [PATCH 14/35] Allow forwardRef on TidCarouselV2Static. --- .../CivicTechTO/TidCarouselV2Static.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js index ec41346..e78d724 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js @@ -3,7 +3,7 @@ import { jsx, Box } from 'theme-ui' import React from "react" -const TidCarouselButton = ({ isSelected, children, handleClick, widths, height }) => { +const TidCarouselButton = React.forwardRef(({ isSelected, children, handleClick, widths, height, ...rest }, ref) => { const styles = { button: { fontSize: 14, @@ -15,8 +15,8 @@ const TidCarouselButton = ({ isSelected, children, handleClick, widths, height } height: height, } } - return {children} -} + return {children} +}) const TidCarouselV2Static = ({ selectedTidCuration, @@ -50,9 +50,9 @@ const TidCarouselV2Static = ({
{commentsToShowTids.map(tid => ( c.tid === tid))} children={tid} From 1f5b1b87d4ae798f7f22afda88f8f52274670946 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Tue, 15 Oct 2024 16:30:16 -0400 Subject: [PATCH 15/35] Added theme-ui support to CurateV2 component, and made single-row at tablet breakpoint. --- .../CivicTechTO/CurateV2.js | 60 +++++++++---------- .../CivicTechTO/CurateV2.stories.js | 2 + 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/CurateV2.js b/stories/compdem/client-participation/CivicTechTO/CurateV2.js index de47d91..67974ab 100644 --- a/stories/compdem/client-participation/CivicTechTO/CurateV2.js +++ b/stories/compdem/client-participation/CivicTechTO/CurateV2.js @@ -1,47 +1,45 @@ +/** @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)", - } +export const CurateV2Button = React.forwardRef(({isSelected, onCurateButtonClick, style, children}, ref) => { const buttonStyle = { ...style, - border: 0, - cursor: "pointer", - borderRadius: 4, fontSize: 14, - padding: "6px 12px", + height: 35, letterSpacing: 0.75, - // fontWeight: isSelected ? 700 : 500, + variant: isSelected ? "buttons.primary" : "buttons.secondary", textShadow: isSelected ? "0 0 .65px #fff" : null, - backgroundColor: isSelected ? colors.polisBlue : colors.lightGray, - color: isSelected ? "white" : colors.darkGray, } return ( - + ) -} +}) 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 66.667%"], + gap: "5px", }, groupButton: { flex: 1, }, + majorityContainer: { + flex: [1, "1 1 33.333%"], + }, majorityButton: { width: "100%", }, @@ -49,26 +47,26 @@ const CurateV2 = ({selectedTidCuration, handleCurateButtonClick = () => {}, math const groups = ['A', 'B', 'C', 'D', 'E'] return( -
-
+
+
+ handleCurateButtonClick(globals.tidCuration.majority)} + isSelected={selectedTidCuration === globals.tidCuration.majority} + style={styles.majorityButton} + children="Diverse Majority Opinion" + /> +
+
{groups.slice(0, GROUP_COUNT).map((groupLabel, index) => ( handleCurateButtonClick(index)} isSelected={selectedTidCuration === index} style={styles.groupButton} - > - {groupLabel} - + children={groupLabel} + /> ))}
- handleCurateButtonClick(globals.tidCuration.majority)} - isSelected={selectedTidCuration === globals.tidCuration.majority} - style={styles.majorityButton} - > - Diverse Majority Opinion -
) } diff --git a/stories/compdem/client-participation/CivicTechTO/CurateV2.stories.js b/stories/compdem/client-participation/CivicTechTO/CurateV2.stories.js index 0051484..06622d3 100644 --- a/stories/compdem/client-participation/CivicTechTO/CurateV2.stories.js +++ b/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], From 30fd3912ff36558a9a6f38fd1584341514ea06a9 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Tue, 15 Oct 2024 16:39:46 -0400 Subject: [PATCH 16/35] Aligned CurateV2Button styles and props. --- .../CivicTechTO/CurateV2.js | 25 +++++++++++-------- .../CivicTechTO/TidCarouselV2Static.js | 20 +++++++++------ 2 files changed, 27 insertions(+), 18 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/CurateV2.js b/stories/compdem/client-participation/CivicTechTO/CurateV2.js index 67974ab..6881932 100644 --- a/stories/compdem/client-participation/CivicTechTO/CurateV2.js +++ b/stories/compdem/client-participation/CivicTechTO/CurateV2.js @@ -4,17 +4,18 @@ import { jsx, Box } from 'theme-ui' import React from 'react' import * as globals from '../../../../codebases/compdem/client-participation/vis2/components/globals' -export const CurateV2Button = React.forwardRef(({isSelected, onCurateButtonClick, style, children}, ref) => { - const buttonStyle = { - ...style, - fontSize: 14, - height: 35, - letterSpacing: 0.75, - variant: isSelected ? "buttons.primary" : "buttons.secondary", - textShadow: isSelected ? "0 0 .65px #fff" : null, +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 ( - + {children} ) @@ -35,12 +36,14 @@ const CurateV2 = ({selectedTidCuration, handleCurateButtonClick = () => {}, math gap: "5px", }, groupButton: { + height: 35, flex: 1, }, majorityContainer: { flex: [1, "1 1 33.333%"], }, majorityButton: { + height: 35, width: "100%", }, } @@ -50,7 +53,7 @@ const CurateV2 = ({selectedTidCuration, handleCurateButtonClick = () => {}, math
handleCurateButtonClick(globals.tidCuration.majority)} + handleClick={() => handleCurateButtonClick(globals.tidCuration.majority)} isSelected={selectedTidCuration === globals.tidCuration.majority} style={styles.majorityButton} children="Diverse Majority Opinion" @@ -60,7 +63,7 @@ const CurateV2 = ({selectedTidCuration, handleCurateButtonClick = () => {}, math {groups.slice(0, GROUP_COUNT).map((groupLabel, index) => ( handleCurateButtonClick(index)} + handleClick={() => handleCurateButtonClick(index)} isSelected={selectedTidCuration === index} style={styles.groupButton} children={groupLabel} diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js index e78d724..6241c2f 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js @@ -3,19 +3,21 @@ import { jsx, Box } from 'theme-ui' import React from "react" -const TidCarouselButton = React.forwardRef(({ isSelected, children, handleClick, widths, height, ...rest }, ref) => { +const TidCarouselButton = 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 white" : null, - flex: widths.map(w => (`1 0 ${w}`)), - maxWidth: widths, - height: height, } } - return {children} + return ( + + {children} + + ) }) const TidCarouselV2Static = ({ @@ -45,14 +47,18 @@ const TidCarouselV2Static = ({ gap: `${gap}px`, justifyContent: "flex-start", }, + button: { + height: buttonHeight, + flex: [`1 0 ${getButtonWidthCalc(5)}`, `1 0 ${getButtonWidthCalc(10)}`], + maxWidth: [getButtonWidthCalc(5), getButtonWidthCalc(10)], + }, } return (
{commentsToShowTids.map(tid => ( c.tid === tid))} children={tid} From 07b1a3b6d89cf540c266a0c446807f61bf053959 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Tue, 15 Oct 2024 15:17:34 -0400 Subject: [PATCH 17/35] Added MVP of accessible tabs for TidCarousel, with radix primitives. This reverts commit 64f2e9596d69fae194741937eb85833a3eff5197. --- package-lock.json | 284 ++++++++++++++++++ package.json | 1 + .../CivicTechTO/TidCarouselV2Static.js | 29 +- 3 files changed, 304 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index c8bdab1..43edf99 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "license": "ISC", "dependencies": { + "@radix-ui/react-tabs": "^1.1.1", "@react-spring/web": "^9.7.4", "color": "~4.2.3", "d3-force": "~1.2.1", @@ -982,6 +983,289 @@ "react": ">=16" } }, + "node_modules/@radix-ui/primitive": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz", + "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==" + }, + "node_modules/@radix-ui/react-collection": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz", + "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-context": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz", + "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-compose-refs": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz", + "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-context": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz", + "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-direction": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz", + "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-id": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz", + "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==", + "dependencies": { + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-presence": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz", + "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-primitive": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz", + "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==", + "dependencies": { + "@radix-ui/react-slot": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-roving-focus": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz", + "integrity": "sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-context": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz", + "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-slot": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", + "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tabs": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.1.tgz", + "integrity": "sha512-3GBUDmP2DvzmtYLMsHmpA1GtR46ZDZ+OreXM/N+kkQJOPIgytFWWTfDQmBQKBvaFS0Vno0FktdbVzN28KGrMdw==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-presence": "1.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-roving-focus": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz", + "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-controllable-state": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz", + "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==", + "dependencies": { + "@radix-ui/react-use-callback-ref": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz", + "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@react-spring/animated": { "version": "9.7.4", "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.4.tgz", diff --git a/package.json b/package.json index 481f93b..08fa68c 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "storybook-branch-switcher": "^0.5.0" }, "dependencies": { + "@radix-ui/react-tabs": "^1.1.1", "@react-spring/web": "^9.7.4", "color": "~4.2.3", "d3-force": "~1.2.1", diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js index 6241c2f..37e036e 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js @@ -1,5 +1,6 @@ /** @jsx jsx */ import { jsx, Box } from 'theme-ui' +import * as Tabs from "@radix-ui/react-tabs" import React from "react" @@ -54,16 +55,24 @@ const TidCarouselV2Static = ({ }, } return ( -
- {commentsToShowTids.map(tid => ( - c.tid === tid))} - children={tid} - /> - ))} +
+ + + {commentsToShowTids.map(tid => ( + + c.tid === tid))} + children={tid} + /> + + ))} + + {commentsToShowTids.map(tid => ( + Statement {tid}... + ))} +
) } From ae1f4859b230f62911ba0cb1b63b95e5c490b960 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Tue, 15 Oct 2024 17:14:08 -0400 Subject: [PATCH 18/35] Added radix tabs to CurateV2 component. --- .../CivicTechTO/CurateV2.js | 51 +++++++++++-------- 1 file changed, 30 insertions(+), 21 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/CurateV2.js b/stories/compdem/client-participation/CivicTechTO/CurateV2.js index 6881932..0c04d0d 100644 --- a/stories/compdem/client-participation/CivicTechTO/CurateV2.js +++ b/stories/compdem/client-participation/CivicTechTO/CurateV2.js @@ -2,6 +2,7 @@ import { jsx, Box } from 'theme-ui' import React from 'react' +import * as Tabs from "@radix-ui/react-tabs" import * as globals from '../../../../codebases/compdem/client-participation/vis2/components/globals' export const CurateV2Button = React.forwardRef(({isSelected, handleClick, style, children, ...rest}, ref) => { @@ -50,27 +51,35 @@ const CurateV2 = ({selectedTidCuration, handleCurateButtonClick = () => {}, math const groups = ['A', 'B', 'C', 'D', 'E'] return( -
-
- handleCurateButtonClick(globals.tidCuration.majority)} - isSelected={selectedTidCuration === globals.tidCuration.majority} - style={styles.majorityButton} - children="Diverse Majority Opinion" - /> -
-
- {groups.slice(0, GROUP_COUNT).map((groupLabel, index) => ( - handleCurateButtonClick(index)} - isSelected={selectedTidCuration === index} - style={styles.groupButton} - children={groupLabel} - /> - ))} -
-
+ //
+ + +
+ + handleCurateButtonClick(globals.tidCuration.majority)} + isSelected={selectedTidCuration === globals.tidCuration.majority} + style={styles.majorityButton} + children="Diverse Majority Opinion" + /> + +
+
+ {groups.slice(0, GROUP_COUNT).map((groupLabel, index) => ( + + handleCurateButtonClick(index)} + isSelected={selectedTidCuration === index} + style={styles.groupButton} + children={groupLabel} + /> + + ))} +
+ + + //
) } From 843f22e1bb6438a7fb05d027a4b6ad039d40a67a Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Tue, 15 Oct 2024 17:15:03 -0400 Subject: [PATCH 19/35] Added flag for choosing accessible vs inaccessible TidCarouselV2Static, to keep track of differences. --- .../CivicTechTO/SelectionWidgetV2.stories.js | 5 +- .../CivicTechTO/TidCarouselV2Static.js | 51 ++++++++++++------- .../TidCarouselV2Static.stories.js | 2 + 3 files changed, 39 insertions(+), 19 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js index 34d42fd..0a085aa 100644 --- a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js +++ b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js @@ -11,7 +11,7 @@ import CurateV2 from './CurateV2' const mathResult = getMath() const commentsData = getComments() -const SelectionWidgetV2 = ({isStatic, math}) => { +const SelectionWidgetV2 = ({isStatic, isAccessible, math}) => { const [selectedTidCuration, setSelectedTidCuration] = useState(globals.tidCuration.majority) const [selectedComment, setSelectedComment] = useState(null) @@ -59,7 +59,7 @@ const SelectionWidgetV2 = ({isStatic, math}) => { {...{ selectedTidCuration, handleCurateButtonClick, math }} /> @@ -89,5 +89,6 @@ const Template = (args) => { export const Interactive = Template.bind({}) Interactive.args = { isStatic: true, + isAccessible: true, math: mathResult, } diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js index 37e036e..86d8fbb 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js @@ -27,6 +27,7 @@ const TidCarouselV2Static = ({ commentsToShow, selectedComment, handleCommentClick, + isAccessible = false, Strings, }) => { const commentsToShowTids = commentsToShow.map(c => c.tid).sort((a, b) => a - b) @@ -55,25 +56,41 @@ const TidCarouselV2Static = ({ }, } return ( -
- - + isAccessible + ? ( +
+ + + {commentsToShowTids.map(tid => ( + + c.tid === tid))} + children={tid} + /> + + ))} + + {commentsToShowTids.map(tid => ( + Statement {tid}... + ))} + +
+ ) + : ( +
{commentsToShowTids.map(tid => ( - - c.tid === tid))} - children={tid} - /> - + c.tid === tid))} + children={tid} + /> ))} - - {commentsToShowTids.map(tid => ( - Statement {tid}... - ))} - -
+
+ ) ) } diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.stories.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.stories.js index 405434d..32dcba0 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.stories.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.stories.js @@ -59,6 +59,7 @@ const Template = (args) => { export const Interactive = Template.bind({}) Interactive.args = { + isAccessible: true, selectedTidCuration: 0, Strings, } @@ -71,6 +72,7 @@ Interactive.argTypes = { export const Empty = Template.bind({}) Empty.args = { + isAccessible: true, commentsToShow: [], selectedTidCuration: null, selectedComment: null, From d8731291395402b335d0e2b63d179434423a7a04 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Tue, 15 Oct 2024 17:20:35 -0400 Subject: [PATCH 20/35] Added isAccessible flag for CurateV2 stories. --- .../CivicTechTO/CurateV2.js | 74 ++++++++++++------- .../CivicTechTO/CurateV2.stories.js | 2 + .../CivicTechTO/SelectionWidgetV2.stories.js | 2 +- 3 files changed, 52 insertions(+), 26 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/CurateV2.js b/stories/compdem/client-participation/CivicTechTO/CurateV2.js index 0c04d0d..e715b8b 100644 --- a/stories/compdem/client-participation/CivicTechTO/CurateV2.js +++ b/stories/compdem/client-participation/CivicTechTO/CurateV2.js @@ -22,7 +22,7 @@ export const CurateV2Button = React.forwardRef(({isSelected, handleClick, style, ) }) -const CurateV2 = ({selectedTidCuration, handleCurateButtonClick = () => {}, math}) => { +const CurateV2 = ({selectedTidCuration, handleCurateButtonClick = () => {}, math, isAccessible = false}) => { const GROUP_COUNT = math["group-clusters"].length const styles = { container: { @@ -51,35 +51,59 @@ const CurateV2 = ({selectedTidCuration, handleCurateButtonClick = () => {}, math const groups = ['A', 'B', 'C', 'D', 'E'] return( - //
- - -
- - handleCurateButtonClick(globals.tidCuration.majority)} - isSelected={selectedTidCuration === globals.tidCuration.majority} - style={styles.majorityButton} - children="Diverse Majority Opinion" - /> - -
-
- {groups.slice(0, GROUP_COUNT).map((groupLabel, index) => ( - + isAccessible + ? ( + + +
+ handleCurateButtonClick(index)} - isSelected={selectedTidCuration === index} - style={styles.groupButton} - children={groupLabel} + handleClick={() => handleCurateButtonClick(globals.tidCuration.majority)} + isSelected={selectedTidCuration === globals.tidCuration.majority} + style={styles.majorityButton} + children="Diverse Majority Opinion" /> +
+
+ {groups.slice(0, GROUP_COUNT).map((groupLabel, index) => ( + + handleCurateButtonClick(index)} + isSelected={selectedTidCuration === index} + style={styles.groupButton} + children={groupLabel} + /> + + ))} +
+ + + ) + : ( +
+
+ handleCurateButtonClick(globals.tidCuration.majority)} + isSelected={selectedTidCuration === globals.tidCuration.majority} + style={styles.majorityButton} + children="Diverse Majority Opinion" + /> +
+
+ {groups.slice(0, GROUP_COUNT).map((groupLabel, index) => ( + handleCurateButtonClick(index)} + isSelected={selectedTidCuration === index} + style={styles.groupButton} + children={groupLabel} + /> ))}
- - - //
+
+ ) ) } diff --git a/stories/compdem/client-participation/CivicTechTO/CurateV2.stories.js b/stories/compdem/client-participation/CivicTechTO/CurateV2.stories.js index 06622d3..f2430ed 100644 --- a/stories/compdem/client-participation/CivicTechTO/CurateV2.stories.js +++ b/stories/compdem/client-participation/CivicTechTO/CurateV2.stories.js @@ -32,6 +32,7 @@ const Template = ({ groupCount, ...args }) => { export const Interactive = Template.bind({}) Interactive.args = { groupCount: 4, + isAccessible: true, Strings: { majorityOpinion: Strings.majorityOpinion, group_123: Strings.group_123 @@ -41,6 +42,7 @@ Interactive.args = { export const Unselected = Template.bind({}) Unselected.args = { + isAccessible: true, selectedTidCuration: null, Strings: { majorityOpinion: Strings.majorityOpinion, diff --git a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js index 0a085aa..cc664a4 100644 --- a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js +++ b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js @@ -56,7 +56,7 @@ const SelectionWidgetV2 = ({isStatic, isAccessible, math}) => { return (
Date: Tue, 15 Oct 2024 21:30:38 -0400 Subject: [PATCH 21/35] Use value for radix Tabs rather than defaultValue. --- stories/compdem/client-participation/CivicTechTO/CurateV2.js | 2 +- .../client-participation/CivicTechTO/TidCarouselV2Static.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/CurateV2.js b/stories/compdem/client-participation/CivicTechTO/CurateV2.js index e715b8b..25be1be 100644 --- a/stories/compdem/client-participation/CivicTechTO/CurateV2.js +++ b/stories/compdem/client-participation/CivicTechTO/CurateV2.js @@ -53,7 +53,7 @@ const CurateV2 = ({selectedTidCuration, handleCurateButtonClick = () => {}, math return( isAccessible ? ( - +
diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js index 86d8fbb..daac93a 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js @@ -59,7 +59,7 @@ const TidCarouselV2Static = ({ isAccessible ? (
- + {commentsToShowTids.map(tid => ( From c5663678b6c345241f20c2a584db0f8e253b0837 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Tue, 15 Oct 2024 21:44:55 -0400 Subject: [PATCH 22/35] Set up forwardRefs on all V2 components. --- .../client-participation/CivicTechTO/CurateV2.js | 8 ++++---- .../CivicTechTO/SelectionWidgetV2.stories.js | 6 +++--- .../CivicTechTO/TidCarouselV2.js | 12 +++++++----- .../CivicTechTO/TidCarouselV2Static.js | 10 +++++----- 4 files changed, 19 insertions(+), 17 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/CurateV2.js b/stories/compdem/client-participation/CivicTechTO/CurateV2.js index 25be1be..35ed7f8 100644 --- a/stories/compdem/client-participation/CivicTechTO/CurateV2.js +++ b/stories/compdem/client-participation/CivicTechTO/CurateV2.js @@ -22,7 +22,7 @@ export const CurateV2Button = React.forwardRef(({isSelected, handleClick, style, ) }) -const CurateV2 = ({selectedTidCuration, handleCurateButtonClick = () => {}, math, isAccessible = false}) => { +const CurateV2 = React.forwardRef(({selectedTidCuration, handleCurateButtonClick = () => {}, math, isAccessible = false}, ref) => { const GROUP_COUNT = math["group-clusters"].length const styles = { container: { @@ -53,7 +53,7 @@ const CurateV2 = ({selectedTidCuration, handleCurateButtonClick = () => {}, math return( isAccessible ? ( - +
@@ -82,7 +82,7 @@ const CurateV2 = ({selectedTidCuration, handleCurateButtonClick = () => {}, math ) : ( -
+
handleCurateButtonClick(globals.tidCuration.majority)} @@ -105,6 +105,6 @@ const CurateV2 = ({selectedTidCuration, handleCurateButtonClick = () => {}, math
) ) -} +}) export default CurateV2 diff --git a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js index cc664a4..5202eb4 100644 --- a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js +++ b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js @@ -11,7 +11,7 @@ import CurateV2 from './CurateV2' const mathResult = getMath() const commentsData = getComments() -const SelectionWidgetV2 = ({isStatic, isAccessible, math}) => { +const SelectionWidgetV2 = React.forwardRef(({isStatic, isAccessible, math}, ref) => { const [selectedTidCuration, setSelectedTidCuration] = useState(globals.tidCuration.majority) const [selectedComment, setSelectedComment] = useState(null) @@ -54,7 +54,7 @@ const SelectionWidgetV2 = ({isStatic, isAccessible, math}) => { } const TidCarouselComponent = isStatic ? TidCarouselV2Static : TidCarouselV2 return ( -
+
@@ -65,7 +65,7 @@ const SelectionWidgetV2 = ({isStatic, isAccessible, math}) => { />
) -} +}) export default { component: SelectionWidgetV2, diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js index b1812b4..1dbfd1b 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2.js @@ -54,24 +54,26 @@ export const TidCarouselButton = ({ label, isShown, isSelected, handleClick, con ) } -const TidCarouselV2 = ({ +const TidCarouselV2 = React.forwardRef(({ selectedTidCuration, allComments, commentsToShow, selectedComment, handleCommentClick, Strings, -}) => { +}, ref) => { // TODO: Why doesn't this line avoid infinite renders when null? if ( selectedTidCuration === null ) return null - const [ref, bounds] = useMeasure() + // TODO: If we ever need to use the forwardRef, we'll need another package. + // See: https://github.com/pmndrs/react-use-measure?tab=readme-ov-file#multiple-refs + const [localRef, bounds] = useMeasure() allComments = allComments.sort((a, b) => a.tid - b.tid) const commentsToShowTids = commentsToShow.map(c => c.tid) // ref not available on first render, so only render map after bounds exists. return ( -
) -} +}) export default TidCarouselV2 diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js index daac93a..166402d 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js @@ -21,7 +21,7 @@ const TidCarouselButton = React.forwardRef(({ isSelected, handleClick, style, ch ) }) -const TidCarouselV2Static = ({ +const TidCarouselV2Static = React.forwardRef(({ selectedTidCuration, // allComments, commentsToShow, @@ -29,7 +29,7 @@ const TidCarouselV2Static = ({ handleCommentClick, isAccessible = false, Strings, -}) => { +}, ref) => { const commentsToShowTids = commentsToShow.map(c => c.tid).sort((a, b) => a - b) const buttonHeight = 25 @@ -58,7 +58,7 @@ const TidCarouselV2Static = ({ return ( isAccessible ? ( -
+
{commentsToShowTids.map(tid => ( @@ -79,7 +79,7 @@ const TidCarouselV2Static = ({
) : ( -
+
{commentsToShowTids.map(tid => ( ) ) -} +}) export default TidCarouselV2Static From 016421131788ef30243a549a1aabe79aa605ab54 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Tue, 15 Oct 2024 21:52:29 -0400 Subject: [PATCH 23/35] Renamed TidCarouselV2 to TidCarouselV2Animated. --- stories/2.OurComponents.mdx | 2 +- .../CivicTechTO/SelectionWidgetV2.stories.js | 4 ++-- .../{TidCarouselV2.js => TidCarouselV2Animated.js} | 4 ++-- ...rouselV2.stories.js => TidCarouselV2Animated.stories.js} | 6 +++--- 4 files changed, 8 insertions(+), 8 deletions(-) rename stories/compdem/client-participation/CivicTechTO/{TidCarouselV2.js => TidCarouselV2Animated.js} (97%) rename stories/compdem/client-participation/CivicTechTO/{TidCarouselV2.stories.js => TidCarouselV2Animated.stories.js} (90%) diff --git a/stories/2.OurComponents.mdx b/stories/2.OurComponents.mdx index 48d4260..e4c0024 100644 --- a/stories/2.OurComponents.mdx +++ b/stories/2.OurComponents.mdx @@ -18,7 +18,7 @@ As a helpful resource, here is a summary of existing components (each a **clicka - `CurateV2` (Replaces `Curate`) -- `TidCarouselV2` +- `TidCarouselV2Animated` and `TidCarouselV2Static` (Replaces `TidCarousel`) - `SelectionWidgetV2` diff --git a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js index 5202eb4..8ea0b6d 100644 --- a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js +++ b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js @@ -4,7 +4,7 @@ import * as globals from '../../../../codebases/compdem/client-participation/vis import Strings from '../../../../codebases/compdem/client-participation/js/strings/en_us' import { getMath, getComments } from '../../../../.storybook/utils' import { withParticipationThemeUi } from '../../../../.storybook/decorators' -import TidCarouselV2 from './TidCarouselV2' +import TidCarouselV2Animated from './TidCarouselV2Animated' import TidCarouselV2Static from './TidCarouselV2Static' import CurateV2 from './CurateV2' @@ -52,7 +52,7 @@ const SelectionWidgetV2 = React.forwardRef(({isStatic, isAccessible, math}, ref) rowGap: 5, } } - const TidCarouselComponent = isStatic ? TidCarouselV2Static : TidCarouselV2 + const TidCarouselComponent = isStatic ? TidCarouselV2Static : TidCarouselV2Animated return (
{ if (!commentsToShow.map(c => c.tid).includes(selectedComment?.tid)) { handleCommentClick(commentsToShow[0]) } - return Date: Tue, 15 Oct 2024 21:52:29 -0400 Subject: [PATCH 24/35] Renamed TidCarouselV2 to TidCarouselV2Animated. --- stories/2.OurComponents.mdx | 2 +- .../CivicTechTO/SelectionWidgetV2.stories.js | 4 ++-- .../{TidCarouselV2.js => TidCarouselV2Animated.js} | 4 ++-- ...rouselV2.stories.js => TidCarouselV2Animated.stories.js} | 6 +++--- 4 files changed, 8 insertions(+), 8 deletions(-) rename stories/compdem/client-participation/CivicTechTO/{TidCarouselV2.js => TidCarouselV2Animated.js} (97%) rename stories/compdem/client-participation/CivicTechTO/{TidCarouselV2.stories.js => TidCarouselV2Animated.stories.js} (90%) diff --git a/stories/2.OurComponents.mdx b/stories/2.OurComponents.mdx index 48d4260..e4c0024 100644 --- a/stories/2.OurComponents.mdx +++ b/stories/2.OurComponents.mdx @@ -18,7 +18,7 @@ As a helpful resource, here is a summary of existing components (each a **clicka - `CurateV2` (Replaces `Curate`) -- `TidCarouselV2` +- `TidCarouselV2Animated` and `TidCarouselV2Static` (Replaces `TidCarousel`) - `SelectionWidgetV2` diff --git a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js index 37355f7..23f3422 100644 --- a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js +++ b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js @@ -4,7 +4,7 @@ import * as globals from '../../../../codebases/compdem/client-participation/vis import Strings from '../../../../codebases/compdem/client-participation/js/strings/en_us' import { getMath, getComments } from '../../../../.storybook/utils' import { withParticipationThemeUi } from '../../../../.storybook/decorators' -import TidCarouselV2 from './TidCarouselV2' +import TidCarouselV2Animated from './TidCarouselV2Animated' import TidCarouselV2Static from './TidCarouselV2Static' import CurateV2 from './CurateV2' import ExploreTid from '../../../../codebases/compdem/client-participation/vis2/components/exploreTid' @@ -53,7 +53,7 @@ const SelectionWidgetV2 = ({isStatic, math}) => { rowGap: 5, } } - const TidCarouselComponent = isStatic ? TidCarouselV2Static : TidCarouselV2 + const TidCarouselComponent = isStatic ? TidCarouselV2Static : TidCarouselV2Animated return (
{ if (!commentsToShow.map(c => c.tid).includes(selectedComment?.tid)) { handleCommentClick(commentsToShow[0]) } - return Date: Wed, 16 Oct 2024 10:23:40 -0400 Subject: [PATCH 25/35] Added fractional percentage, instead of decimal. --- stories/compdem/client-participation/CivicTechTO/CurateV2.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/CurateV2.js b/stories/compdem/client-participation/CivicTechTO/CurateV2.js index 6881932..d13e39d 100644 --- a/stories/compdem/client-participation/CivicTechTO/CurateV2.js +++ b/stories/compdem/client-participation/CivicTechTO/CurateV2.js @@ -32,7 +32,7 @@ const CurateV2 = ({selectedTidCuration, handleCurateButtonClick = () => {}, math }, groupContainer: { display: "flex", - flex: [1, "1 1 66.667%"], + flex: [1, "1 1 calc(2*100% / 3)"], gap: "5px", }, groupButton: { @@ -40,7 +40,7 @@ const CurateV2 = ({selectedTidCuration, handleCurateButtonClick = () => {}, math flex: 1, }, majorityContainer: { - flex: [1, "1 1 33.333%"], + flex: [1, "1 1 calc(100% / 3)"], }, majorityButton: { height: 35, From 39ad05c6fae3cdf157bfa80f501d13066242c290 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Wed, 16 Oct 2024 10:53:20 -0400 Subject: [PATCH 26/35] Aligned TidCarouselV2Static and Animated button props. --- .../CivicTechTO/TidCarouselV2Animated.js | 5 ++--- .../CivicTechTO/TidCarouselV2Static.js | 12 ++++++------ 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js index 01419a6..60dd238 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js @@ -67,7 +67,6 @@ const TidCarouselV2Animated = ({ const [ref, bounds] = useMeasure() allComments = allComments.sort((a, b) => a.tid - b.tid) - const commentsToShowTids = commentsToShow.map(c => c.tid) // ref not available on first render, so only render map after bounds exists. return ( @@ -88,8 +87,8 @@ const TidCarouselV2Animated = ({ key={c.tid} label={c.tid} handleClick={handleCommentClick(c)} - isSelected={selectedComment && selectedComment.tid === c.tid} - isShown={commentsToShowTids.includes(c.tid)} + isSelected={selectedComment?.tid === c.tid} + isShown={commentsToShow.some(cts => cts.tid == c.tid)} /> ))}
diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js index 6241c2f..a5c7f60 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js @@ -28,7 +28,7 @@ const TidCarouselV2Static = ({ handleCommentClick, Strings, }) => { - const commentsToShowTids = commentsToShow.map(c => c.tid).sort((a, b) => a - b) + commentsToShow.sort((a, b) => a.tid - b.tid) const buttonHeight = 25 const gap = 5 @@ -55,13 +55,13 @@ const TidCarouselV2Static = ({ } return (
- {commentsToShowTids.map(tid => ( + {commentsToShow.map((c, i) => ( c.tid === tid))} - children={tid} + key={c.tid} + children={c.tid} + handleClick={handleCommentClick(c)} + isSelected={selectedComment?.tid === c.tid} /> ))}
From 8f4f869a8c5d11bdfdb717cb962f165ac55377ee Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Wed, 16 Oct 2024 11:04:51 -0400 Subject: [PATCH 27/35] More Aligning TidCarouselV2Animated with Static. Prep for theme-ui. --- .../CivicTechTO/TidCarouselV2Animated.js | 75 ++++++++++++++----- 1 file changed, 55 insertions(+), 20 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js index 60dd238..fb6714b 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js @@ -3,6 +3,26 @@ import { animated, useTransition } from '@react-spring/web' import useMeasure from 'react-use-measure' export const TidCarouselButton = ({ label, isShown, isSelected, handleClick, containerWidth }) => { + const styles = { + button: { + height: 25, + padding: 0, + border: 0, + cursor: "pointer", + overflow: "hidden", + borderRadius: 4, + fontWeight: isSelected ? 700 : 300, + backgroundColor: isSelected ? "#03a9f4" : "rgb(235,235,235)", + color: isSelected ? "white" : "rgb(0,0,0)", + }, + span: { + // 1s is rought estimate, but react-spring uses forces, not duration. + transition: "transform 1s ease-in-out", + transform: isShown ? "scaleX(1)" : "scaleX(0.5)", + // Needed in order to transform. + display: "inline-block", + }, + } const transition = useTransition(isShown, { from: { width: 0, @@ -25,28 +45,14 @@ export const TidCarouselButton = ({ label, isShown, isSelected, handleClick, con isShownTransition && - + {label} @@ -68,9 +74,18 @@ const TidCarouselV2Animated = ({ allComments = allComments.sort((a, b) => a.tid - b.tid) - // ref not available on first render, so only render map after bounds exists. - return ( -
{ + const maxStatements = 10 + return Math.ceil(maxStatements/cols) + } + // Example: calc(20%-4px) + const getButtonWidthCalc = cols => `calc(${100/cols}% - ${gap*((cols-1)/cols)}px)` + const getContainerHeight = cols => buttonHeight*getRows(cols) + gap*(getRows(cols)-1) + + const stylesPrev = { + container: { display: "flex", flex: 1, width: "100%", @@ -80,7 +95,27 @@ const TidCarouselV2Animated = ({ rowGap: 5, flexWrap: "wrap", justifyContent: "flex-start", - }}> + } + } + + const styles = { + container: { + height: getContainerHeight(5), + display: "flex", + flexWrap: "wrap", + gap: `${gap}px`, + justifyContent: "flex-start", + }, + button: { + // height: buttonHeight, + // flex: `1 0 ${getButtonWidthCalc(5)}`, + // maxWidth: getButtonWidthCalc(5), + }, + } + + // ref not available on first render, so only render map after bounds exists. + return ( +
{!bounds.width || allComments.map((c, i) => ( Date: Wed, 16 Oct 2024 11:17:54 -0400 Subject: [PATCH 28/35] Using more styles from TidCarouselV2Static. --- .../CivicTechTO/TidCarouselV2Animated.js | 25 +++++-------------- 1 file changed, 6 insertions(+), 19 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js index fb6714b..4052af3 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js @@ -2,10 +2,10 @@ import React from 'react' import { animated, useTransition } from '@react-spring/web' import useMeasure from 'react-use-measure' -export const TidCarouselButton = ({ label, isShown, isSelected, handleClick, containerWidth }) => { +export const TidCarouselButton = ({ label, isShown, isSelected, handleClick, containerWidth, style }) => { const styles = { button: { - height: 25, + ...style, padding: 0, border: 0, cursor: "pointer", @@ -84,20 +84,6 @@ const TidCarouselV2Animated = ({ const getButtonWidthCalc = cols => `calc(${100/cols}% - ${gap*((cols-1)/cols)}px)` const getContainerHeight = cols => buttonHeight*getRows(cols) + gap*(getRows(cols)-1) - const stylesPrev = { - container: { - display: "flex", - flex: 1, - width: "100%", - height: 55, - paddingX: 0, - gap: 5, - rowGap: 5, - flexWrap: "wrap", - justifyContent: "flex-start", - } - } - const styles = { container: { height: getContainerHeight(5), @@ -107,17 +93,18 @@ const TidCarouselV2Animated = ({ justifyContent: "flex-start", }, button: { - // height: buttonHeight, + height: buttonHeight, // flex: `1 0 ${getButtonWidthCalc(5)}`, - // maxWidth: getButtonWidthCalc(5), + maxWidth: getButtonWidthCalc(5), }, } // ref not available on first render, so only render map after bounds exists. return ( -
+
{!bounds.width || allComments.map((c, i) => ( Date: Wed, 16 Oct 2024 12:43:27 -0400 Subject: [PATCH 29/35] Make TidCarouselV2 smoother when jumping to new row. --- .../CivicTechTO/TidCarouselV2Animated.js | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js index 4052af3..4368b0d 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js @@ -1,7 +1,12 @@ +/** @jsx jsx */ +import { jsx, Box } from 'theme-ui' + import React from 'react' import { animated, useTransition } from '@react-spring/web' import useMeasure from 'react-use-measure' +const AnimatedBox = animated(Box) + export const TidCarouselButton = ({ label, isShown, isSelected, handleClick, containerWidth, style }) => { const styles = { button: { @@ -30,7 +35,7 @@ export const TidCarouselButton = ({ label, isShown, isSelected, handleClick, con opacity: 1, }, enter: { - width: containerWidth/5-5, + width: containerWidth/5-4, marginRight: 0, opacity: 1, }, @@ -42,20 +47,22 @@ export const TidCarouselButton = ({ label, isShown, isSelected, handleClick, con }) return ( transition((style, isShownTransition) => ( - isShownTransition && - + {label} - + )) ) } @@ -91,17 +98,19 @@ const TidCarouselV2Animated = ({ flexWrap: "wrap", gap: `${gap}px`, justifyContent: "flex-start", + marginRight: -30, }, button: { height: buttonHeight, // flex: `1 0 ${getButtonWidthCalc(5)}`, - maxWidth: getButtonWidthCalc(5), + // maxWidth: getButtonWidthCalc(5), }, } // ref not available on first render, so only render map after bounds exists. return ( -
+
+
{!bounds.width || allComments.map((c, i) => ( ))}
+
) } From d62c266321811d289d0bd46042be5d6dc7d73efa Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Wed, 16 Oct 2024 14:42:25 -0400 Subject: [PATCH 30/35] Aligned button style for TidCarouselV2Animated and Static. --- .../CivicTechTO/TidCarouselV2Animated.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js index 37502b7..86852a7 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js @@ -12,13 +12,11 @@ export const TidCarouselButton = ({ label, isShown, isSelected, handleClick, con button: { ...style, padding: 0, - border: 0, - cursor: "pointer", overflow: "hidden", - borderRadius: 4, - fontWeight: isSelected ? 700 : 300, - backgroundColor: isSelected ? "#03a9f4" : "rgb(235,235,235)", - color: isSelected ? "white" : "rgb(0,0,0)", + fontSize: 14, + letterSpacing: 0.75, + variant: isSelected ? "buttons.primary" : "buttons.secondary", + textShadow: isSelected ? "0 0 .65px white" : null, }, span: { // 1s is rought estimate, but react-spring uses forces, not duration. From 9f4cd236b25c454292e272b2b410ac2e4aa40fc0 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Wed, 16 Oct 2024 15:29:54 -0400 Subject: [PATCH 31/35] Get theme-ui working in TidCarouselV2Animated stories. --- .../CivicTechTO/TidCarouselV2Animated.stories.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.stories.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.stories.js index 2983582..1ae366d 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.stories.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.stories.js @@ -3,12 +3,14 @@ import { action } from '@storybook/addon-actions' import Strings from '../../../../codebases/compdem/client-participation/js/strings/en_us' import { getComments, getMath } from '../../../../.storybook/utils' import TidCarouselV2Animated from './TidCarouselV2Animated' +import { withParticipationThemeUi } from '../../../../.storybook/decorators' const mathResult = getMath() const commentsData = getComments() export default { component: TidCarouselV2Animated, + decorators: [withParticipationThemeUi], argTypes: { selectedTidCuration: { // TODO: Figure out why null does infinite renders. From d10c6fadc615d31221e334ad6c8f4aa5344fff46 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Wed, 16 Oct 2024 15:31:43 -0400 Subject: [PATCH 32/35] Added accessibility to TidCarouselV2Animated component. --- .../CivicTechTO/TidCarouselV2Animated.js | 71 +++++++++++++------ .../TidCarouselV2Animated.stories.js | 1 + 2 files changed, 52 insertions(+), 20 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js index 86852a7..ad02211 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js @@ -2,12 +2,13 @@ import { jsx, Box } from 'theme-ui' import React from 'react' +import * as Tabs from "@radix-ui/react-tabs" import { animated, useTransition } from '@react-spring/web' import useMeasure from 'react-use-measure' const AnimatedBox = animated(Box) -export const TidCarouselButton = ({ label, isShown, isSelected, handleClick, containerWidth, style }) => { +export const TidCarouselButton = React.forwardRef(({ label, isShown, isSelected, handleClick, containerWidth, style, ...rest }, ref) => { const styles = { button: { ...style, @@ -33,7 +34,8 @@ export const TidCarouselButton = ({ label, isShown, isSelected, handleClick, con opacity: 1, }, enter: { - width: containerWidth/5-4, + // TODO: Why is this such a funny number? Would expect 4 to work. + width: containerWidth/5-4.8, marginRight: 0, opacity: 1, }, @@ -45,7 +47,7 @@ export const TidCarouselButton = ({ label, isShown, isSelected, handleClick, con }) return ( transition((style, isShownTransition) => ( - isShownTransition && + }} + {...rest} + > {label} )) ) -} +}) const TidCarouselV2Animated = React.forwardRef(({ selectedTidCuration, @@ -71,6 +75,7 @@ const TidCarouselV2Animated = React.forwardRef(({ commentsToShow, selectedComment, handleCommentClick, + isAccessible = false, Strings, }, ref) => { // TODO: Why doesn't this line avoid infinite renders when null? @@ -107,22 +112,48 @@ const TidCarouselV2Animated = React.forwardRef(({ }, } - // ref not available on first render, so only render map after bounds exists. return ( -
-
- {!bounds.width || allComments.map((c, i) => ( - cts.tid == c.tid)} - /> - ))} -
+ // padding and margins here are to ensure focus glow is visible with overflow: hidden. +
+ {isAccessible + ? ( + + + {!bounds.width || allComments.map(c => ( + + cts.tid == c.tid)} + /> + + ))} + + {/* {commentsToShowTids.map(tid => ( + Statement {tid}... + ))} */} + + ) + : ( +
+ {/* ref not available on first render, so only render map after bounds exists. */} + {!bounds.width || allComments.map(c => ( + cts.tid == c.tid)} + /> + ))} +
+ ) + }
) }) diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.stories.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.stories.js index 1ae366d..29cf7fe 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.stories.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.stories.js @@ -53,6 +53,7 @@ const Template = (args) => { export const Interactive = Template.bind({}) Interactive.args = { + isAccessible: true, selectedTidCuration: 1, allComments: commentsData, Strings, From 9ead84a5f5f0f4b4798a84c76d0b5205b359a80a Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Wed, 16 Oct 2024 15:32:04 -0400 Subject: [PATCH 33/35] Small alignments in props of V2 components. --- .../client-participation/CivicTechTO/TidCarouselV2Static.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js index 8674454..a57af0f 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Static.js @@ -66,8 +66,8 @@ const TidCarouselV2Static = React.forwardRef(({ ))} @@ -82,8 +82,8 @@ const TidCarouselV2Static = React.forwardRef(({
{commentsToShow.map(c => ( Date: Wed, 16 Oct 2024 16:56:52 -0400 Subject: [PATCH 34/35] Persist active state in button that's transitioning out. --- .../CivicTechTO/TidCarouselV2Animated.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js index ad02211..484ecfe 100644 --- a/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js +++ b/stories/compdem/client-participation/CivicTechTO/TidCarouselV2Animated.js @@ -8,7 +8,18 @@ import useMeasure from 'react-use-measure' const AnimatedBox = animated(Box) +function usePrevious(value) { + const ref = React.useRef(); + React.useEffect(() => { + ref.current = value; //assign the value of ref to the argument + },[value]); //this code will run when the value of 'value' changes + return ref.current; //in the end, return the current ref value. +} + export const TidCarouselButton = React.forwardRef(({ label, isShown, isSelected, handleClick, containerWidth, style, ...rest }, ref) => { + // Allows selected style to persist during transition out. + let wasSelected = usePrevious(isSelected) + const styles = { button: { ...style, @@ -16,8 +27,10 @@ export const TidCarouselButton = React.forwardRef(({ label, isShown, isSelected, overflow: "hidden", fontSize: 14, letterSpacing: 0.75, - variant: isSelected ? "buttons.primary" : "buttons.secondary", - textShadow: isSelected ? "0 0 .65px white" : null, + // Only want to style based on previous select state when + // a button is no longer shown (aka on its was out) + variant: (isSelected || (wasSelected && !isShown)) ? "buttons.primary" : "buttons.secondary", + textShadow: (isSelected || (wasSelected && !isShown)) ? "0 0 .65px white" : null, }, span: { // 1s is rought estimate, but react-spring uses forces, not duration. From 50938d6cfe43ce9b1962981adb011bb53ef1d501 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Wed, 16 Oct 2024 17:39:13 -0400 Subject: [PATCH 35/35] Copied ExploreTid into our directory as ExploreTidV2. --- .../CivicTechTO/ExploreTidV2.js | 309 ++++++++++++++++++ .../CivicTechTO/SelectionWidgetV2.stories.js | 4 +- 2 files changed, 311 insertions(+), 2 deletions(-) create mode 100644 stories/compdem/client-participation/CivicTechTO/ExploreTidV2.js diff --git a/stories/compdem/client-participation/CivicTechTO/ExploreTidV2.js b/stories/compdem/client-participation/CivicTechTO/ExploreTidV2.js new file mode 100644 index 0000000..64b3f08 --- /dev/null +++ b/stories/compdem/client-participation/CivicTechTO/ExploreTidV2.js @@ -0,0 +1,309 @@ +import _ from "lodash"; +import React from "react"; +import * as globals from '../../../../codebases/compdem/client-participation/vis2/components/globals' + +const checkmark = "M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"; +const ban = "M1440 893q0-161-87-295l-754 753q137 89 297 89 111 0 211.5-43.5t173.5-116.5 116-174.5 43-212.5zm-999 299l755-754q-135-91-300-91-148 0-273 73t-198 199-73 274q0 162 89 299zm1223-299q0 157-61 300t-163.5 246-245 164-298.5 61-298.5-61-245-164-163.5-246-61-300 61-299.5 163.5-245.5 245-164 298.5-61 298.5 61 245 164 163.5 245.5 61 299.5z"; + +export const DataSentence = ({math, selectedTidCuration, selectedComment, repfulFor, Strings}) => { + + let markup = null; + + if (_.isNumber(selectedTidCuration)) { + const gid = selectedTidCuration; + const tid = selectedComment.tid; + const groupVotes = math["group-votes"][gid]; + + const repness = _.find(math.repness[gid], (r) => { return r.tid === selectedComment.tid }) + let repfulForAgree = repness["repful-for"] === "agree"; + const v = groupVotes.votes[tid]; + const denominator = v.S; // (seen) + if (repness["best-agree"] && (v.A > 0)) { + repfulForAgree = true; + } + // const denominator = info.count; // or maybe v.S (seen) + // const percent = repfulForAgree ? + // " " + ((v.A / denominator * 100) >> 0) : + // " " + ((v.D / denominator * 100) >> 0); + const percent = repfulForAgree ? ((v.A / denominator * 100) >> 0) : ((v.D / denominator * 100) >> 0); + + + // var count = repfulForAgree ? v.A : v.D; + // var createdString = (new Date(c.get("created") * 1)).toString().match(/(.*?) [0-9]+:/)[1]; + + var s = repfulForAgree ? Strings.pctAgreedOfGroupLong : Strings.pctDisagreedOfGroupLong; + s = s.replace("{{pct}}", percent); + s = s.replace("{{group}}", globals.groupLabels[selectedTidCuration]); + s = s.replace("{{comment_id}}", tid); + + markup = ( +
+ + + +

+ {s} +

+
+ ) + } else if (selectedTidCuration === globals.tidCuration.majority) { + const repfulForAgree = _.find(math.consensus.agree, (r) => { return r.tid === selectedComment.tid }); + const repfulForDisagree = _.find(math.consensus.disagree, (r) => { return r.tid === selectedComment.tid }); + const repness = repfulForAgree || repfulForDisagree; + + const percent = (repness["n-success"] / repness["n-trials"] * 100) >> 0; + + let s = repfulForAgree ? Strings.pctAgreedLong : Strings.pctDisagreedLong; + s = s.replace("{{pct}}", percent); + s = s.replace("{{comment_id}}", selectedComment.tid); + + markup = ( +
+ + + +

+ {s} +

+
+ ) + } + + return markup; +} + +export class ExploreTid extends React.Component { + + handleAgree() { + this.props.onVoteClicked({ + tid: this.props.selectedComment.tid, + vote: window.polisTypes.reactions.pull, + }); + } + handleDisagree() { + this.props.onVoteClicked({ + tid: this.props.selectedComment.tid, + vote: window.polisTypes.reactions.push, + }); + } + handlePass() { + this.props.onVoteClicked({ + tid: this.props.selectedComment.tid, + vote: window.polisTypes.reactions.pass, + }); + } + + createChangeVotesElements() { + let currentVote = null; + if (this.props.selectedComment) { + let selectedTid = this.props.selectedComment.tid; + let voteForSelectedComment = _.find(this.props.votesByMe, (v) => { + return v.tid === selectedTid; + }); + currentVote = voteForSelectedComment && voteForSelectedComment.vote; + } + + let agreeButton = ( + ); + + let disagreeButton = ( + + ); + + let passButton = ( + + ); + + // Conditionally show change votes buttons + let buttons = null; + if (window.preload.firstConv.is_active) { + if (!_.isNumber(currentVote)) { + buttons = {agreeButton} {disagreeButton} {passButton} + } else if (currentVote === window.polisTypes.reactions.pass) { + buttons = Change vote: {agreeButton} {disagreeButton} + } else if (currentVote === window.polisTypes.reactions.pull) { + buttons = Change vote: {disagreeButton} {passButton} + } else if (currentVote === window.polisTypes.reactions.push) { + buttons = Change vote: {agreeButton} {passButton} + } + } + + let changeVotesElements = null; + if (!_.isNumber(currentVote)) { + changeVotesElements = {buttons} + } else if (currentVote === window.polisTypes.reactions.pass) { + changeVotesElements = You passed. {buttons} + } else if (currentVote === window.polisTypes.reactions.pull) { + changeVotesElements = You agreed. {buttons} + } else if (currentVote === window.polisTypes.reactions.push) { + changeVotesElements = You disagreed. {buttons} + } + + return ( +
+ {changeVotesElements} +
+ ) + } + render() { + if (!this.props.selectedComment) {return null} + let translatedText = null; + if (this.props.selectedComment.translatedText) { + let lang = navigator.language; + if (lang.indexOf('-') > 0) { + lang = lang.split('-')[0]; + // Do not need undefined check, will just not appear + translatedText = this.props.selectedComment.translatedText[lang]; + } + } + return ( +
+

+ {this.props.selectedComment ? "#" + this.props.selectedComment.tid : null} +

+
+

768 ? 400 : 245, + fontSize: 18, + fontFamily: "Georgia, serif", + }}> + {this.props.selectedComment ? this.props.selectedComment.txt : null} + {translatedText ?

: null} + {translatedText ? translatedText : null} +

+ + {/*this.createChangeVotesElements()*/} +
+
+ ) + } +} + +export default ExploreTid; + + +// +// {/* +// +// +// */} +// {/* +// +// */} diff --git a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js index cf3c289..a89a221 100644 --- a/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js +++ b/stories/compdem/client-participation/CivicTechTO/SelectionWidgetV2.stories.js @@ -7,7 +7,7 @@ import { withParticipationThemeUi } from '../../../../.storybook/decorators' import TidCarouselV2Animated from './TidCarouselV2Animated' import TidCarouselV2Static from './TidCarouselV2Static' import CurateV2 from './CurateV2' -import ExploreTid from '../../../../codebases/compdem/client-participation/vis2/components/exploreTid' +import ExploreTidV2 from './ExploreTidV2' const mathResult = getMath() const commentsData = getComments() @@ -64,7 +64,7 @@ const SelectionWidgetV2 = React.forwardRef(({isStatic, isAccessible, math}, ref) allComments={commentsData} commentsToShow={commentsToShow} /> -