Bootstrapkomponenter

En komplett lista över de inbyggda komponenterna i Bootstrap finns här.

Semantik

Det är mycket viktigt att alla e-tjänster utvecklas med korrekt semantisk HTML5 (HTML4 eller XHTML får ej användas). Det innebär att rätt HTML-tagg skall användas till rätt sak. Är det en rubrik skall det vara ett H-element. Är det brödtext skall det vara ett p-element. Är det en oordnad lista skall det vara ett ul-element. osv. Detta för att tillgängligheten skall bli optimal både för sökmotorer och exempelvis personer som använder skärmläsare eller blindskriftskrivare.

Klickbara element måste gå att komma åt även utan mus, dvs via tangentbordet eller på annat vis. Därför måste länkar alltid vara a-taggar <a href="#">Länk</a> och knappar alltid vara <button>Knapp</button>. Annars går de inte att tabba till.

Bilder måste ha alt-attribut som beskriver vad bilden föreställer.

Detta är inget unikt för e-tjänsteplattformen utan följer W3C's standarder (Länk öppnas i nytt fönster) Öppnas i nytt fönster och webbriktlinjer.se (Länk öppnas i nytt fönster) Öppnas i nytt fönster

Det är även mycket viktigt att formulär formateras korrekt med id:n, beskrivningar, aria-attribut, data-attribut, for-attribut på labels, inputs med mera. Läs mer om formulär.

Läs mer om semantik

• Using semantics (W3C) (Länk öppnas i nytt fönster)
  Öppnas i nytt fönster
• Using h1-h6 (W3C) (Länk öppnas i nytt fönster)
  Öppnas i nytt fönster
• Using ol, ul and dl (W3C) (Länk öppnas i nytt fönster)
  Öppnas i nytt fönster
• Table markup (W3C) (Länk öppnas i nytt fönster)
  Öppnas i nytt fönster
• Providing descriptions (W3C) (Länk öppnas i nytt fönster)
  Öppnas i nytt fönster
• HTML5 Semantic Elements (W3Schools) (Länk öppnas i nytt fönster)
  Öppnas i nytt fönster

Tabbordning

Det är viktigt att tabbordningen i e-tjänsterna är logisk. Därför måste markupen struktureras utifrån detta. Att manuellt sätta tabindex="3" skall inte behövas utom i de fall där ett element INTE skall gå att tabba till. Exempelvis om man har ett modallager synligt ska man inte kunna tabba till element under modallagret. Samma sak med dropdown-menyer. Detta görs genom att sätta tabindex="-1". OBS! att Bootstrap gör detta automatiskt med modallager och dropdown-menyer.

Testa din tabbordning genom att helt enkelt tabba dig genom siten. Hamnar du på det element du förväntar dig? Om inte behöver du antagligen strukturera om din markup. Om elementen i din markup kommer i ordning kommer tabbordningen att bli logisk.

Gridsystem

Bootstrap använder sig av ett 12-kolumners gridsystem. Här finns dokumentationen för denna grid (Länk öppnas i nytt fönster) Öppnas i nytt fönster .

Utilityklasser

Utilityklasser används för att skriva över CSS som vissa komponenter får per default t.ex. margin eller padding. De flesta utilityklasser är flaggade !important och skall därför väga tyngre än defaultstylingen.

En komplett lista över alla utilityklasser finns här.

Ikoner

I Stockholms stads e-tjänster finns ett antal tillgängliga ikoner. Du hittar en lista med samtliga ikoner här.

Ikonerna kan användas som klasser på vilket element som helst. Klasserna finns beskrivna i ikonlistan

Det finns ett antal utility-klasser för att få ikonerna att bete sig på olika sätt. Dessa hittas under utilityklasserna

Ikoner

I Stockholms stads e-tjänster finns ett antal tillgängliga ikoner. Du hittar en lista med samtliga ikoner här.

Ikonerna kan användas som klasser på vilket element som helst. Klasserna finns beskrivna i ikonlistan

Det finns ett antal utility-klasser för att få ikonerna att bete sig på olika sätt. Dessa hittas under utilityklasserna

Typografi

Typsnitt

Ur Varumärkesmanualen för Stockholms stad: Vår typografi är en viktig del av Stockholms stads grafiska profil. Stockholm Type och Stockholm Type Display är Stockholms stads egna typsnitt specialritat av schweizaren Emmanuel Rey. Genom ett särskiljande typsnitt med mycket identitet skapar vi igenkänning och kan lyfta fram och knyta samman våra verksamheter. Som kompletterande typsnitt använder vi Times New Roman, Arial och Verdana.

Stockholm Type Bold

Stockholm Type Regular

Brödtext

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestievehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam.

Rubriker

Alla rubrikstilar (h1-h6) finns även som classer:
.alpha - som h1
.beta - som h2
.gamma - som h5
.delta - som h4
.epsilon - som h5
.zeta - som h6

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Ingress

Brödtext quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus.

Inline element

Det här är en länktext

Strong används för att indikera att texten är viktig

Em används för att visa att texten har extra betoning

B-elementet skiljer sig stilmässigt från annan text utan att lägga extra vikt på texten.

I-elementet är text som skiljer sig utseendemässigt från övrig text.

U-elementet är understrukten text.

Denna text är raderad och denna text har ersatt den gamla.

Denna text är genomstruken.

Superscript för sådant som t.ex. ^®

Subscript för sådant som t.ex. H₂O

Den här texten är mindre än normal text för exempelvis finstilt.

Förkortning: HTML

Keybord input: Cmd

"Detta är ett citat"

Detta är en citation

DFN elementet indikerar en definition.

MARK element indikerar en markering.

Detta är inline-kod.

Detta är exempel på data från ett datorprogram.

VARIABEL elementet, sådom x = y.

Cookies

Cookieinformation måste finnas i e-tjänsterna. Cookieinformationa utformning skall vara genomgående med Stadens övriga webbar. Exempel på hur den skall se ut hittas här.

AJAX

Om ett område uppdateras utan att sidan laddas om ska detta vara uppmärkt med WAI-ARIA attributet aria-live

Använd följande värden:

• Off = Använd för något som uppdateras ofta, exempelvis aktieinformation.
• Polite = Om en ändring bara ska meddelas om användaren inte har något viktigt för sig.
• Assertive = Använd när det händer något viktigt som användaren bör uppmärksammas om så snart som möjligt.

Nedanstående exempel är taget från filtreringen och är alltså diven som laddas om när en filtrering görs.

<div aria-live="assertive" class="col-md-7 col-sm-12 col-xs-12 filter-list">

Formulär

Formulär byggs upp med bootstraps gridsystem. Hur fälten skall struktureras beror på vilka fält som behövs. Det viktiga här är att fälten fungerar även mobilt. Oftast innebär det att kolumnerna kollapsar helt till 100% bredd för lägre upplösningar.

Detta åstadskoms genom att specificera antal kolumner för olika breakpoints. Se nedan exempel.

<div class="col-xs-12 col-sm-6 col-md-4">
    <div class="form-group">
        <input type="text"
            class="form-control"
            placeholder="Förnamn">
    </div>
</div>

I ovanstående exempel kommer fälten ta upp 4 kolumner i medium, 6 i small och kollapsa helt och ta upp alla 12 kolumner i extra small.

OBS att själv formulärsfälten alltid sträcker sig till 100% bredd av sin förälder.

Validering

I denna styleguide/prototyp valideras formulären front-end med Bootstrap Validator (Länk öppnas i nytt fönster) Öppnas i nytt fönster som är ett tillägg till Bootstrap. Konkreta exempel i prototypen finns på Startsidan och i Wizarden.

För att valideringsscriptet skall köras krävs att formuläret har följande data-attribut data-toggle="validator".

<form data-toggle="validator" role="form" autocomplete="off">

OBS! att det är valfritt att använda frontendvalidering med Boostrap validator. Det går även bra att använda MVC eller andra teknologier. Det viktiga är att utseendet och tillgänglighetskraven följer denna styleguide.

Tillgänglighet

För att valideringen skall fungera korrekt och ge korrekt feedback både till vanliga användare och till de som t.ex. surfar med skärmläsare krävs ett antal extra attribut och element.

<div class="form-group">
    <label for="exampleInputPNumber" class="required">Personnummer</label>
    <input type="text"
        class="form-control"
        id="exampleInputPNumber"
        aria-describedby="pNumberValidationMessage"
        placeholder="ÅÅÅÅMMDDXXXX"
        pattern="^((20(0|1|2)[0-9])|(19\d{2}))((0[1-9])|1[0-2])((0[1-9])|((1|2)[0-9])|(3[01]))[-]?\d{4}$"
        data-required-error="Du behöver fylla i ett personnummer."
        data-error="Du behöver ange ett personnummer i formatet ÅÅÅÅ-MM-DD-XXXX."
        data-minlength="12"
        required>
    <div id="pNumberValidationMessage" class="help-block with-errors form-control-feedback"></div>
</div>

Om ett fält skall valideras eller behöver en enklare instruktion kopplad till sig används aria-describedby="pNumberValidationMessage" där "pNumberValidationMessage" refererar till ett elementet med detta ID. I det här fallet
<div id="pNumberValidationMessage" class="help-block with-errors form-control-feedback"></div>

I denna container kan det dels ligga en beskrivande till som förtydligar hur fältet skall formateras men här hamnar även valideringsmeddelanden. Valideringsmeddelandet styrs av data-error="" attributet.

Validera

För att validera ett fält finns flera alternativ man kan använda. <input type="email"> validerar e-postadresser per automatik. Vill man validera på något specifik använder man attributet pattern="" och regular expressions.

