@globalpayments-private/gpds-pattern-web 0.0.0-stage → 0.1.0-pr.6.g07fbefe

package/dist/collection/components/uds-pattern-login-card/slimmers/renderers/login-step-renderer.js

@@ -0,0 +1,192 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from "@stencil/core";
+import { UdsSlimmer, InjectSlimmer, MapToComponentField } from "../../../../slimmer";
+import { LoginFieldRenderer } from "./login-field-renderer";
+/**
+ * Renders the body of whichever step the workflow is on.
+ *
+ * ## Why a renderer slimmer
+ *
+ * This is the same Slimmer mechanism the stateful layer uses, pointed at
+ * rendering: one class, one responsibility, bound to the component by field
+ * mapping rather than by parameter passing. Vega applies the convention the
+ * same way — `slimmers/renderers/<name>-renderer.tsx`, a class ending in
+ * `Renderer`, exposing `render()` — so a reader moving between the design
+ * system and the pattern library meets one structure, not two.
+ *
+ * The gain over the plain `view/` modules this replaces is the binding. A free
+ * function has to be handed everything it needs on each call, so its signature
+ * grows with its appetite and callers thread arguments through layers that do
+ * not use them. `@MapToComponentField()` reaches the component's `viewModel`
+ * and `handlers` directly, and types them by indexing the component class, so
+ * the renderer cannot drift out of step with what the component actually
+ * exposes — rename the getter and this stops compiling.
+ *
+ * Renderers only read. Every mutation goes back through `handlers`, into the
+ * workflow slimmer, and through the control strategy's checkpoints.
+ */
+export class LoginStepRenderer extends UdsSlimmer {
+    constructor() {
+        super();
+        this.fields = new LoginFieldRenderer();
+    }
+    render() {
+        const vm = this.viewModel;
+        switch (vm.step) {
+            case 'identifier':
+                return this.identifierStep(vm);
+            case 'password':
+                return this.passwordStep(vm);
+            case 'mfa-method':
+                return this.mfaMethodStep(vm);
+            case 'otp':
+                return this.otpStep(vm);
+            case 'forgot-password':
+            case 'forgot-username':
+                return this.forgotStep(vm);
+            case 'reset-password':
+                return this.resetPasswordStep(vm);
+            case 'sign-up':
+                return this.signUpStep(vm);
+            default:
+                return [];
+        }
+    }
+    identifierStep(vm) {
+        const { copy } = vm;
+        return [
+            this.fields.textField({
+                name: 'identifier',
+                label: copy.identifierFieldLabel,
+                type: 'email',
+                autocomplete: 'username',
+            }),
+            this.fields.checkbox('rememberIdentifier', copy.rememberIdentifier),
+            this.fields.submit(copy.continue),
+            h("div", { class: "prose" }, h("p", { class: "prose__lead" }, copy.troubleSigningInPrompt), h("p", null, "Follow the steps in \u201C", this.fields.link(copy.troubleSigningIn, this.handlers.onAction('trouble-signing-in')), "\u201D."), vm.can.signUp && (h("p", null, copy.noAccountPrompt, " ", this.fields.link(copy.createAccount, this.handlers.onNavigate('sign-up'))))),
+        ];
+    }
+    passwordStep(vm) {
+        const { copy, can } = vm;
+        const recovery = [];
+        if (can.reset) {
+            recovery.push(this.fields.link(copy.forgotPassword, this.handlers.onNavigate('forgot-password')));
+        }
+        if (can.username) {
+            recovery.push(this.fields.link(copy.forgotUsername, this.handlers.onNavigate('forgot-username')));
+        }
+        return [
+            // `vega-input` carries its own password reveal control, so the card no
+            // longer renders — or tracks the state for — an eye toggle of its own.
+            this.fields.textField({
+                name: 'password',
+                label: copy.passwordFieldLabel,
+                type: 'password',
+                autocomplete: 'current-password',
+            }),
+            ...(recovery.length ? [h("div", { class: "inline-links" }, recovery)] : []),
+            this.fields.submit(copy.continue),
+        ];
+    }
+    mfaMethodStep(vm) {
+        const { copy } = vm;
+        return [
+            this.fields.methodGroup(vm.methods, copy.mfaMethodHeading),
+            this.fields.submit(copy.continue),
+        ];
+    }
+    otpStep(vm) {
+        const { copy } = vm;
+        const tail = [];
+        if (vm.methods.length > 1) {
+            tail.push(this.fields.link(copy.changeMfaMethod, this.handlers.onNavigate('mfa-method')));
+        }
+        if (vm.can.resend) {
+            tail.push(vm.isResendThrottled ? (
+            // Rendered as text rather than a disabled link: a countdown is a
+            // status, and announcing it politely is more useful than offering a
+            // dead target.
+            h("span", { class: "countdown", "aria-live": "polite" }, vm.resendCountdownText)) : (this.fields.link(copy.resendCode, this.handlers.onResend)));
+        }
+        return [
+            // `vega-input-passcode` owns the whole multi-box entry: per-character
+            // focus advance, backspace retreat, paste distribution and masking. That
+            // replaces the card's own OTP slimmer outright.
+            this.fields.passcodeField(),
+            this.fields.submit(copy.otpSubmit),
+            ...(tail.length
+                ? [
+                    h("div", { class: "prose" }, h("p", null, copy.changeMfaMethodPrompt), h("p", { class: "inline-links" }, tail)),
+                ]
+                : []),
+        ];
+    }
+    forgotStep(vm) {
+        const { copy } = vm;
+        return [
+            this.fields.textField({
+                name: vm.step === 'forgot-password' ? 'identifier' : 'email',
+                label: copy.identifierFieldLabel,
+                type: 'email',
+                autocomplete: 'username',
+            }),
+            this.fields.submit(copy.continue),
+            h("p", { class: "prose" }, this.fields.link(copy.back, this.handlers.onNavigate('identifier'))),
+        ];
+    }
+    resetPasswordStep(vm) {
+        const { copy } = vm;
+        return [
+            this.fields.textField({
+                name: 'password',
+                label: copy.newPasswordFieldLabel,
+                type: 'password',
+                autocomplete: 'new-password',
+            }),
+            // The pairing is checked on the field that is wrong, inside the same
+            // `vega-form` gate as every other rule — not as a pre-submit test
+            // reported through the card-level banner.
+            this.fields.textField({
+                name: 'confirmPassword',
+                label: copy.confirmPasswordFieldLabel,
+                type: 'password',
+                autocomplete: 'new-password',
+                mustMatch: 'password',
+            }),
+            this.fields.submit(copy.continue),
+        ];
+    }
+    signUpStep(vm) {
+        const { copy } = vm;
+        return [
+            this.fields.textField({ name: 'firstName', label: copy.firstNameFieldLabel, autocomplete: 'given-name' }),
+            this.fields.textField({ name: 'lastName', label: copy.lastNameFieldLabel, autocomplete: 'family-name' }),
+            this.fields.textField({
+                name: 'identifier',
+                label: copy.identifierFieldLabel,
+                type: 'email',
+                autocomplete: 'email',
+            }),
+            this.fields.submit(copy.signUpSubmit),
+            h("p", { class: "prose" }, copy.haveAccountPrompt, " ", this.fields.link(copy.signIn, this.handlers.onNavigate('identifier'))),
+        ];
+    }
+}
+__decorate([
+    InjectSlimmer()
+], LoginStepRenderer.prototype, "fields", void 0);
+__decorate([
+    MapToComponentField()
+], LoginStepRenderer.prototype, "viewModel", void 0);
+__decorate([
+    MapToComponentField()
+], LoginStepRenderer.prototype, "handlers", void 0);

