Component Request - ScrollWrapper

[tinuola]

Component Description

This component is a wrapper component to display other [child] components as horizontal scrollable elements. Conceptually, the component is similar to the MobileDrawer component (storybook, code) which wraps other components.

Design

https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/%5BFTVA%5D-Final-Design-with-Annotations?node-id=1406-9524&t=9ByvbOmgLarKylry-4

Desktop:

Mobile:

Slots

• A slot for the scrolled child item/component

Props

None

Developer Tips

1. Use Vuetify component library's Slide Group component: https://vuetifyjs.com/en/components/slide-groups/
   • The following Vuetify elements are needed: v-sheet, v-slide-group, v-slide-group-item
   • See Vuetify playground
2. Our component library already has Vuetify configured from when we implemented the BaseCalendar component
   • Update the Vuetify plugin /plugins/vuetify.ts with the new elements: VSlideGroup, VSlideGroupItem
   • The corresponding Vuetify plugin in Nuxt will also need to be updated with these elements
3. Though not visible in the design, there should be a previous arrow displayed once scrolling-clicking begins and initial/first element is out of view (that is, there should be a way to scroll back)
4. Both arrows are not visible in mobile view
5. Vuetify arrow icons can be replaced with custom icons: https://vuetifyjs.com/en/components/slide-groups/#custom-icons
   • Otherwise, see example of overriding Vuetify arrow icons with CSS inBaseCalendar (For the component, we were not able to easily replace Vuetify's arrows with our own arrow icons)
6. Test component in Storybook with inner components such as SectionTeaserCard, FlexibleCardWithImage

Events

• Handled by Vuetify component
  • Clicking on arrows should scroll items forward or backward

Child components

• Handled by the slot