Ae styleguide development

[andrewebdev]

Issue: #35

This is the PR for the initial styleguide. Alongside this there are also some bit that I changed related to the styleguide compliance.

Change log

• Moved globals.scss to the styles directory. The goal here is to have global styling files in their own directory.
• Extracted some common styles for Typography, Elements, and Page into their own css modules, which we import in globals.
• Created some default CSS variables that we can hook into when we start doing the theming, many of these variables are also used by the newly added react-aria components.
• Updated layout.tsx to use the code formatting for classes and id's as outline in the styleguide.
• Updated some CSS classes to remove verbose nameing. Rationale? We know we are working with the DMPUI frontend, so there is no need to prefix every class with dmpui.
• Created the Styleguide Page, as well as custom components and css that are only to be used on the Styleguide.

[jupiter007]

@andrewebdev thanks for putting together the initial styleguide. It's progressing nicely.

[jupiter007]

@andrewebdev - one thing I noticed was that there is a warning error in the Console for the styleguide page that says: If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility. I think it's a glitch in react-aria-components, because the "Email" field has an associated label, but it is giving that error unless we add an aria-label attribute to the input field.

[jupiter007]

Also, @andrewebdev can you update the CHANGELOG.md file? I'm hoping that can become a regular thing when putting changes into PR review. Thank you.

[andrewebdev]

Regarding the label aria field, I'll have a look at that. It's plausible that I missed something when adding the component. Will have a look at it.

Re. changelog, good idea! I'll update the changelog with notes from this PR