39b95c2ede
Pure `nix fmt` output from the commit before this one — no hand edits. 203 files: 52 md, 42 tsx, 32 js, 32 css, 21 ts, 13 html, 8 json, 3 mjs. Reproduce with `nix develop -c nix fmt` on the parent commit; the result should be byte-identical to this tree. None of the 13 `.prettierignore` entries appears here — verified by intersecting the changed-file list against the ignore file, with a control proving the intersection finds a match when one exists.
44 lines
1.8 KiB
TypeScript
44 lines
1.8 KiB
TypeScript
// WarnBanner.tsx — <WarnBanner>, the Preact-component successor to the
|
|
// shadow-DOM <hive-warn> custom element (../hive-warn/hive-warn.js).
|
|
// Same three-tier visual language (mara, on `hive-warn`'s own review:
|
|
// "there should be distinction between info, warning, error — all
|
|
// warnings should be styled identically") — built as a plain Preact
|
|
// component instead so it composes cleanly wherever this package's other
|
|
// shared components do (JobqRollup, JobqGraph, ApiErrorPanel), rather
|
|
// than needing a shadow root + CSS-as-text build step that only resolves
|
|
// under one of the two consuming packages' esbuild configs. `ApiErrorPanel`
|
|
// is the first consumer — compose from this instead of duplicating the
|
|
// banner's own border/colour/pulse rules locally.
|
|
//
|
|
// `level` defaults to 'warning', matching `hive-warn.js`'s own default.
|
|
// Only `error` pulses — an active incident, not a standing caveat, same
|
|
// rule `hive-warn.css`'s own comment states.
|
|
import type { ComponentChildren } from "preact";
|
|
import "./WarnBanner.css";
|
|
|
|
export type WarnLevel = "info" | "warning" | "error";
|
|
|
|
export interface WarnBannerProps {
|
|
level?: WarnLevel;
|
|
// Passed straight through to the root element's `class` list —
|
|
// for a caller-specific concern the banner itself has no opinion on
|
|
// (e.g. `ApiErrorPanel` adding a top margin for the context it usually
|
|
// sits in), not for re-styling the banner's own look.
|
|
class?: string;
|
|
children?: ComponentChildren;
|
|
}
|
|
|
|
export function WarnBanner({
|
|
level = "warning",
|
|
class: extraClass,
|
|
children,
|
|
}: WarnBannerProps) {
|
|
const classes = ["warn-banner", `warn-banner-${level}`, extraClass]
|
|
.filter(Boolean)
|
|
.join(" ");
|
|
return (
|
|
<div class={classes} role={level === "error" ? "alert" : undefined}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|