package/dist/collection/components/uds-pattern-login-card/slimmers/resend-throttle.slimmer.js

@@ -0,0 +1,65 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UdsSlimmer, MapToComponentField, MapToComponentMethod } from "../../../slimmer";
+/**
+ * The resend throttle and its countdown.
+ *
+ * Small, but exactly the kind of thing that disappears into a large component
+ * and then gets subtly broken: an interval that must be cleared on disconnect,
+ * and a tick that must drive a re-render.
+ */
+export class ResendThrottleSlimmer extends UdsSlimmer {
+    constructor() {
+        super();
+    }
+    /** Begins a throttle window. A missing or non-positive duration clears it. */
+    start(resendAfterMs) {
+        this.stop();
+        if (!resendAfterMs || resendAfterMs <= 0) {
+            this.resendAt = undefined;
+            return;
+        }
+        this.resendAt = Date.now() + resendAfterMs;
+        this.nowTick = Date.now();
+        this.timer = setInterval(() => {
+            this.nowTick = Date.now();
+            if (this.resendAt !== undefined && this.nowTick >= this.resendAt) {
+                this.stop();
+                this.resendAt = undefined;
+            }
+        }, 1000);
+    }
+    stop() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = undefined;
+        }
+    }
+    /** Seconds left on the throttle; zero when resending is allowed. */
+    get secondsRemaining() {
+        if (this.resendAt === undefined) {
+            return 0;
+        }
+        return Math.max(0, Math.ceil((this.resendAt - this.nowTick) / 1000));
+    }
+    get canResend() {
+        return this.secondsRemaining === 0;
+    }
+}
+__decorate([
+    MapToComponentField({ writable: true })
+], ResendThrottleSlimmer.prototype, "resendAt", void 0);
+__decorate([
+    MapToComponentField({ writable: true })
+], ResendThrottleSlimmer.prototype, "nowTick", void 0);
+__decorate([
+    MapToComponentMethod('disconnectedCallback')
+], ResendThrottleSlimmer.prototype, "stop", null);

