components/banner/banner.react.tsx

Functions

Imports

It imports components/status/status.react.tsx. No module of this repo imports it.

Source

1import type { ReactNode } from "react";
2import { Glyph, type GlyphName } from "../status/status.react.tsx";
3
4export type NoticeTone = "neutral" | "info" | "ok" | "warn" | "crit";
5
6// The glyph is a shape per tone, so the tone is never colour alone. Neutral takes the
7// notice square in the muted ink.
8const glyphFor: Record<NoticeTone, GlyphName> = { neutral: "info", info: "info", ok: "ok", warn: "warn", crit: "crit" };
9
10export interface BannerProps {
11  // A banner with no tone is a warning.
12  tone?: NoticeTone;
13  // An optional short title above the words: "Signed out".
14  title?: ReactNode;
15  // What happened and what is on screen now: "Could not refresh. Showing data from 4
16  // minutes ago."
17  children: ReactNode;
18  // The next step, usually a Try again button.
19  actions?: ReactNode;
20  // Shown as a Dismiss button when given. A banner about data that is still stale
21  // usually has none: it goes when the data is fresh again.
22  onDismiss?: () => void;
23}
24
25// A critical banner interrupts (role="alert"); every other one is polite (role="status").
26export function Banner({ tone = "warn", title, children, actions, onDismiss }: BannerProps) {
27  return (
28    <div className="cap-banner" data-tone={tone} role={tone === "crit" ? "alert" : "status"}>
29      <Glyph name={glyphFor[tone]} />
30      {title ? (
31        <div className="cap-banner-body">
32          <p className="cap-banner-title">{title}</p>
33          <p className="cap-banner-text">{children}</p>
34        </div>
35      ) : (
36        <p className="cap-banner-text">{children}</p>
37      )}
38      {actions || onDismiss ? (
39        <div className="cap-banner-actions">
40          {actions}
41          {onDismiss ? (
42            <button type="button" className="cap-btn" data-variant="quiet" onClick={onDismiss}>
43              Dismiss
44            </button>
45          ) : null}
46        </div>
47      ) : null}
48    </div>
49  );
50}
51
52export interface AlertProps {
53  // An alert with no tone is critical.
54  tone?: NoticeTone;
55  // An optional short title: "Could not save the schedule".
56  title?: ReactNode;
57  // Plain words, and what to do next: "Check the cron line and save again."
58  children: ReactNode;
59  action?: ReactNode;
60  // So the source can point at it with aria-describedby.
61  id?: string;
62}
63
64// An alert interrupts (role="alert"): it is added when the failure happens.
65export function Alert({ tone = "crit", title, children, action, id }: AlertProps) {
66  return (
67    <div className="cap-alert" data-tone={tone} role="alert" id={id}>
68      <Glyph name={glyphFor[tone]} />
69      {title ? (
70        <div className="cap-alert-body">
71          <p className="cap-alert-title">{title}</p>
72          <p className="cap-alert-text">{children}</p>
73        </div>
74      ) : (
75        <span className="cap-alert-text">{children}</span>
76      )}
77      {action ? <div className="cap-alert-action">{action}</div> : null}
78    </div>
79  );
80}