Create proof-of-concept for improved TidCarousel UI

[patcon]

Working on this in: #10 https://github.com/CivicTechTO/polis-storybook/tree/tidcarousel-v2
Demo: https://civictechto.github.io/polis-storybook/PR-10/?path=/story/client-participation-tidcarouselv2--default

Key Features

• changing buttons for statement numbers will expand/collapse out of appropriate space on invisible number line, giving a sense of what's happening when button labels change numbers
• buttons are always same width (don't vary based on size of number)
• intended to remain static on its own row (not jump around)
• a statement is selected by default (the first), which allows consistent real estate for statements (never missing)
• if statement is consistent between statement sets, will stay selected
  • allows easier comparison between groups (does a statement exist in both groups? if yes, will remain static when switching)

Screen.Recording.2024-09-30.at.4.17.49.PM.mov

Open Questions

• How to handle majority opinion, which can have up to 10 statements. should this be 2 rows? how will animation work?
• Is performance for this too poor? Can more of it be done with more efficient CSS transforms? Would this require a library, and is it worth adding the overhead of a new package for that?

To Do

• create a page to direct visitors to any custom components we've worked on (OurComponents.mdx)
• create animated TidCarouselV2 component for selecting statement
• create CurateV2 component for selecting group
• mount TidCarouselV2 in context with rest of CurateV2 component (SelectionWidgetV2)
  • add ExploreTidV2 to SelectionWidgetV2
• create a static version of TidCarouselV2 (no heavy animation)
• create ExploreTidV2
• implement theme-ui styling
• format all V2 components better for desktop (currently mobile-first)
  • appropriately resize when screen width changes
• add "Statements:" label
• add "Groups:" label
• add low motion mode
• add prefers-reduced-motion simulation addon in storybook
  • https://storybook.js.org/addons/@jeysal/storybook-addon-css-user-preferences