Implement accessible radix tabs in V2 components

.storybook/decorators.js

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

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",

stories/2.OurComponents.mdx

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