style: emphasize authoring phase visuals
This commit is contained in:
@@ -346,6 +346,10 @@ describe("SceneBody", () => {
|
|||||||
expect(composition).toHaveAttribute("data-active-stage", "diagnose");
|
expect(composition).toHaveAttribute("data-active-stage", "diagnose");
|
||||||
expect(composition).toHaveAttribute("data-presentation-surface", "editorial");
|
expect(composition).toHaveAttribute("data-presentation-surface", "editorial");
|
||||||
expect(screen.getByRole("article", { name: /validate product evidence/i })).toBeInTheDocument();
|
expect(screen.getByRole("article", { name: /validate product evidence/i })).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole("region", { name: /validation repair evidence/i })).toHaveAttribute(
|
||||||
|
"data-authoring-focus",
|
||||||
|
"diagnose",
|
||||||
|
);
|
||||||
expect(screen.getByText("workflow.draft_workspaces.validate")).toBeInTheDocument();
|
expect(screen.getByText("workflow.draft_workspaces.validate")).toBeInTheDocument();
|
||||||
const loop = screen.getByLabelText("authoring phase loop");
|
const loop = screen.getByLabelText("authoring phase loop");
|
||||||
expect(loop).not.toHaveAttribute("data-readable-surface", "dark");
|
expect(loop).not.toHaveAttribute("data-readable-surface", "dark");
|
||||||
@@ -380,6 +384,27 @@ describe("SceneBody", () => {
|
|||||||
expect(within(rail).getByRole("button", { name: /Hosted automation future-work/i })).toBeInTheDocument();
|
expect(within(rail).getByRole("button", { name: /Hosted automation future-work/i })).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("gives the repair beat its own correction visual", () => {
|
||||||
|
const location: PresentationLocation = { kind: "main", sceneId: "authoring", beatId: "repair", focusPath: [] };
|
||||||
|
render(
|
||||||
|
<SceneBody
|
||||||
|
location={location}
|
||||||
|
demo={demo}
|
||||||
|
selectedNodeId={null}
|
||||||
|
selectNode={noop}
|
||||||
|
openEvidence={noop}
|
||||||
|
openDiscussion={noop}
|
||||||
|
onFocusPathChange={noop}
|
||||||
|
motionDisabled={false}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getByRole("region", { name: /validation repair evidence/i })).toHaveAttribute(
|
||||||
|
"data-authoring-focus",
|
||||||
|
"repair",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
it("keeps discussion rails out of workflow proof scenes", () => {
|
it("keeps discussion rails out of workflow proof scenes", () => {
|
||||||
const location: PresentationLocation = { kind: "main", sceneId: "run-from-deployment", beatId: "graph", focusPath: [] };
|
const location: PresentationLocation = { kind: "main", sceneId: "run-from-deployment", beatId: "graph", focusPath: [] };
|
||||||
render(
|
render(
|
||||||
|
|||||||
@@ -278,7 +278,10 @@ const AuthoringScene = ({ scene, beat }: { scene: SceneDefinition; beat: SceneBe
|
|||||||
<strong>{primaryCommand.title}</strong>
|
<strong>{primaryCommand.title}</strong>
|
||||||
<p>{projection.summary}</p>
|
<p>{projection.summary}</p>
|
||||||
</header>
|
</header>
|
||||||
<AuthoringPhaseVisual projection={projection} />
|
<AuthoringPhaseVisual
|
||||||
|
projection={projection}
|
||||||
|
focus={beat.id === "diagnose" || beat.id === "repair" ? beat.id : "full"}
|
||||||
|
/>
|
||||||
</article>
|
</article>
|
||||||
<div
|
<div
|
||||||
className="scene-body__authoring-loop"
|
className="scene-body__authoring-loop"
|
||||||
|
|||||||
@@ -43,6 +43,14 @@ describe("AuthoringPhaseVisual", () => {
|
|||||||
expect(screen.getByText(/valid draft/i)).toBeInTheDocument();
|
expect(screen.getByText(/valid draft/i)).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it.each(["diagnose", "repair"] as const)("marks the %s authoring focus", (focus) => {
|
||||||
|
render(<AuthoringPhaseVisual projection={projectPreparedAuthoringPhase("validate")} focus={focus} />);
|
||||||
|
expect(screen.getByRole("region", { name: /validation repair evidence/i })).toHaveAttribute(
|
||||||
|
"data-authoring-focus",
|
||||||
|
focus,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
it("shows immutable artifact identity and version", () => {
|
it("shows immutable artifact identity and version", () => {
|
||||||
render(<AuthoringPhaseVisual projection={projectPreparedAuthoringPhase("artifact")} />);
|
render(<AuthoringPhaseVisual projection={projectPreparedAuthoringPhase("artifact")} />);
|
||||||
expect(screen.getByText("lda_report_case_study")).toBeInTheDocument();
|
expect(screen.getByText("lda_report_case_study")).toBeInTheDocument();
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ import type { AuthoringPhaseProjection } from "./authoring-projection.js";
|
|||||||
|
|
||||||
type AuthoringPhaseVisualProps = {
|
type AuthoringPhaseVisualProps = {
|
||||||
readonly projection: AuthoringPhaseProjection;
|
readonly projection: AuthoringPhaseProjection;
|
||||||
|
readonly focus?: "full" | "diagnose" | "repair";
|
||||||
};
|
};
|
||||||
|
|
||||||
const InventoryVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["visual"], { kind: "inventory" }> }) => (
|
const InventoryVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["visual"], { kind: "inventory" }> }) => (
|
||||||
@@ -40,10 +41,22 @@ const GraphVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["vis
|
|||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
||||||
const RepairVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["visual"], { kind: "repair" }> }) => (
|
const RepairVisual = ({
|
||||||
<section className="authoring-visual authoring-visual--repair" aria-label="validation repair evidence" data-presentation-surface="editorial" data-visual-role="authoring-phase">
|
visual,
|
||||||
|
focus,
|
||||||
|
}: {
|
||||||
|
readonly visual: Extract<AuthoringPhaseProjection["visual"], { kind: "repair" }>;
|
||||||
|
readonly focus: "full" | "diagnose" | "repair";
|
||||||
|
}) => (
|
||||||
|
<section
|
||||||
|
className="authoring-visual authoring-visual--repair"
|
||||||
|
aria-label="validation repair evidence"
|
||||||
|
data-presentation-surface="editorial"
|
||||||
|
data-visual-role="authoring-phase"
|
||||||
|
data-authoring-focus={focus}
|
||||||
|
>
|
||||||
<div className="authoring-repair__diagnostic"><AlertTriangle aria-hidden="true" /><span>Diagnostic</span><strong>{visual.diagnostic}</strong></div>
|
<div className="authoring-repair__diagnostic"><AlertTriangle aria-hidden="true" /><span>Diagnostic</span><strong>{visual.diagnostic}</strong></div>
|
||||||
<ArrowRight aria-hidden="true" />
|
<ArrowRight className="authoring-repair__connector" aria-hidden="true" />
|
||||||
<div className="authoring-repair__correction"><Link2 aria-hidden="true" /><span>Repair</span><code>{visual.correction}</code></div>
|
<div className="authoring-repair__correction"><Link2 aria-hidden="true" /><span>Repair</span><code>{visual.correction}</code></div>
|
||||||
<div className="authoring-repair__status"><CheckCircle2 aria-hidden="true" /><strong>{visual.status}</strong></div>
|
<div className="authoring-repair__status"><CheckCircle2 aria-hidden="true" /><strong>{visual.status}</strong></div>
|
||||||
</section>
|
</section>
|
||||||
@@ -69,11 +82,11 @@ const BindingsVisual = ({ visual }: { visual: Extract<AuthoringPhaseProjection["
|
|||||||
);
|
);
|
||||||
|
|
||||||
/** Renders the factual product artifact appropriate to one authoring phase. */
|
/** Renders the factual product artifact appropriate to one authoring phase. */
|
||||||
export const AuthoringPhaseVisual = ({ projection }: AuthoringPhaseVisualProps) => {
|
export const AuthoringPhaseVisual = ({ projection, focus = "full" }: AuthoringPhaseVisualProps) => {
|
||||||
switch (projection.visual.kind) {
|
switch (projection.visual.kind) {
|
||||||
case "inventory": return <InventoryVisual visual={projection.visual} />;
|
case "inventory": return <InventoryVisual visual={projection.visual} />;
|
||||||
case "graph": return <GraphVisual visual={projection.visual} />;
|
case "graph": return <GraphVisual visual={projection.visual} />;
|
||||||
case "repair": return <RepairVisual visual={projection.visual} />;
|
case "repair": return <RepairVisual visual={projection.visual} focus={focus} />;
|
||||||
case "artifact": return <ArtifactVisual visual={projection.visual} />;
|
case "artifact": return <ArtifactVisual visual={projection.visual} />;
|
||||||
case "bindings": return <BindingsVisual visual={projection.visual} />;
|
case "bindings": return <BindingsVisual visual={projection.visual} />;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1621,7 +1621,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.scene-body__authoring-node[data-authoring-active="true"] {
|
.scene-body__authoring-node[data-authoring-active="true"] {
|
||||||
transform: translateY(-0.35rem);
|
z-index: 2;
|
||||||
|
transform: translateY(-0.35rem) scale(1.04);
|
||||||
border-color: var(--accent-cyan);
|
border-color: var(--accent-cyan);
|
||||||
background: color-mix(in oklch, var(--accent-cyan) 8%, var(--authoring-paper, white));
|
background: color-mix(in oklch, var(--accent-cyan) 8%, var(--authoring-paper, white));
|
||||||
}
|
}
|
||||||
@@ -1662,7 +1663,7 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 1px solid var(--authoring-rule, color-mix(in oklch, var(--authoring-muted) 32%, transparent));
|
border: 1px solid var(--authoring-rule, color-mix(in oklch, var(--authoring-muted) 32%, transparent));
|
||||||
border-radius: 0.2rem;
|
border-radius: 0.2rem;
|
||||||
padding: 0.8rem 1rem;
|
padding: 1rem 1.15rem;
|
||||||
background: var(--authoring-paper, var(--color-editorial-paper, oklch(0.975 0.012 82)));
|
background: var(--authoring-paper, var(--color-editorial-paper, oklch(0.975 0.012 82)));
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1708,8 +1709,48 @@
|
|||||||
|
|
||||||
.scene-body__authoring-evidence .authoring-repair__diagnostic,
|
.scene-body__authoring-evidence .authoring-repair__diagnostic,
|
||||||
.scene-body__authoring-evidence .authoring-repair__correction {
|
.scene-body__authoring-evidence .authoring-repair__correction {
|
||||||
min-height: 6.5rem;
|
min-height: 8rem;
|
||||||
padding: 0.75rem;
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-body__authoring-evidence .authoring-visual--inventory,
|
||||||
|
.scene-body__authoring-evidence .authoring-visual--graph,
|
||||||
|
.scene-body__authoring-evidence .authoring-visual--repair {
|
||||||
|
min-height: 15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-body__authoring-evidence .authoring-visual--graph .authoring-graph__node {
|
||||||
|
min-width: 12rem;
|
||||||
|
min-height: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="diagnose"] {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__connector,
|
||||||
|
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__correction,
|
||||||
|
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__status {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="diagnose"] .authoring-repair__diagnostic {
|
||||||
|
grid-column: 1;
|
||||||
|
min-height: 12rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="repair"] {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__diagnostic,
|
||||||
|
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__connector {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-body__authoring-evidence .authoring-visual--repair[data-authoring-focus="repair"] .authoring-repair__correction {
|
||||||
|
grid-column: 1;
|
||||||
|
min-height: 12rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scene-body__authoring-composition .scene-body__authoring-loop {
|
.scene-body__authoring-composition .scene-body__authoring-loop {
|
||||||
|
|||||||
Reference in New Issue
Block a user