minvws / nl-rdo-manon Goto Github PK

Zebra striping can be done through css unless expando rows are used as they add hidden rows in between.

Goal:

• The JavaScript used to solve this problem should only be used when expando rows are used in the table.
• For regular tables striping should be available as a choice and added through css.

Based on the designs in figma:

https://www.figma.com/file/kfbTM5493WISDss0aUNdZ4/Manon-%7C-Fundamentals?node-id=117%3A27&t=pjwMJQyCucfLM9x6-1

The navigation component (navigation.scss needs to be added to docs.) should be added to the documentation.

Update the documentation for the <code> element to the latest template.

Related to #239

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>

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.

Expected behavior

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'

Governance

• I've read the contributing document https://github.com/minvws/.github/blob/master/CONTRIBUTING.md
• I've read and understand the Code of Conduct https://github.com/minvws/.github/blob/master/CODE_OF_CONDUCT.md
• I understand that any contributions or suggestions I made may make it into the actual code. I've read the License https://github.com/minvws/nl-covid19-notification-app-coordination/blob/master/LICENSE.txt and the contributor license agreement https://github.com/minvws/nl-covid19-notification-app-coordination/blob/master/CLA.md

• Add additional styling options:
  • flex-wrap
  • align-items

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.

Create a template that can be used for component tests & examples documentation.

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-help.html

We need to style button icon:before.

<a href="https://example.nl/create" class="button"><span class="icon icon-user"></span> Nieuwe organisatie aanmaken</a>

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:

• Add the grid system choices to a css file which contains the expected breakpoints.
• Connect these breakpoints to the components through variables. (note, css-variables can not be used within media queries. That's why we use sass. So these need to be sass variables that can be set. I believe sass variables can contain css-variables which means the breakpoints could be set through css-variables within a css file just as we define all other styling choices. But this needs to be tested.)

Describe the bug, issue or concern

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.

Expected behavior

The <a> tag will assume it's direct parent's typography styles.

Screenshots

Governance

• I've read the contributing document https://github.com/minvws/.github/blob/master/CONTRIBUTING.md
• I've read and understand the Code of Conduct https://github.com/minvws/.github/blob/master/CODE_OF_CONDUCT.md
• I understand that any contributions or suggestions I made may make it into the actual code. I've read the License https://github.com/minvws/nl-covid19-notification-app-coordination/blob/master/LICENSE.txt and the contributor license agreement https://github.com/minvws/nl-covid19-notification-app-coordination/blob/master/CLA.md

• Rewrite layout settings to it's easier to use.
• Test the new layout system
• Update documentation

Add footer content wrapper as a layout option

Add documentation and tests for the "skip to content" component.

Add adjustable font-weight to notifications

Current after #243:

Before:

The labels are not correct aligned.

For more information see: https://minvws.github.io/nl-rdo-manon/documentation/components/form-input-password-test.html (Gegroepeerd binnen een fieldset)

Expected:

Current:

Class .column-2 needs padding: 0 to override default padding

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"

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";

Filter component which allows the user to filter based on visual content within the multi select filter list.

• Design
• Build component
• Add component to Manon docs
• Add tests and examples to Manon docs
• Style component in Manon docs branding

The tabs component (tabs.scss needs to be added to docs.) should be added to the documentation.

Footer documentation is missing css example and the table with available variables should be updated.

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.

.collapsing-menu should not be used anymore
navigation.js should not be used anymore

Related to #231

Fonts matching Manon docs branding

It is currently not possible to set font-family for breadcrumb-bar-icon.

Header navigation component needs documentation

• General documentation
• Tests

The documentation for Zijmenu states:

1. Voeg de class sidemenu toe aan de main.
2. 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>

Describe the bug, issue or concern

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.

Expected behavior

Both radio buttons and checkboxes can be implemented without a required wrapping <form> element.

Screenshots

Without wrapping <form>:

With wrapping <form>:

Note the extra grey background the form element adds. That might also not be desirable in some cases.

Governance

• I've read the contributing document https://github.com/minvws/.github/blob/master/CONTRIBUTING.md
• I've read and understand the Code of Conduct https://github.com/minvws/.github/blob/master/CODE_OF_CONDUCT.md
• I understand that any contributions or suggestions I made may make it into the actual code. I've read the License https://github.com/minvws/nl-covid19-notification-app-coordination/blob/master/LICENSE.txt and the contributor license agreement https://github.com/minvws/nl-covid19-notification-app-coordination/blob/master/CLA.md

The HTML element <code> styling deserves an update

For example color needs to be styled on focus.

Filter component which allows the user to set filter options on tree structures.

• Design
• Build component
• Add component to Manon docs
• Add tests and examples to Manon docs
• Style component in Manon docs branding

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

• Add set
• Integrate in manon docs
• Update documentation

Component: Build multi-select filter list component.

• Design
• Build component
• Add component to Manon docs
• Add tests and examples to Manon docs
• Style component in Manon docs branding

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.

We need to set the width for example.

• Update to new documentation template where necessary.

• Design
• Build component
• Add component to Manon docs
• Add tests and examples to Manon docs
• Style component in Manon docs branding

Design: