gitea_admin/erp_naurua
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sync styleguide 2026.05.18.1

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-11 11:20:37 +02:00
parent 5009e5ff3b
commit ebe0e59efc
7 changed files with 154 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/components/interactive-elements.html
+33
View File
@@ -330,6 +330,23 @@
</label>
</div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">form-invalid</p>
<label class="sg-labeled-input-row">
<span class="sg-label">Label</span>
<span class="sg-input-validation-stack">
<input
class="sg-interaction-element sg-input-single-line sg-form-active"
type="text"
value="Ungültige Eingabe"
aria-label="Einzeiliges Eingabefeld mit Validierung"
aria-invalid="true"
>
<span class="sg-form-validation-text">Bitte eine gültige Eingabe machen.</span>
</span>
</label>
</div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">form-disabled</p>
<label class="sg-labeled-input-row">
@@ -388,6 +405,22 @@
</label>
</div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">form-invalid</p>
<label class="sg-labeled-input-row">
<span class="sg-label">Label</span>
<span class="sg-input-validation-stack">
<textarea
class="sg-input-multi-line sg-form-active"
rows="3"
aria-label="Mehrzeiliges Eingabefeld mit Validierung"
aria-invalid="true"
>Ungültige Eingabe über mehrere Zeilen</textarea>
<span class="sg-form-validation-text">Bitte einen längeren Text eingeben.</span>
</span>
</label>
</div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">form-disabled</p>
<label class="sg-labeled-input-row">
docs/styleguide/index.html
+1 -1
View File
@@ -72,7 +72,7 @@
<li><a href="./patterns/vsf-card-listen-seite.html">VSF Card Listen Seite</a></li>
<li><a href="./patterns/vsf-list-detailseite.html">VSF List Detailseite</a></li>
<li><a href="./patterns/vsf-meldungen.html">VSF Meldungen</a></li>
<li><a href="./patterns/vsf-register-step-1.html">VSF Register Step 1</a></li>
<li><a href="./patterns/vsf-register-step-1.html">VFS Keycloak Login</a></li>
<li><a href="./patterns/vsf-listen-uebersicht-seite-v2.html">VSF Listen Übersicht Seite V2</a></li>
<li><a href="./patterns/vsf-card-listen-fundamentalanalyse-mobile.html">VSF Card Listen Fundamentalanalyse Mobile</a></li>
<li><a href="./patterns/vsf-card-listen-fundamentalanalyse-drawer.html">VSF Card Listen Fundamentalanalyse Drawer</a></li>
docs/styleguide/patterns/vsf-register-step-1.html
+31 -100
View File
@@ -8,73 +8,45 @@
</head>
<body class="sg-vsf-register-step-1-page">
<h1 class="sg-main-heading">Layout – VSF Register Step 1</h1>
<section id="pattern-portal-header">
<article class="sg-portal-header-pattern-variant" aria-label="Portal Header ohne Options Row">
<header class="sg-portal-header" aria-label="Portal Header" data-pattern="portal-header">
<div class="sg-portal-header__main" data-pattern-part="portal-header-main">
<p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">ValueStockFinder</p>
<div class="sg-portal-header__menu-wrap" data-pattern-part="portal-header-action">
<div class="sg-tab-button-group" role="tablist" aria-label="Anmeldung" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header">
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
Login
</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
Registrieren
</button>
</div>
</div>
<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Übersicht</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Features</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Preise</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Firma der Woche</button>
</nav>
</div>
</header>
<div class="sg-transparent-card sg-portal-header-pattern-variant__next-element" aria-label="Registriere dich bei ValueStockFinder" data-component="transparent-card"></div>
</article>
</section>
<h1 class="sg-main-heading">Layout – VFS Keycloak Login</h1>
<main class="sg-vsf-register-step-1">
<article class="sg-card sg-object-card sg-object-card--variable-height sg-vsf-register-step-1__card" data-pattern="object-card" aria-label="Registriere dich">
<article class="sg-card sg-object-card sg-object-card--variable-height sg-vsf-register-step-1__card" data-pattern="object-card" aria-label="Sign in">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
<div class="sg-strong">Probiere ValueStockFinder kostenlos und unverbindlich aus</div>
<div class="sg-strong">Welcome back to ValueStockFinder!</div>
</header>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
<p class="sg-body">Teste ValueStockFinder 7 Tage kostenlos und unverbindlich. Erhalte direkten Zugriff auf fundierte Aktienanalysen, klare Bewertungen und übersichtliche Entscheidungshilfen – ohne Verpflichtung.</p>
</div>
<footer class="sg-card-segment sg-card-segment--gray" aria-label="Registrierungsformular">
<div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Formular mit Abschnitten">
<footer class="sg-card-segment sg-card-segment--gray" aria-label="Sign in form">
<div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Form with sections">
<form class="sg-form-sections-card" action="#" method="post">
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
<h2 class="sg-strong sg-form-sections-card__title">Registrieren mit E-Mail und Passwort</h2>
<h2 class="sg-strong sg-form-sections-card__title">Sign in to your account</h2>
<div class="sg-form-sections-card__field-group">
<label class="sg-labeled-input-row">
<span class="sg-label">E-Mail</span>
<input
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
type="email"
placeholder="E-Mail eingeben"
aria-label="E-Mail"
autocomplete="email"
>
<span class="sg-label">Username or email</span>
<span class="sg-input-validation-stack">
<input
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
type="text"
value="lkn"
aria-label="Username or email"
aria-invalid="true"
aria-describedby="login-identifier-error"
autocomplete="username"
>
<span class="sg-form-validation-text" id="login-identifier-error">Invalid username or password.</span>
</span>
</label>
<label class="sg-labeled-input-row">
<span class="sg-label">Passwort</span>
<span class="sg-label">Password</span>
<input
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
type="password"
placeholder="Passwort eingeben"
aria-label="Passwort"
autocomplete="new-password"
placeholder="Enter password"
aria-label="Password"
aria-invalid="true"
autocomplete="current-password"
>
</label>
</div>
@@ -82,35 +54,20 @@
<footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
<div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
<button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Abbrechen</button>
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Registrieren</button>
<button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Cancel</button>
<button class="sg-interaction-element sg-button sg-button--process sg-form-sections-card__action" type="submit">Sign In</button>
</div>
</footer>
</form>
</div>
</footer>
<footer class="sg-card-segment sg-card-segment--gray" aria-label="Registrieren mit">
<div class="sg-strong">Registrieren mit</div>
<div class="sg-vsf-register-step-1__social-links">
<a class="social-logo" href="#" aria-label="Mit Google fortfahren" data-idp="google">
<span class="kcLogoIdP-google" aria-hidden="true"></span>
<span>Logo Platzhalter</span>
</a>
<a class="social-logo" href="#" aria-label="Mit LinkedIn fortfahren" data-idp="linkedin">
<span class="kcLogoIdP-linkedin" aria-hidden="true"></span>
<span>Logo Platzhalter</span>
</a>
<a class="social-logo" href="#" aria-label="Mit Microsoft fortfahren" data-idp="microsoft">
<span class="kcLogoIdP-microsoft" aria-hidden="true"></span>
<span>Logo Platzhalter</span>
</a>
</div>
<footer class="sg-card-segment sg-card-segment--gray" aria-label="Google login from keycoak">
<div class="sg-strong">Or sign in with</div>
<div class="sg-body">google login from keycoak</div>
</footer>
<footer class="sg-card-segment sg-card-segment--gray" aria-label="Bereits registriert">
<footer class="sg-card-segment sg-card-segment--gray" aria-label="Already have an account">
<div class="sg-body">
Du hast bereits einen Account? <a class="sg-hyperlink" href="#" data-component="hyperlink">Login</a>.
New user? <a class="sg-hyperlink" href="#" data-component="hyperlink">Register</a>.
</div>
</footer>
</article>
@@ -148,32 +105,6 @@
});
});
(() => {
const formCard = document.querySelector('.sg-form-sections-card');
if (!formCard) {
return;
}
const registerButton = formCard.querySelector('.sg-button--process');
if (!registerButton) {
return;
}
const updateRegisterButtonState = () => {
const requiredFields = Array.from(formCard.querySelectorAll('input[type="email"], input[type="password"]'));
const allFieldsFilled = requiredFields.every((field) => field.value.trim().length > 0);
registerButton.disabled = !allFieldsFilled;
registerButton.setAttribute('aria-disabled', String(!allFieldsFilled));
registerButton.classList.toggle('sg-button--process-inactive', !allFieldsFilled);
};
formCard.querySelectorAll('input[type="email"], input[type="password"]').forEach((field) => {
field.addEventListener('input', updateRegisterButtonState);
});
updateRegisterButtonState();
})();
</script>
</body>
docs/styleguide/styles/10-components-interactive-elements.css
+29
View File
@@ -377,6 +377,35 @@
max-width: var(--layout-form-input-field-max-width);
}
.sg-input-validation-stack {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--spacing-small);
min-width: 0;
max-width: var(--layout-form-input-field-max-width);
}
.sg-input-validation-stack .sg-input-single-line,
.sg-input-validation-stack .sg-input-multi-line {
width: 100%;
min-width: 0;
max-width: 100%;
}
.sg-form-validation-text {
margin: 0;
color: var(--text-vsf-list-card-limit-note);
font-family: var(--font-family-base);
font-size: var(--font-size-small);
line-height: var(--line-height-base);
}
.sg-input-single-line[aria-invalid="true"],
.sg-input-multi-line[aria-invalid="true"] {
box-shadow: 0 0 0 1px var(--color-signal-red) inset;
}
.sg-labeled-input-row:has(.sg-input-multi-line) {
align-items: flex-start;
}