Exempelvis validering på enbart siffror pattern="^[0-9]*$" eller som i ovanstående exempel med validering på personnummer pattern="^((20(0|1|2)[0-9])|(19\d{2}))((0[1-9])|1[0-2])((0[1-9])|((1|2)[0-9])|(3[01]))[-]?\d{4}$"

Max och min-värde

För att ytterligare förenkla för användaren kan ma använda ett minimum och ett maximumvärde för hur många tecken ett fält får innehålla. detta görs med data-minlength="7" samt data-maxlength="25"

Required

Till sist används required för att göra ett fält obligatoriskt. Detta kräver att fältets label får klassen required också <label for="" class="required">labeltext</label>

Fältmatchning

Fält kan ställas in for att matcha varandra. Det är användsbart t.ex. när lösenord eller e-post skall anges. Detta görs med två extra data-arribut. data-match="#exampleInputPassword" som anger ID't på fältet som skall matchas, och data-match-error="Lösenorden matchar inte." som anger felmeddelandet när fälter inte matchar.

Exempel nedan

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="form-group">
            <label for="exampleInputPassword" class="required">Lösenord</label>
            <input type="password"
                class="form-control"
                id="exampleInputPassword"
                aria-describedby="passwordValidationMessage"
                data-error="Lösenordet måste vara minst 8 tecken, varav minst en stor bokstav och minst en siffra."
                data-required-error="Du behöver fylla i ett lösenord."
                placeholder="Välj lösenord"
                data-minlength="8"
                required>
            <div class="help-block with-errors form-control-feedback" id="passwordValidationMessage">Minst 8 tecken</div>
        </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="form-group">
            <label for="exampleInputPassword2" class="required">Bekräfta lösenord</label>
            <input type="password"
                class="form-control"
                id="exampleInputPasswordConfirm"
                aria-describedby="password2ValidationMessage"
                data-match="#exampleInputPassword"
                data-match-error="Lösenorden matchar inte."
                data-required-error="Du behöver fylla i ett lösenord."
                data-error="Lösenordet måste vara minst 8 tecken, varav minst en stor bokstav och minst en siffra."
                placeholder="Bekräfta lösenord"
                data-minlength="8"
                autocomplete="off"
                required>
            <div class="help-block with-errors form-control-feedback" id="password2ValidationMessage"></div>
        </div>
    </div>
</div>

Ej tillgängliga fält

Vissa fält skall ej gå att uppdatera via gränssnittet utan innehåller data som kommer från andra system. Exempelvis personnummer. Dessa sätts då som ej tillgängliga med attributet disabled

<input type="text" class="form-control" id="exampleInputPNumber" aria-describedby="pNumberValidationMessage" placeholder="ÅÅÅÅMMDD-XXXX" pattern="^((20(0|1|2)[0-9])|(19\d{2}))((0[1-9])|1[0-2])((0[1-9])|((1|2)[0-9])|(3[01]))[-]?\d{4}$" data-error="Vänligen kontrollera fältet" disabled=">

Förtydliga fält

Bootstrap har en inbyggd funktion där man kan lägga till ett tillägg "inuti" ett fält. Det kan vara bra för att förtydliga vad är handlar om för fält, exempelvis för e-post. Detta görs med en span och klassen input-group-addon

Koden för ovanstående exempel ser ut så här.

<div class="input-group">
    <span class="input-group-addon" aria-hidden="true">@</span>
    <input type="email" class="form-control" id="email" aria-describedby="emailValidationMessage" placeholder="fornamn.efternamn@epost.se" pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,15}$" data-error="Vänligen kontrollera fältet">
</div>

Det finns även möjlighet att lägga en beskrivande text under själva fältet för att förtydliga vilken information som skall fyllas i. I det här fallet texten "Endast siffror"

Koden för ovanstående exempel ser ut så här

<div class="form-group">
    <label for="exampleInputShoeSize" class="required">Skostorlek</label>
    <input type="num"
        class="form-control"
        id="exampleInputShoeSize"
        aria-describedby="shoeSizeValidationMessage"
        placeholder="34-47"
        data-error="Vänligen kontrollera fältet"
        pattern="^[0-9]*$"
        required>
    <div class="help-block with-errors form-control-feedback" id="shoeSizeValidationMessage">Endast siffror</div>
</div>

Fler exempel finns på Startsidan och i Wizarden.

Fält utan synlig label

Om behov uppstår där ett fält inte kan eller får ha en synlig label eller om en knapp inte innehåller någon text utan endast en ikon skall dessa få attributet aria-label="text" för att beskriva vad fältet eller knappens funktion är.

<input type="text" name="text" aria-label="Förnamn">
<button class="btn btn-primary icon-arrow-right-light u-icon-right u-icon-btn-sm" arial-label="Gå vidare"></button>

Gruppera fält

Fält med en logisk koppling till varandra t.ex. radioknappar eller checkboxar skall wrappas i ett fieldset med en beskrivande legend.

Koden för ovanstående exempel ser ut som följande

<fieldset>
    <div class="radio">
        <legend class="label-legend required">Kön</legend>
        <div class="form-group">
            <select class="form-control" id="selectGender" name="selectGender" aria-describedby="sexValidationMessage" aria-label="VÄlj Kön" data-required-error="Validering misslyckades i fÄltet Kön. Kön är obligatoriskt." required>
                <option disabled value="">VÄlj</option>
                <option value="male">Man</option>
                <option value="female">Kvinna</option>
                <option value="other">Annan</option>
                <option value="noSay">Vill inte uppge</option>
            </select>   
            <div class="help-block with-errors form-control-feedback" id="sexValidationMessage">/div>   
        </div>
    </div>
</fieldset>

För att kunna bestämma minst antal och max antal checkboxar som skall vara ikryssade fyller du i attributen nedanför för varje checkbox fält. Alla data- attribut måste vara ifyllda likadant.

Attributen för ovanför exempel är följande:
data-minnumberofmandatorycheckboxes="1"
data-maxnumberofmandatorycheckboxes="2"
data-mandatorycheckbox="mycheckboxgroup"
name="mycheckboxgroup"

Koden för ovanstående exempel ser ut som följande

<form role="form" autocomplete="off">
 <legend class="label-legend required">Grupperade checkboxar med minst 1 obligatoriskt val</legend>
  <div class="form-group">
	<div class="checkbox">
        <input type="checkbox"
	          class="visuallyhidden"
              id="checkboxtest"
			  data-minnumberofmandatorycheckboxes="1"
			  data-maxnumberofmandatorycheckboxes="2"
			  data-mandatorycheckbox="mycheckboxgroup"
			  name="mycheckboxgroup"
			  data-error="Minst ett alternativ är obligatoriskt"
			  aria-describedby="validationMessage"
			  required />
        <label for="checkboxtest" 
              class="field-option field-option--checkbox">Checkbox 1</label>
    </div>
	<div class="checkbox">
        <input type="checkbox"
	          class="visuallyhidden"
              id="checkboxtest2"
			  data-minnumberofmandatorycheckboxes="1"
			  data-maxnumberofmandatorycheckboxes="2"
			  data-mandatorycheckbox="mycheckboxgroup"
			  name="mycheckboxgroup"
			  data-error="Minst ett alternativ är obligatoriskt"
			  aria-describedby="validationMessage"
			  required />
        <label for="checkboxtest2" 
              class="field-option field-option--checkbox">Checkbox 2</label>
    </div>
	<div id="validationMessage" class="help-block with-errors"></div>
	</div>
<div class="form-group">
 <button type="submit" class="btn btn-primary icon-arrow-right-light u-icon-right u-icon-btn-xxs">Nästa</button>
</div>
</form>

För att kunna bestämma minst antal och max antal checkboxar som skall vara ikryssade fyller du i attributen nedanför för varje checkbox fält. Alla data- attribut måste vara ifyllda likadant.

Attributen för ovanför exempel är följande:
data-minnumberofmandatorycheckboxes="2"
data-maxnumberofmandatorycheckboxes="5"
data-mandatorycheckbox="checkboxgroup"
name="checkboxgroup"

Koden för ovanstående exempel ser ut som följande

