release: WRNexusJS 0.5.12
This commit is contained in:
@@ -0,0 +1,76 @@
|
||||
page ExistingComponentsShowcase {
|
||||
layout = "none"
|
||||
|
||||
state cards = [
|
||||
{
|
||||
title: "Citizen services",
|
||||
description: "Access applications, certificates and verification services.",
|
||||
icon: "icon-[lucide--layout-grid]",
|
||||
href: "/services"
|
||||
},
|
||||
{
|
||||
title: "Public safety",
|
||||
description: "Read verified safety information and important advisories.",
|
||||
icon: "icon-[lucide--shield-check]",
|
||||
href: "/safety"
|
||||
}
|
||||
]
|
||||
|
||||
state tabs = [
|
||||
{ value: "overview", label: "Overview", title: "Overview", description: "A complete view of the redesigned component system." },
|
||||
{ value: "accessibility", label: "Accessibility", title: "Accessible by default", description: "Keyboard, focus and semantic behavior remain part of every component." }
|
||||
]
|
||||
|
||||
view {
|
||||
<PublicPageShell fullWidth="true">
|
||||
<Section spacing="lg">
|
||||
<SectionHeader
|
||||
eyebrow="WRNexus UI"
|
||||
title="Existing component redesign"
|
||||
description="Replacement implementations preserve the 0.5.11 public contracts while improving visual consistency."
|
||||
headingLevel="1"
|
||||
size="lg"
|
||||
/>
|
||||
|
||||
<Grid columns="3" gap="md" class="mt-10">
|
||||
{#each cards as item}
|
||||
<Card
|
||||
title='{item.title}'
|
||||
description='{item.description}'
|
||||
actionLabel="Open"
|
||||
actionHref='{item.href}'
|
||||
hover="lift"
|
||||
>
|
||||
<div class="mb-5 flex size-12 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]">
|
||||
<span class='{item.icon + " size-6"}' aria-hidden="true"></span>
|
||||
</div>
|
||||
</Card>
|
||||
{/each}
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<Section variant="soft" spacing="lg" borderTop="true" borderBottom="true">
|
||||
<Columns columns="2" gap="lg">
|
||||
<SearchBox
|
||||
label="Search services"
|
||||
name="q"
|
||||
placeholder="Search services, notices or offices"
|
||||
/>
|
||||
|
||||
<Map
|
||||
title="Service locations"
|
||||
description="Use the default slot to mount the selected map provider."
|
||||
items='{[
|
||||
{ label: "Head office", x: 30, y: 35 },
|
||||
{ label: "Service centre", x: 65, y: 55 }
|
||||
]}'
|
||||
/>
|
||||
</Columns>
|
||||
</Section>
|
||||
|
||||
<Section spacing="lg">
|
||||
<Tabs items='{tabs}' active="overview" />
|
||||
</Section>
|
||||
</PublicPageShell>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
page NewComponentsShowcase {
|
||||
layout = "none"
|
||||
|
||||
state features = [
|
||||
{
|
||||
title: "Reusable sections",
|
||||
description: "Keep page spacing and surfaces consistent across applications.",
|
||||
icon: "icon-[lucide--panels-top-left]",
|
||||
href: "#sections"
|
||||
},
|
||||
{
|
||||
title: "Controlled cards",
|
||||
description: "Compose capabilities without duplicating card styles.",
|
||||
icon: "icon-[lucide--layout-grid]",
|
||||
href: "#cards"
|
||||
},
|
||||
{
|
||||
title: "Accessible actions",
|
||||
description: "Shared buttons, links and focus states remain predictable.",
|
||||
icon: "icon-[lucide--mouse-pointer-click]",
|
||||
href: "#actions"
|
||||
}
|
||||
]
|
||||
|
||||
state metrics = [
|
||||
{ label: "Existing redesigns", value: "15", icon: "icon-[lucide--refresh-cw]" },
|
||||
{ label: "New composites", value: "18", icon: "icon-[lucide--blocks]" },
|
||||
{ label: "Total files", value: "33", icon: "icon-[lucide--files]" },
|
||||
{ label: "Theme support", value: "100", suffix: "%", icon: "icon-[lucide--palette]" }
|
||||
]
|
||||
|
||||
view {
|
||||
<PublicPageShell fullWidth="true">
|
||||
<AnnouncementBar
|
||||
badge="New"
|
||||
message="WRNexus UI composite component release"
|
||||
description="The package adds reusable marketing and public-page components."
|
||||
actionLabel="Review components"
|
||||
actionHref="#components"
|
||||
dismissible="true"
|
||||
/>
|
||||
|
||||
<SplitHero
|
||||
eyebrow="@wrnexus/ui 0.5.12"
|
||||
title="A complete reusable"
|
||||
highlight="page-building system"
|
||||
description="Build PMS, WRNexus and WorkRoot pages from shared, theme-aware components instead of repeated page markup."
|
||||
primaryLabel="Browse components"
|
||||
primaryHref="#components"
|
||||
primaryIcon="icon-[lucide--blocks]"
|
||||
secondaryLabel="Read migration guide"
|
||||
secondaryHref="#migration"
|
||||
>
|
||||
<Card
|
||||
data-slot="visual"
|
||||
title="Component release"
|
||||
description="15 redesigned primitives and 18 new composites."
|
||||
variant="soft"
|
||||
size="lg"
|
||||
>
|
||||
<MetricGrid items='{metrics}' columns="2" tabletColumns="2" />
|
||||
</Card>
|
||||
</SplitHero>
|
||||
|
||||
<Section id="components" variant="soft" spacing="lg" borderTop="true" borderBottom="true">
|
||||
<MarketingSectionHeader
|
||||
eyebrow="Component system"
|
||||
title="Design once and reuse everywhere"
|
||||
description="The new composites are application-independent and remain controlled by the WRNexus theme tokens."
|
||||
actionLabel="View all documentation"
|
||||
actionHref="/components"
|
||||
/>
|
||||
|
||||
<FeatureGrid columns="3" tabletColumns="2" gap="lg" class="mt-10">
|
||||
{#each features as feature}
|
||||
<FeatureIconCard
|
||||
icon='{feature.icon}'
|
||||
title='{feature.title}'
|
||||
description='{feature.description}'
|
||||
href='{feature.href}'
|
||||
/>
|
||||
{/each}
|
||||
</FeatureGrid>
|
||||
</Section>
|
||||
|
||||
<StatsBar items='{metrics}' columns="4" />
|
||||
|
||||
<CTASection
|
||||
eyebrow="Ready for PMS"
|
||||
title="Publish the UI package, then rebuild the Police Management System"
|
||||
description="Pages can now focus on police-domain data while the UI package owns shared layout and visual behavior."
|
||||
primaryLabel="Publish release"
|
||||
primaryHref="#publish"
|
||||
primaryIcon="icon-[lucide--package-check]"
|
||||
secondaryLabel="Open checklist"
|
||||
secondaryHref="#checklist"
|
||||
variant="gradient"
|
||||
/>
|
||||
|
||||
<BackToTop threshold="400" showProgress="true" />
|
||||
</PublicPageShell>
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user