feat(theme): ThemeShell canonical side-rail

Add ThemeShell.razor (regular component, not LayoutComponentBase) with
Product, Accent, Logo, Nav, RailFooter, and ChildContent parameters.
Accent uses nullable AccentStyle so the style attribute is entirely
absent when null. Composes BrandBar inside .side-rail, wraps page in
<main class="page">. Add ThemeShellTests.cs (4 tests: product/nav/body,
accent sets css var, no-accent emits no style, RailFooter). All 18 tests
green, 0 build warnings.
This commit is contained in:
Joseph Doherty
2026-06-01 04:53:52 -04:00
parent 75e58085d1
commit b09de9b777
2 changed files with 75 additions and 0 deletions
@@ -0,0 +1,43 @@
namespace ZB.MOM.WW.Theme.Tests;
public class ThemeShellTests : TestContext
{
[Fact]
public void Renders_product_nav_and_body()
{
var cut = RenderComponent<ThemeShell>(p => p
.Add(x => x.Product, "OtOpcUa")
.Add(x => x.Nav, (RenderFragment)(b => b.AddMarkupContent(0, "<a class='rail-link'>N</a>")))
.AddChildContent("<div class='pagebody'>BODY</div>"));
Assert.NotNull(cut.Find(".side-rail .brand"));
Assert.Contains("OtOpcUa", cut.Markup);
Assert.NotNull(cut.Find(".side-rail .rail-link"));
Assert.NotNull(cut.Find("main.page .pagebody"));
}
[Fact]
public void Accent_sets_css_variable_on_shell_root()
{
var cut = RenderComponent<ThemeShell>(p => p
.Add(x => x.Product, "ScadaBridge")
.Add(x => x.Accent, "#2f855a"));
var shell = cut.Find(".app-shell");
Assert.Contains("--accent: #2f855a", shell.GetAttribute("style"));
}
[Fact]
public void No_accent_emits_no_style()
{
var cut = RenderComponent<ThemeShell>(p => p.Add(x => x.Product, "MXAccess Gateway"));
Assert.False(cut.Find(".app-shell").HasAttribute("style"));
}
[Fact]
public void RailFooter_renders_when_supplied()
{
var cut = RenderComponent<ThemeShell>(p => p
.Add(x => x.Product, "OtOpcUa")
.Add(x => x.RailFooter, (RenderFragment)(b => b.AddMarkupContent(0, "<span class='sess'>S</span>"))));
Assert.NotNull(cut.Find(".rail-foot .sess"));
}
}