package/dist/collection/components/uds-pattern-login-card/uds-pattern-login-card.css

@@ -0,0 +1,154 @@
+/**
+ * The pattern's own styling, which is now only *layout*.
+ *
+ * Every control inside the card is a Vega element, and Vega styles its own
+ * internals from the design system's tokens. What is left for the pattern is
+ * the arrangement: the card surface, the rhythm between fields, and the
+ * supporting prose. There is deliberately no rule here for an input, a button,
+ * a checkbox or an alert — re-styling those would fork guarantees the design
+ * system is accountable for.
+ *
+ * Shadow DOM also means these rules cannot reach inside a `vega-*` element even
+ * if someone tried; Vega's own custom properties are the supported route.
+ */
+
+:host {
+  display: block;
+  width: 100%;
+  max-width: var(--uds-pattern-login-card-max-width);
+  box-sizing: border-box;
+
+  /** Maximum width of the card. */
+  --uds-pattern-login-card-max-width: 35rem;
+}
+
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: inherit;
+}
+
+/* --- Card surface ------------------------------------------------------- */
+
+.card {
+  padding: var(--uds-pattern-space-2xl);
+  background: var(--uds-pattern-color-surface);
+  border-radius: var(--uds-pattern-radius-lg);
+  box-shadow: var(--uds-pattern-shadow-card);
+}
+
+.card__heading {
+  margin: 0 0 var(--uds-pattern-space-sm);
+  font-size: var(--uds-pattern-font-size-lg);
+  font-weight: var(--uds-pattern-font-weight-bold);
+  line-height: var(--uds-pattern-line-height-md);
+}
+
+/* The heading takes focus on a step change so the change is announced; it is
+   not interactive, so it should not look it.
+
+   There is deliberately no :focus-visible ring here. The heading is
+   tabindex="-1", so a keyboard user can never reach it themselves — the only
+   thing that ever focuses it is our own step-change call. Chromium matches
+   :focus-visible on a programmatic focus regardless of whether the last
+   interaction was a pointer, so a ring would draw a box around the heading on
+   every step change for every user, mouse included. Announcement is the whole
+   job here; the visual belongs to whichever control we focus next. */
+.card__heading:focus,
+.card__heading:focus-visible {
+  outline: none;
+}
+
+.card__description {
+  margin: 0 0 var(--uds-pattern-space-lg);
+  font-size: var(--uds-pattern-font-size-sm);
+  color: var(--uds-pattern-color-text-subtle);
+}
+
+.card__footer {
+  margin-top: var(--uds-pattern-space-xl);
+  padding-top: var(--uds-pattern-space-xl);
+  border-top: 1px solid var(--uds-pattern-color-border);
+  font-size: var(--uds-pattern-font-size-sm);
+  color: var(--uds-pattern-color-text-subtle);
+}
+
+.card__footer p {
+  margin: 0;
+}
+
+/* --- Rhythm ------------------------------------------------------------- */
+
+/* `vega-form` renders `<form><slot/></form>` into its own shadow root, so the
+   controls written inside it are slotted and are laid out by that internal
+   `<form>` — not by this host. A `display: flex` here would wrap exactly one
+   flex item (the internal form), so `gap` would space nothing at all. The
+   arrangement therefore belongs to `.form__body`, which the pattern owns.
+
+   Only the form's own offset from the content above it is set here. */
+.form {
+  margin-top: var(--uds-pattern-space-lg);
+}
+
+/* The real layout container: a plain element in this shadow root whose real
+   children are the step's controls, so flex applies as written. Making them
+   flex items also blockifies them, which removes the inline-block line-box
+   whitespace the controls would otherwise be subject to.
+
+   The gap is measured from the approved sign-in design rather than picked: the
+   reference puts 31–32px between the input, the checkbox and the button, which
+   is `space-xl`. */
+.form__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--uds-pattern-space-xl);
+  align-items: stretch;
+}
+
+.alert {
+  display: block;
+  margin-bottom: var(--uds-pattern-space-md);
+}
+
+.options {
+  display: block;
+}
+
+/* --- Supporting prose --------------------------------------------------- */
+
+.prose {
+  margin: 0;
+  font-size: var(--uds-pattern-font-size-sm);
+  color: var(--uds-pattern-color-text-subtle);
+}
+
+.prose p {
+  margin: 0 0 var(--uds-pattern-space-xs);
+}
+
+.prose p:last-child {
+  margin-bottom: 0;
+}
+
+.prose__lead {
+  font-weight: var(--uds-pattern-font-weight-bold);
+  color: var(--uds-pattern-color-text);
+}
+
+/* Links sit inline within a sentence, so they must not become block boxes. */
+.link {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+.inline-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--uds-pattern-space-md);
+}
+
+/* A resend countdown is a status, not a control — it is rendered as text and
+   styled to read as the disabled sibling of the link it replaces. */
+.countdown {
+  color: var(--uds-pattern-color-text-subtle);
+}