Komponenter
Denne side er et bibliotek, som indeholder nogle appens komponenter. Dokumentation består som regel af navngivning, opbygning, farver og spacing. Reglerne der står på denne side skal anvendes.
Schedule – Calendar
Kalenderen har til formål at planlægge ugerne i forhold til forskellige tilstande, så appen kan styre temperaturen i de forskellige rum automatisk. Planlægningen går ud på at indstille, hvornår man er hjemme, på arbejde, eller sover, så temperaturen i huset kan tilpasses de forskellige behov.
Anvendelse: Denne komponent anvendes som forside på “Schedule” siden
ATOMS & MOLECULES
Kalender komponenten sammensættes af flere mindre komponenter:
Calendar__month: viser den aktuelle måned og giver mulighed for at skifte måneden
Calendar__labels: indeholder Calendar__label og calendar__week
Calendar__hours: indeholder Calendar__hour, hvilket består af timen og en linje
SIZE & SPACING
Margins
8px
spacing_8
Gap komponenter
12px
spacing_12
Gap-inline
afhængig af skærmstørrelsen
Gap label
16px
spacing_16
Width mode
24px
spacing_24
Border-radius
8px
radius_M
COLOR TOKENS
De forskellige tilstande følger et farvemønstre, som går igen i hele appen.
Ugedage og tidspunkter bruger den sekundære tekstfarve, da disse er faste og uændrede, mens dato, ugenummer og måned bruger den primære tekstfarve, da de ændrer sig og er mere aktuelle.
Schedule – editPeriod
EditPeriod komponenten er en komponent til at redigere kalenderen. Den giver mulighed for at vælge et tidsrum og en tilstand, som skal være aktiv indenfor tidsrummet. På siden kan der bruges så mange af disse komponenter, indtil 24 timer er fyldt.
Anvendelse: Denne komponent bruges på “Schedule” siden, på “Edit calendar”-undersiden.
ATOMS & MOLECULES
Komponenten sammensættes af 2 komponenter:
editPeriod__time: består af dropdown og icon__arrow
editPeriod__mode: består af editPeriod__mode og evtl. icon__delete
SPACING
Padding-inline
16px
spacing_16
Padding-block
12px
spacing_12
Gap inline
12px
spacing_12
Gap block
12px
spacing_12
Border-radius
8px
radius_M
Padding-inline
8px
spacing_8
Padding-block
4px
spacing_4
Gap mode
8px
spacing_8
Gap elements
12px
spacing_12
Border-radius
4px
radius_S
COLOR TOKENS
Komponenten bruges med farvemønstre, som gentager sig gennem appen.
text__primary viser, at tiden kan ændres, hvorimod text__secondary indikerer, at tiden ikke kan forandres. Det skyldes, at starttidspunktet altid tilpasser sig sluttidspunktet af det forrige tidsrum.
For at gøre det tydeligt, at det går ud på at vælge tilstande til kalenderen, vises selve tilstande i de samme farver, som de altid vises i på alle sider.
Button
Vores primære og sekundære knapper anvendes på tværs af appen. Den primære knap fremhæver hovedhandlinger, der kræver brugerens opmærksomhed, mens den sekundære knap understøtter mindre vigtige handlinger.
COLOR TOKENS
Den primære knap har en iøjnefaldende orange baggrund med en mørkere orange kant.
Den sekundære knap har en hvid baggrund og grå kant, hvilket gør den mere neutral.
Begge knapper ændrer sig i aktiv tilstand, hvor den primære bliver mørkere, og den sekundære får en let farveændring ved brugerinteraktion
SIZE & SPACING
small
Padding-block
24px
spacing_24
Padding-inline
12px
spacing_12
Border-radius
4 px
radius_S
Large
Padding-block
32px
spacing_32
Padding-inline
16px
spacing_16
Border-radius
4 px
radius_S
STRUCTURE & NAMING
Knapperne er navngivet med en modifier-klasse, der angiver deres størrelse og sikrer, at de kan tilpasses forskellige skærmstørrelser
De har en active state, som vises, når brugeren interagerer med knapperne, f.eks. ved at klikke på dem. Active state giver visuel feedback og fremhæver, at knapperne er i brug.