//! What a region shows when it is not showing its content.
//!
//! The fifth phase-B emitter. `makeover_layout::Readiness` grew from two states
//! to four at 0.12.0, and this is where the two new ones become markup: goingson
//! drew an empty state at 27 sites across 12 files and Balanced Breakfast at 9,
//! each app with its own class family, and the families had already drifted
//! into `empty-state--error` against `error-state` for the same fact.
//!
//! # Why one function for three states
//!
//! `Pending`, `Empty` and `Failed` are the same anatomy — a region-sized box
//! with a line of text in it — differing in what the text means and what colour
//! it takes. Three emitters would be three copies of a `
` and a `
`, and
//! the interesting thing about them is precisely the state, which the
//! description carries. `Ready` renders nothing here by construction: it is the
//! state that shows content, so there is no stand-in to draw.
//!
//! # The action, and why it arrives as markup
//!
//! Two of goingson's 27 empty states offer a way out — "No projects yet" with an
//! "Add your first project" button under it. A button is an address, and no
//! crate in this family names one. So it arrives through [`Markup`], the
//! existing named hole in the escaping, the same way a field's trailing block
//! does. The caller states that what it is passing is trusted; nothing here can
//! check that for them.
use crate::form::{Markup, escape};
use crate::{Emit, class};
use makeover_layout::{Intent, Readiness, Tone};
use std::fmt::Write as _;
/// A region's stand-in, or nothing at all when the region has its content.
///
/// ```
/// use makeover_layout::Readiness;
/// use makeover_webview::{Emit, placeholder::placeholder_html};
///
/// let html = placeholder_html(Readiness::Empty, "No projects yet", None, &Emit::default());
/// assert!(html.contains(r#"data-state="empty""#));
/// assert!(html.contains("No projects yet"));
///
/// // The one state that draws its own content draws no stand-in.
/// assert!(placeholder_html(Readiness::Ready, "unused", None, &Emit::default()).is_empty());
/// ```
///
/// `role="status"` rather than `alert` for everything but a failure, on the same
/// reasoning `Node::Notice` uses: an empty list is not an interruption. A
/// failure is, because the user is looking at a region that should have had
/// something in it and nothing else on the page will say so.
#[must_use]
pub fn placeholder_html(
state: Readiness,
message: &str,
action: Option>,
opts: &Emit,
) -> String {
if state.shows_content() {
return String::new();
}
let name = state_name(state);
let mut html = format!(
"
{}
",
class("placeholder-text", opts),
escape(message)
);
if let Some(Markup(markup)) = action {
let _ = write!(
html,
"
");
html
}
/// The `data-state` value for a state.
///
/// A wildcard rather than a total match, because `Readiness` is
/// `#[non_exhaustive]` as of 0.12.0. A state added upstream draws the plain
/// stand-in with no state of its own, which is a box rendering without its
/// colour rather than a build that stops.
fn state_name(state: Readiness) -> &'static str {
match state {
Readiness::Ready => "ready",
Readiness::Pending => "pending",
Readiness::Empty => "empty",
Readiness::Failed => "failed",
_ => "unknown",
}
}
#[cfg(test)]
mod tests {
use super::*;
#[test]
fn the_state_that_shows_content_draws_no_stand_in() {
// Not an empty box: nothing at all, or every ready region gains an
// element that pushes its content down.
assert!(placeholder_html(Readiness::Ready, "x", None, &Emit::default()).is_empty());
}
#[test]
fn an_empty_region_is_not_announced_as_a_fault() {
// An empty list is the normal state of a new install. `role="alert"`
// interrupts a screen reader mid-sentence, which is the wrong thing to
// do about "no projects yet".
let empty = placeholder_html(Readiness::Empty, "No projects yet", None, &Emit::default());
assert!(empty.contains(r#"role="status""#));
assert!(!empty.contains("data-tone"));
let failed = placeholder_html(
Readiness::Failed,
"Failed to load events",
None,
&Emit::default(),
);
assert!(failed.contains(r#"role="alert""#));
assert!(failed.contains(r#"data-tone="danger""#));
}
#[test]
fn the_message_is_escaped_and_the_action_is_not() {
// The asymmetry is the whole point of `Markup`, and it is the same one
// a field's trailing block has: text from the app is escaped, and a
// block the caller has stated is markup is passed through.
let html = placeholder_html(
Readiness::Empty,
"No projects yet",
Some(Markup("")),
&Emit::default(),
);
assert!(html.contains("<b>"));
assert!(!html.contains(""));
assert!(html.contains(""));
}
#[test]
fn a_state_with_no_action_emits_no_action_container() {
// 25 of goingson's 27 empty states have no way out. An empty container
// at each of them is a box the stylesheet has to know to collapse.
let html = placeholder_html(Readiness::Empty, "Nothing here", None, &Emit::default());
assert!(!html.contains("placeholder-action"));
}
#[test]
fn pending_draws_the_same_anatomy_as_the_other_two() {
// Three states, one box. What differs is what the text means, which is
// what the description carries.
let html = placeholder_html(Readiness::Pending, "Loading", None, &Emit::default());
assert!(html.contains(r#"data-state="pending""#));
assert!(html.contains("Loading"));
}
#[test]
fn the_prefix_reaches_every_class() {
let opts = Emit {
class_prefix: "mo-",
..Emit::default()
};
let html = placeholder_html(
Readiness::Empty,
"None",
Some(Markup("")),
&opts,
);
assert!(html.contains(r#"class="mo-placeholder""#));
assert!(html.contains(r#"class="mo-placeholder-text""#));
assert!(html.contains(r#"class="mo-placeholder-action""#));
}
}