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

6. 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.