Unified "Read" Button Dropper

[cdrini]

We have a lot of read-y actions a user can perform; designing these as a dropdown would allow us to expose these options in more places; eg search results, carousels; without taking up a bunch of space.

Options

Borrow / Read, Listen, Search Inside, Download, Locate (meaning check nearby libraries)

Description, Patron Story

• What is the design change?

Turns the read button into a drop-down menu with more options

• Why is this design change necessary?

saves real estate on the page by grouping similar options (downloads, etc)

• Who is it for?

all patrons and stakeholders of the books page

• constraints and implementation

Preferably everything is managed using details html element and no js is required, all css.

Relevant Designs

https://www.figma.com/file/dYQkIJOJeMo9hx7ewZQH9x/Open-Library%3A-Design-System-%26-Component-Library?type=design&node-id=601-199&mode=design&t=giRw2crBrKKYkWGi-0

Problem Statement

• Each book has one or more different applicable actions for reading, locating a copy, etc.
  • e.g. Read, Borrow, Listen, Download epub, Search Inside, Check local library, Purchase...
• In some case, we overload the read button with an 🎧 icon to suggest there's also a listen option. This is a confusing pattern.
• Trying to represent all a book's options risks taking up space, introducing multiple access patterns, and creating multiple locations where a patron may have to learn to look.

Proposal & Constraints

Actions in dropdown (WIP):

• Borrow (or) Read (or) Listen (or) Borrow & Listen
• Download epub
• Search Inside
• Purchase
• Check local library

Additional context

Stakeholders

@mekarpeles @cdrini

[seabelis]

Related request from a patron:
"Hi! Please add "Want to read" button to search resulta view so that results don't have to opened separately."