Komponent för Länklista

[JohannaOlin]

Beskrivning

Kodning av komponenten Länklista (modul)

Acceptanskriterier

• [ ] Komponenten ska fungera på desktop, tablet och mobil
• [ ] Komponenten ska fungera i IE, Edge, Chrome och Safari

[fridabergentoft]

Länk till komponenter: https://www.figma.com/proto/CMYZeVSIh8UkD2VUQvu3hAHb/Komponentbibliotek-2.0?node-id=90%3A61&viewport=519%2C1946%2C0.898487&scaling=min-zoom

[viktor-sarge]

Den här är typiskt en sådan där man vill använda en aria-label som knyter ihop listan med rubriken. Typ:

<div class="rh-linkgroup">
    <h2 id="454545">Länkar till styrdokument</h2>
    <div class="rh-linkgroup-card">
        <ul aria-labelledby="454545">
            <a href="">Lorem ipsum...</a>
            <a href="">Lorem ipsum...</a>
        </ul>
    </div>
</div>

Bortse från att namngivningen kanske blev lite lökig :) Men principen med att knyta ihop en ul med en rubrik som redan finns på sidan gör att man kommer att höra något åt hållet "Lista 'länkar till styrdokument", 2 objekt" när man lyssnar sig fram på sidan och då faktiskt vet kontexten för länkarna. Mycket praktiskt.

[viktor-sarge]

Hej Jennie!

Jag och Frida kollade det grafiska och vill dra isär länkarna lite på höjden. Ungefär åt det här hållet.

[brightjennie]

Hej! Detta är nu fixat. Samt några px till em där jag missat att formatera om det.

[viktor-sarge]

Lite mer teknisk QA:

• [ ] Finns en "dispaly: block" i rh-linkgroup.scss

• [ ] Padding använder relativa mått medan margin använder px - kan båda köra relativa?

• [ ] Klassen .active är generellt namngiven men verkar ha beteende specifkt för komponenten. Missar jag något eller kommer det göra att .active bara fungerar för detta case eller mycket snarlika?

• [ ] Selecta inte på taggar utan BEM:a hela vägen. Istället för att nästla så att man selectar "li som ligger inuti en .rh-linkgroup-panel" så selekta direkt på t.ex. "rh-linkgroup-listitem" (utan nästling om den inte är nödvändig). På det viset hänger vi inte upp de enskilda delarna på varken hur de nästlas eller vilka taggar de har.

[viktor-sarge]

Tack Jennie! Du hann fixa en del medan jag skrev :) Jag lägger tillbaka den så länge med det sista i kommentaren ovan.

[brightjennie]

Så! nu har jag snyggat till koden en hel del med klasser som inte sitter taggar. Blev mycket bättre! Bra input!

[viktor-sarge]

Noterar att när man gör den väldigt smal så försvinner den fjärde länken. Antar att det är "overflow:hidden" som är anledningen. Men jag ser inte riktigt varför den begränsas på höjden, det är ju ingen max-height eller liknande vad jag kan se. Vet ni om det är något med komponentens CSS som spökar?

Det är ju ett extremfall som vi kanske inte behöver lägga massor med tid på, men skickar en det ifall ni vet och kan lösa.

[brightjennie]

Åtgärdat :)

[viktor-sarge]

Gött! Jag av-assignar mig. Frida - lägg till "ready for release" om du är nöjd.

(Note to self - flytta aria-elementet till boxens rubrik istället för gruppens)

[fridabergentoft]

Jag känner mig nöjd med komponenten!