Klachtenformulier productpagina 418 #437
Conversation
…rom other page to test:works) to wmebv folder and add productenpagina-klachtenformulier.css(still empty) to the css folder.
…ample + add comments w notes and questions
…moved someunnecessary code and dependencies
…lachtenformulier.css)
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
TessaViergever
requested review from
Robbert,
Yolijn,
bddjong,
scar055,
AliKdhim87,
ryanvvalkenhoef and
Marwaxhello
packages/next-templates/src/app/wmebv/productenpagina-klachtenformulier/page.tsx
Outdated
Show resolved
Hide resolved
packages/next-templates/src/app/wmebv/productenpagina-klachtenformulier/page.tsx
Outdated
Show resolved
Hide resolved
| <ExampleHeader /> | ||
| <ExampleNavigation /> | ||
|
|
||
| <PageContent className="voorbeeld-page-content-flex"> |
There was a problem hiding this comment.
Is deze class nodig? volgens mij doet het niks
There was a problem hiding this comment.
Deze heb ik overgenomen en heb ik erop laten staan omdat (ik dacht dat) hij styling krijgt vanuit wmebv.css:
Heb de class er net even afgehaald en getest en deze lijkt (voor zover ik zie) inderdaad niets te doen. 🤷🏻♀️
Misschien dat PageContent styling vanuit globals meekrijgt?
Dit is een goed voorbeeld van dat ik nog niet genoeg weet over (het toepassen van) de css. /het is mij niet duidelijk waar bepaalde styling vandaan komt en hoe het precies toegepast wordt. Heb je hier nog tips voor toevallig?
There was a problem hiding this comment.
Het is wel eenbeetje verwarrend voor mij ook😂 omdat de css ligt overal en nergens. Volgens mij als je op de class hovert kan je zien waar ie vandaan komt
| <Article id="main" className="voorbeeld-article-space "> | ||
| <BreadcrumbNav label="Kruimelpad"> | ||
| <BreadcrumbNavLink href="/wmebv#">Terug</BreadcrumbNavLink> | ||
| </BreadcrumbNav> |
There was a problem hiding this comment.
Waarom gebruik je BreadcrumNavLink? hoort dat bij een van de wmebv componenten? De terug Link die ik gebruik heeft ook een pijl ervoor staan :
<Link className="voorbeeld-link-back" href="./">
<BacklinkIcon />
Terug
</Link>
There was a problem hiding this comment.
Hmm, goede vraag. Ik heb deze inderdaad in wmebv gezien en overgenomen. Maar ik vind het misschien wel een betere optie dan alleen link + backlinkicon. Het is een kruimelpad dus in dat geval is het BreadcrumNavLink specifieker dan alleen een link + class denk ik. Bij mij op de pagina staat nu alleen nog "terug" maar het Figma ontwerp laat een langer kruimelpad zien en er zijn op GV ook genoeg lagen voor een kruimelpad (home-contact). Dit had ik toevallig op mijn to-do lijstje staan voor vandaag haha!
Als ik in de Utrecht Storybook documentatie kijk zie ik dezelfde redenering als die ik noemde. Alleen het voorbeeld wat ze daar geven is weer anders dan zowel jouw als mijn optie. 🤷🏻♀️
https://nl-design-system.github.io/utrecht/storybook-react/?path=/docs/react-breadcrumb-nav--docs
Als ik in de Figma gemeentevoorbeeld bibliotheek kijk zie ik dit voorbeeld bij groot scherm:
En de documentatie waarnaar verwezen wordt (https://www.nldesignsystem.nl/breadcrumb/) geeft vooral error's. Op de pagina zelf maar ook als ik naar de links ga kom ik uit op 404.
Conclusie: ik weet niet wat de juiste optie is en de documentatie maakt me niet veel wijzer.🤷🏻♀️🥲
| <BreadcrumbNavLink href="/wmebv#">Terug</BreadcrumbNavLink> | ||
| </BreadcrumbNav> | ||
| <Heading1>{pageTitle}</Heading1> | ||
| <Paragraph lead> |
There was a problem hiding this comment.
Is er geen design token die dit text dikker kan maken? Volgens mij maakt 'lead' de paragraaf groter of dikker
There was a problem hiding this comment.
Dit heb ik overgenomen van de contactpagina van wmebv omdat ik in het Figma ontwerp zag staan dat het paragraph lead is:
Is dit niet iets wat op elke pagina zo is (zou moeten zijn?)
→ ik heb even rondgekeken op de website en in de code en ook dit is wederom niet consistent. Op sommige pagina's is de eerste paragraph "lead" en op andere pagina's niet. Op de pagina's waar het gebruikt wordt, is het wel op dezelfde manier gedaan als hoe ik het heb gedaan.
In Storybook zie ik bij de css componenten wel iets over lead en tokens staan (https://nl-design-system.github.io/utrecht/storybook/?path=/docs/css_css-paragraph--docs#lead). Ik heb in de code base gezocht naar utrecht-paragraph--lead, en kon deze niet vinden. Bij react componenten zie ik juist lead staan zoals ik het gebruikt heb (https://nl-design-system.github.io/utrecht/storybook/?path=/docs/react_react-paragraph--docs#lead-paragraph). Omdat dit op meerdere plekken op deze manier toegepast wordt denk ik dat dit de juiste manier is. Maar not sure, ik zal er een issue van aanmaken.
…dd class and styling
packages/next-templates/src/app/productpagina-klachtenformulier/page.tsx
Outdated
Show resolved
Hide resolved
packages/next-templates/src/app/productpagina-klachtenformulier/page.tsx
Outdated
Show resolved
Hide resolved
packages/next-templates/src/app/productpagina-klachtenformulier/page.tsx
Outdated
Show resolved
Hide resolved
packages/next-templates/src/app/styling/css/productpagina-klachtenformulier.css
Outdated
Show resolved
Hide resolved
packages/next-templates/src/components/PreFooterNav/pre-footer-nav.css
Outdated
Show resolved
Hide resolved
packages/next-templates/src/components/PreFooterNav/pre-footer-nav.css
Outdated
Show resolved
Hide resolved
Hola! Hier mijn draft PR voor de product pagina klachtenformulier. Zoals ik vanochtend al noemde is het een work in progress.
Het is me bijv. nog niet helemaal duidelijk welke styling precies waarvandaan komt, wat er nog nodig is en hoe ik dit doe.
Vandaar dat ik een overzicht voor mezelf probeer te maken in productpagina-klachtenformulier.css om de volgende dingen in kaart te brengen:
Het natuurlijk het liefst gelijk zo efficient mogelijk (zo min mogelijk code, DRY en op zo min mogelijk verschillende plekken in het project). Alles bij elkaar lijkt me vrij ambitieus en het zou goed kunnen dat ik het groter maak dan nodig is.🙃
Er staan ook wat concretere dingen in die ik wil aanpassen zodat de pagina er meer uitziet zoals in Figma. Dit zijn denk ik kleine bomen die ik door bovenstaande bos niet meer goed zie. Ook weet ik niet zeker of die dingen bij de styling van Utrecht horen of bij GV.
Wat kan er beter? Ontbreekt er iets? Is er een andere manier om iets te doen? Heb je tips voor hoe ik het kleiner zou kunnen maken? Feedback is welkom! 🙏🏼