95 lines
5.9 KiB
Gherkin
95 lines
5.9 KiB
Gherkin
Feature: AuthShell and log-in screen conform to the design spec
|
|
|
|
As the maintainer of RenewCMS
|
|
I want AuthShell and LoginView built from the exact primitives docs/design/components.md
|
|
specifies — AppLogo, UPageCard's own title/description styling, the muted page background,
|
|
UForm with "Forgot password?" in the Password field's #hint slot, and the neutral-by-default,
|
|
red-on-error input border
|
|
So that the log-in screen (and every other AuthShell-based screen) matches the visual spec of
|
|
record instead of ad hoc markup that happens to look similar
|
|
|
|
Background:
|
|
Given AuthShell is the layout for every public route, per docs/design/routes.md
|
|
And AuthShell composes a UPageCard variant="outline" as the centered card, with AppLogo
|
|
rendered as the card's first element — left-aligned above the title/description block,
|
|
sharing the card's own 24px gap — not as a separate element centered outside/above the
|
|
card, per docs/design/components.md's AuthShell section and
|
|
docs/design/source/AuthCard.dc.html
|
|
And AppLogo is a reusable component (props include size) rendering the brand mark from
|
|
docs/design/source/brand/favicon.svg as inline SVG, not an <img>
|
|
And UPageCard's title renders through its own title slot as an h1 (tabindex="-1", so route
|
|
changes can move focus to it, per AuthShell's a11y spec), and its description renders
|
|
through UPageCard's description prop — neither is freeform markup in the default slot
|
|
And from the sm breakpoint up, the centered <main> sits on the muted page background
|
|
(--ui-bg-muted), the same canvas the rest of the app uses; below sm it sits on --ui-bg
|
|
instead, per docs/design/components.md's AuthShell "Responsive" line
|
|
And LoginView's form is a UForm wrapping the Username and Password UFormFields and the
|
|
submit button
|
|
And the Password UFormField's "Forgot password?" link renders through the field's #hint
|
|
slot, in the position the Auth board draws it — right-aligned on the label row — per
|
|
docs/design/source/RenewCMS Screens Auth.dc.html, group "Log in"
|
|
And every UInput on the page uses the neutral control-edge border (--ui-border-accented) by
|
|
default, and turns to the error edge (--ui-error) only when its field has an error, per
|
|
docs/design/components.md's Input section (":highlight bound to the field error") and
|
|
foundations.md's Borders and elevation
|
|
|
|
Scenario: AppLogo renders the brand mark as inline SVG, and theme-switches
|
|
Given a public screen renders inside AuthShell
|
|
When AuthShell mounts
|
|
Then an AppLogo renders as UPageCard's first element, inside the card, left-aligned, sharing
|
|
the card's 24px gap with the title/description block below it — not centered above the card
|
|
And the logo is inline SVG sourced from docs/design/source/brand/favicon.svg, at 32px, not as
|
|
an <img> tag
|
|
And the logo carries alt="RenewCMS" (role="img" aria-label="RenewCMS" on the SVG)
|
|
And the logo is not wrapped in a link, since there is nothing public to go back to
|
|
And the black square has no edge stroke in light mode or in dark mode, per
|
|
docs/design/source/AuthCard.dc.html's renderVals(), which computes the logo's edge as the
|
|
literal, non-theme-branched value "transparent"
|
|
|
|
Scenario: UPageCard's title is the page h1, and its description uses UPageCard's own styling
|
|
Given AuthShell renders with title "Log in" and description
|
|
"Welcome back. Log in to manage your articles."
|
|
When AuthShell mounts
|
|
Then the card is a UPageCard with variant="outline"
|
|
And UPageCard's title slot renders an h1 with tabindex="-1" containing "Log in"
|
|
And UPageCard's description prop is "Welcome back. Log in to manage your articles."
|
|
And neither the title nor the description is rendered as separate freeform markup inside
|
|
UPageCard's default slot
|
|
|
|
Scenario: The page sits on the muted background from sm up, and on the default background below sm
|
|
Given AuthShell renders any public screen at a viewport of sm or wider
|
|
When AuthShell mounts
|
|
Then the centered <main> uses the muted background token (--ui-bg-muted)
|
|
And the card keeps its border, is capped at 400px, and its top sits 12vh from the top
|
|
|
|
Scenario: Below sm, AuthShell drops the muted background, the card border and the card padding
|
|
Given AuthShell renders any public screen at a viewport below sm
|
|
When AuthShell mounts
|
|
Then the centered <main> uses the default background token (--ui-bg), not the muted one
|
|
And the card has no border and fills the screen with 20px padding
|
|
And the fields and buttons on the page render at the xl size
|
|
|
|
Scenario: The login form is a UForm
|
|
Given the user is on /login
|
|
When the login form renders
|
|
Then the form is a UForm, not a plain HTML <form>, wrapping the Username UFormField, the
|
|
Password UFormField and the submit button
|
|
|
|
Scenario: "Forgot password?" renders in the Password field's hint slot
|
|
Given the user is on /login
|
|
When the login form renders
|
|
Then the Password UFormField's "Forgot password?" link is rendered through the field's
|
|
#hint slot
|
|
And the Password field's label reads only "Password", with no link inside it
|
|
|
|
Scenario: Inputs are neutral by default and turn to the error edge only when their field has an error
|
|
Given the user is on /login with no validation errors yet
|
|
When the Username and Password UInput fields render
|
|
Then both use the neutral control-edge border (--ui-border-accented), with :highlight false
|
|
When the user submits with Username "ma" and Password empty (the Validation errors state,
|
|
per docs/design/screens/log-in.md)
|
|
Then the Username UInput's edge turns to the error color (--ui-error), with :highlight true,
|
|
alongside the message "Use at least 3 characters."
|
|
And the Password UInput's edge turns to the error color (--ui-error), with :highlight true,
|
|
alongside the message "Enter your password."
|