Sync styleguide 2026.05.18.1
This commit is contained in:
@@ -330,6 +330,23 @@
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</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">
|
<div class="sg-state-example">
|
||||||
<p class="sg-state-example__label sg-table-label">form-disabled</p>
|
<p class="sg-state-example__label sg-table-label">form-disabled</p>
|
||||||
<label class="sg-labeled-input-row">
|
<label class="sg-labeled-input-row">
|
||||||
@@ -388,6 +405,22 @@
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</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">
|
<div class="sg-state-example">
|
||||||
<p class="sg-state-example__label sg-table-label">form-disabled</p>
|
<p class="sg-state-example__label sg-table-label">form-disabled</p>
|
||||||
<label class="sg-labeled-input-row">
|
<label class="sg-labeled-input-row">
|
||||||
|
|||||||
@@ -72,7 +72,7 @@
|
|||||||
<li><a href="./patterns/vsf-card-listen-seite.html">VSF Card Listen Seite</a></li>
|
<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-list-detailseite.html">VSF List Detailseite</a></li>
|
||||||
<li><a href="./patterns/vsf-meldungen.html">VSF Meldungen</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-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-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>
|
<li><a href="./patterns/vsf-card-listen-fundamentalanalyse-drawer.html">VSF Card Listen Fundamentalanalyse Drawer</a></li>
|
||||||
|
|||||||
@@ -8,73 +8,45 @@
|
|||||||
</head>
|
</head>
|
||||||
<body class="sg-vsf-register-step-1-page">
|
<body class="sg-vsf-register-step-1-page">
|
||||||
|
|
||||||
<h1 class="sg-main-heading">Layout – VSF Register Step 1</h1>
|
<h1 class="sg-main-heading">Layout – VFS Keycloak Login</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>
|
|
||||||
|
|
||||||
<main class="sg-vsf-register-step-1">
|
<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">
|
<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>
|
</header>
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
<footer class="sg-card-segment sg-card-segment--gray" aria-label="Sign in form">
|
||||||
<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 class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Form with sections">
|
||||||
</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">
|
|
||||||
<form class="sg-form-sections-card" action="#" method="post">
|
<form class="sg-form-sections-card" action="#" method="post">
|
||||||
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
|
<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">
|
<div class="sg-form-sections-card__field-group">
|
||||||
<label class="sg-labeled-input-row">
|
<label class="sg-labeled-input-row">
|
||||||
<span class="sg-label">E-Mail</span>
|
<span class="sg-label">Username or email</span>
|
||||||
<input
|
<span class="sg-input-validation-stack">
|
||||||
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
|
<input
|
||||||
type="email"
|
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
|
||||||
placeholder="E-Mail eingeben"
|
type="text"
|
||||||
aria-label="E-Mail"
|
value="lkn"
|
||||||
autocomplete="email"
|
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>
|
||||||
|
|
||||||
<label class="sg-labeled-input-row">
|
<label class="sg-labeled-input-row">
|
||||||
<span class="sg-label">Passwort</span>
|
<span class="sg-label">Password</span>
|
||||||
<input
|
<input
|
||||||
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
|
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
|
||||||
type="password"
|
type="password"
|
||||||
placeholder="Passwort eingeben"
|
placeholder="Enter password"
|
||||||
aria-label="Passwort"
|
aria-label="Password"
|
||||||
autocomplete="new-password"
|
aria-invalid="true"
|
||||||
|
autocomplete="current-password"
|
||||||
>
|
>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@@ -82,35 +54,20 @@
|
|||||||
|
|
||||||
<footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
|
<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">
|
<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--active sg-form-sections-card__action" type="button">Cancel</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--process sg-form-sections-card__action" type="submit">Sign In</button>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<footer class="sg-card-segment sg-card-segment--gray" aria-label="Registrieren mit">
|
<footer class="sg-card-segment sg-card-segment--gray" aria-label="Google login from keycoak">
|
||||||
<div class="sg-strong">Registrieren mit</div>
|
<div class="sg-strong">Or sign in with</div>
|
||||||
<div class="sg-vsf-register-step-1__social-links">
|
<div class="sg-body">google login from keycoak</div>
|
||||||
<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>
|
</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">
|
<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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</article>
|
</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>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -377,6 +377,35 @@
|
|||||||
max-width: var(--layout-form-input-field-max-width);
|
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) {
|
.sg-labeled-input-row:has(.sg-input-multi-line) {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -860,6 +860,35 @@ section + section {
|
|||||||
max-width: var(--layout-form-input-field-max-width);
|
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) {
|
.sg-labeled-input-row:has(.sg-input-multi-line) {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"styleguideVersion": "2026.05.18.1",
|
"styleguideVersion": "2026.05.18.1",
|
||||||
"styleguideCommit": "8b7d5ef",
|
"styleguideCommit": "436eb55",
|
||||||
"syncedAtUtc": "2026-06-11T05:57:07Z",
|
"syncedAtUtc": "2026-06-11T09:20:37Z",
|
||||||
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
|
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
|
||||||
"mirroredDocsPath": "docs/styleguide"
|
"mirroredDocsPath": "docs/styleguide"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -860,6 +860,35 @@ section + section {
|
|||||||
max-width: var(--layout-form-input-field-max-width);
|
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) {
|
.sg-labeled-input-row:has(.sg-input-multi-line) {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user