Icon: notification success

Proposed name: nl-icon-notification-success.

Code of Conduct

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.

https://github.com/minvws/nl-covid19-notification-app-website/blob/43e668103e8d674a15c9e9bfccff9d3f31999b6f/CODE_OF_CONDUCT.md

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:

providing no Dutch translation
using v1.4 in Dutch and v2.0 in English side by side
make an effort to translate v2.0 to Dutch
switch to v1.4 so we can have Dutch and English with the same content.

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:

The Code of Conduct is named CODE_OF_CONDUCT.md so it can be detected by Github and linked from the interface automatically
Choose a template for the Code of Conduct
Include the Code of Conduct in the GitHub repository
Give the Code of Conduct visibility in Slack
Provide a Dutch translation for the latest Contributor Covenant v2.0
Add Code of Conduct to the GitHub organisation overview

Component: Progress bar

Description

A progress tracker communicating background task progression to users.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

Use when

Examples:

uploading a file
loading a page

Don’t use when

data vizualisation is not a background task, use a different component for that
vizualising progress in a multistep form

Component: 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.

Componenten die lijken op alert

de notification banner #169: wordt ook snel aangekondigd, omdat het één van eerste onderdelen van de pagina is als je de banner plaatst aan het begin van de page header. Je kunt de banner overslaan een skip link.
de error appearance van de form field description: voor feedback in een formulier die hoort bij een form control. Wordt aangekondigd door schermlezers wanneer de form control focus heeft.

#nl-design-system Slack channel

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

Component: Text input

Component: Textarea

Description

<textarea> component allows users to enter multi-line text for use when more data is expected than a regular text input can contain.

Use when

You expect users to enter large amounts of text.

Don’t use when

You expect users to only enter small amounts of text.

Component: Tabs

Description

A tab interface chunks large content into smaller, digestible information pieces.

Anatomy of a tab interface

Tab container
Tabs

Tabs variations

Default tab
Current tab
Disabled tab

Interactive states

Default
Hover
Focus
Active

Use when

Don’t use when

Component: Range

Description

An input type="range"-based slider.

Use when

Don’t use when

Naming

https://www.uiguideline.com/components/slider

Meest gebruikte naam is Slider, maar wij kiezen voor Range omdat dit overeen komt met de HTML spec.

Contributor License Agreement

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.

Have a CLA document: CLA.md
Ensure there is a CLA with the cpde contributor, before their code is made available in a release branch
Ensure there is a CLA with design contributors, before their contributions are made part of the NL Design System project in Figma

Component: Tooltip

Documentation

Description

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.

Use instead

Toggletip #170

“What is a Design System?” elevator pitch

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.

Component: Table

Description

Data-tables.

Variations

With/without table headers top
With/without table headers side (row headers)
With/without table caption
With/without ‘zebra stripping’, alternate row colors
With/without row lines
Tabular number column
Left/right alignment of text in cells

Related components

Table with sorting
Table with filter
Kitchen sink table

Behaviour

Responsive behaviour
(Text) truncation
Line wrapping

Use when

Don’t use when

Documentation: Content guidelines

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.

Component: 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.

Commonly wraps around:

Copyright notice
Link to copyright information
Link to about pages
(Link to) contact details
Link to policies, disclaimers and legal information
Newsletter subscription
Social media links

Icon: navigate back

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

Component: Main navigation

Description

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.

Do

Categories should be understandable and meaningful
Only prominent sections should be placed in the main navigation
To help orient users, highlight the current section in the main navigation

Den Haag

Open Forms

Name

Net als alle andere navigations voor een specifiek doel, zoals breadcrumb-navigation, side-navigation, main-navigation en language-navigation

Description

Overzicht van stappen in een formulier
Kan je navigeren tussen de stappen, technisch kan het zijn dat je alleen terug kan navigeren.
...

Formerly known as

progress steps

Variations

Horizontal

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!

Vertical

Dit is de standaard step indicator en hoeft dus niet een losse variant te zijn.

Use when

Don’t use when

Web Components can be used in Angular

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:

should web components be wrapped in Angular components?
should TypeScript definitions be included in the web component npm packages by default?
documentation on how to use NL Design System components in Angular projects
how to automate testing the integration of NL Design System with Angular?
how to support lazy loading of components in Angular?