<form role="form" action="index.html#grouping"autocomplete="off">
<fieldset>
  <legend class="label-legend required">Grupperade checkboxar med minst 2 och max 5 obligatoriska val</legend>
  <div class="form-group">
	<div class="checkbox">
        <input type="checkbox"
	          class="visuallyhidden"
              id="checkbox1"
			  data-minnumberofmandatorycheckboxes="2"
			  data-maxnumberofmandatorycheckboxes="5"
			  data-mandatorycheckbox="checkboxgroup"
			  data-error="Minst 2 och max 5 alternativ är obligatoriskt"
			  aria-describedby="validationMessage"
			  name="checkboxgroup"
			  required />
        <label for="checkbox1" 
               class="field-option field-option--checkbox">Checkbox 1</label>
    </div>
	<div class="checkbox">
	    <input type="checkbox"
	          class="visuallyhidden"
              id="checkbox2"
			  data-minnumberofmandatorycheckboxes="2"
			  data-maxnumberofmandatorycheckboxes="5"
			  data-error="Minst 2 och max 5 alternativ är obligatoriskt"
			  data-mandatorycheckbox="checkboxgroup"
			  aria-describedby="validationMessage"
			  name="checkboxgroup"
			  required />
        <label for="checkbox2" 
               class="field-option field-option--checkbox">Checkbox 2</label>
	</div>	
	<div class="checkbox">
	    <input type="checkbox"
	          class="visuallyhidden"
              id="checkbox3"
			  data-minnumberofmandatorycheckboxes="2"
			  data-maxnumberofmandatorycheckboxes="5"
			  data-error="Minst 2 och max 5 alternativ är obligatoriskt"
			  data-mandatorycheckbox="checkboxgroup"
			  aria-describedby="validationMessage"
			  name="checkboxgroup"
			  required />
        <label for="checkbox3" 
               class="field-option field-option--checkbox">Checkbox 3</label>	
	<div class="checkbox">
	    <input type="checkbox"
	          class="visuallyhidden"
              id="checkbox4"
			  data-minnumberofmandatorycheckboxes="2"
			  data-maxnumberofmandatorycheckboxes="5"
			  data-error="Minst 2 och max 5 alternativ är obligatoriskt"
			  data-mandatorycheckbox="checkboxgroup"
			  aria-describedby="validationMessage"
			  name="checkboxgroup"
			  required />
        <label for="checkbox4" 
               class="field-option field-option--checkbox">Checkbox 4</label>
	</div>
    <div class="checkbox">
	    <input type="checkbox"
	          class="visuallyhidden"
              id="checkbox5"
			  data-minnumberofmandatorycheckboxes="2"
			  data-maxnumberofmandatorycheckboxes="5"
			  data-error="Minst 2 och max 5 alternativ är obligatoriskt"
			  data-mandatorycheckbox="checkboxgroup"
			  aria-describedby="validationMessage"
			  name="checkboxgroup"
			  required />
        <label for="checkbox5" 
               class="field-option field-option--checkbox">Checkbox 5</label>
	</div>
    <div class="checkbox">
	    <input type="checkbox"
	          class="visuallyhidden"
              id="checkbox6"
			  data-minnumberofmandatorycheckboxes="2"
			  data-maxnumberofmandatorycheckboxes="5"
			  data-error="Minst 2 och max 5 alternativ är obligatoriskt"
			  data-mandatorycheckbox="checkboxgroup"
			  aria-describedby="validationMessage"
			  name="checkboxgroup"
			  required />
        <label for="checkbox6" 
               class="field-option field-option--checkbox">Checkbox 6</label>
	</div> 
    <div class="checkbox">
	    <input type="checkbox"
	          class="visuallyhidden"
              id="checkbox7"
			  data-minnumberofmandatorycheckboxes="2"
			  data-maxnumberofmandatorycheckboxes="5"
			  data-error="Minst 2 och max 5 alternativ är obligatoriskt"
			  data-mandatorycheckbox="checkboxgroup"
			  aria-describedby="validationMessage"
			  name="checkboxgroup"
			  required />
        <label for="checkbox7" 
               class="field-option field-option--checkbox">Checkbox 7</label>
	</div> 
	<div id="validationMessage" class="help-block with-errors"></div>
  </div>
</fieldset> 
<div class="form-group">
 <button type="submit" class="btn btn-primary icon-arrow-right-light u-icon-right u-icon-btn-xxs">Nästa</button>
</div>
</form>

Obligatoriska dolda inmatningsfält

Dolda inmatningsfält som blir obligatoriska när dem blir synliga.
Exempel nedan där dolda fält ligger i en div som kan visas/döljas beroende på radioknappar.

Varje radioknapp har en dold div med fält som ska vara obligatoriska men endast om radioknappen väljs och div’en synliggörs.

För att kunna använda dolda tvingande fält fyller du i attributen nedanför för varje radioknapp. Attribut och klasser som används för att möjliggöra funktionaliteten i ovanför exempel är följande:

Alla grupperade radioknapp fält är placerade inuti en div som har klassen form-group och toggle-hidden-fields.

För varje unik radioknapp sätts data- attributet 'data-togglehidden' till radioknappens unika ID.

Direkt efter radioknapp fältet placeras div:en med klassen is-hidden som är ansvarig för alla dolda fält för den unika knappen.
Innanför div:en placeras alla fält som skall vara dolda.

Koden för ovanstående exempel ser ut som följande

<form id="mandatory-hidden-inputs-form" data-toggle="validator" role="form" autocomplete="off">
    <fieldset>
        <legend class="label-legend required">Dolda inmatningsfält</legend>
        <div class="has-success toggle-hidden-fields">
            <div class="radio">
                <input type="radio"
                       name="testgroup"
                       id="radiobtn1"
                       data-togglehidden="radiobtn1"
                       class="visuallyhidden"
                       aria-describedby="testValidationMessage"
                       data-required-error="Validering misslyckades i fältet Test 1. Ett val är obligatoriskt."
                       required />
                    <label for="radiobtn1" class="field-option field-option--radio">Test 1</label>
                    <div data-togglehidden="radiobtn1" class="is-hidden">
                        <div class="form-group">
                            <label for="text1" class="specifyrequired">Fält 1</label>
                            <input type="text"
                                   id="text1"
                                   class="form-control"
                                   placeholder="Text.."
                                   aria-describedby="test1TextValidationMessage1"
                                   data-required-error="Validering misslyckades i fältet Fält 1. Fälten är obligatoriska." />
                            <div id="test1TextValidationMessage1" class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label for="text2" class="specifyrequired">Fält 2</label>
                            <input type="text"
                                   id="text2"
                                   class="form-control"
                                   placeholder="Text.."
                                   aria-describedby="test1TextValidationMessage2"
                                   data-required-error="Validering misslyckades i fältet Fält 2. Fälten är obligatoriska." />
                            <div id="test1TextValidationMessage2" class="help-block with-errors"></div>
                        </div>
                    </div>
            </div>
            <div class="radio">
                <input type="radio"
                       name="testgroup"
                       data-togglehidden="radiobtn2"
                       id="radiobtn2"
                       class="visuallyhidden"
                       aria-describedby="testValidationMessage"
                       data-required-error="Ett val är obligatoriskt."
                       required />
                <label for="radiobtn2" class="field-option field-option--radio">Test 2</label>

                <div data-togglehidden="radiobtn2" class="is-hidden">
                    <div class="form-group">
                        <label for="text12" class="specifyrequired">Fält 1</label>
                        <input type="text"
                               id="text12"
                               class="form-control"
                               placeholder="Text.."
                               aria-describedby="test2TextValidationMessage1"
                               data-required-error="Validering misslyckades i fältet Fält 1. Fälten är obligatoriska." />
                        <div id="test2TextValidationMessage1" class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label for="text22" class="specifyrequired">Fält 2</label>
                        <input type="text"
                               id="text22"
                               class="form-control"
                               placeholder="Text.."
                               aria-describedby="test2TextValidationMessage2"
                               data-required-error="Validering misslyckades i fältet Fält 2. Fälten är obligatoriska." />
                        <div id="test2TextValidationMessage2" class="help-block with-errors"></div>
                    </div>
                </div>
            </div>
            <div class="radio">
                <input type="radio"
                       name="testgroup"
                       data-togglehidden="radiobtn3"
                       id="radiobtn3"
                       class="visuallyhidden"
                       aria-describedby="testValidationMessage"
                       data-required-error="Ett val är obligatoriskt."
                       required />
                <label for="radiobtn3" class="field-option field-option--radio">Test 3</label>

                <div data-togglehidden="radiobtn3" class="is-hidden">
                    <div class="form-group">
                        <label for="text31" class="specifyrequired">Fält 1</label>
                        <input type="text"
                               id="text31"
                               class="form-control"
                               placeholder="Text.."
                               aria-describedby="test3TextValidationMessage1"
                               data-required-error="Validering misslyckades i fältet Fält 1. Fälten är obligatoriska." />
                        <div id="test3TextValidationMessage1" class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label for="text32" class="specifyrequired">Fält 2</label>
                        <input type="text"
                               id="text32"
                               class="form-control"
                               placeholder="Text.."
                               aria-describedby="test3TextValidationMessage2"
                               data-required-error="Validering misslyckades i fältet Fält 2. Fälten är obligatoriska." />
                        <div id="test3TextValidationMessage2" class="help-block with-errors"></div>
                    </div>
                </div>
            </div>
            <div id="testValidationMessage" class="help-block with-errors"></div>
        </div>
        <div class="form-group">
            <label for="texttest" class="required">Synligt fält</label>
            <input type="text"
                   id="texttest"
                   class="form-control"
                   placeholder="Text.."
                   aria-describedby="texttest"
                   data-required-error="Validering misslyckades i fältet Synligt fält. Fältet är obligatoriskt." required />
            <div id="texttest" class="help-block with-errors"></div>
        </div>
    </fieldset>
    <div class="form-group">
        <button type="submit" class="btn btn-primary icon-arrow-right-light u-icon-right u-icon-btn-xxs">Nästa</button>
    </div>
</form>

Datum & tid

Det finns 2 komponenter för hantering av datum och klockslag.

Datumväljare

Datumväljare med statisk position

Denna variant kan användas exempelvis i smalare kolumner som högerspalten där Datumväljaren annars riskeras att hamn utanför skärmytan.

Datumväljaren är anpassad för att fungera även med tangentbord och skärmläsare. Den har språkstöd som hämtas automatiskt beroende på vilket språk som är satt i HTML-elementet enligt nedan exempel.

<html lang="sv">

Översättningarna finns i externa JS-filer innehållande ett JS-object och skall döpas på samma sätt som språkkoden: sv.js

Formateringen på språkfilerna ser ut som följande

