FP-1415: Callout Pattern with Fixes sans Plugin

[wesleyboar]

To Do

Details

• Schedule review with Design.
• Record Design feedback. — in author's local notes
• Evaluate whether dev review is blocked by Design feedback. — it's not
• Create ticket(s) for changes from Design. → FP-1464
• Create ticket to retire Callout plugin. → FP-1465

Overview

Support Callouts sans custom plugin: use existing plugins & markup-based CSS (#425).*

Also, fix clickable area (#423).

* This will let us retire and uninstall the callout plugin.

Issue

FP-1415 (and sub-tasks)

Demos

Demo	Notes
Manual Pattern Library	supports .c-callout via snippet
Automatic Pattern Library	test of ugly KSS software

Screenshots

Of Demos

Styles for all expected markup and image combinations.

Manual Pattern Library	Automatic Pattern Library
component variations DjangoCMS structure	component variations

Use Cases

Where images are pre-cropped before upload. (To test non-cropped images, see "Demos".)

Frontera Use Case (wide)	Frontera Use Case (narrow)	BrainMap Use Case (wide)	BrainMap Use Case (narrow)

Link Interaction

A callout is not required to be a link, but when it is, hover and activation UI should exist.

Default State	Hover State	Active State

Testing

0. Use remote server (CEP, Frontera, Brainmap) or Test CMS Changes locally.
1. Review/Create plugin combo's with class c-callout on the outermost elements.
2. Check that UI¹—on wide screen—matches wide Design UI (scroll down) (screenshot)
3. Check that UI¹—on narrow screen—matches narrow Design UI (scroll down) (screenshot).
4. 🆕 Check that existing Callout plugins still display.²
5. 🆕 Check that pages can still be published.²

🆕 New testing step added after PR was merged.

Footnotes

1. Any structures using an "Image" with a "Caption" may be skipped during testing. Design says we don't need to support caption for "Callout" (but it will be supported by a future pattern used in Newsletter and DesignSafe). ↩ ↩²

2. Tested by author on https://dev.cep.tacc.utexas.edu/design-system/ui-patterns and https://dev.fronteraweb.tacc.utexas.edu/system/. ↩ ↩²

[iamthatian]

LGTM! Tested locally & through the remote sites.

[wesleyboar]

I created two tickets:

• changes from Design: FP-1464
• retire Callout plugin: FP-1465

This PR may now be merged.