@@ -0,0 +1,256 @@
<!doctype html>
< html lang = "de" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Styleguide – < / title >
< link rel = "stylesheet" href = "../styleguide.css" >
< / head >
< body >
< h1 class = "sg-main-heading" > Layout – < / h1 >
< main aria-label = "Page Layout Public" >
< 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 = "true" data-component-part = "tab-button" data-component-state = "active" > Ü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-options-row" aria-label = "Optionszeile" data-pattern = "options-row" >
< div class = "sg-options-row__left" data-pattern-part = "options-row-primary-actions" >
< div class = "sg-pulldown-demo" data-open = "false" data-align = "left" data-selection-mode = "single" data-component = "pulldown" data-component-context = "options-row" data-component-state = "inactive-selectable" >
< button class = "sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type = "button" aria-expanded = "false" aria-label = "Pulldown Sortierung" data-component-part = "pulldown-trigger" data-label-base = "Sortierung" >
Sortierung
< / button >
< div class = "sg-pulldown-panel" aria-label = "Geöffnetes Pulldown Sortierung" data-component-part = "pulldown-panel" >
< ul class = "sg-pulldown-option-list" aria-label = "Sortierungsoptionen" >
< li class = "sg-pulldown-option" role = "checkbox" aria-checked = "false" data-pulldown-option >
< span > Menüpunkt 1< / span >
< / li >
< li class = "sg-pulldown-option" role = "checkbox" aria-checked = "false" data-pulldown-option >
< span > Menüpunkt 2< / span >
< / li >
< li class = "sg-pulldown-option" role = "checkbox" aria-checked = "false" data-pulldown-option >
< span > Menüpunkt 3< / span >
< / li >
< li class = "sg-pulldown-option" role = "checkbox" aria-checked = "false" data-pulldown-option >
< span > Menüpunkt 4< / span >
< / li >
< li class = "sg-pulldown-option sg-pulldown-option--disabled" >
< span > Menüpunkt 5< / span >
< / li >
< / ul >
< / div >
< / div >
< div class = "sg-pulldown-demo" data-open = "false" data-align = "left" data-selection-mode = "single" data-component = "pulldown" data-component-context = "options-row" data-component-state = "inactive-selectable" >
< button class = "sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type = "button" aria-expanded = "false" aria-label = "Pulldown Region" data-component-part = "pulldown-trigger" data-label-base = "Region" >
Region
< / button >
< div class = "sg-pulldown-panel" aria-label = "Geöffnetes Pulldown Region" data-component-part = "pulldown-panel" >
< ul class = "sg-pulldown-option-list" aria-label = "Regionsoptionen" >
< li class = "sg-pulldown-option" role = "checkbox" aria-checked = "false" data-pulldown-option >
< span > Menüpunkt 1< / span >
< / li >
< li class = "sg-pulldown-option" role = "checkbox" aria-checked = "false" data-pulldown-option >
< span > Menüpunkt 2< / span >
< / li >
< li class = "sg-pulldown-option" role = "checkbox" aria-checked = "false" data-pulldown-option >
< span > Menüpunkt 3< / span >
< / li >
< li class = "sg-pulldown-option" role = "checkbox" aria-checked = "false" data-pulldown-option >
< span > Menüpunkt 4< / span >
< / li >
< li class = "sg-pulldown-option sg-pulldown-option--disabled" >
< span > Menüpunkt 5< / span >
< / li >
< / ul >
< / div >
< / div >
< div class = "sg-search-field-row" >
< span class = "sg-input-single-line-wrap sg-search-field-input" data-has-value = "false" data-component = "single-line-input" data-component-context = "options-row" data-component-state = "inactive-selectable" >
< input
class = "sg-interaction-element sg-input-single-line"
type = "text"
placeholder = "Suche"
aria-label = "Suche"
>
< button class = "sg-input-clear-button" type = "button" aria-label = "Eingabe löschen" data-component-part = "input-clear-button" > × < / button >
< / span >
< span class = "sg-search-result-count sg-table-label" aria-live = "polite" data-pattern-part = "options-row-search-result-count" > 0 Treffer< / span >
< / div >
< / div >
< div class = "sg-options-row__right" data-pattern-part = "options-row-secondary-actions" >
< button class = "sg-mode-toggle" type = "button" data-active = "relative" aria-label = "Modus Schieber global: relativ aktiv" data-component = "mode-toggle" data-component-context = "options-row" >
< span class = "sg-mode-toggle__label" data-component-part = "toggle-label" > absolut< / span >
< span class = "sg-mode-toggle__switch" aria-hidden = "true" data-component-part = "toggle-track" >
< span class = "sg-mode-toggle__handle" data-component-part = "toggle-handle" > < / span >
< / span >
< span class = "sg-mode-toggle__label" data-component-part = "toggle-label" > relativ< / span >
< / button >
< span class = "sg-help-icon-wrap" data-open = "false" data-align = "left" data-component = "help-icon" data-component-context = "options-row" >
< button class = "sg-help-icon" type = "button" aria-expanded = "false" aria-label = "Hilfetext anzeigen" data-component-part = "help-trigger" > ?< / button >
< span class = "sg-help-icon-panel sg-table-label" role = "tooltip" data-component-part = "help-panel" >
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
< / span >
< / span >
< / div >
< / div >
< div class = "sg-transparent-card sg-page-layout-public__heading-block" aria-label = "H1 Bereich" data-component = "transparent-card" >
< h1 class = "sg-heading-h1 sg-text-on-dark" > H1 Überschrift< / h1 >
< p class = "sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum.
< / p >
< / div >
< / main >
< script src = "../scripts/help-icon-overlays.js" > < / script >
< script >
document . querySelectorAll ( '.sg-portal-header__tabs, .sg-portal-header__menu-wrap .sg-tab-button-group' ) . forEach ( ( group ) => {
group . querySelectorAll ( '.sg-tab-button' ) . forEach ( ( button ) => {
button . addEventListener ( 'click' , ( ) => {
group . querySelectorAll ( '.sg-tab-button' ) . forEach ( ( otherButton ) => {
const isActive = otherButton === button ;
otherButton . setAttribute ( 'aria-selected' , String ( isActive ) ) ;
otherButton . dataset . componentState = isActive ? 'active' : 'inactive' ;
} ) ;
} ) ;
} ) ;
} ) ;
document . querySelectorAll ( '.sg-sandwich-menu-wrap' ) . forEach ( ( wrap ) => {
const button = wrap . querySelector ( '.sg-sandwich-button' ) ;
button . addEventListener ( 'click' , ( event ) => {
event . stopPropagation ( ) ;
const nextState = wrap . dataset . open !== 'true' ;
document . querySelectorAll ( '.sg-sandwich-menu-wrap' ) . forEach ( ( otherWrap ) => {
const otherButton = otherWrap . querySelector ( '.sg-sandwich-button' ) ;
otherWrap . dataset . open = 'false' ;
if ( otherButton ) {
otherButton . setAttribute ( 'aria-expanded' , 'false' ) ;
}
} ) ;
wrap . dataset . open = String ( nextState ) ;
button . setAttribute ( 'aria-expanded' , String ( nextState ) ) ;
} ) ;
} ) ;
document . querySelectorAll ( '.sg-mode-toggle' ) . forEach ( ( toggle ) => {
toggle . addEventListener ( 'click' , ( ) => {
const nextState = toggle . dataset . active === 'relative' ? 'absolute' : 'relative' ;
toggle . dataset . active = nextState ;
toggle . dataset . componentState = nextState ;
toggle . setAttribute (
'aria-label' ,
` Modus Schieber global: ${ nextState === 'relative' ? 'relativ' : 'absolut' } aktiv `
) ;
} ) ;
} ) ;
const updatePulldownSelectionState = ( demo ) => {
const trigger = demo . querySelector ( '.sg-pulldown-demo__trigger' ) ;
const selectableOptions = demo . querySelectorAll ( '[data-pulldown-option]' ) ;
if ( ! trigger || selectableOptions . length === 0 ) {
return ;
}
const selectedCount = Array . from ( selectableOptions ) . filter ( ( option ) => {
return option . getAttribute ( 'aria-checked' ) === 'true' ;
} ) . length ;
selectableOptions . forEach ( ( option ) => {
const optionRow = option . closest ( '.sg-pulldown-option' ) ;
if ( ! optionRow ) {
return ;
}
optionRow . classList . toggle (
'sg-pulldown-option--selected' ,
option . getAttribute ( 'aria-checked' ) === 'true'
) ;
} ) ;
const labelBase = trigger . dataset . labelBase || 'Auswahl' ;
trigger . textContent = selectedCount > 0 ? ` ${ labelBase } ( ${ selectedCount } ) ` : labelBase ;
trigger . classList . toggle ( 'sg-pulldown--selected' , selectedCount > 0 ) ;
trigger . classList . toggle ( 'sg-form-active' , selectedCount > 0 ) ;
trigger . dataset . componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable' ;
demo . dataset . componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable' ;
trigger . setAttribute (
'aria-label' ,
selectedCount > 0 ? ` Pulldown ${ labelBase } mit aktiver Auswahl ` : ` Pulldown ${ labelBase } ohne aktive Auswahl `
) ;
} ;
document . querySelectorAll ( '.sg-pulldown-demo' ) . forEach ( ( demo ) => {
const trigger = demo . querySelector ( '.sg-pulldown-demo__trigger' ) ;
if ( ! trigger ) {
return ;
}
trigger . addEventListener ( 'click' , ( event ) => {
event . stopPropagation ( ) ;
const nextState = demo . dataset . open !== 'true' ;
document . querySelectorAll ( '.sg-pulldown-demo' ) . forEach ( ( otherDemo ) => {
const otherTrigger = otherDemo . querySelector ( '.sg-pulldown-demo__trigger' ) ;
otherDemo . dataset . open = 'false' ;
if ( otherTrigger ) {
otherTrigger . setAttribute ( 'aria-expanded' , 'false' ) ;
}
} ) ;
demo . dataset . align = 'left' ;
demo . dataset . open = String ( nextState ) ;
trigger . setAttribute ( 'aria-expanded' , String ( nextState ) ) ;
updatePulldownSelectionState ( demo ) ;
} ) ;
demo . querySelectorAll ( '[data-pulldown-option]' ) . forEach ( ( option ) => {
option . addEventListener ( 'click' , ( event ) => {
event . stopPropagation ( ) ;
const nextChecked = option . getAttribute ( 'aria-checked' ) !== 'true' ;
option . setAttribute ( 'aria-checked' , String ( nextChecked ) ) ;
updatePulldownSelectionState ( demo ) ;
} ) ;
} ) ;
updatePulldownSelectionState ( demo ) ;
} ) ;
< / script >
< / body >
< / html >
