Component Request - FTVA DropdownButton

[tinuola]

Component Description

This component is a button with a dropdown modal, and will be used to create the Share button and the Add to Calendar button.

• the former is used on article pages and shares the corresponding page link
• the latter is used on event pages and triggers a user's selected calendar platform to create/add the corresponding event

Design

• Default (Collapsed), Hover (Collapsed) and Expanded states https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?m=auto&node-id=237-7359&t=xUCWjW41vobXJfiz-1

• Mobile

  • Add to Calendar Button:

• Share Button Collapsed:

  

• Share Button Expanded:

Slots

No Slots

Props

Event data pending from UX

props: {
    eventDetail: { 
        type: Object,
        default: () => {}
    },
    socialList: {
        type: Array, // social objects?
        default: () => [] 
    },
    title: { // Button Text
        type: String,
        default: () => ""
    },
    hasIcon: { // Not the dropdown toggle icon
        type: Boolean,
        default: () => ""
    },
   ...
}

Developer Tips

1. See annotations for styling details:

   • https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=13260-5297&t=N0J2YwAO4VQyFHib-4

2. Share APIs for social media links:

   • Facebook share url: "https://www.facebook.com/sharer/sharer.php?u="
   • Twitter share url: "https://twitter.com/share?url="

3. Use useRoute to retrieve event detail page url for social media sharing

4. Use Add to Calendar Button plugin for calendar configuration: https://add-to-calendar-button.com/

   • UX also recommends this plugin
   • See stackblitz demo

5. Pass properties from the eventDetail object (or whatever that prop will be called...) to the add-to-calendar component ; See plugin configuration page for potential attributes that can be used / correlate with data we want to provide

   <add-to-calendar-button
     name="Title"
     options="'Apple','Google'"
     location="World Wide Web"
     startDate="2023-02-03"
     endDate="2023-02-03"
     startTime="10:15"
     endTime="23:30"
     timeZone="America/Los_Angeles"
     debug
   ></add-to-calendar-button>

Events

1. When button is clicked, a dropdown box/modal appears
2. Social media and calendar links open to respective platform (login/auth) pages
3. .ics link in calendar dropdown downloads an .ics file

Child components

• iconWithLink
  • This component may need to be updated to include icons for calendars; the twitter-x and link icons in the Share dropdown
• add-to-calendar-button component

[farosFreed]

not sure if I'm the one implementing this, but looks good to me ✅ Appreciate all the legwork you did on the calendar implementation questions.