Open tinuola opened 1 month ago
This component is a button with a dropdown modal, and will be used to create the Share button and the Add to Calendar button.
Share
Add to Calendar
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
Share Button Collapsed:
Share Button Expanded:
No Slots
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: () => "" }, ... }
See annotations for styling details:
Share APIs for social media links:
Use useRoute to retrieve event detail page url for social media sharing
useRoute
Use Add to Calendar Button plugin for calendar configuration: https://add-to-calendar-button.com/
Add to Calendar Button
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
eventDetail
add-to-calendar
<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>
.ics
iconWithLink
add-to-calendar-button
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.
Component Description
This component is a button with a dropdown modal, and will be used to create the
Share
button and theAdd to Calendar
button.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
Share Button Collapsed:
Share Button Expanded:![share-mobile-expanded](https://github.com/user-attachments/assets/9abd9ce2-5077-4e3e-ab7b-81142f3a6e86)
Slots
No Slots
Props
Event data pending from UX
Developer Tips
See annotations for styling details:
Share APIs for social media links:
Use
useRoute
to retrieve event detail page url for social media sharingUse
Add to Calendar Button
plugin for calendar configuration: https://add-to-calendar-button.com/Pass properties from the
eventDetail
object (or whatever that prop will be called...) to theadd-to-calendar
component ; See plugin configuration page for potential attributes that can be used / correlate with data we want to provideEvents
.ics
link in calendar dropdown downloads an.ics
fileChild components
iconWithLink
add-to-calendar-button
component