Documentation: Personal account pattern

Account creation
Log in
Log out
Add/edit/delete personal details
Password recovery
Account deletion

Documentation: Dashboard pattern

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.

Component: Date picker

Description

A (custom) datepicker component.

Use when

Don’t use when

Documentation: Form patterns

How to structure forms.

Component: Status badge

Als PO wil ik begrijpen hoe releases/versioning van het NL Design System werkt

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.

Web Components can be used in React

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:

should web components be wrapped in React components?
documentation on how to use NL Design System components in React projects
how to automate testing the integration of NL Design System with React?
how to support lazy loading of components in React?

Web Components can be used in Blazor

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:

should web components be wrapped in Blazor components, or can they be used directly?
how can npm packages be installed in a Blazor projects?
documentation on how to use NL Design System components in Blazor projects
how to automate testing the integration of NL Design System with Blazor?

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.

Web Components available as npm module

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.

documentation is available on how to publish an NL Design System web component on npmjs.com
documentation is available on how to structure an npm package
- example of package.json settings
- example of directory structure
users of the package can get started quickly with the documentation available in the README.md file
developers that want to use the web component can see if the component is stable or unstable.

Group: Card

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.

Component: Select

Description

A dropdown menu, like <select>.

Use when

Don’t use when

Naming

https://www.uiguideline.com/components/select-dropdown
https://design-system.service.gov.uk/components/select/

Documentation: Step by step task pattern

Component: Breadcrumb navigation

Description

A breadcrumb shows the current document’s hierarchy in relation to a larger set navigable documents.

Use when

Don’t use when

Description

Button component with variations, states and behaviour.

Variations

Primary
Secondary
Tertiary
Ghost button
Call-to-action
Disabled
Extra dimension: With/without icon

States

Static/default
Focus
Hover
Active/pressed
Disabled

Use cases

Form submission
Previous/next navigation
Calls to action
Triggering page interaction

Use when

Buttons are used to perform on-page actions.

Don’t use when

Don’t use button to link to other pages.

Icon: warning notification

Used to indicate a warning message and ensure it receives the attention required. Usually similar to the Unicode warning sign emoji ⚠️. The usually associated color is yellow or amber. Also see Wikipedia: Warning sign.

Proposed name: nl-icon-notification-warning

Icon: invalid notification

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.

Component: Side navigation

Description

https://nl-design-system.github.io/utrecht/storybook/?path=/docs/css-sidenav-readme--page
https://www.uiguideline.com/components/sidebar

Description

A two-way switch.

Possible names

https://www.uiguideline.com/components/switch

Design tokens Figma library

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.

Figma library with component setup and Design Token plugin
Connection between tokens in Figma and GitHub for code
Documentation on getting started with the Figma library
Documentation on getting started with Design Tokens
Discuss when a Figma component should be added, in the community or candidate state?
- Add creation of a Figma component to the Definition of Done for components

Proposed name: nl-icon-notification-error.

Component: Page header

A layout component which will wrap around the page-footer-content. Each organisation or project might have a different page-footer-content component.

Commonly wraps around:

Logo
Main navigation
Site search
Site-wide options and preferences
Account details or log in/out option

nl-design-system / backlog Goto Github PK

backlog's People

Contributors

Stargazers

Watchers

Forkers

backlog's Issues

Description

Use when

Don’t use when

Componenten die lijken op alert

Description

Use when

Don’t use when

Description

Anatomy of a tab interface

Tabs variations

Interactive states

Use when

Don’t use when

Description

Use when

Don’t use when

Naming

Description

Use instead

Description

Variations

Related components

Behaviour

Use when

Don’t use when

Commonly wraps around:

Description

Do

Related

Den Haag

Open Forms

Name

Description

Formerly known as

Variations

Horizontal

Vertical

Use when

Don’t use when

Description

Use when

Don’t use when

Description

Use when

Don’t use when

Naming

Description

Use when

Don’t use when

Related

Description

Variations

States

Use cases

Use when

Don’t use when

Description

Related

Description

Possible names

Commonly wraps around:

Recommend Projects

Recommend Topics

Recommend Org