Support for pin reordering (PP-3116)

[tdilauro]

Description

Adds reordering of pinned libraries ("My Libraries") on the multi-library home page. It is behind the existing PALACE_CPW_FEATURE_PINNING feature flag.

• Reorder mode: a Reorder button next to the "My Libraries" heading when two or more pinned libraries are shown. In reorder mode it reads Done.
• In reorder mode, each pinned card shows:
  • a grip handle for mouse dragging;
  • stacked Move up and Move down buttons for keyboard use. At either end of the list the matching button is disabled but stays focusable.
• In reorder mode, the cards:
  • show the library name as plain text, so clicking a card does not open the library;
  • have no hover effect;
  • show no pin button.
• Moves:
  • the new order is saved to the browser right away;
  • moves are announced to screen readers ("Alpha Library moved to position 2 of 3.");
  • after a button move, focus stays on the pressed button.
• Hidden pins: moves go to the position of a target library by id. So pinned libraries that are stored but not shown (missing from the server list) do not throw moves off.
• Item landing page: shows the pinned order but offers no reordering.
• New dependencies: @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities.
• Translations: new strings in French, Italian, German, and Spanish. The reorder terms are added to the translation glossary.

Important

This branch is stacked on #203, which is, in turn, stacked on #202. Those must land before this PR is merged.

Motivation and Context

Patrons who pin several libraries may want their most used or preferred library(ies) first.

[Jira PP-3116]

How Has This Been Tested?

• Manually tested in local dev environment (in Chromium and Safari browsers).
• New tests for the new functionality.
• All tests / checks pass locally and in CI.

Checklist:

• N/A - I have updated the documentation accordingly.
• All new and existing tests passed.

[coveralls]

Coverage Report for CI Build 36524452026

Coverage decreased (-0.6%) to 26.324%

Details

• Coverage decreased (-0.6%) from the base build.
• Patch coverage: 60 uncovered changes across 5 files (7 of 67 lines covered, 10.45%).
• 2 coverage regressions across 1 file.

Uncovered Changes

File	Changed	Covered	%
src/components/PinnedLibraryList.tsx	36	1	2.78%
src/components/MultiLibraryHome.tsx	8	0	0.0%
src/components/PinnedLibraryReorder.tsx	12	4	33.33%
src/utils/pinnedLibraries.ts	7	0	0.0%
src/components/context/PinnedLibrariesContext.tsx	2	0	0.0%
Total (7 files)	67	7	10.45%

Coverage Regressions

2 previously-covered lines in 1 file lost coverage.

File	Lines Losing Coverage	Coverage
src/components/PinnedLibraryList.tsx	2	1.27%

---

Coverage Stats

Relevant Lines:	2475
Covered Lines:	764
Line Coverage:	30.87%
Relevant Branches:	1772
Covered Branches:	354
Branch Coverage:	19.98%
Branches in Coverage %:	Yes
Coverage Strength:	8.59 hits per line

---

💛 - Coveralls

[PoorBillyPilgrim]

While manually testing dragging with a mouse, I noticed that I could pull a card far off to the right or the bottom of the screen. A separate package (@dnd-kit/modifiers) provides modifiersrestrictToVerticalAxis and restrictToParentElement that limit the range of a drag.

The current behavior is not a bug, because the cards snap back to the list without issue. I'm only mentioning in case you didn't know these options were available and you might like this behavior better.

Suggested change

	sensors={dragSensors}
	sensors={dragSensors}
	// less restrictive
	modifiers={[restrictToVerticalAxis]}

Suggested change

	sensors={dragSensors}
	sensors={dragSensors}
	// more restrictive
	modifiers={[restrictToParentElement]}

[PoorBillyPilgrim]

This button fails the WebAIM Contrast Checker for this font size when it is focused: https://webaim.org/resources/contrastchecker/?fcolor=0576D3&bcolor=CDE8FE

The default variant and color for Button passes (but is a little more boring 🙃)

[PoorBillyPilgrim]

@tdilauro looks great! Approving with a few small comments to consider.