Bound with record view

[dbranchini]

For earlier discussions and context, see #3200.

Solution

Screens have been designed for displaying bound-with parent and child items on the instance record view in SearchWorks.

Bound-with - 3 child items with 3 different parents

https://www.figma.com/proto/W3GIkPyGLeO5xMojmkZuTX/SearchWorks?page-id=453%3A2788&type=design&node-id=453-4007&viewport=2247%2C883%2C0.5&t=QreQwn6LHRwmydST-9&scaling=min-zoom&starting-point-node-id=453%3A4007&show-proto-sidebar=1

Bound-with - 1 child item + a record with 3 child records, 2 parent records

(For the second record, click on the parent record, "The gases of swamp rice soils")
https://www.figma.com/proto/W3GIkPyGLeO5xMojmkZuTX/SearchWorks?page-id=453%3A2788&type=design&node-id=453-4106&viewport=2247%2C883%2C0.5&t=QreQwn6LHRwmydST-9&scaling=min-zoom&starting-point-node-id=453%3A4106&show-proto-sidebar=1

Screenshots follow with annotations

From first prototype:

From second prototype:

Design specifications

Display of both child and parent for the "At the library" cards, should come from FOLIO data and not the 590 field. The 590 field should continue to be displayed in the Bibliographic information > Notes.

Parent items follow this pattern:

Bound with:
[Child title] - linked to record detail page
[Child effective call number]

Child items follow this pattern:

Bound with and shelved by:
[Parent title] - linked to record detail page
[Parent effective call number]

If parent and child items have the same title and record view, then they are grouped by the parent.
If there are several children for a parent item:
Order by call number (sequential - I believe there's other work happening on this where it's descending if it's a date and ascending if it's a number)
Show one child record, with a button open a modal with the rest of the children listed in a table view.
If there is a record with the same title, display that; otherwise, display the first child.
NOTE use existing styles in most cases, we are not restyling the record view. If there's already a modal or table in our library, use that. Also, it wasn't intentional to reverse or change the truck icon next to available, I'm just using the font awesome truck and the attribute fa-flip isn't an option in Figma. I'm sure there are other cases of that. However, there are few purposeful design choices that I'm hoping to implement:
Grey-ish background color for the bound-with details is Accent Fog Light or #F4F4F4 from the Stanford Identity Guide.
"Bound with" or "Bound with and shelved by" headings are Primary Cardinal Red or #8C1515 from the Stanford Identity Guide, 14 pixels (base size) and medium weight or 500.

[dbranchini]

We discussed these designs with stakeholders on 3/4, and they are mostly in agreement with these designs. @saseestone took notes on the SearchWorks WC Google Doc.

Two small changes:
Change the heading for parent records from "Bound with and shelved by:" to "Bound and shelved with"
Remove the colon after the headings for child or parent bound items.

[dbranchini]

Here's a couple of simpler records - https://www.figma.com/proto/W3GIkPyGLeO5xMojmkZuTX/SearchWorks?page-id=453%3A2788&type=design&node-id=571-1162&viewport=-3029%2C1433%2C0.5&t=xeFckUlRIMyQ8v99-9&scaling=min-zoom&starting-point-node-id=571%3A1162&show-proto-sidebar=1.

The bridesmaid (parent)
To fear a painted devil (child)

The request button doesn't go anywhere for these, but you can use the item title link to toggle between the two record views.