nl-design-system / backlog Goto Github PK
View Code? Open in Web Editor NEWCentral product backlog of the NL Design System.
License: European Union Public License 1.2
Central product backlog of the NL Design System.
License: European Union Public License 1.2
Button
Button component with variations, states and behaviour.
Documentation for general accessibility guidelines. Component-specific accessibility guidelines will be added to the component documentation and where applicable should cross-link with the general guidelines.
Some projects use NL Design System inside React projects.
Since Web Components are the foundation of the NL Design System components, these components should be usable in the latest stable release of React. Currently that is version ^17.0.0
.
We are looking for feedback from the community to gather the requirements.
Current considerations:
We need to come up with a clear and concise (as in ideally one paragraph) text snippet to explain what a design system is and how it benefits an organization.
The target audience for this piece of writing are for instance laymen who need to be sold on the benefits and opportunities for adopting a design system and the NL Design System in particular.
Every component in NL Design System that is a Web Component should be available separately to be used in projects, without installing many other components that are not relevant to the user.
package.json
settingsREADME.md
filePage header
A layout component which will wrap around the page-footer-content. Each organisation or project might have a different page-footer-content component.
Proposed name: nl-icon-notification-success
.
An icon that notifies the user the provided data does not meet the requirements. For example: "password is too short", "postal code is incorrect", "date of birth is missing".
Proposed name: nl-icon-notification-invalid
.
We should provide a definition of done to share the needs of the community and end-users with contributors.
DEFINITION_OF_DONE.md
in this repository.Alert
De alert component is er voor berichten die de gebruiker snel moet weten, omdat ze belangrijk zijn voor het uitvoeren van de huidige taak. De alert is alleen voor eenvoudige berichten. Gebruik in de alert geen buttons, geen formulier-componenten en geen complexe opmaak zoals tabellen.
Let op: de alert component gebruiken kan essentieël zijn voor gebruikers van een schermvoorlezer, maar onjuist gebruik kan heel erg vervelend zijn.
Gebruik niet een alert voor een algemene aankondiging die op meerdere pagina's staat, als het niet per se relevant is voor de huidige taak van de bezoeker. De alert wordt door schermvoorlezers als eerste voorgelezen op elke pagina waar de alert staat, het kan lastig zijn de website te gebruiken als de schermlezer elke keer wordt geblokkeerd met steeds dezelfde melding. Gebruik in die situaties de notification banner component.
de alert: wordt zo snel mogelijk aangekondigd.
Card is een groep van componenten een beetje net als badges. Dat komt omdat sommige cards een Card-as-link
zijn en anderen bijvoorbeeld een cta-button en een external-link erin hebben zitten. Den Haag heeft bijvoorbeeld ook nog een card die heel specifieke styling heeft zodat hij eruit ziet als een case-folder.
Todo: definieer welke card componenten er veel gebruikt worden.
Some projects use NL Design System inside Angular projects.
Since Web Components are the foundation of the NL Design System components, these components should be usable in the latest stable release of Angular. Currently that is version ^11.0.0
.
We are looking for feedback from the community to gather the requirements.
Current considerations:
Currently over 300 folks have joined our Slack channel at the Code for NL Slack, since starting the channel on October 17th, 2017:
#nl-design-system
Everyone is able to join via the form on the homepage of coderfor.nl.
We currently have 3 channels for slow-chat and sharing links for specific disciplines.
#nl-design-system-content
#nl-design-system-designers
#nl-design-system-developers
There is one private channel for sharing links to video meetings. The channel is invite-only, to prevent harassment (by bots or otherwise) of our video meetings. Sharing the link here or privately by other means is much preferred over adding a link in a public channel.
#nl-design-system-meetings
As a user of NLDS I want to read the code of conduct in both English and its Dutch translation.
Progress bar
A progress
tracker communicating background task progression to users.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
Examples:
Range
An input type="range"
-based slider.
https://www.uiguideline.com/components/slider
Meest gebruikte naam is Slider
, maar wij kiezen voor Range
omdat dit overeen komt met de HTML spec.
Page footer
A layout component which will wrap around the page-footer-content. Each organisation or project might have a different page-footer-content component.
Textarea
<textarea>
component allows users to enter multi-line text for use when more data is expected than a regular text input can contain.
You expect users to enter large amounts of text.
You expect users to only enter small amounts of text.
How to structure forms.
"Back links" often use a "← left arrow" icon. We should have an identifier for this use case.
Proposed name: nl-icon-navigate-back
.
We should link to a couple of popular icon sets with an implementation of this icon.
Documentation for general content guidelines. Component-specific content guidelines will be added to the component documentation and where applicable should cross-link with the general guidelines.
A dashboard displays a collection of related or unrelated information.
A dashboard must present the most important and relevant information to the user in a single glance.
The main navigation provides quick access to most often used sections of a site or product. It also provides users a quick glance of a product’s information architecture and highest level of hierarchy.
To make our documentation as portable as possible while still retaining the ease of writing in Google Docs we need to investigate an unobtrusive Google Docs to Markdown pipeline.
We can then make sure that documentation in Markdown can live inside of Storybook, next to design files and code implementation.
Net als alle andere navigations voor een specifiek doel, zoals breadcrumb-navigation, side-navigation, main-navigation en language-navigation
progress steps
De horizontale step indicator wordt afgeraden omdat je zelden alle stapnamen horizontaal kwijt kan. Op kleinere schermen sowieso niet en dan heb je weer een ander patroon nodig. Daarnaast is er moeilijk ruimte om de stappen een touch-target te geven die groot genoeg is om lekker te klikken.
Gov.uk zegt dat ook, niet doen dus!
Dit is de standaard step indicator en hoeft dus niet een losse variant te zijn.
Als PO ben ik niet inhoudelijk deskundig op UX terrein en al wat daar onder de motorkap mee te maken heeft. Als PO van het Virtueel Inkomens Loket wens ik wel de verantwoordelijkheid te bezigen om dit product te sturen op juiste match live versie tov releases/versioning van het NL Design System.
Om die rol waar te kunnen maken is het goed snappen van hoe NL Design System te volgen in het gebruik en/of bij te (laten) dragen met 'mijn' UX team.
Select
A dropdown menu, like <select>
.
To ensure all contributions are open source, we use a Contributor License Agreement (CLA).
The project uses CLA Assistant for GitHub, to automatically check if code contributors have signed the CLA when they make a Pull Request. Contributions via other channels, to a Design Kit in Figma or Sketch for example, do not yet have a process to ensure there is a CLA.
CLA.md
Used to indicate a warning message and ensure it receives the attention required. Usually similar to the Unicode warning sign emoji
Proposed name: nl-icon-notification-warning
At least one organisation uses NL Design System inside Blazor projects.
Since Web Components are the foundation of the NL Design System components, these components should be usable in the latest stable release of Blazor.
We are looking for feedback from the community to gather the requirements.
Current considerations:
What would be great to start with, is to have a small demo repository that uses Blazor to render a few of our web components.
The project would benefit from having a code of conduct, to provide a safe environment for everyone to contribute.
Based on the choice for the Contributor Covenant by the COVID-19 project, I decided to go for that as well. Their document is based on the version 1.4.
Version 2.0 provides some structure to have consequences for code of conduct violations, which seemed essential to me. This is the main reason I chose to go for that. @usethetics found out there is no Dutch translation for version 2.0. This means making the choice:
For now, the status quo is v1.4 in Dutch and v2.0 in English.
An open question is: where do we need to make mention of the code of conduct?
Current status:
CODE_OF_CONDUCT.md
so it can be detected by Github and linked from the interface automaticallyhoe zet je lokaal de web componnent poc en storybook op?
An icon that indiciates that information could not be retrieved or an action could not be performed. The error is usually caused outside of the control of the user.
A related icon is the invalid notification (#25), where user provided data does not meet the requirements.
Proposed name: nl-icon-notification-error
.
Tooltip
A tooltip discloses extra contextual information. Commonly a tooltip is displayed after being triggered by an on-page action indicating that extra information is available.
Toggletip #170
Table
Some lists, link lists in particular, use the "→ right arrow" as list item icon. The arrow should point in the text direction. This icon should be available for this purpose. We should link to a couple of examples of this icon in popular icon sets.
Proposed name: nl-icon-list-item-arrow
.
Future considerations:
A separate Figma library that houses all design tokens for the white-label theme. This library can be used as a starting point for other themes, new and translations of existing organisation brand styles.
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.