Standaard button component maken #16

[Daan645]

Wat heb ik gemaakt?

Ik heb een button component gemaakt waarin je verschillende soorten styling en text kunt veranderen doormiddel van variabelen.

Hoe werkt het?

Text veranderen

Door het label variabel te gebruiken kun je de text in de button veranderen door de gewenste text mee te geven.

Dit doe je zo:

<Button  label="App de studio" ></Button>

Daar pas je in het component de volgende variabel mee aan:

 export let label = "";

Href veranderen

Door het href variabel te gebruiken kun je de href veranderen door de gewenste link mee te geven.

Dit doe je zo:

<Button  href="www.veronica.nl" ></Button>

Daar pas je in het component de volgende variabel mee aan:

 export let href = "";

Title veranderen

Door het title variabel te gebruiken kun je de title veranderen door de gewenste text mee te geven.

Dit doe je zo:

<Button  title="Stuur whatsapp bericht naar de studio" ></Button>

Daar pas je in het component de volgende variabele mee aan:

 export let title = "";

Svg toevoegen of verwijderen

Door het showSvg variabel te gebruiken kun je de svg aan of uit zetten, true is aan en false is uit.

Dit doe je zo:

<Button  showSvg={false of true} ></Button>

Daar pas je in het component de volgende variabele mee aan:

 export showSvg = true;

Kleur veranderen

Door de backgroundColor variabel te gebruiken kun je de kleur veranderen door de gewenste kleur mee te geven.

Dit doe je zo:

<Button  backgroundColor="blue" ></Button>

Daar pas je in het component de volgende variabel mee aan:

 export let backgroundColor = "var(--secondary-color)";

Text kleur veranderen

Door de textColor variabel te gebruiken kun je de kleur veranderen door de gewenste kleur mee te geven.

Dit doe je zo:

<Button  textColor="blue" ></Button>

Daar pas je in het component de volgende variabel mee aan:

 export let textColor = "var(--secondary-color)";

Transparantie bij 600px uit of aan zetten

Door het transparent variabel te gebruiken kun je de mediaquery aan of uit zetten waarmee de knop transparant wordt, true is aan en false is uit.

Dit doe je zo:

<Button  transparant={false of true} ></Button>

Daar pas je in het component de volgende variabele mee aan:

 export transparant = true;

Combineren van variabelen

Je kunt alle variabele combineren op de knop zodat deze naar wens aangepast wordt ook kun je variabelen niet meegeven als je deze niet nodig hebt ze hebben namelijk allemaal een standaard waarde, dit doe je zo:

<Button label="App Studio" href="https://programma.fdnd.nl/" title="Stuur whatsapp bericht naar studio" showSvg={true} transparent={false} ></Button>

Welke testen heb ik uitgevoerd?

ik ben onze hele DOD afgegaan en heb de functionaliteit ook getest.

Code

• [x] Je code voldoet aan de afgesproken conventies
• [x] Je bent consistent met het gebruiken van tabs en enters
• [x] Je structureert je code met comments
• [x] Je legt ingewikkelde code uit met comments

Ontwerp

• [x] Het afgeronde component komt overeen met het ontwerp

Responsive

• [x] Het is responsive op alle schermen tot minstens 300px breed

Toegankelijkheid

• [x] Is te bedienen met toetsenbord
• [x] Heeft een duidelijke focus state
• [x] Er wordt gebruik gemaakt van semantische html (probeer divs te voorkomen)
• [x] Op alle buttons en overige klikbare elementen staat cursor: pointer
• [x] Je scoort minstens een 85% op Lighthouse voor zowel mobiel als desktop op toegankelijkheid
• [x] Bij afbeeldingen, buttons en links staan alt tags die kort en duidelijk beschrijven wat het doet
• [x] Je html komt door de html validator
• [x] Er is op meerdere browsers getest, minstens firefox en chrome

Performance

• [x] Alle afbeeldingen hebben een standaard hoogte en een standaard breedte meegekregen in de html
• [x] Het formaat van elke afbeelding is webp of svg
• [x] Je hebt geen onnodige / dubbele code
• [x] Je behaalt een 85% op de performance Lighthouse test op zowel mobiel als desktop

Mergen

• [x] Alle merge conflicts zijn opgelost
• [x] Minstens 1 persoon heeft je code beoordeeld en goedgekeurd

Wat moet er getest worden?

Ik zou graag willen dat er iemand extra controlleert of:

• [ ] Alle functionaliteiten onder het kopje hoe werkt het, werken
• [ ] Of alles volgens code conventies is
• [ ] Of ik mij aan alle DOD's heb gehouden

[TomDeeterink1]

Ziet er goed uit mannen! Ik ga hem mergen, ik zie dat er goed gehouden is aan de conventies. En dat alle tests uitgevoerd zijn chapeau!