var fdLocale = {
fullMonths:["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"],
monthAbbrs:["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
fullDays:["M\u00E5ndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "L\u00F6rdag", "S\u00F6ndag"],
dayAbbrs:["M\u00E5n", "Tis", "Ons", "Tors", "Fre", "L\u00F6r", "S\u00F6n"],
titles:["F\u00F6rra m\u00E5naden", "N\u00E4sta m\u00E5nad", "F\u00F6rra \u00E5ret", "N\u00E4sta \u00E5r", "Idag", "Visa kalender", "v.", "Vecka [[%0%]] av [[%1%]]", "Vecka", "V\u00E4lj ett datum", "Klicka och Drag", "Visa \u0022[[%0%]]\u0022 f\u00F6rsta", "Dagens datum", "Inaktiverat datum"]};
try {
    if("datePickerController" in window) {
            datePickerController.loadLanguage();
    };
} catch(err) {};

För att möjliggöra att kunna ha flera datepickers på samma sida startas en instans för varje unik datepicker upp på följande sätt.

datePickerController.createDatePicker({
    formElements: {'js-datepicker':"%Y-%m-%d"},
    showWeeks: true,
    staticPos: false,
    fillGrid: false,
    callbackFunctions:{
        'datereturned':[function focusTrigger(){
            var $datePickerControl = $('.date-picker-control');
            $datePickerControl.focus();
        }]
});

I ovan kodexempel är js-datepicker det unika ID't på inputfältet som skall ha en datepicker och "%Y-%m-%d" är datumformatet för just denna datepicker. I callback-metoden bestäms vilket fält som skall få fokus efter att ett datum har valts. I det här fallet är det knappen som öppnar datepickern men det skulle även kunna vara fältet för nästa datepicker om man exempelvis har 2 datepickers för att välja ett datum-range.

Globala inställningar

Det går även att separat sätta globala inställningar som gäller för alla datepickers. OBS! att setGlobalOptions måste sättas innan datepickern initieras.

Exempelvis nedanstående globala inställning som möjliggör en Datumväljare som användare kan dra och flytta till valfri position.

datePickerController.setGlobalOptions({
    'nodrag':0
});

Läs mer om datumväljaren här (Länk öppnas i nytt fönster) Öppnas i nytt fönster

Tidsväljare

Tidsväljaren består av 2 fält, ett för timmar och ett för minuter. Intervaller för dessa bestäms av respektive e-tjänst och dess behov.

Skjutreglage (range)

Skjutreglage använder sig av standartaggen input[type="range"] och kan konfigureras med skala och enheter efter behov.

Det finns även en version utan vare sig skala eller enhet som kan användas. Denna variant har även tillhörande plus – och minus-knappar för att stega sig uppåt eller nedåt i skjutreglaget.

Du kan själv välja att ha enheten som döljd eller synlig genom att lägga till is-hidden till output for="range2" class="is-hidden"

Skjutreglaget konfigureras genom att ställa in värdet på attributen min="0" och max="360" samt ändra motsvarande startvärde i <outout value="180">. OBS! att skjutreglaget alltid startar i mitten av skalan så startvärdet är alltid halva max-värdet. Till sist behöver alla värden under .labels ändras för att motsvara min, max och startvärderna (gäller enast reglage med skala). Här anger man även enhet om behov för det finns.

Internet Explorer 11 stödjer inte custom CSS properties eller elementet <output> så där används en span istället. Denna span animeras inte när reglagen flyttas längs skalan. Detta är en medveten fallback för webbläsaren.

Kodstrukturen för ovan exempel ser ut så här

<div class="form-group m-t-lg">
	<div class="range-wrapper" style="--min: 0;--max: 100;--val: 50;">
		<input id="range" type="range" list="dl" class="range" min="0" max="360">
		<output for="range">180</output>
			<div class="labels" aria-hidden="true">
		<span class="outputIE">180</span>
				<span>0°</span>
				<span>180°</span>
				<span>360°</span>
			</div>
		<label for="range">
			Skjutreglage
		</label>
	</div>
</div>

Filuppladdning

Filuppladdningskomponenten finns i 2 varianter, en för singeluppladdning och en för att ladda upp flera filer samtidigt. Detta styrs med attributet multiple.

Vid singeluppladdning syns filnamnet i knappen efter att man valt fil, vid multiuppladdning står det hur många filer man valt att ladda upp. OBS! att språket för denna text styrs av språket i webbläsaren/operativssystemet, och kan inte påverkas med hjälp av språkstöd i plattformen.

<input type="file" name="file-1[]" id="file-1" class="inputfile" data-multiple-caption="{count} files selected"/>
<label for="file-1"><span class="btn btn-default icon-upload-vasastan u-icon-left">Välj fil&hellip;</span><button type="button" class="btn btn-primary-light icon-trashcan-vasastan u-icon-right filename js-remove-file hidden" aria-controls="file-1" data-toggle="tooltip" data-placement="top" title="Ta bort"><span class="js-filename"></span><span class="visuallyhidden">Ta bort</span></button></label>

<input type="file" name="file-2[]" id="file-2" class="inputfile" data-multiple-caption="{count} files selected" multiple/>
<label for="file-2"><span class="btn btn-default icon-upload-vasastan u-icon-left">Välj en eller flera filer&hellip;</span><button type="button" class="btn btn-primary icon-trashcan-light u-icon-right filename js-remove-file hidden" aria-controls="file-2" data-toggle="tooltip" data-placement="top" title="Ta bort"><span class="js-filename"></span><span class="visuallyhidden">Ta bort</span></button></label>

Autocomplete

Autocomplete eller Typeahead som det också kallas är ett textfält som hämtar data från en datakälla. I det här fallet en array i Javascript.

Funktionen är beroende av 4 saker

• input-fältet måste ha klassen autocomplete
• input-fältet måste data-attributet data-list med valfritt värde i
• input-fältet måste ha data-attributet data-no-match där texten för om man inte får några sökträffar ligger
• en variabel som innehåller en array med data. Denna variabel måste matcha data-attributes värde. I det här fallet cities.
• Det sista är input-fältets ID som i det här fallet också är cities. Detta ID används för att trigga autocomplete-funktionen på just det fältet.

Koden för ovantående exempel ser ut som följande:

<label for="cities">Sök städer<span class="visuallyhidden">, skriv, och välj sedan från listan nedan med hjälp av piltangenterna</span></label>
<input type="text" id="cities" class="form-control autocomplete" placeholder="T.ex. Stockholm" data-list="cities" data-no-match="Inga träffar">

Och JS-objektet som innehållet datan ser ut så här:

var cities = ["Alingsås", "Arboga", "Arvika", "Askersund", "Avesta", "Boden", "Bollnäs", "Borgholm", "Borlänge", "Borås", "Djursholm", "Eksjö", "Enköping", "Eskilstuna", "Eslöv", "Fagersta", "Falkenberg", "Falköping", "Falun", "Filipstad", "Flen", "Gränna", "Gävle", "Göteborg", "Hagfors", "Halmstad", "Haparanda", "Hedemora", "Helsingborg", "Hjo", "Hudiksvall", "Huskvarna", "Härnösand", "Hässleholm", "Höganäs", "Jönköping", "Kalmar", "Karlshamn", "Karlskoga", "Karlskrona", "Karlstad", "Katrineholm", "Kiruna", "Kramfors", "Kristianstad", "Kristinehamn", "Kumla", "Kungsbacka", "Kungälv", "Köping", "Laholm", "Landskrona", "Lidingö", "Lidköping", "Lindesberg", "Linköping", "Ljungby", "Ludvika", "Luleå", "Lund", "Lycksele", "Lysekil", "Malmö", "Mariefred", "Mariestad", "Marstrand", "Mjölby", "Motala", "Mölndal", "Nacka", "Nora", "Norrköping", "Norrtälje", "Nybro", "Nyköping", "Nynäshamn", "Nässjö", "Oskarshamn", "Oxelösund", "Piteå", "Ronneby", "Sala", "ndviken", "Sigtuna", "Simrishamn", "Skanör-Falsterbo", "Skara", "Skellefteå", "Skänninge", "Skövde", "Sollefteå", "Solna", "Stockholm", "Strängnäs", "Strömstad", "Sundbyberg", "Sundsvall", "Säffle", "Säter", "Sävsjö", "Söderhamn", "Söderköping", "Södertälje", "Sölvesborg", "Tidaholm", "Torshälla", "Tranås", "Trelleborg", "Trollhättan", "Trosa", "Uddevalla", "Ulricehamn", "Umeå", "Uppsala", "Vadstena", "Varberg", "Vaxholm", "Vetlanda", "Vimmerby", "Visby", "Vänersborg", "Värnamo", "Västervik", "Västerås", "Växjö", "Ystad", "Åmål", "Ängelholm", "Örebro", "Öregrund", "Örnsköldsvik", "Östersund", "Östhammar"];
// Trigger autocomplete on element with ID "cities"
autocomplete.makeAutocomplete('cities', dataMatch);

Annat format på din data?

Om behov av annan formatering av data finns går det bra att skapa motsvarande funktionalitet på egen hand. Form och funktion måste dock följa detta exempel.

För att enklare kunna se hur markupen skall vara strukturerad finns här nedan ett utfällt statiskt exempel.

<label for="cities">Sök städer<span class="visuallyhidden">, skriv, och välj sedan från listan nedan med hjälp av piltangenterna</span></label>
<input type="text" id="foo" class="form-control autocomplete" placeholder="T.ex. Stockholm" data-list="cities">
<div role="list" class="autocomplete-list">
    <div role="listitem">
        <button aria-label="Alingsås"><span style="text-decoration:underline;">A</span>lingsås</button>
    </div>
    <div role="listitem">
        <button aria-label="Arboga"><span style="text-decoration:underline;">A</span>rboga</button>
    </div>
    <div role="listitem">
        <button aria-label="Arvika"><span style="text-decoration:underline;">A</span>rvika</button>
    </div>
    <div role="listitem">
        <button aria-label="Askersund"><span style="text-decoration:underline;">A</span>skersund</button>
    </div>
</div>

reCaptcha

Om behov av captcha behövs för formulär används reCaptcha. reCapcha är utvecklat av Google och kräver en API-nyckel för att fungera.

Se reCaptcha i exempeltjänsten

Kom igång med reCaptcha.

Tabeller

Tabeller kan användas på flera sätt i e-tjänsterna. Antingen med ränder för en bättre överblick eller med hover effekt för klickvänliga tabeller.

Med ränder

Kodstrukturen för ovan exempel ser ut så här

<table class="table table-striped table-bordered table--color-vasastan">
  <thead>
  <th> Item 1 </th>
  <th> Item 2 </th>
  </thead>
  <tbody>
  <th> Item 1 </th>
  <td> Item 2 </td>
  <tr>
  <th> Item 1 </th>
  <td> Item 2 </td>
  </tr>
  <tr>
  <th> Item 1 </th>
  <td> Item 2 </td>
  </tr>
  <tr>
  <th> Item 1 </th>
  <td> Item 2 </td>
  </tr>
  <tr>
  <th> Item 1 </th>
  <td> Item 2 </td>
  </tr>
  </tbody>
  </table>

Med hover effekt

Kodstrukturen för ovan exempel ser ut så här

<table class="table table-hover table-striped table-bordered table--color-vasastan">
  <thead>
  <th> Item 1 </th>
  <th> Item 2 </th>
  </thead>
  <tbody>
  <th> Item 1 </th>
  <td> Item 2 </td>
  <tr>
  <th> Item 1 </th>
  <td> Item 2 </td>
  </tr>
  <tr>
  <th> Item 1 </th>
  <td> Item 2 </td>
  </tr>
  <tr>
  <th> Item 1 </th>
  <td> Item 2 </td>
  </tr>
  <tr>
  <th> Item 1 </th>
  <td> Item 2 </td>
  </tr>
  </tbody>
  </table>

Filtrering

Exempel på filteringens utformning hittas här.

Filtreringen sker med AJAX. När ett val görs i filterkolumnen uppdateras resultatlistan automatiskt. En debouncefunktion med en fördröjning på ca 250-300ms kan vara lämplig att använda här för att det inte ska ske för många requests på för kort tid.

URL:en bör också uppdateras för varje filtreringsval som görs för att kunna dela filtreringen. Sidan skall inte laddas om när URL:en uppdateras.

Alla filteringskategorier är minimerade per default. I de fall där det finns flera nivåer med överkategorier används en s.k. "accordion" för att hålla gränsnittet rent och tydligt. Inga val görs utan att användaren själv kryssar i en checkbox.

Se exempel

Kodstrukturen för ovan exempel ser ut så här

<div class="panel panel-primary m-b-sm">
  <div class="panel-heading">
  <h3 class="panel-title">
  <button class="custom-collapsed-btn btn-transparent collapsed btn-block" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseZero" aria-controls="collapseZero">
  Inriktning & ämnen </button>
  </h3>
  </div> <div id="collapseZero" class="panel-collapse collapse" aria-labelledby="headingOne">
  <div class="panel-body panel-body--parent">
  <div class="panel-group accordion m-b-0">
  <div class="panel panel-default">
  <div class="panel-heading panel-heading--child" id="headingOne">
  <h4 class="panel-title">
  <button class="custom-collapsed-btn btn-transparent collapsed btn-block" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-controls="collapseOne">Teater och dans </button>
  </h4>
  </div>
  <div id="collapseOne" class="panel-collapse collapse" aria-labelledby="headingOne">
  <div class="panel-body panel-body--child">
  <div class="container container--rem">
  <div class="checkbox">
  <input type="checkbox" id="field-checkbox-1" name="checkbox" value="1" class="visuallyhidden">
  <label for="field-checkbox-1" class="field-option field-option--checkbox">Modern dans</label>
  </div>
  <div class="checkbox">
  <input type="checkbox" id="field-checkbox-2" name="checkbox" value="2" class="visuallyhidden">
  <label for="field-checkbox-2" class="field-option field-option--checkbox">
  Improvisationsteater</label>
  </div>
  <div class="checkbox">
  <input type="checkbox" id="field-checkbox-3" name="checkbox" value="3" class="visuallyhidden">
  <label for="field-checkbox-3" class="field-option field-option--checkbox">Street dance</label>
  </div>
  </div>
  </div>
  </div>
  </div>
  <div class="panel panel-default">
  <div class="panel-heading panel-heading--child" id="headingTwo">
  <h4 class="panel-title">
  <button class="custom-collapsed-btn btn-transparent collapsed btn-block" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo098" aria-expanded="false" aria-controls="collapseTwo098">
  Sång och musik </button>
  </h4> </div>
  <div id="collapseTwo098" class="panel-collapse collapse" aria-labelledby="headingTwo">
  <div class="panel-body panel-body--child">
  <div class="container container--rem">
  <div class="checkbox">
  <input type="checkbox" id="field-checkbox-5" name="checkbox" value="5" class="visuallyhidden">
  <label for="field-checkbox-5" class="field-option field-option--checkbox">Musikal</label> </div>
  <div class="checkbox">
  <input type="checkbox" id="field-checkbox-6" name="checkbox" value="6" class="visuallyhidden">
  <label for="field-checkbox-6" class="field-option field-option--checkbox">Alla kan tralla</label>
  </div>
  <div class="checkbox">
  <input type="checkbox" id="field-checkbox-7" name="checkbox" value="7" class="visuallyhidden">
  <label for="field-checkbox-7" class="field-option field-option--checkbox">Mongolisk strupsång</label>
  </div>
  </div>
  </div>
  </div>
  </div>
  <div class="panel panel-default">
  <div class="panel-heading panel-heading--child" id="headingThree">
  <h4 class="panel-title">
  <button class="custom-collapsed-btn btn-transparent collapsed btn-block" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  Konst och form </button>
  </h4>
  </div>
  <div id="collapseThree" class="panel-collapse collapse" aria-labelledby="headingThree">
  <div class="panel-body panel-body--child">
  <div class="container container--rem">
  <div class="checkbox">
  <input type="checkbox" id="field-checkbox-9" name="checkbox" value="9" class="visuallyhidden">
  <label for="field-checkbox-9" class="field-option field-option--checkbox">Måleri</label>
  </div>
  <div class="checkbox">
  <input type="checkbox" id="field-checkbox-10" name="checkbox" value="10" class="visuallyhidden">
  <label for="field-checkbox-10" class="field-option field-option--checkbox">Kroki</label>
  </div>
  <div class="checkbox"> <input type="checkbox" id="field-checkbox-11" name="checkbox" value="11" class="visuallyhidden">
  <label for="field-checkbox-11" class="field-option field-option--checkbox">Skulptur</label>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

Sök

I vissa fall då det finns väldigt många val för en specifik kategori kan en sökfunktion användas för att förenkla för användaren. Sökfunktionen filtrerar automatiskt listan med checkboxar allt eftersom användaren skriver i sökfältet.

OBS det gömda fältet som håller textsträngen som visas när sökfiltreringen inte ger några träffar:

<input type="hidden" value="Inga träffar" class="no-filter-hits">

Kodstrukturen för ovan exempel ser ut så här

<div class="panel panel-primary m-b-sm">
  <div class="panel-heading">
  <h3 class="panel-title">
  <button class="custom-collapsed-btn btn-transparent collapsed btn-block" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseZero4" aria-controls="collapseZero4"> Instruktör </button>
  </h3>
  </div>
  <div id="collapseZero4" class="panel-collapse collapse search-filter" aria-labelledby="collapseZero4">
  <div class="panel-body">
  <div class="row">
  <div class="col-md-12 col-sm-12 col-xs-12">
  <div class="form-group">
  <label class="visuallyhidden" for="coachSearch" id="searchDesc">Sök instruktör, filtrera listan med instruktörer</label>
  <input type="search" id="coachSearch" class="form-control u-icon-right icon-search pull-right search-filter-input" placeholder="Sök instruktör" aria-controls="coachList">
  <!-- This field contains the translation for a "No hits" search -->
  <input type="hidden" class="no-filter-hits" value="Inga träffar">
  </div>
  </div>
  </div>
  <hr>
  <div class="row">
  <div class="col-md-12 col-sm-12 col-xs-12">
  <ul id="coachList" class="list--bare m-a-0 p-a-0 search-filter-list" aria-live="polite" aria-atomic="true">
  <li>
  <div class="checkbox"> <input type="checkbox" id="field-checkbox-17" name="checkbox" value="17" class="visuallyhidden">
  <label for="field-checkbox-17" class="field-option field-option--checkbox">Olle Westin</label>
  </div>
  </li>
  <li>
  <div class="checkbox">
  <input type="checkbox" id="field-checkbox-18" name="checkbox" value="18" class="visuallyhidden">
  <label for="field-checkbox-18" class="field-option field-option--checkbox">Angelica Andersson</label>
  </div>
  </li>
  <li>
  <div class="checkbox"> <input type="checkbox" id="field-checkbox-19" name="checkbox" value="19" class="visuallyhidden">
  <label for="field-checkbox-19" class="field-option field-option--checkbox">Erik Fransson</label>
  </div>
  </li>
  <li>
  <div class="checkbox">
  <input type="checkbox" id="field-checkbox-20" name="checkbox" value="20" class="visuallyhidden">
  <label for="field-checkbox-20" class="field-option field-option--checkbox">Franco Gomez</label>
  </div>
  </li>
  <li>
  <div class="checkbox">
  <input type="checkbox" id="field-checkbox-21" name="checkbox" value="21" class="visuallyhidden">
  <label for="field-checkbox-21" class="field-option field-option--checkbox">Patricia Guiliere</label>
  </div>
  </li>
  <li>
  <div class="checkbox"> <input type="checkbox" id="field-checkbox-22" name="checkbox" value="22" class="visuallyhidden">
  <label for="field-checkbox-22" class="field-option field-option--checkbox">Nico Adamsson</label>
  </div>
  </li>
  <li>
  <div class="checkbox">
  <input type="checkbox" id="field-checkbox-23" name="checkbox" value="23" class="visuallyhidden">
  <label for="field-checkbox-23" class="field-option field-option--checkbox">Teo Frisk</label>
  </div>
  </li>
  <li>
  <div class="checkbox">
  <input type="checkbox" id="field-checkbox-24" name="checkbox" value="24" class="visuallyhidden">
  <label for="field-checkbox-24" class="field-option field-option--checkbox">Angelina Andersdotter</label>
  </div>
  </li>
  <li>
  <div class="checkbox"> <input type="checkbox" id="field-checkbox-25" name="checkbox" value="25" class="visuallyhidden">
  <label for="field-checkbox-25" class="field-option field-option--checkbox">Gun Hellstrand</label>
  </div>
  </li>
  <li>
  <div class="checkbox"> <input type="checkbox" id="field-checkbox-26" name="checkbox" value="26" class="visuallyhidden">
  <label for="field-checkbox-26" class="field-option field-option--checkbox">Maria Figuredo</label>
  </div>
  </li>
  <li>
  <div class="checkbox">
  <input type="checkbox" id="field-checkbox-171" name="checkbox" value="171" class="visuallyhidden">
  <label for="field-checkbox-171" class="field-option field-option--checkbox">Oscar Idun</label>
  </div>
  </li>
  <li>
  <div class="checkbox">
  <input type="checkbox" id="field-checkbox-181" name="checkbox" value="181" class="visuallyhidden">
  <label for="field-checkbox-181" class="field-option field-option--checkbox">Henke Gabrielsson</label>
  </div>
  </li>
  </ul>
  </div>
  </div>
  </div>
  </div>
  </div>

Aktiva filter

På filtreringssidan lägger sig de aktiva filter användaren valt överst i samma kolumn som träfflistan. Dessa är dolda per default men expanderas genom ett klick. En cookie skall spara aktivt state så om användaren expanderat aktiva filter och uppdaterar sidan skall panelen fortfarande vara expanderad. Om användaren stänger panelen och uppdaterar sidan skall panelen förbli stängd.

OBS att denna cookie-funktionalitet måste implementeras för respektive e-tjänst som behöver den. Fungerande exempel finns ej tillgänglig i prototypen.

Rensa aktiva filter

På filtreringssidan finns tre (3) olika sätt att rensa aktiv filtrering.

1. Ta bort filter-taggar en och en under "Visa aktiva filter"
2. Klicka på "Rensa filter" som är belägen underst i filtreringskolumnen
3. Klicka på "Visa alla kurser".
   • Copyn i detta val kommer variera beroende på vad man valt att filtrera för listning. Valet är främst till för de användare som inte förstår hur det kommer tillbaka till den kompletta listan de såg innan någon filtrering gjorts

Dela filter

Filteringen skall gå att dela genom att kopiera URL:en. Det finns även en färdig funktion i grässnittet för detta som kopierar den nuvarande URL:en. Denna funktion ligger unders i filtreringskolumnen.

Kodstrukturen för ovan exempel ser ut så här. OBS att till höger om "Dela filter" skall det finnas en "Rensa filter"-länk. Därför är nedanstående kod anpassat för detta.

<div class="dropdown filter__share-dropdown pull-left">
<button id="filter-share-dropdown-btn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dela filtrering<span class="caret"></span></button>
<div class="dropdown-menu filter__share-dropdown__item" aria-labelledby="filter-share-dropdown-btn">
<div class="col-md-12 col-sm-12 col-xs-12 p-y">
<label for="filter-share-input">Kopiera och dela</label>
<input type="text" id="filter-share-input" name="filter-share" class="form-control" value="URL">
</div>
</div>

<a href="#" class="m-x-auto btn btn-link filter__clear-filter pull-right">Rensa filter</a>

Stadsdelsväljare

Stadsdelsväljaren finns i fyra (4) olika utföranden med olika komplexitet. Välj den som kontextuellt sett fungerar bäst för ändamålet i er e-tjänst.

Systemmeddelanden

Systemmeddelanden finnas i två varianter. De följer samma form men har olika placering på siten.

Lokalt systemmeddelande

Lokala systemmeddelanden är sådana som rör en specifik funktion t.ex. ett formulär. Placeringen av detta meddelande för vara i kontext till funktionens placering. Exempel hittas här.

Globalt systemmeddelande

Globala systemmeddelanden är sådana som rör hela systemet. Placeringen skall därför vara ovanför content men under header och huvudnavigering. Exempel hittas här.

Meddelandetyper

Det finns 4 olika meddelandetyper som används vid olika scenarier.

Information

Generellt meddelande som används för att förmedla information. Ej kopplat till något användaren gjort.

Succé

Användaren har har genomfört en lyckad ändring i systemet.

Varning

Ett potentiellt problem har upptäcks, t.ex. att ett byte av lösenord inte fyllde alla kriterier för komplexitet.

Fel

Systemet har kastat ett fel, t.ex. att ett formulär inte gick att skicka.

Knappar

Knappar finns i ett antal olika färger och storlekar. Primärt är det fyra (4) av dessa som skall användas i e-tjänsteplattformen.

I anslutning till formulär skall den primära knappen för att gå vidare främst ligga högerställd. Detta görs med utility-klassen pull-right.

Samtliga knapptyper går att använda på både button och a-taggar.

Primär

Detta är "standardknappen" som skall användas i första hand

Primär

<button type="button" class="btn btn-primary">Primär</button>

Standard

En diskretare sekundär knapp som inte väcker lika uppmärksamhet som den primära.

Standard

<button type="button" class="btn btn-default">Standard</button>

Primär ljus

Ibland fungerar den starka färgen på den primära knappen inte optimalt. Där kan en ljus version av samma knapp användas.

Primär ljus

<button type="button" class="btn btn-primary-light">Primär ljus</button>

Länk

Ibland vill man använda en knapp som ser ut som en länk men för korrekt radhöjd för knappar. Då finns detta alternativ.

Länk-knapp

<button type="button" class="btn btn-link">Länk</button>

Ikon till vänster

Lägg till klass för ikon samt utility-klassen u-icon-left

Tillbaka

<button class="btn btn-primary icon-arrow-left-light u-icon-left">Tillbaka</button>

Ikon till Höger

Lägg till klass för den ikon som skall användas samt utility-klassen u-icon-right

Nästa

<button class="btn btn-primary icon-arrow-right-light u-icon-right">Nästa</button>

"Kollapsande" ikon-knapp

Ibland behöver en knapp ta så lite utrymme som möjligt i låga upplösningar. Då kan man få knappen att kollapsa till enbart en kvadrat med en ikon i. Det är då viktigt att det är självförklarande vad knappen har för funktion.

Minska webbläsarens bredd och se nedanstående knapp "kollapsa". Detta åstadkoms genom att lägga till utility-klassen u-icon-btn-sm.

OBS att detta kräver att knappens textinnehåll wrappas med en span med följande klass visuallyhidden-on-x-small-screen. Detta för att texten skall försvinna rent visuellt men fortfarande vara tillgänglig för skärmläsare.

Gå vidare

<button class="btn btn-primary icon-arrow-right-light u-icon-right u-icon-btn-sm"><span>Gå vidare</span></button>

Knapp som redan från början är "kollapsad"

Om det finns behov att en knapp redan från början är "kollapsad" måste den få utility-klassen block-icon. För att tillgängligheten inte skall påverkas måste den även få ett aria-label attribut aria-label="Gå vidare".

Ladda ner PDF

<a href="#" class="btn btn-primary icon-pdf-light u-icon-btn-sm block-icon" title="Ladda ner PDF"><span class="visuallyhidden">Ladda ner PDF</span></a>

Förtkorta knapptexten

Ibland kan det räcka med att knappens textinnehålls förkortas en aning. Då kan man lägga till en span följande utility-klass visuallyhidden-on-small-screen runt den del av texten du vill "klippa bort".

Minska webbläsarens bredd och se nedanstående knapptext "förkortas".

OBS att en kort copy alltid är att föredra och att även om förtkortning är nödvändig så måste kvarvarande text fortfarande vara självförklarande för vad knappen har för funktion.

Nästa steg

<button class="btn btn-primary icon-arrow-right-light u-icon-right">Nästa <span class="visuallyhidden-on-small-screen">steg</span></button>

Modala fönster

Modala fönster används i e-tjänsterna. Ett modalt fönster dyker upp och placeras ovanpå den sida där användaren befinner sig när denne har utfört en åtgärd.

Modala fönster med funktioner

Klicka på knapparna för att simulera respektive funktion.

Modalt fönster när användaren är inaktiv

Exemplet illustrerar hur en icke aktiv användare får en notifiering genom ett modalt fönster.

Kodstrukturen för ovan exempel ser ut så här

<div id="myModal" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Varning!</h4>
      </div>
       <div class="modal-body">
        Du är påväg att bli utloggad pga inaktivitet
       </div>
      <div class="modal-footer">
       <button type="button" class="btn btn-primary" data-dismiss="modal">Klicka här för att fortsätta vara inloggad</button>
      </div>
      </div>
    </div>
</div>

var myTimeout;        
$('#myModal')
.on('shown.bs.modal', function(e) {
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  myTimeout = setTimeout(function() {
   $(e.target).find('.modal-body').html("Du har blivit utloggad p.g.a. inaktivitet");
   $(e.target).find('.modal-footer button').html("Ok");
  }, 540000); // 9 minutes = 540 000 milliseconds
})
.on('hidden.bs.modal', function(e) {
 clearTimeout(myTimeout);
 });

Modalt fönster när sessionen har gått ut

Exemplet illustrerar när en session har gått ut och användaren får en notifiering genom ett modalt fönster.

Kodstrukturen för ovan exempel ser ut så här

<div id="myOtherModal" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Varning!</h4>
      </div>
       <div class="modal-body">
        Du kommer att loggas ut om 10 minuter och behöver logga in igen
       </div>
      <div class="modal-footer">
       <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
      </div>
      </div>
    </div>
</div>

var myOtherTimeout;
$('#myOtherModal')
.on('shown.bs.modal', function(e) {
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  if (!myOtherTimeout) {
      myOtherTimeout = setTimeout(function() {
       $(e.target).find('.modal-body').html("Du har blivit utloggad");
       $('#myOtherModal').modal('show');
      }, 540000); // 9 minutes = 540 000 milliseconds
  }
});

Språk

Valt språk skall skickas in i DOM:en på följande vis: <html lang="sv"> där rätt språkkod för rätt respektive språk används.

Språkväjaren

Språkväljaren är en dropdownmeny som indikeras med en jordglob att här döljer sig flera språk.

Menyalternativet skall ligga i ribbon. Vid skärm mindre än 767px ska språkväljaren finnas i menyn.

I menyalternativet står det per default "Language". Byter man språk skall denna copy uppdateras till ordet "Språk" fast översatt till det valda språket. Byter man t.ex. språk till Finska skall copyn vara "Kieli".

Kodexempel på ovanstående språkväljare

  <nav class="navbar m-b-0 top-nav" role="navigation">
  <div class="dropdown languages">
  <button id="dropdownMenu1" type="button" href="#" class="icon-world-map u-icon-left btn btn-link" data-toggle="dropdown" aria-expanded="true" aria-controls="languageDropdown" lang="en">Language <span class="caret caret--special"></span></button>
  <ul class="dropdown-menu" id="languageDropdown" aria-labelledby="dropdownMenu1">
  <li class="active">
  <a href="#" lang="sv" aria-label="Svenska">Svenska</a>
  </li>
  <li><a href="#" lang="en">English</a>
  </li>
  <li><a href="#" lang="fi">Suomalainen</a>
  </li>
  </ul>
  </div>
  </nav>

Frågor och svar

Frågor och svar kan användas på flea sätt i e-tjänsterna. Antingen som en egen sida med global info for e-tjänsten ett kontextuellt ihop med en specifik sida eller funktion i e-tjänsten.

Eftersom FAQ-modulen är dynamisk kommer den anpassa sig efter bredden på sin föräldracontainer. Globalt exempel samt kontextuellt exempel med FAQ i högerkolumnen.

Om en omfattande FAQ med många frågor behövs kan en kategorisering vara nödvändig vilket görs med själv av en select. Om det däremot är få frågot behövs inte denna.

Med kategorier

Utan kategorier

Kodexempel (med kategorier)

<div class="panel-body">
    <div id="accordion67" class="panel-group accordion m-b-0" aria-multiselectable="true">
        <div class="form-group">
            <label for="faq">Välj kategori</label>
            <select class="form-control" id="faq">
                <option value="one">Bokningar</option>
                <option value="two">Kategori #2</option>
                <option value="three">Kategori #3</option>
                <option value="four">Kategori #4</option>
                <option value="five">Kategori #5</option>
            </select>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" id="headingTwo67">
                <a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#accordion67" href="#collapseTwo67" aria-expanded="false" aria-controls="collapseTwo67">
                    Hur gör jag en bokning?
                </a>
            </div>
            <div id="collapseTwo67" class="panel-collapse collapse" aria-labelledby="headingTwo67">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" id="headingThree67">
                <a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#accordion67" href="#collapseThree67" aria-expanded="false" aria-controls="collapseThree67">
                    Hur ser jag mina bokningar?
                </a>
            </div>
            <div id="collapseThree67" class="panel-collapse collapse" aria-labelledby="headingThree67">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
    </div>
</div>

Profil

Ribbon

När användaren loggat in dyker en rosa "ribbon" upp högst upp på siten. Denna ribbon visar den inloggades namn, eventuella notiser samt döljer en dropdown-meny med fler alternativ kopplat till användarens konto.

OBS att Ribbon måste vara lägre än huvudnavigeringen för att särskilja vikten på dessa.

Kodexempel för ovanstående ribbon

<div class="bg-ostermalm color-inverse">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12 p-x-0">
                <nav class="navbar m-b-0">
                    <div class="dropdown pull-right">
                        <a href="#" class="btn btn-link dropdown-toggle color-inverse" data-toggle="dropdown" role="button" aria-expanded="false">Inloggad: Förnamn Efternamn <span class="badge">3</span><span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="my-profile.html"><span class="block-icon icon-user"></span> Mina sidor</a></li>
                            <li><a href="my-messages.html"><span class="badge">3</span> Mina meddelanden</a></li>
                            <li><a href="startpage.html"><span class="block-icon icon-locked"></span> Logga ut</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>

Notiser

Profilsidorna innehåller bland annat Meddelanden. För att indikera att användaren har olästa meddelanden används notifieringar. Dessa används dels i Ribbon, dels i huvudmenyn på Mina sidor och dels på Meddelandesidan

I navigeringen används notifieringar för att indikera antal olästa meddelanden. På meddelandesidan används notifieringen på respektive oläst meddelande.

<span class="badge">3</span>

OBS om det inte finns några nya notiser skall dessa inte visas i Navigeringen eller i Ribbon. <span class="badge"></span> skall alltså inte ens skrivas ut i DOM:en om det inte finns några notiser.

Däremot i dropdownmenyn inuti Ribbon skall Notiser skrivas ut och indikera att det finns (0) nya notiser i en grå och inte en gul "badge". Detta åstadkoms med modifier-klassen badge--inactive

Visuellt exempel finns i Ribbon här ovanför. Kodexempel nedanför.

<span class="badge badge--inactive">0</span>

Notiser i Ribbon

Notiser i Meddelanden

Kontaktsida

Kontaktsidan skall ha ett kontaktformulär. Det finns två (2) alternativ av placering av detta formulär. Antingen ett större formulär till "huvudkolumnen" eller ett mindre i "högerkolumnen".

Det mindre formuläret är tänkt att kunna användas på vilken sida som helst där ett kontaktformulär kan behövas. Det större formuläret skall ha en egen unik sida kopplad till sig. Det får aldrig ligga två (2) kontaktformulär på samma sida.

I ovanstående länk finns exempel på båda varianterna.

Tooltips

Tooltips kan placeras på vilket element som helst men för tillgänglighetens skull måste de ligga på ett element som går att tabba till. En länk eller en knapp är därför lämpligast.

Placering av tooltip

Ett tooltip triggas automatiskt när elementet får attributet data-toggle="tooltip" och innehållet i tooltipet bestäms av elements title attribut: title="Textinnehåll i tooltip"

Placeringen av tooltips bestämd med data-attributet data-placement="" som tar ett av följande värdenleft right bottom left.

<button type="button" class="btn btn-default icon-information-light u-icon-right" data-toggle="tooltip" data-placement="top" title="Tooltip upptill">Tooltip upptill</button>

Releases (versioner)

E-tjänsteplattformen finns i flera olika versioner, en för varje release som gjorts. Denna prototyp och styleguide ligger alltid i version 3.1.2 dvs den innehåller alltid det allra senaste uppdateringarna.

Det är upp till var och en att bestämma vilken version din e-tjänst skall lyfta in. En satt version ändras aldrig.

OBS! att använda "3.1.2" i produktion inte är att rekommendera då breaking changes kan ske från version till version. Alla referenser till filer i 3.1.2 sker på egen risk.

Samtliga tillgängliga versioner finns i listan under sektionen CDN.

CDN

Alla statiska filer i e-tjänsteplattformen hostas på Stadens CDN. Alla statiska referenser till CSS:er, JS-filer, bilder, ikoner med mera skall därför länkas från detta CDN.

Filerna ligger i sina respektive versioner.

URL-strukturen ser ut som följande

För att läsa mer om ändringar som sker i olika versioner är det bara att följa nedanstående changelog.

Filer som länkas in från Stadens CDN

No-script assets

Om webbläsaren av någon anledning inte kan ladda JS-assets kan dessa filer laddas in inom <nocript></noscript> längst ner innan avslutande body-taggen.

# CHANGELOG

## [3.0.0] - 2021-10-01

Release notes

• Updated menu & footer layout
• Updated almost all components to be complient with WCAG

## [2.0.6] - 2021-03-26

Fixed

• Changed dropdown menu links from to <button></button>
• Changed the text for closing alerts & modals from Close to Stäng
• Added aria-controls to #navbar
• Removed role="navigation" from ul and added role="navigation" to underlaying div.
• Added IsCurrent function to navbar to specify where in the navigation the user is located.
• Added aria-label to language selector
• Added aria-invalid to identify incorrectly filled in fields.
• Added language attributes to Language dropdown.
• Changed Logo alt text from stockholm.se to Stockholm stad.
• Removed Lyssna function and scripts connected to that function.
• Changed panel ids to be unique.
• Added associated label to all select elements.
• Reworked how aria-live="assertive" by removing it or adding aria-live="polite" instead.
• Complemented focus functions to target previous element when closing alerts.
• Added text and icon to #cookie-legal-notice to show that it's opening in a new window.
• Restructure of headings to display a correct order when using screen readers.
• Changed FAQ links from to <button></button>
• Replace javascript functions with css pseudo-class :focus
• Changed fieldset+legend to label and connected it to the select element.

## [2.0.5] - 2020-10-19

Fixed

• Mandatory fields under radiobuttons in Stockholm stad Bootstrap Prototyp

## [2.0.4] - 2020-09-02

Fixed

• Timmar at 00

## [2.0.3] - 2020-09-02

Fixed

• Bug fix for validation

## [2.0.2] - 2020-08-31

Added

• Drag and drop files to input

## [2.0.1] - 2020-08-13

Removed

• Datepicker - removed scrolling with mouse (change of month)

------------------------------------------------------------

## [2.0.0] - 2020-07-20

Release notes

• Larger update to make the styleguide compliant with WCAG 2.1 aa

URL

• https://static.test.stockholm.se/styleguide-etjanst/2.0.0/

Changed

• Headers added to tables in my-matters.html
• Paragraph in my-profile.html
• Color contrast changed for everything (buttons, lists, dropdowns, links, borders, text) to 3:1 ratio
• Calendar UI and colors updated to comply with 3:1 ratio
• Tooltip UI changes
• Borders when elements are in focus have been made thicker, with higher contrast and with white outline for some elements (e.g. purple ones)
• Cookie disclaimer text
• FAQ header text
• Old error pages replaced with new ones (No more elephant)

Added

• Button with add attachment icon now has accompanying text
• Red required asterisk symbol now has an alternative text for screenreaders
• Spinner now has accompanying text
• When using the wizard, elements now have appropriate aria-label attributes
• Alternative text for 'Open in new window' icon
• Alternative texts for 'Bilder'
• Caption tag added as header for all Tables (not tables used as list elements)
• Spinner now has attributes needed for screenreader compatibility
• Navigation bar now has attributes needed for screenreader compatibility
• Wizard now has attributes needed for screenreader compatibility
• Search input now has attributes needed for screenreader compatibility
• Alert box now has a close button (in the shape of an 'x' at the top right)
• PDF icons now has accompanying label
• New page added with example of look and feel for sitemap
• Breadcrumb menu added on some pages where it was missing
• aria-hidden property added to email icons for screenreaders to ignore them

Fixed

• Button for datepicker now accessible via Enter keypress
• Slider is now complatible with screen readers
• Slider can now be used with keyboard and by tapping in smartphones
• Validation behavior changed to not validate on the fly, but when pressing submit button for form instead
• Validation markup changed to include reasons when failing to validate
• Unexpected language behaviour for date picker corrected
• Missing attributes for validation in Wizard
• Overflowing texts and placeholders for inputs in some scenarios
• Page my-invoices.html updated to be responsive
• Buttons in my-messages.html updated to be responsive
• Skip links (Hidden at the top of pages) updated to be compliant with screen readers
• Hamburger menu updated to be compliant with screen readers
• delete-password-account.html page - closing of popup window bug fixed
• for and Ids attributes in form elements are now matched together
• Strange behaviour when opening and closing popovers fixed
• Critical and high error messages from https://validator.w3.org (same Ids, required attributes, wrong attributes etc.) fixed
• Captcha is now fully responsive
• Table elements is now fully responsive

Removed

• Attribute aria-haspopup for dropdown
• Hidden "@" Icon and button
• Paginering AJAX from bootstrap-components.html

------------------------------------------------------------

## [1.2.3] - 2019-04-29

Release notes

• Changes

URL

• https://static.test.stockholm.se/styleguide-etjanst/1.2.3/

Changed

• Added fix for empty text in data-no-match attribute for autocomplete

------------------------------------------------------------

## [1.2.3] - 2019-04-04

Release notes

• New features

URL

• https://static.test.stockholm.se/styleguide-etjanst/1.2.3/

Added

• Added modal dialogs in documentation

------------------------------------------------------------

## [1.2.3] - 2019-03-13

Release notes

• New features

URL

• https://static.test.stockholm.se/styleguide-etjanst/1.2.3/

Added

• Added show/hide form fields validation functionality

------------------------------------------------------------

## [1.2.3] - 2019-03-08

Release notes

• New features

URL

• https://static.test.stockholm.se/styleguide-etjanst/1.2.3/

Added

• Added group checkbox max and min validation functionality

------------------------------------------------------------

## [1.2.3] - 2019-03-05

Release notes

• New features

URL

• https://static.test.stockholm.se/styleguide-etjanst/1.2.3/

Added

• Added trim functionality for usernames firstname for mobile views

------------------------------------------------------------

## [1.2.2] - 2019-02-07

Release notes

• Changes, new features

URL

• https://static.test.stockholm.se/styleguide-etjanst/1.2.2/

Changed

• Removed unused folders in root project

Added

• Table example to documentation
• New grunt tasks and automation
• Added beautifier tasks

------------------------------------------------------------

## [1.2.2] - 2019-02-04

Release notes

• New features

URL

• https://static.test.stockholm.se/styleguide-etjanst/1.2.2/

Added

• Links to Karta in example and documentation

------------------------------------------------------------

## [1.2.2] - 2018-12-12

Release notes

• New features

URL

• https://static.test.stockholm.se/styleguide-etjanst/1.2.2/

Added

• Manual for Style Guide

------------------------------------------------------------

## [1.2.2] - 2018-10-15

Release notes

• Changes, new features

URL

• https://static.test.stockholm.se/styleguide-etjanst/1.2.2/

Changed

• Behaviour of datepicker, it now open relative to input, not trigger button

Added

• New component - Input range (skjutreglage)

------------------------------------------------------------

## [1.2.1] - 2017-10-19

Release notes

• Bugfixes, changes, new features

URL

• https://static.test.stockholm.se/styleguide-etjanst/1.2.1/

Fixed

• Bug affecting the color of carets on nav-pills on active/inactive state
• Bug with search form toggle
• Bug concerning breakpoints when toggeling right column on filter page
• Bug with media queries affecting hidden-classes
• Bug with long modals on mobile

Changed

• Functionality for toggleText() to handle dynamically added elements in the DOM
• Functionality to handle dynamically added file upload fields in the DOM
• Removed small input examples
• Change behavior of hidden-{breakpoint} classes. They now go from {breakpoint} and up. Please update your markup accordingly if affected.

Added

• Example of input field with help text in a help-block
• Example of input field with help text in a tooltip
• Added preventDefault() to filter close button
• Utility class for display: table
• Utility class for display: table-cell

------------------------------------------------------------

## [1.2.0] - 2017-05-23

Release notes

• Bugfixes, changes, new features

URL

• https://static.test.stockholm.se/styleguide-etjanst/1.2.0/

Changed

• Changed scroll direction of Datepicker. Now it's: Down = Increase date, Up = Decrease date
• Markup for datepicker for support of dynamic parent container size. Please change your markup accordingly
• Changed markup for dismissable popovers for Safari support. <button> replaced with <a>
• Behaviour of filter checkbox children. Checking all children now also checks parent checkbox
• Removed small and x-small button examples
• Changed classes and breakpoints of collapsing buttons, please update your markup according to following examples
• Changed breakpoints of classes beginning with visuallyhidden-on-. See utility classes for reference
• Autocomplete is now absolute positioned

Added

• Added icon button examples
• Added collapsing button examples
• Utility classes for text-wrapping with wrap and nowrap values
• Utility classes for text-decoration with underline and initial values
• City region selector added to documentation

Fixed

• Buggy behaviour of datepicker trigger. Datepicker now only fires when clicking the date button, not the date input field (this is native behaviour of the datepicker)
• Fixed issue with scrolling after resizing the browser after toggeling the filter navigation
• Fixed horizontal scroll bug when expanding filters
• Removed trailing console.log
• Buggy loader in newer Chrome
• Disappearing loader example on mobile on Bootstrap components page

------------------------------------------------------------

## [1.1.1] - 2017-04-04

Release notes

• Bugfixes

URL

• https://static.test.stockholm.se/styleguide-etjanst/1.1.1/
Fixed
• Reverted class of ribbon back to bg-ostermalm

------------------------------------------------------------

## [1.1.0] - 2017-03-21

Release notes

• Bugfixes, new features

URL

• https://static.test.stockholm.se/styleguide-etjanst/1.1.0/

Added

• Changelog
• Description of CDN and versions
• Standard search
• Static datepicker option
• Maintainance page
• Popover with close trigger
• Download Styleguide as Zip
• Modifier class to loader that forces vertical centering
• Caret support for nav-pills

Fixed

• Missing favicon.ico asset file
• Broken link from Documentation to Global message
• Tooltips not working on mobile devices

Changed

• Changed wrapper class around element site-header from bg-city-light to site-header-wrapper
• Markup for Autocomplete

------------------------------------------------------------

## [1.0.0] - 2017-01-20

Release notes

• First release

URL

• https://static.test.stockholm.se/styleguide-etjanst/1.0.0/