minvws / nl-rdo-manon Goto Github PK
View Code? Open in Web Editor NEWManon is een design framework
Home Page: https://minvws.github.io/nl-rdo-manon/
License: Other
Manon is een design framework
Home Page: https://minvws.github.io/nl-rdo-manon/
License: Other
Footer documentation is missing css example and the table with available variables should be updated.
Filter text "show all filters" should be visible on default
Documentation needs to be updated/added for:
/* Text */
@use "@minvws/manon/link";
/* Navigation */
@use "@minvws/manon/navigation";
@use "@minvws/manon/navigation-link";
@use "@minvws/manon/navigation-link-hover";
@use "@minvws/manon/navigation-link-active";
@use "@minvws/manon/navigation-link-visited";
/* Header navigation */
@use "@minvws/manon/header-navigation";
@use "@minvws/manon/header-navigation-link";
@use "@minvws/manon/header-navigation-link-hover";
@use "@minvws/manon/header-navigation-link-active";
@use "@minvws/manon/header-navigation-link-visited";
/* Footer */
@use "@minvws/manon/footer";
@use "@minvws/manon/footer-link";
@use "@minvws/manon/footer-link-hover";
@use "@minvws/manon/footer-link-active";
@use "@minvws/manon/footer-link-visited";
@use "@minvws/manon/footer-two-thirds-one-third";
The tabs component (tabs.scss needs to be added to docs.) should be added to the documentation.
The documentation for Zijmenu states:
- Voeg de class sidemenu toe aan de main.
- Voeg direct binnen de main een nav toe met de gewenste inhoud.
However, the HTML spec mentions:
To wrap the main content of the page (as opposed to the header, the footer, the navigation bar, and a sidebar), the
main
element is used.
…and MDN says:
Content that is repeated across a set of documents or document sections such as sidebars, navigation links, copyright information, site logos, and search forms shouldn't be included
So the following suggested HTML structure is opposite of what the HTML standard and MDN recommend:
<main nav="sidebar">
<nav>…</nav>
…
</main>
Currently the a radio button requires a wrapping <form>
element to get the right styling applied correctly. A checkbox input does not require a wrapping <form>
. Making wrapping it with a <form>
element optional for both, AND achieving feature parity between them would be nice.
Both radio buttons and checkboxes can be implemented without a required wrapping <form>
element.
With wrapping <form>
:
Note the extra grey background the form element adds. That might also not be desirable in some cases.
In order to make the .js
scripts easier to use in other frameworks, we need default exports of init[...]()
functions. For example navigation.js
has export
'ed it's initNavigation()
function. The accordion.js
file does not.
All component scripts have a (default) export of some kind of init[...]
function. So we can do something like:
import { initFoo } from '@minvws/manon/foo.js'
Or
import foo from '@minvws/manon/foo.js'
There are many place where expando-rows are used to show extra info in dropdown box:
<button class="expando-button" data-icon-open-class="icon ti-chevron-down" data-icon-close-class="icon ti-chevron-up" data-close-label="{% translate "Close details" %}"> {% translate "Open details" %} </button>
The dropdown works good when it is outside a form
Issue: When the expando rows are included in a form element, it will automatically trigger form submission.
How to solve this problem?
Because the expando-rows is defined as a button an no type is defined it will automatically set type="submit"
Put type="button" on the expando-rows class button
<button type="button"></button>
A fluid grid system allows designers to design components that are responsive. Design choices made within that system should be translatable to manon components. So they can behave as intended.
A technical design is needed.
Thoughts:
Flexbox calculates gap on all object within the parent object.
The goal is to hide the object but keep it accessible for accessibility tools. Display none would solve the visual problem but would also hide the object from screen readers. A solution is needed where the object doesn't get gap between the visually hidden object but is still accessible for screen readers.
Currently this list is missing padding:
What do we want to be the default padding instead of 0
?
Setting --navigation-list-padding
to a value of 0 0 0 2rem
looks good to me.
For more information see: https://minvws.github.io/nl-rdo-manon/documentation/components/form-input-password-test.html (Gegroepeerd binnen een fieldset)
Class .column-2 needs padding: 0 to override default padding
The HTML element <code>
styling deserves an update
It is possible to style the header navigation button, but we cannot style the states of the button. It would be nice if we could set styling for that.
Header navigation component needs documentation
Filter component which allows the user to set filter options on tree structures.
When adding an <a>
tag in a paragraph or heading, the <a>
keeps it's own typography styles. I would assume that it would look the same as the text the link is placed within.
E.g.
The <a>
tag will assume it's direct parent's typography styles.
Add footer content wrapper as a layout option
The navigation component (navigation.scss needs to be added to docs.) should be added to the documentation.
Add adjustable font-weight to notifications
Filter component which allows the user to filter based on visual content within the multi select filter list.
Related to #239
Based on the designs in figma:
Create a template that can be used for component tests & examples documentation.
Add documentation and tests for the "skip to content" component.
If a slogan or text within a logo is in a different language then the document it should be marked as such. Making it possible for accessibility tools to use the correct language when reading it out loud.
E.g lang="en"
For more information see: https://minvws.github.io/nl-rdo-manon/documentation/components/form-help.html
.collapsing-menu should not be used anymore
navigation.js should not be used anymore
Related to #231
Update the documentation for the <code>
element to the latest template.
Fonts matching Manon docs branding
Zebra striping can be done through css unless expando rows are used as they add hidden rows in between.
Goal:
Add body text set so it can be used throughout the application. And have multiple styling choices based on the type of text.
e.g
Default
Strong
Emphasized
Emphasized strong
De-emphasized
De-emphasized strong
etc
Create a template that can be used for component documentation.
Currently the styling of header-navigation-link-hover is visible on the breadcrumb link hover but for the hover on the breadcrumb we want to set a different text-color for example.
Component: Build multi-select filter list component.
For example color needs to be styled on focus.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.